Divi: So zeigen Sie das Fullwidth Header-Modul im Vollbildmodus an

Möchten Sie das Divi Fullwidth Header-Modul im Vollbildmodus anzeigen?

Vollbild-Header nehmen den gesamten Bildschirm ein, unabhängig von der Bildschirmgröße Besucher. Dies ist großartig, um die Aufmerksamkeit der Benutzer zu erregen. Glücklicherweise ist es mit dem Modul einfach, einen Vollbild-Header zu erstellen Header mit voller Breite von Divi.

In diesem Artikel zeigen wir Ihnen, wie Sie eine Kopfzeile in voller Breite erstellen, anpassen und im Vollbildmodus anzeigen. Sie können diesen Ansatz verwenden, um einen beliebigen Vollbild-Hero-Abschnitt für Ihre Seiten zu erstellen.

Lassen Sie uns beginnen.

Übersicht

Sehen wir uns eine Vorschau dessen an, was wir in diesem Tutorial entwerfen werden.

Büro

Tablette

Divi Fullwidth Header-Modul im Vollbildmodus

Telefon

So machen Sie Ihren Divi-Header in voller Breite zu einem Fullscreen-Header

Beginnen Sie, indem Sie der Seite, an der Sie gerade arbeiten, einen Abschnitt in voller Breite hinzufügen.

Fügen Sie dann ein hinzu Header-Modul in voller Breite zum Vollseitenteil.

Die Moduleinstellungen öffnen sich. Registerkarte auswählen Design. Aktivieren Sie die aufgerufene Option Vollbild machen

Wir haben jetzt eine Kopfzeile im Vollbildmodus. So einfach ist das.

Bildlaufsymbol aktivieren

Wir können auch eine Schaltfläche hinzufügen, die den Benutzer auffordert, nach unten zu scrollen. Wir müssen es jedoch aktivieren. Diese Schaltfläche ist in der Vollbildoption immer sichtbar. Die Vollbild-Header-Option entspricht immer der Bildschirmhöhe des Besucher.

Scroll-Down-Button anzeigen: JA

Beispiel für Divi-Vollbild-Header in voller Breite

Parameter des Header-Moduls mit voller Breite

Hier sind die Schritte für jeden Abschnitt der Einstellungen des Fullwidth Header-Moduls.

Lesen Sie auch: Divi: So kombinieren Sie Hintergrundmasken und Trennzeichen

Text

Alle Fügen Sie zuerst den Text hinzu Dies wird in der Kopfzeile in voller Breite sichtbar sein. Dazu gehören Titel, Untertitel, Inhalt und der Schaltflächentext.

Titel: Erstellen Ihr Blog mit Divi
Untertitel: Blogpascher
Burron Nr. 1: Zusammenfassung
Schaltfläche Nr. 2: Zeitplan
Körper: (Standard)

Bilder

ensuite, Bild hinzufügen. Dies wird auf der rechten Seite der Kopfzeile in voller Breite angezeigt und verschiebt den Text nach links.

Kopfbild: Ihre Wahl

Hintergrund

Scrollen Sie zu Hintergrund und setze die Farbe auf #f6f5ee.

Hintergrundfarbe: #f6f5ee

Bereitstellung

Navigieren Sie als Nächstes zur Registerkarte Design.

Vollbild machen: JA

Symbol nach unten scrollen

Scroll-Down-Button anzeigen: JA
Scrollen Sie nach unten Symbolfarbe: #000000 (Desktop und Tablet), #ffffff (Telefon)
Symbolgröße nach unten scrollen: 70 Pixel (Desktop), 60 Pixel (Tablet), 50 Pixel (Telefon)

Titeltext

Als nächstes passen wir die an Titeltext.

Überschriftenebene: H1
Schrift: Inter
Schriftdicke: fett
Textausrichtung: Zentriert
Textfarbe: #000000

Titeltextgröße: 75 Pixel (Desktop), 40 Pixel (Tablet), 24 Pixel (Telefon)
Höhe der Titelzeile: 1.2 cm

Beschreibungstext

Scrollen Sie dann nach unten zu Hauptteil.

Schriftart: Offene Sans
Ausrichtung: Links
Farbe: #000000

Textgröße: 16px (Desktop), 15px (Tablet), 14px (Telefon)
Zeilenhöhe: 1.8 m

Untertitel

Scrollen Sie dann nach unten zu Untertiteltext.

Schrift: Inter
Schriftdicke: fett
Stil: TT
Ausrichtung: Mitte
Farbe: #ff5a17

Größe: 14px
Buchstabenabstand: 1px
Zeilenhöhe: 1.8 m

Taste 1

Scrollen Sie dann nach unten zu Knopf Eins.

Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Textgröße: 20px (Desktop), 18px (Tablet), 16px (Telefon)
Textfarbe: #000000

Hintergrundfarbe: #ffffff
Randbreite: 0px
Randradius: 0px

Schrift: Inter
Schriftdicke: fett

Symbol: Ihre Wahl
Symbolfarbe: #000000
Platzierung: Richtig
Symbol nur beim Hover für Schaltfläche Eins anzeigen: NEIN

Scrollen Sie schließlich nach unten zu den Optionen Knopf Eins Polsterung.

Polsterung:
- Desktop: 20 Pixel (oben und unten), 40 Pixel (links und rechts)
- Tablet: 16px (oben und unten), 40px (links und rechts)
- Telefon: 12px (oben und unten), 40px (links und rechts)

Taste 2

Scrollen Sie schließlich nach unten zu Taste Zwei.

Verwenden Sie benutzerdefinierte Stile für Schaltfläche zwei: Ja
Textgröße: 20 Pixel (Desktop), 18 Pixel (Tablet), 16 Pixel (Telefon)
Textfarbe: #ffffff

Hintergrundfarbe: #ff5a17
Rahmenbreite: 0px
Randradius: 0px

Schrift: Inter
Schriftdicke: fett

Wählen Sie Ihr Lieblingssymbol.

Symbol: Ihre Wahl
Symbolfarbe: #000000
Platzierung: links
Symbol nur beim Hover für Schaltfläche Zwei anzeigen: NEIN

Scrollen Sie schließlich nach unten zu den Optionen Knopf zwei Polsterung.

Polsterung:
- Desktop: 20 Pixel (oben und unten), 40 Pixel (links und rechts)
- Tablet: 16px (oben und unten), 40px (links und rechts)
- Telefon: 12px (oben und unten), 40px (links und rechts)

Endergebnisse

So sieht unser Header in voller Breite auf Desktops, Tablets und Telefonen aus.

Sie können sich auch beraten lassen: Divi: So verwenden Sie Schatten- und Hover-Effekte, um interaktive Inhalte zu erstellen