So stylen Sie den Hintergrund Ihres Header-Moduls in voller Breite

Veröffentlicht: 2022-09-28

Das Fullwidth Header-Modul von Divi macht es einfach, in nur wenigen Minuten einen beeindruckenden Hero-Bereich für Ihre Website zu entwerfen. Ein Hero-Bereich ist der allererste Bereich Ihrer Website, den Ihre Besucher sehen werden, also möchten Sie, dass er gebrandet, informativ und überzeugend ist. Zum Glück ist der Divi Fullwidth Header vollgepackt mit Inhaltsoptionen: Kopfzeilentext, Untertiteltext, Textkörper, zwei Bilder und zwei Schaltflächen. Wir werden all diese Elemente heute in unseren Kopfzeilen mit voller Breite verwenden.

In diesem Beitrag zeigen wir 3 Möglichkeiten, den Hintergrund Ihres Headers in voller Breite mit auffälligen Designs zu gestalten. Bereit anzufangen? Tauchen wir ein!

Entwurfsvorschau

Werfen wir einen Blick auf die 3 Header in voller Breite, die wir heute entwerfen werden.

Divi Bushcraft-Community

Das erste Design verwendet die Hintergrundbildoptionen von Divi, um einen strukturierten Hintergrund zu erstellen, der einzigartig und markenkonform für die Bushcraft-Community ist.

Frau Nicoles 2. Klasse

Dieses zweite Design verwendet ein Hintergrundbild und einen Hintergrundverlauf, um einen sauberen, modernen und frischen Willkommens-Header für die 2. Klasse von Frau Nicole zu erstellen.

Immobilienmakler-Kopfzeile

Das dritte Design verwendet ein Hintergrundbild, einen Hintergrundverlauf und ein Hintergrundmuster, die alle kombiniert werden, um ein gehobenes und doch subtiles Design für die Homepage eines Maklers zu schaffen.

Laden Sie die Layouts KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugriff auf den Download zu erhalten, müssen Sie unseren Newsletter abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf „Herunterladen“. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich für den Divi-Newsletter an und wir senden Ihnen per E-Mail eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer erstaunlicher und kostenloser Divi-Ressourcen, Tipps und Tricks. Folgen Sie uns und Sie werden in kürzester Zeit ein Divi-Meister sein. Wenn Sie bereits abonniert sind, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen, um auf das Layoutpaket zuzugreifen.

Sie haben sich erfolgreich angemeldet. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi-Layoutpakete zu erhalten!

Gehen Sie wie folgt vor, um die Kopfzeilenvorlage in Ihre Divi-Bibliothek zu importieren:

Navigieren Sie zum Divi Theme Builder.
Klicken Sie oben rechts auf der Seite auf die Schaltfläche Importieren.
Wählen Sie im Portabilitäts-Popup die Registerkarte Import aus
Wählen Sie die Download-Datei von Ihrem Computer aus (stellen Sie sicher, dass Sie die Datei zuerst entpacken und die JSON-Datei verwenden).
Klicken Sie dann auf die Importschaltfläche.

Anschließend ist das Abschnittslayout in Divi Builder verfügbar.

Kommen wir zum Tutorial, sollen wir?

Was Sie für den Einstieg benötigen

Um zu beginnen, müssen Sie Folgendes tun:

Installieren Sie Divi auf Ihrer WordPress-Website.
Fügen Sie eine Seite hinzu, geben Sie ihr einen Titel und veröffentlichen Sie sie.
Aktivieren Sie den Visual Builder.

Einrichten unserer Seite

Sobald Sie auf die Schaltfläche „Divi Builder verwenden“ klicken, wird die Seite mithilfe der Drag-and-Drop-Builder-Oberfläche von Divi neu geladen. Drei Optionen werden angezeigt und für die heutigen Zwecke wählen Sie „Build From Scratch“, damit wir eine leere Tafel haben, auf der wir unsere Header in voller Breite erstellen können.

So gestalten Sie den Header der Divi Bushcraft Community in voller Breite

Fügen Sie einen Fulldwith-Abschnitt und einen Fullwidth-Header hinzu

Zuerst müssen wir unserer Seite einen Abschnitt mit voller Breite hinzufügen. Klicken Sie auf das „+“-Symbol, um die Abschnittsoptionen aufzurufen, und klicken Sie dann auf „Volle Breite“. Dadurch wird die Modulbibliothek mit voller Breite geladen, in der Sie „Header mit voller Breite“ aus den Optionen auswählen können. Dadurch wird das Header-Modul in voller Breite auf Ihre Seite geladen.

Fügen Sie den Inhalt hinzu

