So machen Sie Ihr Divi Header-Modul in voller Breite im Vollbildmodus

Fullscreen-Header nehmen den gesamten Bildschirm ein, unabhängig von der Bildschirmgröße des Besuchers. Dies ist großartig, um die Aufmerksamkeit der Benutzer zu gewinnen. Es eignet sich auch hervorragend, um sie auf Ihren Call-to-Action zu lenken. Glücklicherweise ist es einfach, mit dem Fullwidth-Header-Modul von Divi einen Vollbild-Header zu erstellen. In diesem Beitrag zeigen wir Ihnen, wie Sie einen Header in voller Breite erstellen, ihn in den Vollbildmodus umwandeln und ihn stylen. Sie können diesen Ansatz verwenden, um einen beliebigen Vollbild-Hero-Bereich für Ihre Seiten zu erstellen!

Lass uns anfangen.

Vorschau der Vollbild-Kopfzeile

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

Schreibtisch

Tablette

Telefon

Warum einen Fullscreen-Header mit dem Fullwidth-Header-Modul von Divi erstellen?

Bevor wir darüber sprechen, wie man einen Vollbild-Header erstellt, lassen Sie uns darüber sprechen, warum Divi-Benutzer einen haben möchten.

Ein Vollbild-Header präsentiert bestimmte Elemente in einem enthaltenen Abschnitt. Dieser Abschnitt präsentiert diese Elemente in einem übersichtlichen Layout, das die Aufmerksamkeit auf sich zieht und mehrere Aufgaben erfüllt.

Erstens kann dies verwendet werden, um einen Aufruf zum Handeln anzuzeigen, der Ihre Besucher in Ihren Verkaufstrichter führen kann. Es ist ein großartiger Ort, um ein bestimmtes Produkt oder eine bestimmte Dienstleistung zu erwähnen.

Zweitens kann es dem Benutzer ein interessantes Design präsentieren, das ihn auf der Website hält. Websites haben nur wenige Sekunden Zeit, um die Aufmerksamkeit der Besucher auf sich zu ziehen.

Beim Erstellen eines Fullscreen-Headers sind einige Dinge zu beachten:

• Befolgen Sie gängige Designpraktiken für Farben und Schriftarten. Stellen Sie sicher, dass sie gut lesbar sind und zum Thema Ihrer Website passen.
• Halten Sie das Design einfach und sauber. Verwenden Sie nicht zu viele Bilder, Links oder Schaltflächen. Konzentriere dich auf ein paar Dinge. Weniger ist mehr.
• Stellen Sie sicher, dass der Vollbild-Header responsiv ist. Ein Fullscreen-Header muss gut aussehen und auf allen Bildschirmgrößen richtig funktionieren.

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 dem Abschnitt mit voller Breite ein Header-Modul mit voller Breite hinzu.

Die Einstellungen des Moduls werden geöffnet. Wählen Sie die Registerkarte Design. Aktivieren Sie die Option namens Make Fullscreen .

Wir haben jetzt einen Fullscreen-Header. So einfach ist das.

Aktivieren Sie das Vollbild-Header-Scroll-Down-Symbol

Wir können auch eine Schaltfläche hinzufügen, die dem Benutzer anzeigt, dass er nach unten scrollen soll. Allerdings müssen wir es aktivieren. Diese Schaltfläche ist in der Vollbildoption immer sichtbar. Die Vollbild-Header-Option entspricht immer der Bildschirmhöhe des Besuchers.

In den Einstellungen des Moduls sehen wir einen Abschnitt namens Scroll Down Icon unter den Layout-Optionen. Klicken Sie auf die Schaltfläche , um die Schaltfläche „Bildlauf nach unten anzeigen“ zu aktivieren.

Divi Fullwidth Header Vollbild-Header Beispiel

Nachdem wir nun besprochen haben, warum wir einen Fullwidth-Header im Vollbildmodus erstellen möchten, und sehen, wie die Aufgabe ausgeführt wird, sehen wir uns ein Beispiel an. Ich erstelle eine Kopfzeile in voller Breite mit dem Heldenabschnitt eines Divi-Layouts.

Für dieses Beispiel verwende ich den Hero-Bereich von der Homepage im kostenlosen Photography Studio Layout Pack, das in Divi verfügbar ist. Ich werde diesen Heldenabschnitt mit den Schriftarten und Farben aus dem Layout anpassen, um eine einzigartige Kopfzeile in voller Breite zu erstellen.

Einstellungen des Header-Moduls für den Vollbildmodus

Hier sind die Schritte für jeden Abschnitt der Einstellungen im Fullscreen-Header-Modul.

Text

