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

Rifat Divi Tutorials Oct 21, 2022

Dzięki modułowi nagłówka o pełnej szerokości Divi możesz szybko i łatwo stworzyć wspaniałą sekcję bohatera dla swojej witryny. Sekcja bohatera Twojej witryny jest pierwszą rzeczą, jaką zobaczą odwiedzający, więc powinieneś sprawić, by była niezapomniana, pouczająca i atrakcyjna. Na szczęście w nagłówku Divi o pełnej szerokości dostępnych jest wiele możliwości treści, w tym tekst nagłówka, tekst napisów, tekst podstawowy, dwa zdjęcia i dwa przyciski. Wszystkie te komponenty będą dziś obecne w naszych hederach o pełnej szerokości.

W tym poście pokażemy dwa różne podejścia do tworzenia atrakcyjnego tła dla nagłówka o pełnej szerokości. Czy jesteś gotowy na begin? Zacznijmy teraz!

Podgląd projektu

W pierwszym projekcie teksturowane tło, które jest charakterystyczne i zgodne z tożsamością społeczności Bushcraft, zostało wykonane przy użyciu opcji obrazu tła Divi .

Drugi układ tworzy schludny, nowoczesny i przyjazny nagłówek powitalny dla drugiej klasy pani Nicole, używając obrazu tła i gradientu tła.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Zaczynaj

Aby rozpocząć, musisz postępować zgodnie z instrukcjami. Najpierw zainstaluj Divi na swojej witrynie WordPress. Utwórz stronę, nadaj jej tytuł, a następnie opublikuj ją. Włącz Visual Builder jako ostatni.

Konfiguracja „Naszej strony”

Interfejs Divi Builder typu „przeciągnij i upuść” zostanie użyty do ponownego załadowania strony po kliknięciu przycisku „Użyj Divi Builder”. Aby utworzyć czystą planszę, na której można budować nasze nagłówki o pełnej szerokości, wybierz „Buduj od podstaw” z trzech wyświetlonych opcji.

Zaprojektuj społeczność Divi Bushcraft

Najpierw musimy zamieścić na naszej stronie sekcję o pełnej szerokości. Aby wyświetlić opcje sekcji, kliknij ikonę „+”, a następnie wybierz „Pełna szerokość”. W ten sposób załaduje się biblioteka modułów o pełnej szerokości, umożliwiając wybór „Nagłówka o pełnej szerokości” z dostępnych alternatyw. Spowoduje to wyświetlenie modułu nagłówka o pełnej szerokości strony.

W zakładce Tekst wprowadzimy teraz zawartość naszego modułu. Ustaw następujące parametry:

  • Tekst nagłówka: Społeczność Divi Bushcraft
  • Tekst napisów: Divi Bushcraft
  • Przycisk #1: Dołącz dzisiaj
  • Przycisk #2: Dowiedz się więcej
  • Body Text: Ale w rzeczywistości zarówno oskarżamy, jak i obalamy tych godnych słusznej nienawiści, którzy zmiękczeni pochlebstwami obecnych przyjemności i zepsuci przez bóle i kłopoty, których mają doświadczyć, zaślepieni żądzą, nie przewidują.

Stylizacja tła

Dodaj obraz tła, gdy zdjęcia będą dostępne.

  • Wybierz ikonę obrazu, trzecią ikonę.
  • Następnie wybierz „Dodaj obraz tła”. W ten sposób otworzy się biblioteka multimediów, umożliwiając dodanie nowego zdjęcia lub wybranie jednego z istniejącej kolekcji.
  • Nakładka została wybrana jako tryb mieszania obrazu tła.
  • Ustaw kolor tła rgba, klikając symbol wiadra z farbą, który jest pierwszą ikoną (10,10,10,0.3)

Wybierz wyrównanie do środka w sekcji Układ na karcie Układ w ustawieniach projektu. Ustaw opcję „Utwórz pełny ekran” na „tak”, aby ją włączyć.

Tekst tytułu

Skonfiguruj następujące opcje stylu tekstu tytułu:

  • 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

Ustaw te opcje, aby wystylizować tekst podstawowy:

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

Tekst napisów

Ustaw te opcje, aby wystylizować tekst napisów:

  • 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

Stylizacja przycisków

Zróbmy teraz modne guziki! Ustaw następujące parametry dla pierwszego przycisku:

  • Użyj niestandardowych stylów dla przycisku pierwszego: Tak
  • Rozmiar tekstu przycisku pierwszego: 14px
  • Przycisk jeden kolor tekstu: #666b4a
  • Przycisk jeden tło: #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.

