Ein Überblick über Divi-Header-Typen, Tutorials und Freebies

Seit der Divi Theme Builder herausgekommen ist, hat sich die Art und Weise, wie wir Divi-Header erstellen, zum Besten geändert. Wir können jedes gewünschte Element hinzufügen, es mit den integrierten Designoptionen von Divi stylen und ein nahtlos ansprechendes Erlebnis schaffen. In den letzten Monaten haben wir im Auge behalten, wie wir Ihnen mit Tutorials und Werbegeschenken helfen können, das Beste aus Ihren Header-Designs herauszuholen. Irgendwann kann das Navigieren durch all diese verschiedenen Header-Typen, Tutorials und Freebies etwas verwirrend werden, deshalb haben wir diesen Beitrag eingerichtet, auf den Sie jederzeit zurückkommen können. In diesem Beitrag werden die verschiedenen Header-Typen vorgestellt, die Sie erstellen können, einschließlich einer kostenlosen Download-Datei. Neben dem kostenlosen Download erhalten Sie eine Schritt-für-Schritt-Anleitung, die Ihnen hilft zu verstehen, was Sie erstellen und wie Sie die Dinge an Ihre eigenen Bedürfnisse anpassen können.

Der zweite Teil dieses Beitrags konzentriert sich auf einige Tipps und Tricks, die oft in der Divi-Community gefragt wurden. Wir zeigen Ihnen, wie Sie ein bestimmtes Problem lösen oder ein Design erzielen, ohne Zeit damit zu verlieren, es selbst herauszufinden. Zu guter Letzt haben wir alle Header-Freebies aufgelistet, die Sie herunterladen und sofort verwenden können.

Header-Typen entdecken
Entdecken Sie Header-Tipps und -Tricks
Header-Freebies entdecken

Kopfzeilentypen

1. Regulärer Header

Das erste Tutorial zum Header-Typ, das im Blog veröffentlicht wurde, als der Divi Theme Builder veröffentlicht wurde, ist ein normaler Header. Dieses Tutorial konzentriert sich darauf, sich mit der Divi Theme Builder-Umgebung vertraut zu machen und einen globalen Header zu erstellen. Wir haben eine Top-Leiste mit einem Logo, Social Follow-Symbolen und einer Schaltfläche hinzugefügt. Die Navigationsleiste enthält dynamisch die Menüpunkte, die im Backend Ihrer WordPress-Website eingerichtet werden können.

Besuchen Sie das Tutorial

2. Sticky Header

Wenn Sie einen Header einrichten möchten, der auch klebrig ist, sollten Sie sich mit diesem Beitrag vertraut machen. Das Tutorial zeigt Ihnen nicht nur, wie Sie eine richtige Kopfzeilenstruktur einrichten, einschließlich der oberen Leiste, sondern auch, wie Sie Ihre Kopfzeile mit den integrierten Sticky-Optionen von Divi kleben können. Auch die Stile der Elemente in der Kopfzeile ändern sich beim Scrollen, was der Kopfzeile ein völlig neues Aussehen verleiht.

Besuchen Sie das Tutorial

3. Vollbild-Kopfzeile

Eine Kopfzeilenleiste oben ist natürlich nicht die einzige Möglichkeit, die Navigation auf Ihrer Website zu ermöglichen, daher haben wir als nächstes eine Vollbild-Kopfzeile. In diesem Tutorial zeigen wir Ihnen, wie Sie mit Divi einen kompletten benutzerdefinierten Vollbild-Header erstellen. Alle Elemente in Ihrem Menü sind Module und die Klickfunktion wird durch einen JQuery-Code aktiviert, der im Tutorial und in der Download-Datei enthalten ist. Ein paar Werbegeschenke, die diesen ähnlichen Ansatz verwenden, sind:

1. Vorlage für eine PR-Firma-Vorlage für Kopf- und Fußzeilen
2. Italienisches Restaurant Kopf- und Fußzeilenvorlage
3. Kopf- und Fußzeilenvorlage für freiberufliche Autoren
4. Vorlage für Kopf- und Fußzeilen für Finanzberater

Besuchen Sie das Tutorial

4. Einschub-Header

