Divi: Jak używać modułu Fullwidth Header do tworzenia sekcji Hero

Czy chcesz utworzyć sekcję Hero Divi z modułem Fullwidth Header lub zaprojektować ją samodzielnie?

Zbuduj sekcję bohaterów Witryna internetowa od zera lub za pomocą modułu Divi Fullwidth Header to dwa sposoby na stworzenie przyciągającego wzrok projektu strona internetowa. 

W tym artykule przyjrzymy się zaletom i wadom korzystania z modułu nagłówka o pełnej szerokości w porównaniu z tworzeniem własnej sekcji Hero za pomocą Divi.

Chodźmy!

Znaczenie sekcji Bohater witryny

Sekcja bohatera to pierwsza sekcja, którą tworzysz odwiedzający zobacz, kiedy dotrą do Ciebie Witryna internetowa. Często jest to baner o pełnej szerokości i można go również nazwać nagłówkiem głównym. Jest to widoczne miejsce na Twojej stronie internetowej, ponieważ ma moc pozostawienia trwałego pierwszego wrażenia.

Czytaj także: Divi: Jak wyświetlić moduł nagłówka o pełnej szerokości na pełnym ekranie?

Dlatego ważne jest, aby był zaprojektowany w taki sposób, aby był łatwy do odczytania, a jednocześnie przyciągał wzrok i przekonywał. Sekcje bohatera witryny są ważne, ponieważ mogą przyciągnąć uwagę potencjalnych klientów, szybko opisać stronę i doprowadzić do dodatkowego zaangażowania i potencjalnych klientów. Sekcje bohaterów powinny być oznakowane marką, zawierać tytuł H1 i wezwanie do działania.

Utwórz sekcję Bohatera od podstaw

Zaprojektowanie od podstaw sekcji Bohater pozwala mieć pełną kontrolę nad projektem i treść. W zależności od Twojej sytuacji i potrzeb może to być świetne rozwiązanie dla Twojej witryny. 

Przyjrzyjmy się zaletom i wadom tego podejścia.

Korzyści z tego podejścia

Najpierw spójrzmy na korzyści płynące z budowania od podstaw sekcji Hero witryny za pomocą Divi.

• Pełna kontrola projektu
• Użyj dowolnego modułu Divi

Wady tego podejścia

Przyjrzyjmy się teraz wadom tworzenia sekcji bohaterów od zera.

• Musisz budować od podstaw
• Wymaga wielu modów

Utwórz sekcję Hero za pomocą modułu Divi Fullwidth Header

Tworzenie sekcji bohatera za pomocą modułu Divi Fullwidth Header ułatwia stworzenie przyciągającego wzrok, responsywnego projektu mobilnego w ciągu kilku minut. 

Przyjrzyjmy się zaletom i wadom tego podejścia.

Korzyści z tego podejścia

Przyjrzyjmy się korzyściom płynącym z budowania sekcji Hero za pomocą modułu Divi Fullwidth Header.

• Wszystkie Twoje treść jest w jednym module
• Projekt już zoptymalizowany

Wady tego podejścia

Oceńmy teraz wady projektowania sekcji Hero za pomocą modułu Divi Fullwidth Header.

• Mniejsza elastyczność projektowania

Moduł nagłówka Divi Fullwidth Header jest wyposażony w opcje treść predefiniowanych, choć wiele z nich można ograniczyć, jeśli chcesz dodać fragment treści, który nie jest dostępny w module. Oznacza to, że będziesz mieć mniejszą elastyczność w zakresie ogólnego projektu.

Budowa dwóch sekcji Hero krok po kroku

Teraz, gdy rozumiesz zalety i wady obu podejść, zbudujmy każdą sekcję Bohatera, abyś mógł dokładnie zobaczyć, jak działa każde podejście.

Utwórz nową stronę za pomocą Divi Builder

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

1. Zainstaluj Divi  na twojej stronie WordPress.
2. Dodaj stronę i nadaj jej tytuł.
3. Włącz konstruktor wizualny

Stwórz swoją sekcję Hero od podstaw

Teraz, gdy nasza strona jest już skonfigurowana, zacznijmy tworzyć sekcję bohaterów od podstaw.

Pobierz DIVI teraz !!!

Aktywuj „Divi Builder”

Aby użyć kreatora przeciągnij i upuść Divi, musimy aktywować Visual Builder, klikając przycisk „Użyj DiviBuilder”. Spowoduje to ponowne załadowanie strony za pomocą narzędzia Divi Visual Builder.

Wybierz: Buduj od podstaw

Teraz, gdy Twoja strona została ponownie załadowana z włączonym kreatorem wizualnym, kliknij opcje „ BUDUJ OD PODSTAW abyśmy mieli pustą stronę do pracy podczas projektowania.

Dodaj wiersz i skonfiguruj kolumny

Utwórz wiersz o następującej strukturze kolumn.

Dodaj mody

Teraz dodajmy moduły treści, których będziemy potrzebować.

• 2 moduły tekstowe, rozdzielacz, przycisk w lewej kolumnie
• 1 moduł obrazu w środkowej kolumnie
• 1 Moduł obrazu w prawej kolumnie

