5 masek tła i nakładek z wzorami, które możesz zastosować do obrazu tła

Opublikowany: 2022-08-08

Dzięki najnowszej wersji maski tła i funkcji wzoru tła Divi możesz tworzyć unikalne sekcje bohaterów dla swojej witryny. Sekcja bohatera to pierwsza sekcja Twojej witryny i jest pierwszą rzeczą, którą widzą Twoi użytkownicy przed przewinięciem Twojej witryny, dlatego ważne jest, aby przyciągać wzrok! Połączenie obrazu tła, maski tła i opcji wzoru tła Divi pozwala nam tworzyć atrakcyjne sekcje bohaterów, dzięki czemu Twoja witryna robi świetne pierwsze wrażenie.

W tym poście dowiesz się, jak stworzyć pięć unikalnych nakładek masek i wzorów, 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 stworzenia każdej sekcji bohatera i zapewni Ci narzędzia potrzebne do stworzenia efektownej sekcji bohatera dla Twojej witryny w ciągu kilku minut.

W tym przykładzie użyjemy bezpłatnych zdjęć z Pakietu Układu Kursu Online. Aby użyć tych samych obrazów, przewiń do samego dołu tego posta, aby pobrać obrazy w pełnej rozdzielczości.

Zacznijmy!

Co tworzymy

Oto krótkie spojrzenie na pięć sekcji bohaterów, które stworzymy dzisiaj w tym poście.

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

Pobierz układ za DARMO

Jeśli chcesz pobrać wstępnie zaprojektowany projekt układu z tego samouczka, najpierw musisz go pobrać za pomocą poniższego przycisku. Aby uzyskać dostęp do pobierania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Jak pobrać i korzystać z układów

Aby zaimportować układ sekcji do biblioteki Divi, wykonaj następujące czynności:

Przejdź do Biblioteki Divi.
Kliknij przycisk Importuj u góry strony.
W wyskakującym okienku przenoszenia wybierz kartę importu.
Wybierz plik do pobrania z komputera (najpierw rozpakuj plik i użyj pliku JSON).
Następnie kliknij przycisk importu.

Po pomyślnym zaimportowaniu układów będą one widoczne w Twojej bibliotece Divi i będą dostępne do użycia w Divi Builder.

Przejdźmy teraz do samouczka!

Czego potrzebujesz, aby zacząć

Zanim zaczniemy, musisz:

Zainstaluj i aktywuj motyw Divi.
Utwórz nową stronę, opublikuj ją i kliknij przycisk "Użyj Divi Builder", aby edytować stronę w interfejsie za pomocą Visual Builder.
Wybierz opcję „Buduj od podstaw”.

Teraz mamy puste płótno do rozpoczęcia projektowania!

Jak stworzyć 5 masek tła i nakładek z wzorami do zastosowania na obrazie tła?

Najpierw stwórzmy sekcję bohaterów

Wszystkie nasze przykłady projektów 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ę, jedną kolumnę o pełnej szerokości.

2. Dodaj odstępy między sekcjami

Teraz, gdy mamy już ustawione nasze wiersze i kolumny, nadszedł czas, aby dodać odstępy do sekcji.

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

Pulpit: 400px na górze i 400px na dole
Tablet: 200px góra i 200px dół; 25px lewy i prawy
Telefon: 50px góra i 50px dół; 25px lewy i prawy

Jak zaprojektować sekcję bohatera #1

Zaprojektujmy pierwszą sekcję bohatera.

1. Dodaj tekst nagłówka

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

Wpisz tekst nagłówka, a następnie w zakładce Tekst nagłówka skonfiguruj te ustawienia:

Rodzina czcionek: Work Sans
Kolor czcionki: biały #ffffff
Rozmiar czcionki:
- Pulpit: 3rem
- Tablet: 2.2rem
- Telefon: 1.4rem

2. Dodaj moduł przycisku