Ustaw następujące parametry na przycisk stylu 2:

  • 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 bingo! Otrzymasz wspaniale zaprojektowany nagłówek o pełnej szerokości z nakładką dla społeczności Divi Bushcraft i teksturowanym obrazem tła.

Projekt pani Nicole’s 2 klasy klasy

Stwórzmy od razu nagłówek o pełnej szerokości dla drugiej klasy pani Nicole! Zabawny i nowoczesny wygląd tego nagłówka uzyskano dzięki połączeniu obrazu tła z gradientem. Kontynuujmy!

Najpierw musimy zamieścić na naszej stronie sekcję o pełnej szerokości. Aby wyświetlić opcje sekcji, kliknij ikonę „+”, a następnie wybierz „Pełna szerokość”. W ten sposób załaduje się biblioteka modułów o pełnej szerokości, umożliwiając wybór „Nagłówka o pełnej szerokości” z dostępnych alternatyw. Spowoduje to wyświetlenie modułu nagłówka o pełnej szerokości strony.

W zakładce Tekst wprowadzimy teraz zawartość naszego modułu. Ustaw następujące parametry:

  • Tekst nagłówka: Witamy u pani Nicole’s klasy drugiej klasy
  • Tekst napisów: Witamy
  • Przycisk #1: Wyświetl przypisania
  • Przycisk #2: Skontaktuj się z panią Nicole
  • Tekst główny: Donec sollicitudinum molestie. Nie ma czegoś takiego jak wolny męski feugiat.

Stylizacja tła

Skonfiguruj te opcje, aby dostosować tło:

  • Wybierz ikonę gradientu na drugiej karcie.
  • Ustaw stopnie gradientu na przezroczyste na 18% i #ffffff na 40%.
  • Należy stosować gradient 219 stopni.
  • Wybierz „tak”, aby umieścić gradient na obrazie tła.
  • „Dodaj obraz tła” można wybrać, klikając trzeci przycisk, ikonę obrazu.

W tym momencie zawartość modułu będzie pełnoekranowa i wyśrodkowana.

  • Tekst & Wyrównanie logo: Środek
  • Ustaw pełny ekran: Tak

Tekst tytułu

Skonfiguruj następujące opcje stylu tekstu tytułu:

  • Czcionka tytułu: Candal
  • Rozmiar tekstu tytułu: 4rem

Tekst główny

Ustaw te opcje, aby wystylizować tekst podstawowy:

  • Czcionka ciała: Montserrat
  • Kolor tekstu ciała: #6d6d6d
  • Rozmiar tekstu ciała: 20px

Tekst napisów

Ustaw te parametry, aby stylizować tekst napisów:

  • Grubość czcionki napisów: Ultra Bold
  • Styl czcionki napisów: Wielkie litery
  • Kolor tekstu napisów: rgba (28,10,10,0.6)
  • Odstępy między literami napisów: 3px
  • Wysokość linii napisów: 3em

Stylizacja przycisków

Przycisk stylu 1, określając następujące parametry:

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

Wybierając następujące opcje, przycisk stylu 2:

  • Użyj niestandardowych stylów dla przycisku drugiego: Tak
  • Przycisk Dwa Rozmiar tekstu: 15px
  • Przycisk dwa kolor tekstu: #ffd078
  • Przycisk Dwa Tło: przezroczyste
  • Przycisk Dwa Szerokość Obramowania: 0px
  • Promień dwóch przycisków: 0px
  • Odstęp między dwoma literami: 3px
  • Grubość czcionki przycisku dwa: Ultra Bold
  • Przycisk Dwa Styl Czcionki: Wielkie Litery
  • Kolor dwóch ikon przycisku: #ffd078
  • Pokaż tylko ikonę po najechaniu na przycisk drugi: Nie
  • Przycisk Two Padding: 15px góra i dół; 25px w lewo i w prawo.

Rozmiary

Teraz dostosuj szerokość treści do 70%.

Masz teraz nagłówek o pełnej szerokości, który jest całkowicie dostosowany do klasy drugiej klasy pani Nicole.

Zawijanie

Za pomocą nagłówka Divi Fullwidth Header można szybko i łatwo utworzyć piękną sekcję bohatera witryny dla Twojej witryny. Bardzo ważne jest, aby Twój projekt był markowy, przyciągał uwagę i zawierał informacje, ponieważ sekcje bohaterów witryn są tak ważne dla stworzenia fantastycznego pierwszego wrażenia. Tworzenie nagłówka, który realizuje każdy z tych celów w jednym module, jest proste dzięki nagłówkowi o pełnej szerokości. Jak utworzysz nagłówek o pełnej szerokości, skoro już wiesz, co jest możliwe dzięki it??

Divi WordPress Theme