Czy chcesz stworzyć niepowtarzalne i zachwycające tło z maskami i wzorami tła od? Divi ?
Nowa funkcja masek tła i wzorów Divi jest najczęściej używany dla sekcji strony. Ale możemy też dodać je do nagłówków!
W tym samouczku pokażemy, jak dodać maski i wzory tła do szablonu nagłówka Divi za pomocą konstruktora motywy.
To świetny sposób na tworzenie całkowicie unikalnych projektów nagłówków dla Twojego Witryna internetowa.
Zacznijmy.
badanie
Oto krótkie spojrzenie na projekt, który będziemy tworzyć w tym samouczku.
Przejdź do kreatora motywów Divi i zacznij tworzyć globalny nagłówek
Z pulpitu WordPress przejdź do Divi > Kreator motywów
Kliknij „Dodaj globalny nagłówek”
wybierać „Zbuduj globalny nagłówek”.
Następnie możesz rozpocząć projektowanie nowego nagłówka za pomocą Divi Builder.
Jak dodać maski i wzory tła do nagłówka Divi
Tworzenie tła sekcji z kolorem i wzorem tła
Czytaj także: Divi: Jak stworzyć sekcję Referencje w formie siatki
Aby rozpocząć, otwórz ustawienia istniejącej sekcji.
Pod zakładką Treść, zaktualizuj opcje tła o następujące ustawienia:
Kolor tła:
- Tło: #262d3f
Wzór tła:
- Model: pigułki
- Kolor wzoru: rgba (255,255,255,0.1)
- Rozmiar wzoru: rozmiar niestandardowy.
- Szerokość wzoru: 1px
Wyściółka
Pod zakładką Wnętrze, zaktualizuj dopełnienie sekcji w następujący sposób:
- Dopełnienie (góra i dół): 0px
Zmniejszy to nieco pionową przestrzeń nagłówka.
Dodaj wiersz z następującym układem kolumn
Dodano zastępczą zawartość nagłówka (menu i przycisk)
W lewej kolumnie wiersza dodaj nowe menu.
Wybierz menu.
Następnie dodaj logo i użyj ustawień, aby dostosować menu i logo zgodnie z potrzebami.
W prawej kolumnie dodaj moduł przycisków, a także dostosuj go do swoich upodobań.
Tworzenie tła linii z gradientem, maską i wzorem
Gradient
Otwórz ustawienia wiersza zawierające menu i przycisk. Następnie zaktualizuj opcje tła za pomocą następujących ustawień tła:
Gradient tła:
- Przystanki gradientu 1 (50%): Wyczyść
- Gradient zatrzymuje się 2 (75%): #ff4c00
- Sterowanie: 90 stopni
Wzór
- Model: pigułki
- Kolor wzoru: rgba (38,45,63,0.48)
- Rozmiar wzoru: 1 piksel
- Przesunięcie w pionie: 20px
Uwaga: Pionowe przesunięcie wzoru jest ustawione na 20 pikseli, ponieważ górne dopełnienie jest 20 pikseli w sekcji nad linią. Zapewnia to wyrównanie wzoru przekroju z wzorem wiersza.
Maska tła
- Maska: Jodełka
- Kolor maski: #262d3f
UWAGA: W przypadku nagłówków najlepiej ustawić rozmiar maski na „Rozszerz do wypełnienia”, aby obejmowała przestrzeń poziomą bez uszczerbku dla projektu maski.
Ostatnie poprawki do linii
Zobacz też: Divi: Jak korzystać z „Konstruktora gradientów”, aby upiększyć swoje obrazy
Aby ukończyć projekt, dodamy promień obramowania i kilka dodatkowych zmian w linii.
Promień, obramowanie i odstępy obramowania
Pod zakładką Wnętrze, zaktualizuj dopełnienie w następujący sposób:
- Dopełnienie (góra i dół): 5px
Następnie nadaj rzędowi ładny zaokrąglony róg, aby uzyskać dodatkowy element projektu.
- Zaokrąglone rogi: 50px
- Szerokość lewej krawędzi: 50px
- Kolor lewej krawędzi: #262d3f
Musimy obramować lewą stronę wiersza, ponieważ kwadratowa krawędź maski przepełni wiersz pomimo zaokrąglonych rogów.
Ostateczny wynik
Zobaczmy wynik końcowy.
Gradient jest nieco subtelny, więc oto jak wygląda.
A oto projekt nagłówka dla komputerów stacjonarnych i mobilnych.
Pobierz DIVI teraz !!!
Wnioski
Projekt tła nagłówka to tylko wierzchołek góry lodowej. Istnieje wiele możliwości odkrywania opcji tła dostępnych w Divi.
Mamy nadzieję, że ten samouczek pomógł ci zrozumieć, w jaki sposób maski i wzory tła Divi mogą ze sobą współpracować, aby stworzyć unikalny projekt tła dla nagłówków.
Zachęcamy do eksperymentowania z większą liczbą kombinacji projektów tła, aby dopasować je do własnego projektu. Witryna internetowa lub nadchodzący projekt.
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.
...
