Jak zrobić pełnoekranowy moduł nagłówka Divi o pełnej szerokości?

Nagłówki pełnoekranowe zajmują cały ekran, niezależnie od rozmiaru ekranu odwiedzającego. To świetnie nadaje się do przyciągnięcia uwagi użytkowników. Świetnie nadaje się również do kierowania ich do swojego wezwania do działania. Na szczęście łatwo jest stworzyć pełnoekranowy nagłówek za pomocą modułu nagłówka o pełnej szerokości Divi. W tym poście pokażemy, jak zbudować nagłówek o pełnej szerokości, włączyć go w tryb pełnoekranowy i nadać mu styl. Możesz użyć tego podejścia, aby zbudować dowolną pełnoekranową sekcję bohatera dla swoich stron!

Zacznijmy.

Podgląd pełnoekranowego nagłówka

Zobaczmy podgląd tego, co zbudujemy w tym samouczku.

Pulpit

Tablet

Telefon

Po co tworzyć pełnoekranowy nagłówek za pomocą modułu nagłówka o pełnej szerokości Divi?

Zanim omówimy, jak zrobić pełnoekranowy nagłówek, porozmawiajmy o tym, dlaczego użytkownicy Divi mogą go chcieć.

Pełnoekranowy nagłówek przedstawia określone elementy w zawartej sekcji. Ta sekcja przedstawia te elementy w przejrzystym układzie, który przyciąga uwagę i wykonuje kilka zadań.

Po pierwsze, można to wykorzystać do wyświetlenia wezwania do działania, które może wprowadzić odwiedzających do lejka sprzedaży. To świetne miejsce, by wspomnieć o konkretnym produkcie lub usłudze.

Po drugie, może zaprezentować użytkownikowi ciekawy design, który utrzyma go na stronie. Strony internetowe mają tylko kilka sekund, aby przyciągnąć uwagę odwiedzających.

Tworząc pełnoekranowy nagłówek, należy pamiętać o kilku kwestiach:

• Postępuj zgodnie z typowymi praktykami projektowania kolorów i czcionek. Upewnij się, że są czytelne i pasują do tematu Twojej witryny.
• Projekt powinien być prosty i czysty. Nie używaj zbyt wielu obrazów, linków ani przycisków. Skoncentruj się na kilku rzeczach. Mniej znaczy więcej.
• Upewnij się, że nagłówek pełnoekranowy jest responsywny. Pełnoekranowy nagłówek musi dobrze wyglądać i działać poprawnie na wszystkich rozmiarach ekranu.

Jak zrobić nagłówek Divi o pełnej szerokości jako nagłówek pełnoekranowy?

Zacznij od dodania sekcji o pełnej szerokości do strony, nad którą pracujesz. Następnie dodaj moduł nagłówka o pełnej szerokości do sekcji o pełnej szerokości.

Otworzą się ustawienia modułu. Wybierz kartę Projekt. Włącz opcję o nazwie Utwórz pełny ekran .

Mamy teraz pełnoekranowy nagłówek. To takie proste.

Włącz pełnoekranową ikonę przewijania w dół nagłówka

Możemy również dodać przycisk, który wskazuje użytkownikowi przewijanie w dół. Jednak musimy to włączyć. Ten przycisk jest zawsze widoczny w opcji pełnoekranowej. Opcja nagłówka pełnoekranowego zawsze odpowiada wysokości ekranu odwiedzającego.

W ustawieniach modułu zobaczymy sekcję o nazwie Ikona przewijania w opcjach układu. Kliknij przycisk, aby włączyć opcję Pokaż przycisk przewijania w dół .

Divi Fullwidth Header Przykład pełnoekranowego nagłówka

Teraz, gdy omówiliśmy, dlaczego chcielibyśmy utworzyć pełnoekranowy nagłówek o pełnej szerokości i zobaczyć, jak wykonać zadanie, spójrzmy na przykład. Stworzę nagłówek o pełnej szerokości, używając sekcji hero układu Divi.

W tym przykładzie korzystam z sekcji bohatera ze strony głównej bezpłatnego pakietu układów Studio fotograficznego, który jest dostępny w Divi. Dostosuję tę sekcję bohatera za pomocą czcionek i kolorów z układu, aby utworzyć unikalny nagłówek o pełnej szerokości.

Ustawienia modułu nagłówka pełnoekranowego

