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ę.
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)
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.
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
- Rozmiar tekstu przycisku:
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.
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.
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.
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.
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.
...