Jak zbudować sekcję bohatera za pomocą modułu nagłówka o pełnej szerokości Divi?

Tworzenie sekcji bohaterów to doskonały sposób na zwrócenie uwagi na ważne treści na Twojej stronie. To bardzo duży fragment treści, którego możesz użyć do opowiedzenia swojej historii, udostępnienia informacji o swojej pracy lub wyróżnienia produktu lub usługi. Dzięki modułowi Divi Fullwidth Header możesz dodać tytuł, podtytuł, dwa przyciski, tekst główny, obraz logo i obraz nagłówka. Oczywiście możesz również wykorzystać opcje tła, aby dodawać i łączyć obrazy, gradienty, kolory, wzory i maski. Możesz edytować wszystkie te ustawienia w ramach ustawień jednego modułu nagłówka o pełnej szerokości, zamiast przełączać się między wieloma modułami obrazu, tekstu i przycisków.

W tym samouczku pokażemy, jak zbudować wciągającą i przyciągającą wzrok sekcję bohatera za pomocą modułu nagłówka Divi o pełnej szerokości.

Zacznijmy!

zapowiedź

Oto podgląd tego, co zaprojektujemy.

Czego potrzebujesz, aby zacząć

Zanim zaczniemy, upewnij się, że masz najnowszą wersję Divi na swojej stronie internetowej.

Teraz możesz zacząć!

Jak zbudować sekcję bohatera za pomocą modułu nagłówka o pełnej szerokości Divi?

Utwórz nową stronę z gotowym układem

Zacznijmy od użycia gotowego układu z biblioteki Divi. W tym projekcie użyjemy strony docelowej dla weterynarza z pakietu układu weterynarza.

Dodaj nową stronę do swojej witryny i nadaj jej tytuł, a następnie wybierz opcję Użyj Divi Builder.

W tym przykładzie użyjemy gotowego układu z biblioteki Divi, więc wybierz Przeglądaj układy.

Wyszukaj i wybierz układ strony docelowej lekarza weterynarii.

Wybierz opcję Użyj tego układu, aby dodać układ do strony.

Teraz jesteśmy gotowi do zbudowania naszego projektu.

Dodaj moduł nagłówka o pełnej szerokości

Zamierzamy odtworzyć sekcję bohatera za pomocą modułu nagłówka o pełnej szerokości. Dodaj do strony nową sekcję o pełnej szerokości poniżej istniejącego nagłówka.

Dodaj do sekcji moduł nagłówka o pełnej szerokości.

Następnie usuń oryginalną sekcję nagłówka.

Dostosuj moduł nagłówka o pełnej szerokości

Dodaj zawartość

Otwórz ustawienia modułu nagłówka o pełnej szerokości i dodaj następującą zawartość do modułu:

• Tytuł: weterynarz
• Podtytuł: DiviVet. Służymy naszym najlepszym przyjaciołom
• Przycisk #1: Wyświetl wszystkie usługi
• Przycisk #2: Umów się na wizytę
• Korpus: Praesent sapien massa, convallis a pellentesque, gdzie indziej niesklasyfikowane, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.

Następnie dodaj obraz nagłówka weterynarzy ze zwierzętami.

Ustawienia tła gradientu

Przejdź do ustawień tła. Usuń oryginalny kolor tła, a następnie dodaj gradient tła.

• 0%: rgba (255,170,205,0.48)
• 40%: rgba (110,66,255,0.24)
• 87%: rgba (124 239 255 0,71)
• Typ gradientu: Eliptyczny
• Pozycja gradientu: w prawo

Następnie wybierz zakładkę Maska tła i dodaj maskę tła do tła.

• Maska tła: narożna plamka
• Kolor maski: #FFFFFF
• Transformacja maski: pionowa

Dostosuj style tekstu

Po umieszczeniu treści i tła nagłówka przejdźmy do karty projektu, aby dostosować style tekstu. Najpierw otwórz ustawienia tytułu i dostosuj tekst w następujący sposób:

• Czcionka tytułu: Nunito
• Grubość czcionki tytułu: Ultra Bold
• Styl czcionki tytułu: TT (wielkie)

Zmodyfikuj kolor, rozmiar i odstępy tekstu tytułu.

• Kolor tekstu tytułu: #a9cb6b
• Rozmiar tekstu tytułu: 14px
• Odstępy między literami tytułu: 2px

Przejdź do sekcji tekstu podstawowego i dostosuj czcionkę. Użyj responsywnych ustawień Divi, aby dodać mniejszy rozmiar tekstu dla urządzeń mobilnych.

• Kolor tekstu ciała: #000000
• Rozmiar tekstu ciała — pulpit: 18 pikseli
• Rozmiar tekstu ciała: telefon komórkowy: 14px
• Wysokość linii ciała: 1,8 em

Następnie otwórz ustawienia napisów i dostosuj czcionkę.

• Czcionka napisów: Nunito
• Grubość czcionki napisów: pogrubiona
• Kolor tekstu napisów: #000000

Na koniec zmień rozmiar tekstu na komputery i urządzenia mobilne (ponownie użyj ustawień responsywnych, aby dodać mniejszy rozmiar tekstu na urządzeniu mobilnym) i dostosuj wysokość linii.

• Rozmiar tekstu napisów — pulpit: 56 pikseli
• Rozmiar tekstu napisów — telefon komórkowy: 32px
• Wysokość linii napisów: 1.2 em

Dostosuj style Button One

Następnie dostosujemy style przycisków. Zacznij od włączenia niestandardowych stylów dla przycisku pierwszego, a następnie dostosuj rozmiar tekstu.

