Czy chcesz wiedzieć, jak utworzyć sekcję Hero za pomocą modułu Divi's Fullwidth Header?
Tworzenie sekcji Bohatera to świetny sposób na zwrócenie uwagi na treść ważne dla Twojej strony. To jest treść duży rozmiar, który możesz wykorzystać do opowiedzenia swojej historii, udostępnienia informacji o swojej pracy lub wyróżnienia produktu lub usługi.
Dzięki modułowi nagłówka o pełnej szerokości Divi możesz dodać tytuł, podtytuł, dwa przyciski, tekst główny, obraz logo i obraz nagłówka. Oczywiście możesz również użyć opcji tła, aby dodawać i łączyć obrazy, gradienty, kolory, wzory i maski.
Możesz zmienić wszystkie te ustawienia w ustawieniach modułu, zamiast przełączać się między wieloma modułami obrazu, tekstu i przycisków.
W tym samouczku pokażemy Ci, jak stworzyć atrakcyjną i przyciągającą wzrok sekcję Hero za pomocą modułu Divi's Fullwidth Header.
Chodźmy!
badanie
Oto podgląd tego, co będziemy projektować.
To, czego potrzebujesz, aby zacząć
Zanim zaczniesz, upewnij się, że masz najnowszą wersję Divi na swoim Witryna internetowa.
Teraz możesz zacząć!
Jak utworzyć sekcję bohatera za pomocą modułu nagłówka o pełnej szerokości Divi?
Czytaj także: Divi: Jak korzystać z narzędzia „Gradient Builder” do upiększania obrazów
Utwórz nową stronę z predefiniowanym układem
Zacznijmy od użycia predefiniowanego układu z biblioteki Divi. Do tego projektu użyjemy strony głównej pakiet układu weterynarza.
Z pulpitu nawigacyjnego Worpress dodaj nową stronę do swojego Witryna internetowa
Nadaj mu tytuł, a następnie wybierz opcję Użyj Divi Builder.
W tym przykładzie użyjemy predefiniowanego układu z biblioteki Divi. Więc wybierz Przeglądaj układy.
Znajdź i wybierz układ hodowca psów.
wybierać Użyj tego układu aby dodać układ do swojej strony.
Jesteśmy teraz gotowi do projektowania.
Dodaj moduł nagłówka o pełnej szerokości
Odtworzymy 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 moduł nagłówka o pełnej szerokości do sekcji.
Następnie usuń oryginalną sekcję nagłówka.
Dostosuj moduł nagłówka o pełnej szerokości
Dodaj treść
Otwórz ustawienia modułu i dodaj plik treść obok modułu:
- Tytuł: weterynarz
- Podtytuł: Rozłam. Służ naszym najlepszym przyjaciołom
- Przycisk #1: Wszystkie usługi
- Przycisk #2: Umów się na spotkanie
- 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.
Gradientowe ustawienia tła
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 XNUMX XNUMX XNUMX)
- Typ gradientu: Eliptyczny
- Pozycja gradientu: w prawo
Następnie wybierz zakładkę Maska tła i dodaj maskę tła.
- Tło maski: narożny kropelka
- Kolor maski: #FFFFFF
- Przekształcenie: pionowe
Dostosuj tekst
Przełącz na kartę Wnętrze i zmień ustawienia tytułu
- Czcionka tytułu: Nunito
- Grubość czcionki tytułu: Ultra Bold
- Styl czcionki: TT (wielkie litery)
- Kolor tekstu tytułu: #a9cb6b
- Rozmiar tekstu: 14px
- Odstępy między literami tytułu: 2px
Przejdź do sekcji tekst-treść i dostosuj czcionkę.
- Kolor tekstu: #000000
- Rozmiar tekstu treści:
- Pulpit: 18px
- Telefon: 14px
- Wysokość linii ciała: 1.8 em
Zobacz też: Divi: Jak dostosować ikony koszyka i wyszukiwania w module „Menu o pełnej szerokości”
Następnie otwórz ustawienia napisów i dostosuj czcionkę.
- Czcionka napisów: Nunito
- Grubość czcionki napisów: pogrubiona
- Kolor tekstu: #000000
Na koniec zmień rozmiar tekstu
- Rozmiar tekstu napisów:
- Pulpit: 56px
- Ruchomy: 32px
- Wysokość linii napisów: 1.2 em
Przycisk Dostosuj #1
Następnie dostosujemy style przycisków. Zacznij od włączenia niestandardowych stylów dla pierwszego przycisku, a następnie dostosuj rozmiar tekstu.
- Użyj niestandardowych stylów dla przycisku: 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.
- Przycisk pierwszy:
- Szerokość obramowania: 0px
- Promień graniczny: 80px
- Odstępy między literami: 2px
- Czcionka: Nunito
- Grubość czcionki: Ultra Bold
- Styl: TT (wielkimi literami)
- Pokaż ikonę przycisku jednej: NIE
Następnie dostosuj ustawienia marginesów i dopełnienia dla projektu pulpitu i dodaj cień pudełka.
- Przycisk jeden margines
- Góra: 200px
- Dół: 0px
- Wypełnienie jednego przycisku:
- Góra: 16px
- Dół: 16px
- Lewo: 2em
- Prawo: 50em
- Cień pudełka: widok przechwytywania
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
Przycisk Dostosuj #2
Najpierw kliknij prawym przyciskiem przycisk nr 1 i kliknij Kopiuj style przycisków jeden.
Następnie kliknij prawym przyciskiem myszy przycisk drugi i wklej style z przycisku #1.
Teraz możemy dostosować drugi przycisk. 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 drugi margines:
- Góra: 0px
- Dół: 0px
- Po lewej: 30%
- Przycisk dwa wyściółka:
- Góra: 16px
- Dół: 16px
- Lewo: 48em
- Prawo: 2em
Użyj ustawień responsifq, aby ustawić różne wartości marginesów i dopełnienia dla projektu mobilnego.
- Przycisk drugi – lewy margines – mobilny: 5%
- Przycisk dwa wyściółka:
- Lewo-mobilny: 35%
- Prawy telefon komórkowy: 5%
Niestandardowy CSS
Wreszcie większość prac projektowych jest zakończona. Teraz musimy dodać niestandardowy CSS, aby ukończyć projekt. Przełącz na kartę Zaawansowane i otwórz sekcję Niestandardowe CSS.
Najpierw zacznijmy od CSS dla obrazu nagłówka. Ten CSS umożliwia wyświetlanie obrazu nagłówka nad przyciskiem.
z-index: 1;
position:relative;
Następnie niestandardowy CSS w tytule. Ustawimy różne wartości dla widoków desktopowych i mobilnych za pomocą ustawień responsywnych.
Dla komputera stacjonarnego:
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 bohatera nagłówka o pełnej szerokości.
Czytaj także: Divi: Jak utworzyć sekcję członków zespołu jako karuzelę
Pobierz DIVI teraz !!!
Wnioski
Moduł Fullwidth Header pozwala łatwo stworzyć piękną sekcję Hero, aby reklamować swoje usługi i informować o tym odwiedzający o czym ty mówisz Witryna internetowa.
Wbudowane ustawienia ułatwiają dostosowywanie każdego aspektu nagłówka, a wszystko jest w jednym miejscu, więc nie ma potrzeby przełączania się między wieloma modułami, aby zbudować sekcję Hero.
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 projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie 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.
...
