So animieren Sie Ihren globalen Header mit Divi

Ihr Header ist einer der wichtigsten Teile Ihrer Website. Es verbindet Ihre Seiten, Beiträge und Handlungsaufforderungen. Es ist auch eines der Dinge, nach denen Ihre Besucher automatisch suchen, damit sie keine Zeit damit verschwenden, das Gesuchte zu finden. Wenn Sie nach einer Möglichkeit suchen, Ihren Header hervorzuheben, wird Ihnen dieser Beitrag gefallen. Wir zeigen Ihnen, wie Sie Ihren benutzerdefinierten globalen Header mit dem Theme Builder von Divi animieren. Die Möglichkeiten sind endlos, aber wir zeigen Ihnen zwei Animationsbeispiele, mit denen Sie sofort loslegen können. Sie können die JSON-Dateien auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf die beiden Beispiele für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Laden Sie den animierten globalen Header KOSTENLOS herunter

Um den kostenlosen animierten globalen Header in die Hände zu bekommen, müssen Sie ihn zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste 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 einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

1. Gehen Sie zu Divi Theme Builder und beginnen Sie mit dem Erstellen des globalen Headers

Gehe zum Divi Theme Builder

Gehen Sie zunächst zum Divi Theme Builder in Ihrem WordPress-Backend.

Globalen Header von Grund auf neu erstellen

Klicken Sie auf „Globalen Header hinzufügen“ und fahren Sie fort, indem Sie „Globalen Header erstellen“ auswählen.

2. Erstellen Sie ein globales Header-Block-Design

Abschnittseinstellungen

Abstand

Sobald Sie sich im Vorlageneditor befinden, können Sie mit dem Erstellen des globalen Headers beginnen. Wir stellen sicher, dass wir ein 'Block'-Design haben, damit wir später Animationen zu zwei verschiedenen Containern hinzufügen können; Spalte + Modul. Öffnen Sie den Abschnitt, den Sie im Vorlageneditor bemerken können, und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Box Schatten

Fügen Sie als nächstes einen Boxschatten hinzu.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(13,60,216,0,24)

Z-Index

Und stellen Sie sicher, dass Sie den Z-Index des Abschnitts auch auf der Registerkarte "Erweitert" erhöhen. Dadurch wird sichergestellt, dass der globale Header-Inhalt über allen Seiten-/Post-Inhalten angezeigt wird.

• Z-Index: 99999

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Bildschirms einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Sichtweite

Stellen Sie sicher, dass Sie auch die Überläufe der Zeile auf "sichtbar" setzen.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Spalteneinstellungen (alle drei)

Hintergrundfarbe

Nachdem Sie die Zeileneinstellungen abgeschlossen haben, müssen Sie auch die Spalten formatieren. Öffnen Sie jede der Spalten und ändern Sie deren Hintergrundfarbe entsprechend:

• Spalte 1 Hintergrundfarbe: #effef
• Spalte 2 Hintergrundfarbe: #ffcb0f
• Spalte 3 Hintergrundfarbe: #2848ff

Abstand

Fügen Sie jeder Spalte auch eine benutzerdefinierte obere und untere Auffüllung hinzu.

• Obere Polsterung: 0.5vw (Desktop), 1vw (Tablet & Telefon)
• Untere Polsterung: 0.5vw (Desktop), 1vw (Tablet & Telefon)

Hauptelement

Und um sicherzustellen, dass der gesamte Spalteninhalt vertikal zentriert ist, fügen wir dem Hauptelement jeder Spalte drei Zeilen CSS-Code hinzu.

display: flex;
flex-direction: column;
justify-content: center;

Spalte 1 Z-Index

Öffnen Sie zu guter Letzt die Einstellungen von Spalte 1 und erhöhen Sie den z-Index in den Sichtbarkeitseinstellungen.

• Z-Index: 10

Menümodul zu Spalte 1 hinzufügen

Menü auswählen

Zeit zum Hinzufügen von Modulen, beginnend mit einem Menümodul in Spalte 1. Wählen Sie ein Menü Ihrer Wahl.

Logo hochladen

Laden Sie als nächstes Ihr Logo hoch.

Hintergrund entfernen

Fahren Sie fort, indem Sie die Hintergrundfarbe des Moduls entfernen.

Layout

Wechseln Sie zur Registerkarte Design und stellen Sie sicher, dass die folgenden Einstellungen für das Layout gelten:

• Stil: Linksbündig
• Richtung des Dropdown-Menüs: Abwärts

Menütexteinstellungen

Als nächstes gestalten Sie die Texteinstellungen:

• Menüschrift: Montserrat
• Menütextfarbe: #000000
• Menütextgröße: 0.7vw (Desktop), 2vw (Tablet), 3vw (Telefon)

Dropdown-Menüeinstellungen

Zusammen mit den Dropdown-Menüeinstellungen.

• Farbe der Dropdown-Menüzeile: #ffffff

Symboleinstellungen

Und ändern Sie auch die Farbe des Hamburger-Menüsymbols.

• Hamburger Menüsymbolfarbe: #2848ff

Größe

Fahren Sie fort, indem Sie die maximale Breite des Logos für verschiedene Bildschirmgrößen ändern.

• Max. Logobreite: 6vw (Desktop), 9vw (Tablet), 13vw (Telefon)

Abstand

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie einen linken und rechten Rand hinzufügen.

