20 Flexbox -Header für Divi 5 (kostenloser Download!)

Flexbox erleichtert es, Header zu erstellen, die sauber aussehen, sich auf verschiedene Bildschirmgrößen anpassen und in Divi 5 einfach anpassen können. In diesem kostenlosen Paket finden Sie 20 eindeutige Flexbox -Header -Designs, die jeweils mit Divi 5 -Layout -System für eine präzise Ausrichtung und reaktionsschnelle Steuerung erstellt werden. Unabhängig davon, ob Sie die vorhandenen globalen Stile Ihrer Website verwenden oder mit einem vorgefertigten Design beginnen möchten, finden Sie hier beide Optionen.

Vorschau & Live -Demo

Werfen wir einen Blick auf alle 20 Flexbox -Header in diesem Paket. Dieses Paket ist kostenlos, um den Beitrag weiter unten herunterzuladen.

Abonnieren Sie unseren YouTube -Kanal

Live -Demo anzeigen

Laden Sie 20 Flexbox -Header für Divi 5 herunter

Holen Sie sich alle 20 Flexbox -Header kostenlos, einschließlich Standardversionen und Priesterversionen. Jeder Header ist bereit, in Ihre Divi -Bibliothek zu importieren und im Themenbauer zu verwenden. Laden Sie einfach herunter und beginnen Sie mit dem Aufbau.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Treten Sie dem Divi -Newsletter bei und wir senden Ihnen eine Kopie des ultimativen Divi -Landing -Layout -Pakets sowie Tonnen anderer erstaunlicher und kostenloser Divi -Ressourcen, Tipps und Tricks per E -Mail. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi -Meister sein. Wenn Sie bereits abonniert sind, geben Sie einfach Ihre E -Mail -Adresse unten ein und klicken Sie auf Download, um auf das Layoutpaket zuzugreifen.

HERUNTERLADEN

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

Was ist enthalten (42 Exporte)

Sobald Sie den Ordner heruntergeladen und entpackt, finden Sie alle 42 Layout -Exporte, die sich ordentlich in Standard- und Pressversionen als einzelne Header und als vollständige „All -Header“ -Packs organisiert haben.

Standard - einzelne Header (20) → Verwendet Ihre globalen Stile.
Standard - alle Header (1) → Vollständiges Paket mit Ihren globalen Stilen.

Prestagelte-Einzelhochgeber (20) → Beinhaltet Inline-Styling für einen sofortigen, vorgefertigten Look.
Prestagelte - Alle Header (1) → Vollpack mit Inline -Styling.

So installieren Sie die Layouts

Halten Sie Ihren Download -Ordner in der Nähe, um sie auf Ihre Divi -Website zu importieren.

1. Importieren Sie Layouts in die Divi -Bibliothek

Gehen Sie zur Divi → Divi -Bibliothek.

Klicken Sie dort auf die Schaltfläche Import & Export, um die Dateien zu installieren.

Suchen Sie nach der FlexBox Header -Layouts (All) -Datei (alle) und klicken Sie, um sie zu importieren.

2. Erstellen Sie eine neue Header -Vorlage

Gehen Sie zu Divi → Theme Builder.

Erstellen Sie eine neue Header -Vorlage oder öffnen Sie eine vorhandene.

3. Laden Sie das Header -Layout hochladen

Sobald Sie sich im Headerbereich befinden, können Sie die Divi -Bibliothek verwenden, um Ihr Header -Layout Ihrer Wahl auszuwählen. Klicken Sie in der oberen linken Ecke des Themas Builder auf die Schaltfläche Layout hinzufügen .

Wählen Sie gespeichertes Layout .

Klicken Sie auf das Header -Layout, das Sie dem Themenbauer hinzufügen möchten.

Klicken Sie auf die Schaltfläche dieser Layout, um den Header zu laden.

Stellen Sie sicher, dass Sie Ihre neuen Änderungen des Header- und Theme Builders speichern.

Standard gegen Prestage: Welches sollten Sie auswählen?

Wenn Sie den Download -Ordner öffnen, sehen Sie zwei Versionen jedes Headers: ** Standard ** und ** prestiert **. Sie sind genauso gebaut, der Unterschied besteht darin, wie sie mit dem Styling umgehen.

Standard -Header erben ihren Look von Ihren globalen Stilen. Ihre Markenfarben, Schriftarten und Knopfstile werden automatisch angewendet. Wenn Sie Ihre globalen Stile bereits eingerichtet haben, ist Standardeinstellung der schnellste Weg, um diese Header Ihrer Website hinzuzufügen und sofort zu Ihrem Design zugeschnitten zu sein.

Prestimierte Header sind mit all ihren Stilen eingebacken: Farben, Schriftarten und Knopfdesigns sind inline. Sie sehen genauso aus wie die Voransichten direkt von der Box. Dies ist großartig, wenn Sie eine schnelle Demo erstellen, Ideen testen oder das genaue Design in den Screenshots erfassen möchten, ohne Ihre Variablen zu berühren.

Kurz gesagt, standardmäßig, wenn Sie möchten, dass die Header sich nahtlos in Ihre vorhandenen Site -Stile verschmelzen. Wählen Sie Prestyled, wenn Sie den vorgefertigten Look in den Voransichten gezeigt haben möchten.