Fügen Sie zuerst den Text hinzu , der in der Kopfzeile in voller Breite sichtbar sein wird. Dazu gehören Titel, Untertitel, Inhalt (ich verwende dafür den integrierten Dummy-Text von Divi) und der Schaltflächentext.

• Titel: Divi Photography Studio
• Untertitel: Fotografie
• Schaltfläche 1: Projektbeschreibung
• Schaltfläche 2: Projektplanung
• Körper: Inhalt

Bilder

Fügen Sie als Nächstes das Bild hinzu . Dies wird auf der rechten Seite der Kopfzeile in voller Breite angezeigt und verschiebt den Text nach links.

• Kopfbild: Ihre Wahl

Hintergrund

Scrollen Sie nach unten zum Hintergrund und stellen Sie die Farbe auf #f6f5ee ein.

• Farbe: #f6f5ee

Layout

Wechseln Sie als Nächstes zur Registerkarte Design. Aktivieren Sie Vollbildmodus .

• Vollbild machen: Ja

Scrollen Sie nach unten

Aktivieren Sie als Nächstes das Scroll-Down-Symbol . Ändern Sie die Farbe für Desktops und Tablets in Schwarz und für Telefone in Weiß. Mit dem Bild, das ich ausgewählt habe, wird das Symbol auf dem Bild unten für Telefone angezeigt, wodurch es mit den Farben des Bildes sichtbar ist. Ändern Sie die Symbolgröße auf 70 Pixel für Desktops, 60 Pixel für Tablets und 50 Pixel für Telefone.

• Scroll-Down-Button anzeigen: Ja
• Symbolfarbe: #000000 Desktop und Tablet, #ffffff Telefon
• Größe: 70 Pixel Desktop, 60 Pixel Tablet, 50 Pixel Telefon

Titeltext

Als Nächstes passen wir den Titeltext an. Setzen Sie den Text auf H1 und wählen Sie Inter für die Schriftart. Stellen Sie das Gewicht auf fett, die Ausrichtung auf zentriert und die Farbe auf schwarz ein.

• Überschrift: H1
• Schrift: Inter
• Gewicht: Fett
• Ausrichtung: Mitte
• Farbe: #000000

Wir verwenden drei Größen für die Schriftgröße : 75 Pixel für Desktops , 40 Pixel für Tablets und 24 Pixel für Telefone. Ändern Sie die Zeilenhöhe auf 1,2 m.

• Größe: 75 Pixel Desktop, 40 Pixel Tablet, 24 Pixel Telefon
• Zeilenhöhe: 1,2 cm

Hauptteil

Scrollen Sie als Nächstes nach unten zu Body Text . Wählen Sie Open Sans für die Schriftart. Stellen Sie die Ausrichtung nach links und die Farbe auf Schwarz ein.

• Schriftart: Offene Sans
• Ausrichtung: Links
• Farbe: #000000

Stellen Sie die Schriftgröße auf 16 Pixel für Desktops, 15 Pixel für Tablets und 14 Pixel für Telefone ein. Ändern Sie die Zeilenhöhe auf 1,8 m.

• Größe: 16px Desktop, 15px Tablet, 14px Telefon
• Zeilenhöhe: 1,8 m

Untertiteltext

Scrollen Sie als Nächstes nach unten zu Untertiteltext . Ändern Sie die Schriftart in Inter. Stellen Sie das Gewicht auf fett, den Stil auf TT, die Ausrichtung auf zentriert und die Farbe auf #ff5a17 ein.

• Schrift: Inter
• Gewicht: Fett
• Stil: TT
• Ausrichtung: Mitte
• Farbe: #ff5a17

Ändern Sie die Größe für alle drei Bildschirmgrößen auf 14 Pixel. Ändern Sie den Buchstabenabstand auf 1px und die Zeilenhöhe auf 1,4em.

• Größe: 14px
• Buchstabenabstand 1px
• Zeilenhöhe: 1,8 m

Knopf eins

Scrollen Sie als Nächstes nach unten zu Schaltfläche Eins und wählen Sie Benutzerdefinierte Stile für Schaltfläche verwenden aus . Ändern Sie die Textfarbe in Schwarz.

• Benutzerdefinierte Stile für Schaltflächen verwenden: Ja
• Größe: 20 Pixel Desktop, 18 Pixel Tablet, 16 Pixel Telefon
• Textfarbe: #000000

Ändern Sie die Hintergrundfarbe in Weiß und stellen Sie die Rahmenbreite und den Radius auf 0 Pixel ein.

• Hintergrundfarbe: #ffffff
• Rahmenbreite der Schaltfläche 1: 0px
• Randradius der Schaltfläche Eins: 0px

Ändern Sie die Schriftart in Inter und das Gewicht in Fett.

