Czy chcesz użyć maski Divi i nakładki wzoru tła?

Z ostatnim wersja maski tła i funkcji wzoru tła Divi, możesz tworzyć unikalne sekcje Bohaterów dla swojego Witryna internetowa. Sekcja bohatera to pierwsza sekcja twojego Witryna internetowa i to jest pierwsza rzecz, którą robisz odwiedzający zobacz przed przewinięciem Witryna internetowa, dlatego ważne jest, aby przyciągać wzrok!

W tym artykule dowiesz się, jak stworzyć pięć unikalnych masek tła i nakładek z wzorami, które można zastosować do obrazu tła, aby stworzyć naprawdę oszałamiające sekcje bohaterów. 

W tym samouczku omówimy podstawowe kroki potrzebne do utworzenia każdej sekcji Bohatera i zapewnimy narzędzia potrzebne do stworzenia w ciągu kilku minut efektownej sekcji Bohatera na swojej stronie internetowej.

Zacznijmy!

badanie

Oto krótki przegląd pięciu sekcji bohaterów, które będziemy dziś tworzyć w tym artykule.

Pobierz DIVI teraz !!!

Projekty są subtelne, proste, a jednocześnie efektowne.

Czytaj także: Divi: Jak korzystać z „Konstruktora gradientów”, aby upiększyć swoje obrazy

Utwórz nową stronę za pomocą Divi Builder

Aby rozpocząć, musisz wykonać następujące czynności:

Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.

Linie Divi zamienione na tabulatory

Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder

Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)

Linie Divi zamienione na tabulatory

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Pięć przykładów maski tła i nakładek z wzorami do zastosowania na obrazie tła

Najpierw stwórzmy sekcję Hero

Wszystkie nasze przykładowe projekty wykorzystują tę samą strukturę sekcji, wierszy i kolumn, więc skonfigurujmy je teraz.

1. Utwórz strukturę układu

Dodaj wiersz do swojej strony, a następnie kliknij zieloną ikonę „+”, aby wyświetlić strukturę kolumn i wybierz pierwszą kolumnę, kolumnę o pełnej szerokości.

2. Dodaj odstępy między sekcjami

Teraz, gdy zdefiniowaliśmy już nasz wiersz i kolumnę, nadszedł czas, aby dodać trochę odstępów do sekcji.

Na karcie Odstępy zaktualizuj następujące elementy:

  • Pulpit: 400 pikseli (góra i dół)
  • Tablet: 200 pikseli (góra i dół); 25px (lewy i prawy)
  • Telefon: 50 pikseli (góra i dół); 25px (lewy i prawy)

Projekt sekcji bohaterów nr 1

Zaprojektujmy pierwszą sekcję Hero.

nakładka masek i wzorów tła Divi

Pobierz DIVI teraz !!!

1. Dodaj tekst nagłówka

Kliknij szarą ikonę „+”, aby wyświetlić bibliotekę modułów. Przewiń do tekstu i kliknij, aby załadować.

Wpisz tekst tytułu, a następnie pod zakładką Nagłówek tekstu, skonfiguruj te ustawienia:

  • Czcionka nagłówka: Work Sans
  • Kolor tekstu: biały #ffffff
  • Rozmiar tekstu nagłówka:
    • Pulpit: 3 em
    • Tablet: 2,2 em
    • Telefon: 1.4em

2. Dodaj moduł przycisku

Dodaj przycisk i skonfiguruj te ustawienia:

  • Pod zakładką Treśćs: Dowiedz się więcej
  • Pod zakładką Wyrównanie, wybierz: Centrum
  • Kliknij Użyj niestandardowych stylów dla przycisku następnie skonfiguruj:
    • Rozmiar tekstu przycisku:
      • Pulpit: 20px
      • Tablet: 16px
      • Telefon: 14px
    • Kolor tekstu przycisku: #ffffff
    • Tło: #1d1d1d
    • Szerokość obramowania przycisku: 0
    • Promień graniczny: 0
    • Odstępy między literami: 3 punkty
    • Czcionka przycisku: Work Sans
    • Styl czcionki: TT

3. Dodaj obraz tła

Teraz, gdy nasz treść jest skonfigurowany, czas zacząć projektować tło sekcji.

  • Przejdź do przełącznika tła i kliknij trzecią kartę, kartę obrazu, a następnie kliknij „Dodaj obraz tła”.
  • Spowoduje to wyświetlenie biblioteki multimediów, w której możesz wybrać zdjęcie lub przesłać nowe.
  • Po wybraniu zdjęcia kliknij przycisk „Prześlij obraz” w prawym dolnym rogu.