Anpassen der Header

Das Flexbox -Layout -System von Divi 5 bietet Ihnen leistungsstarke Tools, um Layouts zu optimieren und gleichzeitig alles reaktionsschnell zu halten. Hier erfahren Sie, wie Sie diese Header an den Stil Ihrer Website anpassen.

1. Einstellen der Flex -Einstellungen

Wählen Sie die Zeile mit den Header -Elementen aus. Suchen Sie auf der Registerkarte "Design" das Layout -Dropdown -Menü. Erweitern Sie es, um die Flexbox -Einstellungen anzuzeigen.

Hier können Sie die Layout -Richtung von Zeile zur Umkehrung, Spalte oder Spalte umgekehrt ändern. Mit dieser Funktion können Sie die Richtung Ihres Layouts ändern.

Mit den Einstellungen für die Rechtfertigung können Sie steuern, wie Flexelemente entlang der Hauptachse verteilt sind - die primäre Richtung des Flex -Behälters, das durch die Layout -Richtung definiert ist. Es bestimmt den Abstand und die Ausrichtung von Elementen horizontal oder vertikal, abhängig von der Layout -Richtung.

Ausgerichteter Elemente ermöglichen es Ihnen, zu steuern, wie Flexelemente in einer Spalte, Zeile oder einem Abschnitt ausgerichtet sind. Es bestimmt, wie Flexelemente relativ zueinander entlang der Kreuzachse innerhalb des Behälters positioniert sind. Sie können Start, Mitte, Ende und Stretch auswählen.

Schließlich steuert das Layout -Verpackung , ob Elemente in einem Flex -Behälter auf eine einzelne Linie gezwungen werden oder auf mehrere Zeilen einwickelt werden, wenn sie die Breite des Containers überschreiten (oder Höhe, wenn die Layout -Richtung auf die Spalte eingestellt ist).

2. Zeigen/ausblenden Elemente an verschiedenen Haltepunkten

Mit Divi 5 können Sie die Sichtbarkeit von Abschnitten, Zeilen, Spalten oder einzelnen Modulen an bestimmten Haltepunkten umschalten. Dies ist nützlich, um Layouts auf kleineren Bildschirmen zu vereinfachen, z. B. das Verstecken einer sekundären CTA -Taste oder das Ersetzen eines vollständigen Menüs durch ein mobiles Menü.

Sie möchten beispielsweise die Social -Media -Symbole in einem Header ausblenden, um Platz auf mobilen Bildschirmen zu sparen. Navigieren Sie im Desktop -Haltepunkt zur Registerkarte Erweitert. Erweitern Sie das Dropdown -Menü der Sichtbarkeit. Klicken Sie anschließend auf das Telefon- und Tablet -Haltepunkt, um das Element auszublenden.

Verwenden Sie die reaktionsschnelle Vorschau von Divi 5, um den Header anzuzeigen. Beim Anzeigen des Layouts im Telefonzeitpunkt ist das versteckte Element sichtbar, aber ausgegraut, was darauf hinweist, dass es am vorderen Ende versteckt ist.

3. Fügen Sie bei Bedarf Links hinzu

Obwohl jedes Header -Layout bereit ist, aus der Box zu gehen, müssen Sie dennoch Links hinzufügen. In diesem Beispiel würden Sie Links zum Social Media folgen Modul hinzufügen. Klicken Sie hier, um die Einstellungen des Moduls zu erweitern. Klicken Sie auf der Registerkarte Inhalt auf das erste Symbol für soziale Medien, um die Einstellungen anzuzeigen.

Erweitern Sie den Link Dropdown und fügen Sie den Link zu Ihrem Social -Media -Konto im Feld Link -Link -URL hinzu.

Schützen Sie Ihren Header unbedingt, bevor Sie den Themenbauer verlassen.

Wenn Sie dies noch nicht getan haben, müssen Sie ein Menü für Ihre Website erstellen. Beenden Sie den visuellen Bauunternehmer und navigieren Sie zu Aussehen → Menüs. Fügen Sie dem Feld Menüname einen Namen hinzu.

Klicken Sie auf das Kontrollkästchen Primärmenü und dann auf Menü erstellen .

Klicken Sie zum Hinzufügen von Seiten zum Menü auf die Registerkarte anzeigen und wählen Sie die Seiten aus, die Sie im Menü ansehen möchten. Klicken Sie auf das Menü hinzufügen , um sie zuzuweisen.

Nehmen Sie zurück im Themenbauer bei Bedarf zusätzliche Änderungen vor. Wenn der Header beispielsweise den Schleifenbauer verwendet, müssen Sie möglicherweise die Reihenfolge der Links anpassen.

Verwenden Sie Divi 5 für den Bau Ihrer Header noch heute

Diese 20 Flexbox -Header sind eine schnelle Möglichkeit, Ihre Divi 5 -Builds zu beschleunigen, unabhängig davon, ob Sie an Ihren etablierten globalen Stilen arbeiten oder mit einem vorgefertigten Look beginnen. Laden Sie sie herunter, geben Sie sie in den Themenbauer und machen Sie sie zu Ihren eigenen. Flexbox übernimmt die Ausrichtung, damit Sie sich auf das Design konzentrieren können.