Als nächstes haben wir einen Header, der von der rechten Seite eingeschoben wird. Auch dieses Tutorial basiert auf den eingebauten Elementen von Divi. Sie können alles, was Sie wollen, in Ihr Slide-In-Menü einfügen und eine vollständig reaktionsfähige Umgebung mit reaktionsschnellen Optionen erstellen. Die Klickfunktion hat ihre Form durch einen benutzerdefinierten JQuery-Code angenommen, der im Tutorial sowie in der JSON-Datei der kostenlosen Vorlage enthalten ist.

Besuchen Sie das Tutorial

5. Schieben Sie die Push-Header nach unten

Ein weiterer cooler Header-Typ in unserer Liste ist ein Slide-Down-Push-Header. Wenn auf das Hamburger-Symbol geklickt wird, gleitet die Kopfzeile von oben nach unten und schiebt den Seiteninhalt nach unten. Dies ergibt einen lustigen und schönen Effekt über alle Bildschirmgrößen hinweg.

Besuchen Sie das Tutorial

6. Vertikale Navigation

Eine andere Möglichkeit, Besuchern eine mühelose Navigation zu ermöglichen, ist die Verwendung einer vertikalen Navigationsleiste. Wenn Sie nach einer Möglichkeit suchen, dies im Divi Theme Builder zu tun, lesen Sie dieses Tutorial. Die vertikale Navigation nimmt einen eigenen Platz im Browser ein, wodurch die Breite des Seiteninhalts verringert wird und eine schöne Seitenstruktur nebeneinander entsteht.

Besuchen Sie das Tutorial

7. Transparenter schwebender Header

Wenn Sie Ihrer Seite einen Header hinzufügen oder Inhalt posten möchten, ist dieses Tutorial genau das Richtige für Sie! Wir verwenden einen transparenten Header mit drei verschiedenen Elementen; ein Logo, ein Menü und eine Schaltfläche. Diese drei Elemente werden durch eine absolute CSS-Position über dem Seiteninhalt platziert. Das Ergebnis ist auch sehr reaktionsschnell und liefert ein schönes zusammenhängendes Ergebnis auf Ihrer Website.

Besuchen Sie das Tutorial

8. Transparenter klebriger Header

Dieses Tutorial ist dem vorherigen etwas ähnlich, mit einem großen Unterschied; Sobald Besucher auf der Seite oder dem Beitrag, auf dem sie sich befinden, nach unten scrollen, wird die Navigationsleiste klebrig und ändert den Stil. Auf diese Weise können Sie das Beste aus Ihrem Heldenbereichsdesign am oberen Rand der Seite herausholen und gleichzeitig eine mühelose Navigation beibehalten, während die Besucher nach unten scrollen.

Besuchen Sie das Tutorial

9. Gedrehte Kopfzeile

Wenn Sie auf der Suche nach einem Out-of-the-Box-Design für Ihre Website sind, sollten Sie sich für einen gedrehten transparenten Header entscheiden. Dieser Header-Typ wird an der Seite Ihrer Website platziert und begleitet Ihre Besucher während ihres gesamten Besuchs auf Ihren Seiten. Es verleiht Ihrem Desktop-Design ein anspruchsvolleres Erscheinungsbild und behält gleichzeitig das mühelose Top-Bar-Erlebnis auf kleineren Bildschirmgrößen.

Besuchen Sie das Tutorial

10. Benutzerdefiniertes eCommerce-Dropdown

Je größer Ihre Website wird, desto schwieriger ist es, eine gute Möglichkeit zu finden, alle Seiten Ihrer Website aufzulisten. Hier kommen Mega-Menüs zum Einsatz. Obwohl Sie jederzeit auf das integrierte Mega-Menü von Divi zurückgreifen können, ist dies das Tutorial für Sie, wenn Sie nach einer stärker von Divi erstellten Umgebung suchen, in der Sie beliebig viele Module hinzufügen können. Gerade für eCommerce-Websites kann es sinnvoll sein, verschiedene Produktkategorien ansprechend und optisch ansprechend darzustellen. Obwohl es sich bei diesem Tutorial um eine „fortgeschrittenere“ Art von Ressource handelt, wurde die Codegrundlage für Sie festgelegt, die es Ihnen ermöglicht, beim Design so kreativ zu werden, wie Sie möchten. Stellen Sie sicher, dass Sie die wenigen Schritte ausführen, die erforderlich sind, um dieses Megamenü zum Leben zu erwecken, auch wenn Sie die JSON-Vorlagendatei für dieses Tutorial verwenden.

