Ein Überblick und eine Überprüfung des Header-Layout-Pakets von Divi Life

Das Header Layout Pack von Divi Life ist ein Satz von Headern für den Divi Theme Builder, der so gestaltet werden kann, dass er gut zu jeder Divi-Website passt. Die Header heben sich durch ein neues Styling mit Code von der Masse ab. Das Layout-Paket enthält sechs Header-Designs mit jeweils drei Stilen. In diesem Artikel sehen wir uns das Header-Layout-Paket an, um Ihnen bei der Entscheidung zu helfen, ob es Ihren Anforderungen entspricht.

Importieren des Divi Life-Header-Layout-Pakets

Bevor Sie die Layouts mit dem Divi Theme Builder verwenden, müssen Sie sie in Ihre Divi-Bibliothek importieren. Glücklicherweise ist dies ein einfacher und unkomplizierter Vorgang:

1. Laden Sie die Layouts herunter und entpacken Sie sie in einen Ordner auf Ihrem Computer.
2. Gehen Sie im WordPress-Dashboard-Menü zu Divi > Divi-Bibliothek .
3. Wählen Sie oben auf dem Bildschirm Importieren und Exportieren aus.
4. Wählen Sie im Popup Importieren , wählen Sie Datei auswählen und navigieren Sie zu dem Layout, das Sie hochladen möchten (wählen Sie ALLE-Divi-Life-Header-Templates, wenn Sie alle auf einmal hochladen möchten.
5. Klicken Sie auf Divi Builder-Layouts importieren und warten Sie, bis der Upload abgeschlossen ist.

Die Layouts sind nun in Ihrer Bibliothek verfügbar. Im obigen Beispiel habe ich ausgewählt, alle Vorlagen hochzuladen. Der Theme Builder hat nun Zugriff auf alle Layouts. Sie müssen lediglich Code- und Menüanpassungen an Header 1 vornehmen. Der Rest funktioniert so wie er ist.

Erstellen eines globalen Headers im Divi Theme Builder

Öffnen Sie den Divi Theme Builder und klicken Sie auf , um einen globalen Header hinzuzufügen. Wählen Sie Aus Bibliothek hinzufügen .

Wählen Sie die Registerkarte Ihre gespeicherten Layouts und wählen Sie das gewünschte Layout aus. Warten Sie, bis es importiert wurde.

Klicken Sie auf das Bearbeitungssymbol, um das Layout anzupassen.

Ich habe Header-1-a ausgewählt. Dies zeigt das Layout in der Drahtmodellansicht. Es enthält ein Codemodul mit benutzerdefiniertem CSS und JS. Viele der Module enthalten Klassen-IDs für das benutzerdefinierte CSS. Ein Teil des Codes wird möglicherweise nicht in der Theme-Builder-Vorschau ausgeführt. Ich empfehle, den Header im Frontend anzuzeigen.

Wenn Sie Änderungen vornehmen möchten und die Kopfzeile nicht angezeigt werden soll, bis die Änderungen vorgenommen wurden, können Sie eine Testseite erstellen und dieser Seite die Kopfzeile zuweisen, bevor Sie sie zu einer globalen Kopfzeile machen.

Ändern von Inhalt und Stil

Als nächstes müssen Sie nur Ihr Menü auswählen, Ihr Logo hinzufügen und die Farben an Ihre Website anpassen. Der Header verwendet die Standardmodule, so dass dies wie jeder Header funktioniert. Ich habe mein Menü im obigen Beispiel ausgewählt.

Die Schaltfläche verwendet bereits benutzerdefinierte Stile. Fügen Sie einfach Ihre entworfenen Farben und Schriftarten hinzu. Klicken Sie auf , um die Änderungen zu speichern.

Stellen Sie außerdem sicher, dass Sie die Änderungen auf dem Hauptbildschirm speichern. Ich habe einem bestimmten Beitrag eine Version des Headers hinzugefügt, damit ich den Header testen kann, bevor ich ihn in die Standard-Website-Vorlage einfüge und global mache.

Header-Beispiele

Hier sehen Sie, wie die Vorlagen mit meiner Testseite aussehen. Die 6 Layouts haben eine vorgestylte helle, dunkle und helle Version. Dies macht es einfacher, einen Header auszuwählen, der zu Ihrem Design passt, und ihn dann an Ihre Bedürfnisse anzupassen. Sie haben auch Schaltflächen, die beim Schweben die Farbe ändern.

Wir werden uns eine Mischung mit unterschiedlichen Hintergrundfarben und Bildschirmgrößen ansehen. Ich verwende die Homepage- und Landingpage-Layouts aus dem Pizzeria-Layoutpaket.

Kopfzeile 1-Layout

Header 1 enthält ein Codemodul, ein Menü, eine Suche und eine Schaltfläche zum Erstellen des CTA.

Der Importvorgang behält die Werte nicht korrekt bei, daher müssen drei Zeilen im CSS geändert werden.

Außerdem muss das Menü umbenannt werden und die CSS-Klasse muss dem Menü hinzugefügt werden. Glücklicherweise sind all diese Anpassungen einfach durchzuführen. Die Anleitung steht in der Dokumentation. Dies ist das einzige Mal, dass ich die Dokumentation während dieser Überprüfung benötigt habe.

Das Ergebnis ist ein elegantes Menü mit Trennlinien für die drei wichtigsten Menüpunkte links, der Rest des Menüs rechts, ein Suchfeld mit einem Symbol im Suchfeld und eine große CTA-Schaltfläche. So sieht es mit dem hellen Hintergrund aus. Ein Schatten trennt die Kopfzeile von der Seite.

Hier ist der dunkle Hintergrund. Ich fahre mit der Maus über den CTA, um zu zeigen, dass er seine Farbe ändert.

Die Kopfzeile verringert sich beim Scrollen in der Höhe. Die Elemente bleiben gleich groß.

Hier ist die Tablet-Ansicht. Die Menüpunkte werden innerhalb des Dropdown-Menüs platziert. Die drei Elemente der CSS-Klasse enthalten ein Styling, das sie von den anderen abhebt.

Die Telefonansicht stapelt den CTA unter dem Logo und behält auch das Styling für die Elemente mit der CSS-Klasse bei.

Kopfzeile 2 Layout

Header 2 verwendet ein Codemodul mit CSS- und JS-, Klappen-, Bild-, Text-, Social Media-, Menü- und Schaltflächenmodulen.

Dies ist Kopfzeile 2A. So sieht es auf einer dunklen Seite aus. Der Header deckt nicht die volle Breite der Site ab. Das obere Menü ist transparent und enthält Schaltflächen für soziale Netzwerke. Unten befinden sich der CTA und die Kontaktinformationen. Die Telefonnummer ist anklickbar.

Hier ist das Design auf einer hellen Seite. Ich mag, wie sich dieser CTA abhebt.

Nach dem Scrollen scrollt das obere Menü mit der Seite und das untere Menü bleibt oben.

Hier ist die Tablet-Ansicht. Das obere Menü scrollt mit der Seite, während das untere Menü klebt.

Hier ist die Telefonansicht. Der CTA wird unter dem Menü gestapelt. Die Kopfzeile scrollt mit der Seite weg.

Kopfzeile 3 Layout

Die Module für Header 3 umfassen Code, Social Media Follow, Menü und einen Button.

Hier ist Header 3B mit hellem Hintergrund. Der obere Abschnitt enthält Schaltflächen für soziale Netzwerke und die Suche, während der untere Abschnitt den CTA hinzufügt.

So sieht es vor einem dunklen Hintergrund aus.

Das obere Menü scrollt mit der Seite weg, während das untere Menü am oberen Rand des Bildschirms bleibt.

Hier ist die Tablet-Ansicht.

So stapelt die Telefonansicht die Elemente.

Kopfzeile 4 Layout

Header 3 enthält Code, mehrere Klappentexte, eine Schaltfläche, ein Menü und Social-Media-Follow-Module.

Hier ist Header 3C vor hellem Hintergrund. Die Oberseite enthält die Kontaktinformationen und den CTA, während die Unterseite die Social-Buttons zeigt.

So sieht es mit dunklem Hintergrund aus. Die Originalfarben sehen mit diesem Hintergrund toll aus. In diesem Beispiel fahre ich mit der Maus über den CTA.

So sieht dieser nach dem Scrollen aus. Der obere Abschnitt scrollt mit der Site und der untere Abschnitt bleibt hängen.

Dies ist die Tablet-Ansicht.

Die Telefonansicht stapelt die Elemente.

Kopfzeile 5 Layout

Header 5 enthält ein Codemodul, ein paar Klappentexte, Social Media Follow und Menümodule.

Hier ist Header 5C vor einem dunklen Hintergrund. Im oberen Bereich befinden sich eine anklickbare Telefonnummer, Schaltflächen für soziale Netzwerke und ein Link zum Kontaktformular. Das Rot und das Dunkelgrau heben sich gut ab.

Auf dem hellen Hintergrund sieht es auch gut aus. Der Kastenschatten ist auffälliger.

Die obere Hälfte des Menüs scrollt weiter, während die untere Hälfte am oberen Bildschirmrand haftet.

Hier ist die Tablet-Ansicht.

Dies ist die Telefonansicht. Ich mag die Art und Weise, wie sich der Inhalt des oberen Abschnitts stapelt.

Kopfzeile 6-Layout

Header 6 enthält ein Codemodul, 4 Klappentexte, ein Social Media Follow-Modul und ein Menümodul.

Dies ist Header 6B vor einem dunklen Hintergrund. Dieser hat drei Abschnitte: Der obere enthält Social-Buttons, der mittlere enthält Kontaktinformationen und der untere enthält die Menülinks.

Hier ist der Header vor einem hellen Hintergrund.

Die oberen 2 Abschnitte der Kopfzeile scrollen weg und der untere Abschnitt ist klebrig. Es fügt dem unteren Menü einen Kastenschatten hinzu, wenn es am oberen Rand des Bildschirms haftet.

Hier ist die Tablet-Ansicht. Es verschiebt die Telefonnummer nach oben.

Hier ist das Design in der Telefonansicht.

Kaufen

Das Header Layout Pack ist bei Divi Life für 49 US-Dollar erhältlich (für den Rest des Jahres für 5 US-Dollar erhältlich). Es kann auf unbegrenzten Websites für Sie und Ihre Kunden verwendet werden und beinhaltet den Zugriff auf alle zukünftigen Updates. Es umfasst auch Support und Dokumentation.

Gedanken beenden

Das Header Layout Pack für den Divi Theme Builder ist ein interessanter Satz von Layouts. CSS und JavaScript fügen Stile hinzu, die normalerweise nicht in einem Header verfügbar sind. Dies trägt dazu bei, dass die Kopfzeile ein ganz anderes Aussehen hat als die Standard-Kopfzeilen. Da jedes Design über mehrere vorgefertigte Optionen verfügt, ist es einfach, etwas zu finden, das zu Ihrer Website passt, ohne viele Änderungen vornehmen zu müssen. Das Styling passt bereits zu den kostenlosen Divi-Layouts von ET.

Die Header sehen professionell gestaltet aus und ich fand sie einfach zu bedienen. Ich habe mir nur einige davon angeschaut. Das Arbeiten mit Kopfzeile 1 ist das einzige Layout, das komplizierte Schritte erfordert. Es ist nicht so schwer, wenn Sie die Anweisungen lesen (raten Sie, woher ich das weiß). Denken Sie nur daran, dass es mehr Schritte erfordert als die anderen.

Wenn Sie sich für professionell gestaltete Header für den Divi Theme Builder interessieren, ist das Header Layout Pack von Divi Life einen Blick wert.

Wir wollen von dir hören. Hast du das Header Layout Pack von Divi Life ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über PureSolution / shutterstock.com