Jetzt fügen wir unseren Modulinhalt auf der Registerkarte Text hinzu. Konfigurieren Sie die folgenden Einstellungen:

Kopfzeilentext: Divi Bushcraft Community
Untertiteltext: Divi Bushcraft
Schaltfläche Nr. 1: Melden Sie sich noch heute an
Schaltfläche Nr. 2: Mehr erfahren
Haupttext: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestiasexcepturi sint occaecati cupiditate non-provident.

Gestalten Sie den Hintergrund

Dieses Design verwendet ein Hintergrundbild aus dem kostenlosen vorgefertigten Layoutpaket von Divi Bushcraft. Sie können alle Bilder aus diesem Layoutpaket in diesem Beitrag erhalten. Scrollen Sie einfach bis zum Ende des Beitrags und klicken Sie, um die hochauflösenden Bilder herunterzuladen.

Hintergrundbild hinzufügen

Sobald Sie die Fotos haben, fügen Sie ein Hintergrundbild hinzu.

Klicken Sie auf das dritte Symbol, das Bildsymbol.
Klicken Sie auf „Hintergrundbild hinzufügen“. Dadurch wird die Medienbibliothek geöffnet, in der Sie ein neues Foto hochladen oder ein Foto aus Ihrer Medienbibliothek auswählen können.
Stellen Sie dann den Mischmodus für das Hintergrundbild auf Überlagerung ein.
Klicken Sie auf das erste Symbol, das Farbeimersymbol, und legen Sie eine Hintergrundfarbe fest von: rgba(10,10,10,0.3)

Wählen Sie das Layout

Wählen Sie unter den Designeinstellungen auf der Registerkarte Layout die Ausrichtung mittig aus. Schalten Sie die Option „Vollbild erstellen“ auf „Ja“.

Titeltext formatieren

Gestalten Sie den Titeltext, indem Sie diese Einstellungen konfigurieren:

Titelüberschriftenebene: H1
Titelschrift: Josefin Sans
Schriftstärke des Titels: Fett
Titelschriftstil: Großbuchstaben
Titeltextgröße: 7rem

Fließtext formatieren

Gestalten Sie den Textkörper, indem Sie diese Einstellungen konfigurieren:

Hauptschrift: Josefin Sans
Körpertextgröße: 20px

Untertiteltext formatieren

Gestalten Sie den Untertiteltext, indem Sie diese Einstellungen konfigurieren:

Untertitelschrift: Josefin Sans
Untertitelschriftstärke: Semi Bold
Untertitel-Schriftstil: Großbuchstaben
Buchstabenabstand Untertitel: 3px
Untertitelzeilenhöhe: 5em

Stiltaste Nr. 1

Lassen Sie uns jetzt die Knöpfe stylen! Konfigurieren Sie für Schaltfläche eins die folgenden Einstellungen:

Verwenden Sie benutzerdefinierte Stile für Schaltfläche Eins: Ja
Textgröße der Schaltfläche 1: 14px
Textfarbe für Schaltfläche 1: #666b4a
Schaltfläche Eins Hintergrund: #ead5a4
Rahmenbreite der Schaltfläche 1: 0px
Randradius der Schaltfläche Eins: 0px
Buchstabenabstand der Schaltfläche Eins: 3px
Button One Schriftstil: Großbuchstaben
Polsterung von Schaltfläche 1: 15 Pixel oben und unten; 25px links und rechts.

Stiltaste Nr. 2

Um Taste 2 zu stylen, konfigurieren Sie die folgenden Einstellungen:

Verwenden Sie benutzerdefinierte Stile für Schaltfläche Eins: Ja
Textgröße der Schaltfläche 1: 14px
Textfarbe für Schaltfläche 1: #ead5a4
Schaltfläche Eins Hintergrund: #666b4a
Rahmenbreite der Schaltfläche 1: 0px
Randradius der Schaltfläche Eins: 0px
Buchstabenabstand der Schaltfläche Eins: 3px
Button One Schriftstil: Großbuchstaben
Polsterung von Schaltfläche 1: 15 Pixel oben und unten; 25px links und rechts.

Und voilà! Sie haben einen wunderschön gestalteten Header in voller Breite mit einem strukturierten Hintergrundbild mit einem Overlay für die Divi Bushcraft Community.

So gestalten Sie den Fullwidth-Header von Frau Nicole

Lassen Sie uns jetzt einen Header in voller Breite für die 2. Klasse von Frau Nicole entwerfen! Dieser Header verwendet ein Hintergrundbild und einen Farbverlauf, um ein lustiges und frisches Design zu erstellen. Lass uns anfangen!

Fügen Sie eine neue Seite hinzu und fügen Sie dann einen Abschnitt in voller Breite und eine Kopfzeile in voller Breite hinzu