Besuchen Sie das Tutorial

11. Dropdown-Menü für benutzerdefinierte elegante Themen

Seit dem Erscheinen des Divi Theme Builder haben sich die Leute gefragt, wie man die nahtlosen Navigations-Dropdowns von Elegant Themes erstellen kann. Dieses Tutorial konzentriert sich darauf, Ihnen genau zu zeigen, wie Sie das Dropdown-Menü Elegant Themes im Divi Theme Builder replizieren. Darüber hinaus können Sie beliebige Module hinzufügen und Ihre eigene einzigartige Variation des Menüs erstellen.

Besuchen Sie das Tutorial

Tipps

In diesem Teil des Übersichtsbeitrags teilen wir die verschiedenen Tipps und Tricks in Form eines Tutorials. Jeder dieser Beiträge enthält eine Erfahrung von A bis Z. Das bedeutet, dass wir Ihnen nicht nur zeigen, wie Sie den Trick erreichen, sondern Sie auch durch den gesamten Header-Build-Prozess führen, der Ihnen die Wahl lässt; Möchten Sie das gesamte Design für Ihre eigenen Zwecke verwenden oder sich nur auf diesen speziellen Tipp und Trick konzentrieren?

1. Kopfzeile beim Scrollen ein- und ausblenden

Besuchen Sie das Tutorial

2. Mobiles zusammenklappbares verschachteltes Menü

Besuchen Sie das Tutorial

3. Animieren Ihres globalen Headers

Besuchen Sie das Tutorial

4. Hinzufügen eines Inline-Anmeldeformulars zu Ihrer Kopfzeile

Besuchen Sie das Tutorial

5. Hinzufügen von zwei nebeneinander liegenden Schaltflächen zu Ihrer Kopfzeile

Besuchen Sie das Tutorial

6. Ihre Kopfzeile automatisch unter dem ersten Abschnitt jeder Seite platzieren

Besuchen Sie das Tutorial

7. Hinzufügen eines Dropdown-Kontaktformulars zu Ihrer Kopfzeile

Besuchen Sie das Tutorial

8. Vertauschen Sie Ihre Kopfzeile beim Scrollen

Besuchen Sie das Tutorial

9. Optimieren des Menümoduls von Divi mit 5 globalen Voreinstellungen

Besuchen Sie das Tutorial

10. Hinzufügen von Eckbeschriftungen zu Menüelementen in Ihrer Kopfzeile

Besuchen Sie das Tutorial

11. Hinzufügen und Animieren Ihres SVG-Logos in Ihrem Header

Besuchen Sie das Tutorial

12. Verschmelzen von Kopfzeile und Seiten mit Divi-Abschnittstrennern

Besuchen Sie das Tutorial

13. Hinzufügen eines dynamischen Site-Titels und Slogans zu Ihrem Header

Besuchen Sie das Tutorial

14. Optimieren des Logos Ihrer Divi-Site mit globalen Voreinstellungen

Besuchen Sie das Tutorial

15. Hinzufügen einer festen Audioleiste „Neueste Episode“ zu Ihrer Kopfzeile

Besuchen Sie das Tutorial

16. Hinzufügen von verzögerten Button-Animationen zu Ihrem Header-CTA

Besuchen Sie das Tutorial

17. Ändern Ihres Sticky-Logos auf Scroll

Besuchen Sie das Tutorial

Header-Werbegeschenke

Zu guter Letzt listen wir auch die verschiedenen Header-Freebies auf, die Sie im Elegant Themes-Blog finden können. Die Header-Freebie-Design-Initiative begann mit den ersten Theme-Builder-Paketen, die wir bereits im Dezember 2019 geteilt haben, aber das ist noch nicht alles. Wir haben kontinuierlich kostenlose Kopf- und Fußzeilen-Werbegeschenke geteilt, die den Divi-Layout-Paketen entsprechen, und werden dies auch weiterhin tun. Obwohl der Stil größtenteils auf dem jeweiligen Layoutpaket basiert, können sie auch problemlos für andere Websites verwendet werden.