• Linker Rand: 2vw
• Rechter Rand: 2vw

Codemodul zu Spalte 1 hinzufügen

CSS-Code für VW-Reaktionsfähigkeit einfügen

Im Menümodul haben wir jetzt die Breiteneinheit des Ansichtsfensters für unsere Werte für Textgröße und Abstand verwendet. Wir haben dies getan, um sicherzustellen, dass Sie bis zu 8 Menüelemente auf verschiedenen Desktop-Bildschirmgrößen platzieren können, ohne dass sie sich in zwei Zeilen aufteilen. Wir müssen sicherstellen, dass der Abstand zwischen den Menüpunkten auch mit der vw-Einheit erstellt wird. Dazu fügen wir in Spalte 1 ein Code-Modul hinzu und fügen die folgenden Zeilen CSS-Code ein:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

Fügen Sie das Social Media Follow-Modul zu Spalte 2 hinzu

Soziale Netzwerke hinzufügen

Weiter zur nächsten Spalte, dort benötigen wir ein Social Media Follow Module. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu.

Soziale Netzwerkstile einzeln zurücksetzen

Fahren Sie fort, indem Sie die Einstellungen jedes Netzwerks zurücksetzen.

Ausrichtung

Vervollständigen Sie die Einstellungen des Moduls, indem Sie die Modulausrichtung ändern.

• Modulausrichtung: Mitte

Schaltflächenmodul zu Spalte 3 hinzufügen

Kopie hinzufügen

Weiter zur nächsten und letzten Spalte. Dort brauchen wir nur ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Ausrichtung

Wechseln Sie zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Vervollständigen Sie die Einstellungen des Moduls, indem Sie die Schaltfläche gestalten.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 1,2vw (Tablet), 2vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 0px
• Button-Schriftart: Montserrat
• Tastenschriftstärke: Ultra Bold
• Schaltflächenschriftart: Großbuchstaben

3. Passende Animation zu Elementen hinzufügen

Globale Header-Animationskombination Nr. 1

Spalte 1 Animation

Nachdem wir den globalen Header erstellt haben, ist es an der Zeit, die Animationen hinzuzufügen! Um die erste Animation neu zu erstellen, öffnen Sie die Einstellungen von Spalte 1 und fügen Sie die folgende Animation hinzu:

• Animationsstil: Zoom
• Animationsrichtung: Nach oben
• Anfangsdeckkraft der Animation: 100 %

Spalte 2 Animation

Fügen Sie als nächstes die folgenden Animationseinstellungen zu Spalte 2 hinzu:

• Animationsstil: Zoom
• Animationsrichtung: Unten
• Animationsverzögerung: 500 ms
• Anfangsdeckkraft der Animation: 100 %

Spalte 3 Animation

Vervollständigen Sie die Spalteneinstellungen, indem Sie der Spalte 3 die folgende Animation zuweisen:

• Animationsstil: Zoom
• Animationsrichtung: Nach oben
• Animationsverzögerung: 1000ms
• Anfangsdeckkraft der Animation: 100 %

Modulanimationen (alle drei Module)

Nachdem Sie die Spalteneinstellungen abgeschlossen haben, öffnen Sie jedes der Module einzeln und verwenden Sie die folgende Animation dafür:

• Animationsstil: Ausblenden
• Animationsverzögerung: 1500 ms

Globale Header-Animationskombination #2

Spalte 1 Animation

Möchten Sie stattdessen das zweite Animationsset neu erstellen? Öffnen Sie die Einstellungen von Spalte 1 und fügen Sie die folgende Animation hinzu:

• Animationsstil: Folie
• Animationsrichtung: Nach oben
• Anfangsdeckkraft der Animation: 100 %

Spalte 2 Animation

Verwenden Sie die folgenden Animationseinstellungen für Spalte 2 als nächstes:

• Animationsstil: Folie
• Animationsrichtung: Nach oben
• Animationsverzögerung: 500 ms
• Anfangsdeckkraft der Animation: 100 %

Spalte 3 Animation

Und vervollständigen Sie die Spalteneinstellungen, indem Sie die folgenden Animationseinstellungen auf Spalte 3 anwenden:

• Animationsstil: Folie
• Animationsrichtung: Nach oben
• Animationsverzögerung: 1000ms
• Anfangsdeckkraft der Animation: 100 %

Modulanimationen (alle drei Module)

Öffnen Sie dann jedes Modul einzeln und fügen Sie die folgende Animation hinzu:

• Animationsstil: Folie
• Animationsrichtung: Unten
• Animationsverzögerung: 1500 ms

4. Builder-Änderungen speichern und Ergebnis anzeigen

Sobald Sie die Animationseinstellungen abgeschlossen haben, können Sie den globalen Header speichern, den Theme Builder beenden und das Ergebnis auf Ihrer Website anzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf die Beispiele für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie Ihren globalen Header mit den integrierten Optionen von Divi und dem Theme Builder animieren. Dies ist eine großartige Möglichkeit, um auf den Header Ihrer Website aufmerksam zu machen. Mit den integrierten Animationsoptionen von Divi sind die Möglichkeiten endlos. Um Ihnen den Einstieg zu erleichtern, haben wir Ihnen zwei verschiedene Beispiele gezeigt. Sie konnten die JSON-Dateien auch kostenlos herunterladen!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.