4. Dodaj wzór tła

Teraz, gdy mamy już skonfigurowany obraz tła, dodajmy wzór.

  • W zakładce Tło, przejdź do 5. zakładki, zakładki Wzór tła, a następnie kliknij „Dodaj wzór tła”.
  • wybierać Czubaty z rozwijanego menu i skonfiguruj te ustawienia:
    • Kolor wzoru – rgba(255,255,255,0.31)
    • Transformacja wzoru: brak
    • Rozmiar: rzeczywisty rozmiar
    • Pochodzenie powtarzania wzoru: od góry do dołu
    • Powtórz wzór: powtórz
    • Tryb mieszania: normalny

5. Dodaj maskę tła

Teraz, gdy mamy już skonfigurowany obraz i wzór tła, dodajmy maskę tła.

  • W zakładce Tło, przejdź do szóstej zakładki, zakładki Maska tła, a następnie kliknij „Dodaj maskę tła”.
  • wybierać Fasola z rozwijanego menu i skonfiguruj te ustawienia:
    • Kolor maski: rgba (0,0,0,0.36)
    • Współczynnik proporcji maski: poziomy prostokąt
    • Rozmiar: Rozciągnij, aby wypełnić

Więc ! Masz teraz pięknie zaprojektowaną sekcję Hero.

Sekcja Hero #2 projekt

Teraz zaprojektujmy drugą sekcję bohatera.

nakładka masek i wzorów tła Divi

1. Dodaj obraz tła i ustaw tryb mieszania na Nakładka

Wybierz obraz tła, ustaw tryb mieszania na Nakładka i dodaj kolor nakładki rgba (10,10,10,0.64).

2. Dodaj wzór tła

Teraz, gdy mamy już skonfigurowany obraz tła, dodajmy wzór tła.

  • W zakładce Tło przejdź do 5. zakładki, zakładki Wzór tła, a następnie kliknij „Dodaj wzór tła”.
  • wybierać Czubaty z rozwijanego menu i skonfiguruj te ustawienia:
    • Kolor wzoru – rgba(255,255,255,0.09)
    • Transformacja wzoru: brak
    • Rozmiar: okładka
    • Pochodzenie powtarzania wzoru: górny lewy
    • Powtórz wzór: powtórz
    • Tryb mieszania: normalny

3. Dodaj maskę tła

Teraz, gdy mamy już skonfigurowany obraz i wzór tła, dodajmy maskę tła.

  • W zakładce Tło, przejdź do szóstej zakładki, zakładki Maska tła, a następnie kliknij „Dodaj maskę tła”.
  • wybierać Wstawka korektorska z rozwijanego menu i skonfiguruj te ustawienia:
    • Kolor maski: rgba (0,0,0,0.36)
    • Transformacja maski: Brak
    • Współczynnik proporcji: poziomy prostokąt
    • Rozmiar maski: Rozciągnij, aby wypełnić
    • Tryb mieszania masek: normalny

Sekcja Hero #3 projekt

Teraz zaprojektujmy trzecią sekcję Hero.

nakładka masek i wzorów tła Divi

1. Dodaj obraz tła i ustaw tryb mieszania na Nakładka

Wybierz obraz tła, ustaw tryb mieszania na Nakładka i dodaj kolor nakładki rgba (10,10,10,0.39).

2. Dodaj wzór tła

Teraz, gdy mamy już skonfigurowany obraz tła, dodajmy wzór tła.

  • W zakładce Tło, przejdź do szóstej zakładki, zakładki Wzór tła, a następnie kliknij „Dodaj wzór tła”.
  • wybierać Ukośne paski 2 z rozwijanego menu i skonfiguruj te ustawienia:
    • Kolor wzoru – rgba(0,0,0,0.06)
    • Transformacja wzoru: brak
    • Rozmiar: rzeczywisty rozmiar
    • Pochodzenie powtarzania wzoru: górny lewy
    • Powtórz wzór: powtórz
    • Tryb mieszania: normalny

3. Dodaj maskę tła

Teraz, gdy dodaliśmy obraz tła i wzór, dodajmy maskę tła.

  • W zakładce Tło, przejdź do szóstej zakładki, zakładki Maska tła, a następnie kliknij „Dodaj maskę tła”.
  • wybierać Trójkąty z rozwijanego menu i skonfiguruj te ustawienia:
    • Kolor maski: rgba (10, 10, 10, 0,61)
    • Transformacja maski: brak
    • Współczynnik proporcji: poziomy prostokąt
    • Rozmiar maski: Rozciągnij, aby wypełnić
    • Tryb mieszania masek: normalny