Oto kroki dla każdej sekcji ustawień w module nagłówka pełnoekranowego.

Tekst

Najpierw dodaj tekst , który będzie widoczny w nagłówku o pełnej szerokości. Obejmuje to tytuł, podtytuł, treść (wykorzystam do tego wbudowany fikcyjny tekst Divi) i tekst przycisku.

• Tytuł: Studio fotograficzne Divi
• Podtytuł: Fotografia
• Przycisk 1: Krótki opis projektu
• Przycisk 2: Planowanie projektu
• Treść: treść

Obrazy

Następnie dodaj obraz . Wyświetla się po prawej stronie nagłówka o pełnej szerokości, przesuwając tekst w lewo.

• Obraz nagłówka: Twój wybór

Tło

Przewiń w dół do opcji Tło i ustaw kolor na #f6f5ee.

• Kolor: #f6f5ee

Układ

Następnie przejdź do zakładki Projekt. Włącz opcję Utwórz pełny ekran .

• Ustaw pełny ekran: Tak

Ikona przewijania w dół

Następnie włącz ikonę przewijania w dół . Zmień kolor na czarny dla komputerów stacjonarnych i tabletów oraz biały dla telefonów. Z obrazem, który wybrałem, ikona pojawi się na obrazku na dole dla telefonów, co pozwala na jej widoczność wraz z kolorami obrazu. Zmień rozmiar ikony na 70px dla komputerów stacjonarnych, 60px dla tabletów i 50px dla telefonów.

• Pokaż przycisk przewijania w dół: Tak
• Kolor ikony: #000000 Pulpit i tablet, #ffffff Telefon
• Rozmiar: pulpit 70 pikseli, tablet 60 pikseli, telefon 50 pikseli

Tekst tytułu

Następnie dostosujemy tekst tytułu . Ustaw tekst na H1 i wybierz Inter jako czcionkę. Ustaw wagę na pogrubienie, wyrównanie na środek, a kolor na czarny.

• Nagłówek: H1
• Czcionka: Inter
• Waga: pogrubienie
• Wyrównanie: Środek
• Kolor: #000000

Użyjemy trzech rozmiarów czcionki : 75 pikseli dla komputerów stacjonarnych, 40 pikseli dla tabletów i 24 pikseli dla telefonów. Zmień wysokość linii na 1,2 em.

• Rozmiar: komputer stacjonarny 75 pikseli, tablet 40 pikseli, telefon 24 pikseli
• Wysokość linii: 1.2 em

Tekst główny

Następnie przewiń w dół do Treść treści . Wybierz Open Sans jako czcionkę. Ustaw Wyrównanie do lewej i Kolor na czarny.

• Czcionka: Open Sans
• Wyrównanie: w lewo
• Kolor: #000000

Ustaw rozmiar czcionki na 16 pikseli dla komputerów stacjonarnych, 15 pikseli dla tabletów i 14 pikseli dla telefonów. Zmień wysokość linii na 1,8 em.

• Rozmiar: komputer stacjonarny 16 pikseli, tablet 15 pikseli, telefon 14 pikseli
• Wysokość linii: 1,8 em

Tekst napisów

Następnie przewiń w dół do Tekst napisów . Zmień czcionkę na Inter. Ustaw wagę na pogrubienie, styl na TT, wyrównanie na środek, a kolor na #ff5a17.

• Czcionka: Inter
• Waga: pogrubienie
• Styl: TT
• Wyrównanie: Środek
• Kolor: #ff5a17

Zmień rozmiar na 14px dla wszystkich trzech rozmiarów ekranu. Zmień odstępy między literami na 1px i wysokość linii na 1.4em.

• Rozmiar: 14px
• Odstępy między literami 1px
• Wysokość linii: 1,8 em

Przycisk pierwszy

Następnie przewiń w dół do przycisku 1 i wybierz opcję Użyj stylów niestandardowych dla przycisku . Zmień kolor tekstu na czarny.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar: 20px pulpit, 18px tablet, 16px telefon
• Kolor tekstu: #000000

Zmień kolor tła na biały i ustaw szerokość obramowania i promień na 0px.

• Kolor tła: #ffffff
• Szerokość jednego przycisku: 0px
• Promień jednego przycisku: 0px

Zmień czcionkę na Inter i wagę na pogrubioną.