• Użyj niestandardowych stylów dla przycisku pierwszego: Tak
• Rozmiar tekstu przycisku pierwszego: 14px

Dodaj gradient tła do przycisku. Wartości gradientu są następujące:

• 58%: #316EFF
• 100%: #1D2B60
• Kierunek gradientu: 90 stopni

Następnie dostosuj ustawienia obramowania i ustawienia czcionek.

• Szerokość jednego przycisku: 0px
• Promień obramowania jednego przycisku: 80px
• Odstęp między przyciskami jednej litery: 2px
• Czcionka przycisku pierwszego: Nunito
• Grubość czcionki przycisku pierwszego: Ultra Bold
• Styl czcionki przycisku pierwszego: TT (wielkie)

Wyłącz ikonę przycisku pierwszego.

• Pokaż ikonę pierwszego przycisku: nie

Następnie dostosuj ustawienia marginesów i dopełnienia dla projektu pulpitu i dodaj cień pudełka.

• Button One Margin-Top-Desktop: 200px
• Button One Margin-Bottom-Desktop: 0px
• Przycisk One Padding-Top-Desktop: 16px
• Przycisk One Padding-Bottom-Desktop: 16px
• Przycisk One Padding-Lewy-Pulpit: 2em
• Przycisk One Padding-Prawy-Pulpit: 50em
• Cień przycisku: dół

Użyj ustawień responsywnych, aby ustawić różne wartości marginesów i dopełnienia na urządzeniach mobilnych.

• Button One Margin-Top-Mobile: 25px
• Przycisk jeden wyściółka-prawy-mobilny: 10em

Z naszym przyciskiem występują pewne problemy z zawijaniem tekstu, które naprawimy później za pomocą niestandardowego kodu CSS.

Dostosuj dwa style przycisków

Przycisk drugi ma kilka różnych kolorów i odstępów, ale jest bardzo podobny do przycisku pierwszego. Aby zapisać kilka powtarzających się etapów projektowania, skopiujmy style modułu button one do modułu button dwa, a następnie dostosujmy to, co musimy zmienić.

Najpierw kliknij prawym przyciskiem myszy przycisk jeden w sekcji i skopiuj styl przycisku jeden.

Następnie kliknij prawym przyciskiem myszy przycisk dwie sekcje i wklej przycisk jeden style.

Teraz możemy dostosować dwa style przycisku. Zmień kolor tekstu.

• Przycisk dwa kolor tekstu: #121F60

Dostosuj gradient tła dla przycisku drugiego.

• 30%: rgba (0,229,198,0)
• 100%: #00e5c6

Użyj ustawień responsywnych, aby dostosować gradient tła dla urządzeń mobilnych.

• 0%: rgba (0,229,198,0)
• 100%: #00e5c6

Następnie dostosuj margines i dopełnienie do projektu pulpitu.

• Przycisk Dwa Margin-Top-Desktop: 0px
• Przycisk Dwa Margin-Bottom-Desktop: 0px
• Przycisk drugi — lewy margines — pulpit: 30%
• Przycisk Two Padding-Top-Desktop: 16px
• Przycisk Two Padding-Bottom-Desktop: 16px
• Przycisk dwa wyściółka-lewy-pulpit: 48em
• Przycisk Dwa Wypełnienie-Prawy-Pulpit: 2em

Użyj ustawień responsywnych, aby ustawić różne wartości marginesów i dopełnienia dla projektu mobilnego.

• Przycisk drugi Margin-Lewy-Mobile: 5%
• Przycisk dwa wyściółka-lewy-mobilny: 35%
• Przycisk dwa wyściółka-prawy-mobilny: 5%

niestandardowe CSS

Wreszcie większość prac projektowych jest zakończona. Teraz musimy dodać niestandardowy CSS, aby ukończyć projekt. Przejdź na kartę Zaawansowane i otwórz sekcję Niestandardowy CSS.

Najpierw zacznijmy od CSS Header Image. Ten CSS umożliwia wyświetlanie obrazu nagłówka nad przyciskiem.

z-index: 1;
position:relative;

Następnie niestandardowy CSS do tytułu. Ustawimy różne wartości dla widoków na komputery i urządzenia mobilne, korzystając z ustawień responsywnych.

Dla komputerów stacjonarnych:

padding-top:50px;
padding-bottom:30px;

Dla telefonów komórkowych:

padding-top:5px;
padding-bottom:10px;

Na koniec dodaj następujący kod CSS do przycisku pierwszego i przycisku drugiego.

white-space: nowrap;

Ostateczny wynik

Oto ostateczny projekt naszej sekcji bohaterów nagłówka o pełnej szerokości.

Końcowe przemyślenia

Moduł nagłówka o pełnej szerokości pozwala łatwo stworzyć piękną sekcję bohatera, aby reklamować swoje usługi i informować odwiedzających, o czym jest Twoja witryna. Wbudowane ustawienia ułatwiają dostosowanie projektu każdego aspektu nagłówka, a wszystko jest w jednym miejscu, więc nie trzeba przełączać się między wieloma modułami, aby zbudować sekcję bohatera. Aby uzyskać więcej unikalnych projektów sekcji bohaterów, zapoznaj się z tym samouczkiem: Jak używać masek i wzorów tła Divi w sekcji bohaterów. Czy używasz modułu nagłówka o pełnej szerokości do tworzenia sekcji bohaterów? Chcielibyśmy usłyszeć od Ciebie w komentarzach!