Sekcja stylu

Teraz skonfigurujmy ustawienia sekcji.

Dodaj sekcję, a następnie skonfiguruj następujące ustawienia:

• Tło: #1d1d25

Styl tekstu nagłówka

Dostosuj tekst nagłówka:

• Pozycja 1:
  • Grubość czcionki: pół pogrubiona
  • Kolor tekstu: #ffffff
  • Rozmiar tekstu: 90px
  • Wysokość linii: 1,1 em

separator

Skonfiguruj ustawienia rozdzielacza:

• Kolor linii: rgba (255,255,255,0.3)
• Waga dzielnika: 10px
• Maksymalna szerokość: 260 pikseli

Treść tekstu

Dostosuj tekst główny:

• Kolor tekstu: rgba (255,255,255,0.7)
• Rozmiar tekstu: 13px
• Wysokość linii: 1,8 em

przycisk

Teraz dostosujmy przycisk.

W zakładce Przycisk:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 14px
• Kolor tekstu: #ffffff
• Tło przycisku:
• Szerokość obramowania: 0 pikseli
• Promień obramowania: 0 pikseli

W zakładce Rozstaw:

• Góra i dół: 40px
• Lewy i prawy: 20px

Dodaj zdjęcia

Dodaj obrazy do modułów obrazu.

Dostosuj ustawienia linii

Parametry w linii:

• Margines (po lewej): 15vw

Dostosuj 2. kolumnę

W drugiej kolumnie skonfiguruj te ustawienia:

Niestandardowy CSS

Wklej następujący kod do sekcji kodu głównego elementu:

argin-right: -15vw!important;
z-index: 100!important;

rozstaw

Dodaj 100 pikseli górnego wypełnienia.

Tu jest ! Masz teraz w pełni zaprojektowaną niestandardową sekcję Bohatera.

Pobierz DIVI teraz !!!

Utwórz sekcję Bohatera za pomocą modułu Divi's Fullwidth Header

Zobaczmy teraz, jak odtworzyć tę sekcję Hero za pomocą modułu Divi's Fullwidth Header.

Pobierz DIVI teraz !!!

Dodaj stronę i wybierz Buduj od podstaw

Dodaj nową stronę, nadaj jej tytuł, a następnie kliknij „Użyj Divi Builder”, a następnie wybierz Buduj od podstaw.

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

Wstaw sekcję Pełna szerokość, a następnie wybierz Nagłówek o pełnej szerokości w bibliotece modułów.

Treść

Dodaj treść tekstową do modułu w zakładce Tekst.

Obrazy

Dodaj obrazy na karcie obrazu.

Zmień kolor tła

Na karcie tła skonfiguruj następujące ustawienie:

• Tło: #1D1D25

Tekst nagłówka

Skonfiguruj ustawienia tekstu nagłówka:

• Grubość czcionki tytułu: pogrubiona
• Rozmiar tekstu: 90px

Treść tekstu

Skonfiguruj ustawienia tekstu treści:

• Kolor tekstu głównego: rgba(255,255,255,0.55)

Tekst napisów

Skonfiguruj ustawienia tekstu podpisu:

• Grubość czcionki napisów: pogrubiona
• Kolor tekstu: #4C594C
• Odstępy między literami: 3px

przyciski

Teraz dostosujmy dwa przyciski.

przycisk pierwszy

Na karcie Przycisk pierwszy skonfiguruj następujące ustawienia:

• Użyj niestandardowych stylów dla przycisku pierwszego: Tak
• Przycisk pierwszy
  • Tło: #4c594c
  • Szerokość obramowania: 0 pikseli
  • Promień graniczny: 0px
  • Pokaż ikonę: TAK
  • Pokaż ikonę tylko po najechaniu kursorem: Nie
  • Padding: 25 pikseli (góra i dół); 25px (lewo), 50px (prawo)

Przycisk drugi

Na karcie Przycisk drugi skonfiguruj następujące ustawienia:

• Użyj niestandardowych stylów dla przycisku drugiego: TAK
• Przycisk Dwa Szerokość Obramowania: 0 pikseli
• Promień graniczny: 0px
• Wypełnienie: 25px (góra, dół, lewa i prawa)
• Cień przycisku: wybierz czwarty
• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 2px
• Kolor cienia: #ffffff

Tu jest ! Masz teraz w pełni zaprojektowaną sekcję Hero przy użyciu modułu Divi Fullwidth Header.

Zobacz też: Divi: Jak tworzyć przejścia w tle między elementami

Pobierz DIVI teraz !!!

Wnioski

Tworzenie sekcji Hero za pomocą Divi jest łatwe, niezależnie od tego, czy budujesz od zera, czy używasz modułu Fullwidth Header. Obie opcje pozwalają tworzyć wspaniałe projekty nagłówków, które przyciągną Twoje zainteresowanie odwiedzający. 

W zależności od Twoich unikalnych potrzeb, każda z tych opcji jest świetną opcją do rozważenia podczas projektowania sekcji Bohaterów. 

Po zapoznaniu się z zaletami i wadami obu rozwiązań, jak zaprojektowałbyś sekcję Bohaterów?

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 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.

...