Dodaj przycisk i skonfiguruj te ustawienia:

W zakładce Tekst wpisz: Dowiedz się więcej
W zakładce Wyrównanie wybierz: Środek
Kliknij Użyj niestandardowych stylów, a następnie skonfiguruj:
- Rozmiar tekstu przycisku:
  - Pulpit: 20px
  - Tablet: 16px
  - Telefon: 14px
- Kolor tekstu przycisku: biały #ffffff
- Kolor tła przycisku: czarny #1d1d1d
- Szerokość obramowania przycisku: 0
- Promień obramowania przycisku: 0
- Odstępy między przyciskami: 3pt
- Czcionka przycisku: Work Sans
- Styl czcionki przycisku: wielkie litery

3. Dodaj obraz tła

Teraz, gdy mamy już skonfigurowaną zawartość, nadszedł czas, aby rozpocząć projektowanie tła sekcji.

Przejdź do przełącznika Tło 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.

Na karcie Tło przejdź do piątej karty, karty wzorów, a następnie kliknij "Dodaj wzór tła".
Wybierz Tuftowane z menu rozwijanego i skonfiguruj te ustawienia:
- Kolor wzoru – rgba(255,255,255,0.31)
- Transformacja wzoru: brak
- Rozmiar wzoru: rzeczywisty rozmiar
- Pochodzenie powtarzania wzoru: górny lewy
- Powtórz wzór: powtórz
- Tryb mieszania: normalny

5. Dodaj maskę tła

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

Na karcie Tło przejdź do szóstej karty, karty maski i kliknij "Dodaj maskę tła".
Wybierz Bean z menu rozwijanego i skonfiguruj te ustawienia:
- Kolor maski: rgba(0,0,0,0.36)
- Współczynnik proporcji maski: poziomy prostokąt
- Rozmiar maski: Rozciągnij, aby wypełnić

Voila! Teraz masz pięknie zaprojektowaną sekcję bohatera.

Jak zaprojektować sekcję bohatera #2

Teraz zaprojektujmy drugą sekcję bohatera.

1. Dodaj obraz tła i ustaw tryb mieszania na nakładkę

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.

Na karcie Tło przejdź do piątej karty, karty wzorów i kliknij "Dodaj wzór tła".
Wybierz Tuftowane z listy rozwijanej i skonfiguruj te ustawienia:
- Kolor wzoru – rgba(255,255,255,0,09)
- Transformacja wzoru: brak
- Rozmiar wzoru: 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 tła i wzór, dodajmy maskę tła.

Na karcie Tło przejdź do szóstej karty, karty maski i kliknij "Dodaj maskę tła".
Wybierz Caret z menu rozwijanego i skonfiguruj te ustawienia:
- Kolor maski: rgba(0,0,0,0.36)
- Transformacja maski: Brak
- Współczynnik proporcji maski: poziomy prostokąt
- Rozmiar maski: Rozciągnij, aby wypełnić
- Tryb mieszania masek: normalny

Jak zaprojektować sekcję bohatera #3

Teraz zaprojektujmy trzecią sekcję bohatera.

1. Dodaj obraz tła i ustaw tryb mieszania na nakładkę

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

2. Dodaj wzór tła

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

Na karcie Tło przejdź do piątej karty, karty wzorów i kliknij "Dodaj wzór tła".
Wybierz Diagonal Stripes 2 z menu i skonfiguruj te ustawienia:
- Kolor wzoru – rgba (0,0,0,0,06)
- Transformacja wzoru: brak
- Rozmiar wzoru: rzeczywisty rozmiar
- Pochodzenie powtarzania wzoru: górny lewy
- Powtórz wzór: powtórz
- Tryb mieszania: normalny

3. Dodaj maskę tła

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