1. Theme-Builder-Pakete

Theme-Builder-Paket #1

Besuchen Sie das Tutorial

Theme-Builder-Paket #2

Besuchen Sie das Tutorial

Theme-Builder-Paket #3

Besuchen Sie das Tutorial

Theme-Builder-Paket #4

Besuchen Sie das Tutorial

Theme-Builder-Paket #5

Besuchen Sie das Tutorial

Theme-Builder-Paket #6

Besuchen Sie das Tutorial

2. Layout Pack Header & Footer Freebies

Italienisches Restaurant-Layout-Paket

Besuchen Sie das Tutorial

Layoutpaket für virtuelle Assistenten

Besuchen Sie das Tutorial

Coworking Space-Layout-Paket

Besuchen Sie das Tutorial

Fensterreinigungs-Layout-Paket

Besuchen Sie das Tutorial

Tarot-Layout-Paket

Besuchen Sie das Tutorial

Painter-Layout-Paket

Besuchen Sie das Tutorial

Layoutpaket für Heimtierbedarf

Besuchen Sie das Tutorial

Beauty-Produkt-Layout-Paket

Besuchen Sie das Tutorial

Kochschul-Layout-Paket

Besuchen Sie das Tutorial

Parfümerie-Layout-Paket

Besuchen Sie das Tutorial

Sushi-Restaurant-Layout-Paket

Besuchen Sie das Tutorial

Kräuterheilmittel-Layout-Paket

Besuchen Sie das Tutorial

Renovierungs-Layout-Paket

Besuchen Sie das Tutorial

Robotik-Layout-Paket

Besuchen Sie das Tutorial

Ganzheitliches Heiler-Layout-Paket

Besuchen Sie das Tutorial

Gewürzladen-Layout-Paket

Besuchen Sie das Tutorial

Polster-Layout-Paket

Besuchen Sie das Tutorial

PR-Firmen-Layout-Paket

Besuchen Sie das Tutorial

Fitnesstrainer-Layout-Paket

Besuchen Sie das Tutorial

Hochzeitsfotograf-Layout-Paket

Besuchen Sie das Tutorial

Ernährungsberater-Layout-Paket

Besuchen Sie das Tutorial

Layoutpaket für freiberufliche Autoren

Besuchen Sie das Tutorial

Dolmetscher-Layout-Paket

Besuchen Sie das Tutorial

Layoutpaket für Finanzberater

Besuchen Sie das Tutorial

Nagelstudio-Layout-Paket

Besuchen Sie das Tutorial

Influencer-Layout-Paket

Besuchen Sie das Tutorial

Leather Company Layout-Paket

Besuchen Sie das Tutorial

Akupunktur-Layout-Paket

Besuchen Sie das Tutorial

3. Sonstiges

Kombination aus minimaler Kopf- und Fußzeile

Besuchen Sie das Tutorial

Suche nach neuen Headern in unserem Blog

Wir veröffentlichen regelmäßig neue Header-Freebies und Tutorials auf unserem Blog. Wir werden diesen Beitrag im Laufe der Zeit aktualisieren, aber wenn Sie über die neuen Dinge auf dem Laufenden bleiben möchten, können Sie die Blog-Suchleiste nach Schlüsselwörtern wie „Header“ und „Menü“ durchsuchen!

Abschließende Gedanken

In diesem Beitrag haben wir einen klaren Überblick über Divi-Header-Typen, Tutorials und Freebies gegeben, die Sie in unserem Blog finden können! Dieser Beitrag wird Ihnen hoffentlich helfen, die Grundlage für Ihren Header zu legen, bevor Sie mit einem neuen Projekt beginnen. Sie können entscheiden, welchen Header-Typ Sie erstellen möchten, gehen Sie zum Blogbeitrag, der Ihnen zeigt, wie es geht, oder laden Sie die JSON-Datei herunter, um alles einsatzbereit zu haben! Wir haben einige Tipps und Tricks geteilt, die Sie auch auf Ihren Header anwenden können, die Ihnen hoffentlich helfen, Probleme schnell zu lösen und sich auf das wirklich Wichtige zu konzentrieren: eine ausgewogene Website, die Sie im Sinn hatten. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

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.