Czy chcesz wyświetlić pełny ekran modułu Divi Fullwidth Header?
Nagłówki pełnoekranowe zajmują cały ekran, niezależnie od rozmiaru ekranu gość. Świetnie nadaje się do przyciągnięcia uwagi użytkowników. Na szczęście za pomocą modułu łatwo jest utworzyć nagłówek pełnoekranowy Nagłówek o pełnej szerokości z Divi.
W tym artykule pokażemy, jak utworzyć nagłówek o pełnej szerokości, dostosować go i wyświetlić na pełnym ekranie. Możesz użyć tego podejścia, aby utworzyć dowolną pełnoekranową sekcję bohatera dla swoich stron.
Zacznijmy.
badanie
Zobaczmy, co zaprojektujemy w tym samouczku.
Biuro
tabletka
Telefon
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 pełnej szerokości.
Otwierają się ustawienia modułu. Wybierz kartę Wnętrze. Aktywuj opcję o nazwie Ustaw pełny ekran
Mamy teraz pełnoekranowy nagłówek. To takie proste.
Włącz ikonę przewijania
Możemy również dodać przycisk, który każe użytkownikowi przewinąć w dół. Musimy to jednak włączyć. Przycisk ten jest zawsze widoczny w opcji pełnego ekranu. Opcja nagłówka pełnoekranowego zawsze odpowiada wysokości ekranu pliku gość.
- Pokaż przycisk przewijania w dół: TAK
Przykład pełnoekranowego nagłówka Divi o pełnej szerokości
Parametry modułu nagłówka o pełnej szerokości
Oto kroki dla każdej sekcji ustawień modułu nagłówka o pełnej szerokości.
Czytaj także: Divi: Jak łączyć maski tła i separatory
teksty
Wszystko najpierw dodaj tekst które będą widoczne w nagłówku o pełnej szerokości. Obejmuje to tytuł, podtytuł, treść i tekst przycisku.
- Tytuł: Stwórz Twój blog z Divi
- Podtytuł: Blogpascher
- Burron #1: Podsumowanie
- Przycisk #2: Harmonogram
- Treść: (domyślnie)
Obrazy
następnie dodaj zdjęcie. 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ń do Tło i ustaw kolor na #f6f5ee.
- Kolor tła: #f6f5ee
Usposobienie
Następnie przejdź do zakładki Projekt.
- Ustaw pełny ekran: TAK
Przewiń w dół ikona
- Pokaż przycisk przewijania w dół: TAK
- Kolor ikony przewijania w dół: #000000 (komputer stacjonarny i tablet), #ffffff (telefon)
- Rozmiar ikony przewijania w dół: 70px (komputer), 60px (tablet), 50px (telefon)
Tekst tytułu
Następnie dostosujemy tekst tytułu.
- Poziom nagłówka: H1
- Czcionka: Inter
- Waga czcionki: pogrubiona
- Wyrównanie tekstu: do środka
- Kolor tekstu: #000000
- Rozmiar tekstu tytułu: 75px (komputer), 40px (tablet), 24px (telefon)
- Wysokość wiersza tytułu: 1.2 em
Tekst opisu
Następnie przewiń w dół do tekst-treść.
- Czcionka: Open Sans
- Wyrównanie: w lewo
- Kolor: #000000
- Rozmiar tekstu: 16px (komputer), 15px (tablet), 14px (telefon)
- Wysokość linii: 1.8 em
podtytuł
Następnie przewiń w dół do Tekst napisów.
- Czcionka: Inter
- Waga czcionki: pogrubiona
- Styl: TT
- Wyrównanie: Środek
- Kolor: #ff5a17
- Rozmiar: 14px
- Odstępy między literami: 1px
- Wysokość linii: 1.8 em
Przycisk 1
Następnie przewiń w dół do Przycisk pierwszy.
- Użyj niestandardowych stylów dla przycisku: TAK
- Rozmiar tekstu: 20px (komputer), 18px (tablet), 16px (telefon)
- Kolor tekstu: #000000
- Kolor tła: #ffffff
- Szerokość obramowania: 0px
- Promień graniczny: 0px
- Czcionka: Inter
- Waga czcionki: pogrubiona
- Ikona: twój wybór
- Kolor ikony: #000000
- Umieszczenie: w prawo
- Pokaż tylko ikonę po najechaniu na przycisk jeden: NIE
Na koniec przewiń w dół do opcji Przycisk jeden wyściółka.
- Wyściółka:
- Pulpit: 20px (góra i dół), 40px (lewy i prawy)
- Tablet: 16px (góra i dół), 40px (lewy i prawy)
- Telefon: 12px (góra i dół), 40px (lewy i prawy)
Przycisk 2
Na koniec przewiń w dół do Przycisk dwa.
- Użyj niestandardowych stylów dla przycisku drugiego: Tak
- Rozmiar tekstu: 20px (komputer), 18px (tablet), 16px (telefon)
- Kolor tekstu: #ffffff
- Kolor tła: #ff5a17
- Szerokość obramowania: 0 pikseli
- Promień graniczny: 0px
- Czcionka: Inter
- Waga czcionki: pogrubiona
Wybierz swoją ulubioną ikonę.
- Ikona: twój wybór
- Kolor ikony: #000000
- Umieszczenie: po lewej
- Pokaż tylko ikonę po najechaniu na przycisk drugi: NIE
Na koniec przewiń w dół do opcji Przycisk dwa wyściółki.
- Wyściółka:
- Pulpit: 20px (góra i dół), 40px (lewy i prawy)
- Tablet: 16px (góra i dół), 40px (lewy i prawy)
- Telefon: 12px (góra i dół), 40px (lewy i prawy)
Ostateczne wyniki
Tak wygląda nasz nagłówek o pełnej szerokości na komputerach stacjonarnych, tabletach i telefonach.
Możesz również skonsultować się z: Divi: Jak używać efektów cienia i najechania do tworzenia interaktywnych treści
Biuro
tabletka
Telefon
Pobierz DIVI teraz !!!
Wnioski
Oto nasze spojrzenie na to, jak utworzyć nagłówek o pełnej szerokości 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 Przewiń w dół to świetny obraz, który informuje użytkowników, że mogą przewijać.
Projektowanie pełnoekranowego nagłówka jest podobne do projektowania sekcji Hero. Przestrzeganie kilku prostych wskazówek może pomóc w tworzeniu niesamowitych pełnoekranowych nagłówków za pomocą modułu Divi Fullwidth Header.
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.
...