Sekcja Hero #4 projekt

Teraz zaprojektujmy czwartą część Hero.

nakładka masek i wzorów tła Divi

1. Dodaj obraz tła

Wybierz obraz tła.

2. Dodaj wzór tła

Teraz, gdy dodaliśmy nasz obraz tła, dodajmy wzór tła.

  • W zakładce Tło, przejdź do szóstej zakładki, zakładki Wzór tła, a następnie kliknij „Dodaj wzór tła”.
  • wybierać Smiles z rozwijanego menu i skonfiguruj te ustawienia:
    • Kolor wzoru – rgba(0,0,0,0.2)
    • Transformacja wzoru: brak
    • Rozmiar: okładka
    • Powtórz początek: u góry po lewej
    • Powtórz wzór: powtórz
    • Tryb mieszania wzorów: normalny

3. Dodaj maskę tła

Teraz, gdy mamy już zastosowany obraz tła i wzór, dodajmy maskę tła.

  • W zakładce Tło, przejdź do szóstej zakładki, zakładki Maska tła, a następnie kliknij „Dodaj maskę tła”.
  • wybierać Jezioro narożne  z rozwijanego menu i skonfiguruj te ustawienia:
    • Kolor maski: rgba (10, 10, 10, 0,61)
    • Transformacja maski: pozioma
    • Proporcje obrazu: poziomy prostokąt
    • Rozmiar: okładka
    • Pozycja maski: Środek po lewej
    • Tryb blendera masek: normalny

3. Skonfiguruj parametry linii

Zanim przejdziemy, ta sekcja Hero ma unikalne style linii. Ustawmy to.

  • Rozmiary:
    • Szerokość: 80%
    • Maksymalna szerokość: 800px
  • Wyrównanie wierszy:
    • Pulpit: domyślny
    • Tablet: Centrum
    • Telefon: Centrum
  • Marże:
    • Po lewej: 20vw

Sekcja Bohater #5 Projekt

Teraz zaprojektujmy piątą sekcję Hero.

nakładka masek i wzorów tła Divi

Pobierz DIVI teraz !!!

1. Dodaj obraz tła

Wybierz obraz tła.

2. Dodaj wzór

Teraz, gdy mamy już skonfigurowany obraz tła, zastosujmy wzór tła.

  • W zakładce Tło, przejdź do szóstej zakładki, zakładki Wzór tła, a następnie kliknij „Dodaj wzór tła”.
  • wybierać Przecina z rozwijanego menu i skonfiguruj te ustawienia:
    • Kolor wzoru – #ffffff
    • Transformacja wzoru: brak
    • Rozmiar: niestandardowy rozmiar
    • Szerokość wzoru: 10px
    • Wysokość wzoru: 10px
    • Powtórz początek: od góry do dołu
    • Powtórz wzór: powtórz
    • Tryb mieszania wzorów: normalny

3. Dodaj maskę tła

Teraz, gdy mamy już zastosowany obraz tła i wzór, dodajmy maskę tła.

  • W zakładce Tło, przejdź do szóstej zakładki, zakładki Maska tła, a następnie kliknij „Dodaj maskę tła”.
  • wybierać Pigułki ukośne  z rozwijanego menu i skonfiguruj te ustawienia:
    • Kolor maski: rgba (10, 10, 10, 0,61)
    • Transformacja maski: pozioma
    • Proporcje obrazu: poziomy prostokąt
    • Rozmiar: okładka
    • Pozycja maski: środek po lewej
    • Tryb mieszania masek: normalny

3. Skonfiguruj parametry linii

Zanim przejdziemy, ta sekcja Hero ma również unikalne style linii. Ustawmy to.

  • Rozmiary:
    • Szerokość: 80%
    • Maksymalna szerokość: 800px
  • Wyrównanie wierszy:
    • Pulpit: domyślny
    • Tablet: Centrum
    • Telefon: Centrum
  • Rozstaw:
    • Margines (Prawy): 18vw

Zobacz też: Divi: Jak dodać maski i wzory tła do nagłówka

Wnioski

Dzięki nowym opcjom zaprojektowanie unikalnej i przyciągającej wzrok sekcji Bohaterów dla Twojej witryny jest łatwe maska ​​tła i wzoru przez Divi. Każda funkcja ma wiele opcji, które pozwalają tworzyć naprawdę kreatywne tła. 

Dodatkowo możesz dodać wzory tła i maski do dowolnego elementu Divi Builder! Możliwości projektowania są nieograniczone.

Mam nadzieję, że ta technika doda kolejną przydatną umiejętność projektowania do przyszłych projektów.

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.

Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...