• Schrift: Inter
• Gewicht: Fett

Wählen Sie als Nächstes Ihr bevorzugtes Symbol aus, ändern Sie die Farbe in Schwarz, legen Sie die Schaltflächenplatzierung auf der linken Seite fest und deaktivieren Sie Nur Symbol beim Schweben für Schaltfläche eins anzeigen.

• Symbol: Ihre Wahl
• Symbolfarbe: #000000
• Symbolplatzierung für Taste 1: Links
• Symbol nur beim Hover für Schaltfläche 1 anzeigen: Nein

Scrollen Sie schließlich nach unten zu den Polsteroptionen von Button One. Wir verwenden für jede Bildschirmgröße eine andere Polsterung. Verwenden Sie für Desktops 20 Pixel für Oben und Unten und 40 Pixel für Links und Rechts. Ändern Sie für Tablets die obere und untere Polsterung auf 16 Pixel. Ändern Sie auf Telefonen die obere und untere Polsterung auf 12 Pixel. Lassen Sie die linke und rechte Polsterung für alle drei gleich.

• Desktop-Polsterung: 20 Pixel oben und unten, 40 Pixel links und rechts
• Tablet-Polsterung: 16 Pixel oben und unten, 40 Pixel links und rechts
• Telefonpolsterung: 12 Pixel oben und unten, 40 Pixel links und rechts

Knopf zwei

Scrollen Sie zuletzt nach unten zu Button Two . Wählen Sie Benutzerdefinierte Stile für Schaltfläche verwenden aus . Stellen Sie die Schriftgröße auf 20 Pixel für Desktops, 19 Pixel für Tablets und 16 Pixel für Telefone ein. Ändern Sie die Textfarbe in Weiß.

• Benutzerdefinierte Stile für Schaltflächen verwenden: Ja
• Größe: 20 Pixel Desktop, 18 Pixel Tablet, 16 Pixel Telefon
• Textfarbe: #ffffff

Ändern Sie die Hintergrundfarbe in #ff5a17. Stellen Sie die Randbreite und den Radius auf 0px ein.

• Hintergrundfarbe: #ff5a17
• Randbreite der Schaltfläche 2: 0px
• Randradius der Schaltfläche Zwei: 0px

Ändern Sie als Nächstes die Schriftart in Inter und die Gewichtung in Fett.

• Schrift: Inter
• Gewicht: Fett

Wählen Sie Ihr bevorzugtes Symbol. Ändern Sie die Farbe in Schwarz, legen Sie die Schaltflächenplatzierung auf der linken Seite fest und deaktivieren Sie Nur Symbol beim Schweben für Schaltfläche Zwei anzeigen.

• Symbol: Ihre Wahl
• Symbolfarbe: #000000
• Symbolplatzierung für Taste Zwei: Links
• Symbol nur beim Hover für Schaltfläche zwei anzeigen: Nein

Scrollen Sie zuletzt nach unten zu den Polsteroptionen von Button Two. Verwenden Sie für Desktops 20 Pixel für Oben und Unten und 40 Pixel für Links und Rechts. Ändern Sie auf Tablets die obere und untere Polsterung auf 16 Pixel. Ändern Sie für Telefone die obere und untere Polsterung auf 12 Pixel. Schließen Sie das Modul und speichern Sie Ihre Arbeit.

• Desktop-Polsterung: 20 Pixel oben und unten, 40 Pixel links und rechts
• Tablet-Polsterung: 16 Pixel oben und unten, 40 Pixel links und rechts
• Telefonpolsterung: 12 Pixel oben und unten, 40 Pixel links und rechts

Header-Ergebnisse im Vollbildmodus

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

Schreibtisch

Tablette

Telefon

Abschließende Gedanken zum Erstellen eines Vollbild-Headers mit dem Fullwidth-Header-Modul von Divi

Das ist unser Blick darauf, wie Sie mit Ihrem Divi Fullwidth Header-Modul einen Vollbild-Header erstellen. Der Prozess ist einfach und sieht auf jedem Gerät gut aus. Das Hinzufügen der Schaltfläche „Nach unten scrollen“ ist eine hervorragende visuelle Darstellung, die den Benutzern anzeigt, dass sie scrollen können. Das Entwerfen eines Vollbild-Headers ähnelt dem Entwerfen eines Hero-Bereichs. Das Befolgen einiger einfacher Richtlinien kann Ihnen dabei helfen, erstaunliche Vollbild-Header mit dem Fullscreen-Header-Modul von Divi zu erstellen.

Wir wollen von dir hören. Haben Sie Ihren Divi Fullwidth Header im Vollbildmodus erstellt? Lass es uns in den Kommentaren wissen.