• Czcionka: Inter
• Waga: pogrubienie

Następnie wybierz preferowaną ikonę, zmień kolor na czarny, ustaw Położenie przycisku po lewej stronie i wyłącz opcję Pokaż tylko ikonę po najechaniu na przycisk pierwszy.

• Ikona: twój wybór
• Kolor ikony: #000000
• Umieszczenie ikony przycisku jednego: w lewo
• Pokaż tylko ikonę po najechaniu na przycisk pierwszy: Nie

Na koniec przewiń w dół do opcji Wypełnienie przycisku pierwszego. Dla każdego rozmiaru ekranu użyjemy innego wypełnienia. W przypadku komputerów stacjonarnych użyj 20 pikseli dla góry i dołu oraz 40 pikseli dla lewej i prawej strony. W przypadku tabletów zmień górną i dolną wyściółkę na 16px. W telefonach zmień górną i dolną wyściółkę na 12px. Pozostaw lewą i prawą wyściółkę taką samą dla wszystkich trzech.

• Wypełnienie pulpitu: 20px góra i dół, 40px lewo i prawo
• Wypełnienie tabletu: 16px góra i dół, 40px lewo i prawo
• Wypełnienie telefonu: 12px góra i dół, 40px lewo i prawo

Przycisk drugi

Na koniec przewiń w dół do przycisku drugiego . Wybierz opcję Użyj niestandardowych stylów dla przycisku . Ustaw rozmiar czcionki na 20 pikseli dla komputerów stacjonarnych, 19 pikseli dla tabletów i 16 pikseli dla telefonów. Zmień kolor tekstu na biały.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar: 20px pulpit, 18px tablet, 16px telefon
• Kolor tekstu: #ffffff

Zmień kolor tła na #ff5a17. Ustaw szerokość i promień obramowania na 0px.

• Kolor tła: #ff5a17
• Przycisk Dwa Szerokość Obramowania: 0px
• Promień dwóch przycisków: 0px

Następnie zmień czcionkę na Inter i wagę na pogrubienie.

• Czcionka: Inter
• Waga: pogrubienie

Wybierz preferowaną ikonę. Zmień kolor na czarny, ustaw Położenie przycisku po lewej stronie i wyłącz opcję Pokazuj ikonę tylko po najechaniu na przycisk drugi.

• Ikona: twój wybór
• Kolor ikony: #000000
• Przycisk Dwa Umieszczenie Ikon: Lewy
• Pokaż tylko ikonę po najechaniu na przycisk drugi: Nie

Na koniec przewiń w dół do opcji dopełnienia przycisku drugiego. W przypadku komputerów stacjonarnych użyj 20 pikseli dla góry i dołu oraz 40 pikseli dla lewej i prawej strony. W tabletach zmień górną i dolną wyściółkę na 16px. W przypadku telefonów zmień górną i dolną wyściółkę na 12 pikseli. Zamknij moduł i zapisz swoją pracę.

• Wypełnienie pulpitu: 20px góra i dół, 40px lewo i prawo
• Wypełnienie tabletu: 16px góra i dół, 40px lewo i prawo
• Wypełnienie telefonu: 12px góra i dół, 40px lewo i prawo

Pełnoekranowe wyniki nagłówka

Oto, jak nasz nagłówek o pełnej szerokości wygląda na komputerach stacjonarnych, tabletach i telefonach.

Pulpit

Tablet

Telefon

Zakończenie myśli o tworzeniu pełnoekranowego nagłówka za pomocą modułu nagłówka o pełnej szerokości Divi

Oto nasze spojrzenie na to, jak zrobić pełnoekranowy nagłówek za pomocą modułu nagłówka Divi o pełnej szerokości. Proces jest prosty i świetnie wygląda na każdym urządzeniu. Dodanie przycisku przewijania w dół to doskonała wizualizacja, która wskazuje użytkownikom, że mogą przewijać. Projektowanie pełnoekranowego nagłówka jest podobne do projektowania sekcji bohatera. Postępowanie zgodnie z kilkoma prostymi wskazówkami może pomóc w tworzeniu niesamowitych nagłówków pełnoekranowych za pomocą modułu nagłówka pełnoekranowego Divi.

Chcemy usłyszeć od Ciebie. Czy ustawiłeś nagłówek Divi Fullwidth Header na pełnym ekranie? Daj nam znać w komentarzach.