Jak stylizować tło modułu nagłówka o pełnej szerokości?

Opublikowany: 2022-09-28

Moduł nagłówka o pełnej szerokości Divi ułatwia zaprojektowanie oszałamiającej sekcji bohatera dla Twojej witryny w zaledwie kilka minut. Sekcja bohatera to pierwsza sekcja Twojej witryny, którą zobaczą Twoi odwiedzający, więc chcesz, aby była oznaczona marką, zawierała informacje i była atrakcyjna. Na szczęście nagłówek Divi o pełnej szerokości jest wyposażony w opcje treści: tekst nagłówka, tekst napisów, tekst główny, dwa obrazy i dwa przyciski. W dzisiejszych czasach będziemy wykorzystywać wszystkie te elementy w naszych nagłówkach o pełnej szerokości.

W tym poście zademonstrujemy 3 sposoby zaprojektowania tła nagłówka o pełnej szerokości za pomocą przyciągających wzrok projektów. Gotowy żeby zacząć? Zanurzmy się!

Podgląd projektu

Przyjrzyjmy się trzem nagłówkom o pełnej szerokości, które zaprojektujemy dzisiaj.

Społeczność Divi Bushcraft

Pierwszy projekt wykorzystuje opcje obrazu tła Divi, aby stworzyć teksturowane tło, które jest unikalne i charakterystyczne dla społeczności Bushcraft.

Druga klasa pani Nicole

Ten drugi projekt wykorzystuje obraz tła i gradient tła, aby stworzyć czysty, nowoczesny i świeży nagłówek powitalny dla drugiej klasy pani Nicole.

Nagłówek Pośrednika

Trzeci projekt wykorzystuje obraz tła, gradient tła i wzór tła, wszystkie połączone w celu stworzenia podwyższonego, ale subtelnego projektu strony głównej pośrednika.

Pobierz układy ZA DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się do naszego newslettera, 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!

Aby zaimportować szablon nagłówka do biblioteki Divi, wykonaj następujące czynności:

Przejdź do Kreatora motywów Divi.
Kliknij przycisk Importuj w prawym górnym rogu 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 zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

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

Zainstaluj Divi na swojej stronie WordPress.
Dodaj stronę, nadaj jej tytuł i opublikuj.
Włącz Visual Builder.

Konfiguracja naszej strony

Po kliknięciu przycisku „Użyj Divi Builder” strona zostanie ponownie załadowana za pomocą interfejsu kreatora przeciągnij i upuść Divi. Pojawią się trzy opcje i do dzisiejszych celów wybierz „Buduj od podstaw”, abyśmy mieli pustą kartę, na której możemy zbudować nasze nagłówki o pełnej szerokości.

Jak zaprojektować nagłówek społeczności Divi Bushcraft o pełnej szerokości?

Dodaj sekcję Fulldwith i nagłówek o pełnej szerokości

Najpierw musimy dodać do naszej strony sekcję o pełnej szerokości. Kliknij ikonę „+”, aby wyświetlić opcje sekcji, a następnie kliknij „Pełna szerokość”. Spowoduje to załadowanie biblioteki modułów o pełnej szerokości, w której możesz wybrać "Nagłówek o pełnej szerokości" z opcji. Spowoduje to załadowanie modułu nagłówka o pełnej szerokości na twoją stronę.

Dodaj zawartość

Teraz dodamy zawartość naszego modułu w zakładce Tekst. Skonfiguruj następujące ustawienia:

Tekst nagłówka: Społeczność Divi Bushcraft
Tekst napisów: Divi Bushcraft
Przycisk #1: Dołącz już dziś
Przycisk #2: Dowiedz się więcej
Treść: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque korumpowane quos dolores et quas molestiasexcepturi sint occaecati cupiditate non Provident.

Stylizuj tło

Ten projekt wykorzystuje obraz tła z bezpłatnego gotowego pakietu układów Divi Bushcraft. W tym poście możesz uzyskać wszystkie obrazy z tego pakietu układów. Po prostu przewiń do samego dołu posta i kliknij, aby pobrać obrazy w wysokiej rozdzielczości.

Dodaj obraz tła

Gdy masz już zdjęcia, dodaj obraz tła.

Kliknij trzecią ikonę, ikonę obrazu.
Kliknij „Dodaj obraz tła”. Spowoduje to wyświetlenie biblioteki multimediów, w której możesz przesłać nowe zdjęcie lub wybrać zdjęcie z biblioteki multimediów.
Ustaw tryb mieszania obrazu tła na Overlay .
Kliknij pierwszą ikonę, ikonę wiadra z farbą i ustaw kolor tła: rgba(10,10,10,0.3)

Wybierz układ

W obszarze Ustawienia projektu na karcie Układ wybierz wyrównanie do środka. Przełącz opcję „Utwórz pełny ekran” na „tak”.

Tekst tytułu stylu

Dostosuj tekst tytułu, konfigurując następujące ustawienia:

Poziom nagłówka tytułu: H1
Czcionka tytułu: Josefin Sans
Grubość czcionki tytułu: pogrubiona
Styl czcionki tytułu: wielkie litery
Rozmiar tekstu tytułu: 7rem

Tekst główny stylu

Dostosuj tekst treści, konfigurując te ustawienia:

Czcionka ciała: Josefin Sans
Rozmiar tekstu ciała: 20px

Styl napisów tekstowych

Dostosuj tekst napisów, konfigurując te ustawienia:

Czcionka napisów: Josefin Sans
Grubość czcionki napisów: pół pogrubiona
Styl czcionki napisów: wielkie litery
Odstępy między literami napisów: 3px
Wysokość linii napisów: 5em

Przycisk stylu #1

Teraz zaprojektujmy przyciski! Dla pierwszego przycisku skonfiguruj te ustawienia:

Użyj niestandardowych stylów dla przycisku pierwszego: Tak
Rozmiar tekstu przycisku jeden: 14px
Przycisk jeden kolor tekstu: #666b4a
Tło przycisku pierwszego: #ead5a4
Szerokość jednego przycisku: 0px
Promień jednego przycisku: 0px
Odstęp między przyciskami jednej litery: 3px
Styl czcionki przycisku jednego: wielkie litery
Button One Padding: 15px góra i dół; 25px w lewo i w prawo.

Przycisk stylu #2

Aby nadać styl przyciskowi nr 2, skonfiguruj następujące ustawienia:

Użyj niestandardowych stylów dla przycisku pierwszego: Tak
Rozmiar tekstu przycisku pierwszego: 14px
Przycisk jeden kolor tekstu: #ead5a4
Przycisk jeden tło: #666b4a
Szerokość jednego przycisku: 0px
Promień jednego przycisku: 0px
Odstęp między przyciskami jednej litery: 3px
Styl czcionki przycisku jednego: wielkie litery
Button One Padding: 15px góra i dół; 25px w lewo i w prawo.

I voila! Masz pięknie stylizowany nagłówek o pełnej szerokości z teksturowanym obrazem tła z nakładką dla społeczności Divi Bushcraft.

Jak zaprojektować nagłówek o pełnej szerokości pani Nicole?

Teraz zaprojektujmy nagłówek o pełnej szerokości dla drugiej klasy pani Nicole! Ten nagłówek wykorzystuje obraz tła i gradient, aby stworzyć zabawny i świeży projekt. Zacznijmy!