Na karcie Tło przejdź do szóstej karty, karty maski i kliknij "Dodaj maskę tła".
Wybierz Trójkąty z menu rozwijanego i skonfiguruj te ustawienia:
- Kolor maski: rgba (10,10,10,0.61)
- Transformacja wzoru: brak
- Współczynnik proporcji maski: poziomy prostokąt
- Rozmiar maski: Rozciągnij, aby wypełnić
- Tryb mieszania masek: normalny

Jak zaprojektować sekcję bohatera #4

Teraz zaprojektujmy czwartą sekcję bohaterów.

1. Dodaj obraz tła

Wybierz obraz tła.

2. Dodaj wzór tła

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

Na karcie Tło przejdź do piątej karty, karty wzorów i kliknij "Dodaj wzór tła".
Wybierz Uśmiechy z menu rozwijanego i skonfiguruj te ustawienia:
- Kolor wzoru – rgba(0,0,0,0.2)
- Transformacja wzoru: brak
- Rozmiar wzoru: 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ż zastosowany obraz tła i wzór, dodajmy maskę tła.

Na karcie Tło przejdź do szóstej karty, karty maski i kliknij "Dodaj maskę tła".
Wybierz Corner Lake z menu rozwijanego i skonfiguruj te ustawienia:
- Kolor maski: rgba (10,10,10,0.61)
- Transformacja maski: pozioma
- Proporcje maski: poziomy prostokąt
- Rozmiar maski: okładka
- Pozycja maski: Środek po lewej
- Tryb mieszania masek: normalny

3. Skonfiguruj ustawienia wiersza

Zanim przejdziemy, ta sekcja bohaterów ma unikalne style rzędów. Ustawmy to.

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

Jak zaprojektować sekcję bohatera nr 5

Teraz zaprojektujmy piątą sekcję bohatera.

1. Dodaj obraz tła

Wybierz obraz tła.

2. Dodaj wzór tła

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

Na karcie Tło przejdź do piątej karty, karty wzorów i kliknij "Dodaj wzór tła".
Wybierz Krzyże z rozwijanego menu i skonfiguruj te ustawienia:
- Kolor wzoru – #ffffff
- Transformacja wzoru: brak
- Rozmiar wzoru: Rozmiar niestandardowy
- Szerokość wzoru: 10px
- Wysokość wzoru: 10px
- Pochodzenie powtarzania wzoru: górny lewy
- Powtórz wzór: powtórz
- Tryb mieszania: normalny

3. Dodaj maskę tła

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

Na karcie Tło przejdź do szóstej karty, karty maski i kliknij "Dodaj maskę tła".
Wybierz Diagonal Pills z menu rozwijanego i skonfiguruj te ustawienia:
- Kolor maski: rgba (10,10,10,0.61)
- Transformacja maski: pozioma
- Proporcje maski: poziomy prostokąt
- Rozmiar maski: okładka
- Pozycja maski: Środek po lewej
- Tryb mieszania masek: normalny

3. Skonfiguruj ustawienia wiersza

Zanim przejdziemy, ta sekcja bohaterów ma unikalne style rzędów. Ustawmy to.

Rozmiary:
- Szerokość: 80%
- Maksymalna szerokość: 800px
Wyrównanie wierszy:
- Pulpit: domyślny
- Tablet: Centrum
- Telefon: Centrum
Rozstaw:
- Po prawej: 18vw

Uzyskaj więcej wzorów masek tła i wzorów!

Jeśli chcesz więcej projektów takich jak ten, zapoznaj się z tymi 12 projektami masek tła i wzorów do pobrania za darmo.

Końcowe przemyślenia

Zaprojektowanie unikalnej i przyciągającej wzrok sekcji bohatera dla Twojej witryny jest łatwe dzięki nowym opcjom maski tła i wzoru Divi. Każda funkcja ma wiele opcji, które pozwalają tworzyć naprawdę kreatywne projekty tła. Dodatkowo możesz dodać wzory tła i maski do dowolnego elementu Divi Builder! Możliwości projektowania są nieograniczone.