5 Creative Divi-Header-Modul-Stile, die Sie mit den integrierten Einstellungen erreichen können

Out of the Box kann das Divi Header Module mit nur wenigen Anpassungen markante Header-Designs erstellen. Dies macht es zu einem äußerst beliebten Modul beim Entwerfen von Headern für Ihre Website in Divi. Und mit ein wenig Out-of-the-Box-Denken können Sie einige wirklich einzigartige Designs erstellen, indem Sie nur die integrierten Einstellungen verwenden (kein benutzerdefiniertes CSS). Für diejenigen unter Ihnen, die einige neue Header-Designs erkunden möchten, zeige ich Ihnen 5 Divi-Header-Modul-Stile, die Sie inspirieren könnten.

Genießen!

Sneak Peek der 5 Divi-Header-Modul-Stile

Stil #1: Der abstrakte Farbverlauf

Beginnen Sie mit der Gestaltung von Stil Nr. 1

Stil #2: Die dreifache Bedrohung

Beginnen Sie mit der Gestaltung von Stil #2

Stil #3: Der abgerundete Rahmen

Beginnen Sie mit der Gestaltung von Stil #3

Stil #4: Der gemischte Lefty

Beginnen Sie mit der Gestaltung von Stil Nr. 4

Stil #5: Der große Skalierungstyp

Beginnen Sie mit der Gestaltung von Stil #5

Was Sie brauchen, um loszulegen

Um zu beginnen, benötigen Sie das Divi-Theme. Ich werde den Divi Builder verwenden, um die Designs auf dem Frontend zu erstellen. Sie benötigen auch ein paar Bilder, um das Tutorial abzuschließen. Denken Sie daran, dass Sie die Bilder eines vorgefertigten Layouts jederzeit importieren können. Tatsächlich werde ich für dieses Tutorial Bilder aus dem Cleaning Company Layout Pack, dem Business Coach Layout Pack und dem Web Freelancer Layout Pack verwenden.

Lass uns anfangen!

Abonnieren Sie unseren Youtube-Kanal

Stil #1: Der abstrakte Gadient

Dieses erste Divi-Header-Modul-Design ist ein einfaches, vielseitiges Design, das auf kreative Weise Verlaufshintergründe verwendet.

Fügen Sie zunächst einen neuen Abschnitt mit voller Breite mit einem Headermodul mit voller Breite hinzu.

Aktualisieren Sie den Inhalt der Kopfzeileneinstellungen mit einem neuen Titel und einem Kopfzeilenbild.

Aktualisieren Sie dann die Designeinstellungen wie folgt:

Titelschriftart: Lato
Titeltextgröße: 6vw
Button Eins Hintergrundfarbe: #0c71c3
Breite des Knopfes Eins: 0px
Benutzerdefinierte Polsterung: 8vw oben, 8vw unten

Bevor wir unseren Abschnittshintergrund hinzufügen, müssen wir zuerst den Hintergrund des Headermoduls transparent machen und ihm einen benutzerdefinierten Farbverlauf geben, um unsere Kreisform in der unteren rechten Ecke zu erstellen. Gehen Sie zurück zum Inhalts-Tab und aktualisieren Sie den Hintergrund wie folgt:

Hintergrundfarbe: rgba(255,255,255,0)
Hintergrundfarbe links: #0096eb
Hintergrundfarbe rechts: rgba(255,255,255,0)
Verlaufstyp: Radial
Radiale Richtung: Unten rechts
Startposition: 25%
Endposition: 0%

Einstellungen speichern

Als nächstes müssen wir unsere Hintergrunddesigns zu dem Abschnitt hinzufügen, der sich hinter unserem Header-Modul befindet. Öffnen Sie dazu die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Hintergrundfarbe links: #0096eb
Hintergrund mit Farbverlauf rechts: #007ea1
Verlaufstyp: Radial
Radiale Richtung: Oben links
Startposition: 43%
Endposition: 0%

Design-Tipp: Wenn Sie nach Farben suchen, die Sie für Ihre eigenen Header-Verläufe ausprobieren können, schlage ich vor, die Farben zu verwenden, die in dem Header-Bild / der von Ihnen verwendeten Grafik verwendet werden.

Um unserem abstrakten Hintergrund ein weiteres subtiles Designelement hinzuzufügen, können wir einen oberen und unteren Abschnittsteiler hinzufügen. Gehen Sie dazu auf die Registerkarte Design und fügen Sie die folgenden Trennwände hinzu:

Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: rgba(150,210,210,0.2)
Höhe des oberen Teilers: 8vw
Horizontale Wiederholung des oberen Teilers: 0,7x
Top Divider Flip: Vertikal

Unterteiler-Stil: siehe Screenshot
Farbe des unteren Teilers: rgba(150,210,210,0.2)
Höhe des unteren Teilers: 10vw
Horizontale Wiederholung des unteren Teilers: 0,5x
Unterteiler Flip: Vertikal

Das ist es! Sehen Sie sich das endgültige Design an.

Stil #2: Die dreifache Bedrohung

Dieser nächste divi-Header-Modulstil enthält drei Handlungsaufrufe, einschließlich der beiden Schaltflächen und des Symbols zum Scrollen nach unten. Das Anpassen der Schaltflächensymbole an das Bildlaufsymbol trägt zum symmetrischen Aspekt des Designs bei. Und die Abschnittstrenner erzeugen ein schönes abstraktes dreieckiges Design, das die Benutzer auf der Seite nach unten führt.

Erstellen Sie einen neuen Abschnitt mit voller Breite mit einem Header mit voller Breite.

Aktualisieren Sie dann den Text für den Titel, den Linktext für Schaltfläche Nr. 1 und den Linktext für Schaltfläche Nr. 2.

Aktualisieren Sie dann den Rest des Designs wie folgt:

Hintergrundfarbe: #1a1844
Text- und Logoausrichtung: Mitte
Symbol: siehe Screenshot
Symbolgröße nach unten scrollen: 20px
Titelschriftart: Lato
Gewicht der Titelschrift: Schwer
Titeltextgröße: 5vw (Desktop), 40px (Tablet), 30px (Smartphone)
Höhe der Titelzeile: 1,3 em
Schaltfläche zwei Hintergrundfarbe: #fe4943
Rahmenbreite für Schaltfläche zwei: 0px
Button Two Icon: Pfeil nach rechts (siehe Screenshot)
Button Eins Hintergrundfarbe: #fe4943
Breite des Knopfes Eins: 0px
Button One Icon: Pfeil nach links (siehe Screenshot)
Platzierung des Symbols für Taste 1: Links
Benutzerdefinierte Polsterung: 10vw oben, 10vw links

Jetzt müssen wir nur noch unsere Abschnittsteiler hinzufügen, um das dreieckige Hintergrunddesign zu erstellen. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie die folgenden Designeinstellungen:

Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: rgba (255,255,255,0.3)
Höhe des oberen Teilers: 45vw

Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: rgba(255,255,255,0.1)
Höhe des oberen Teilers: 45vw

Schauen wir uns nun das endgültige Design an:

Bonus-Design-Tipp: Mobile Anpassungen für Schaltflächen

Ich weiß, dass ich kein benutzerdefiniertes CSS gesagt habe, aber dies ist ein nicht unbedingt notwendiger Extra-Schnörkel, von dem ich dachte, dass einige von Ihnen Spaß daran haben würden. Sie werden vielleicht feststellen, dass bei Kopfzeilen mit zwei Schaltflächen die zweite Schaltfläche einen linken Rand hat, der das Design auf Smartphones verwirft. Für ein übersichtlicheres Design auf Smartphones können Sie Ihren Seiteneinstellungen einen benutzerdefinierten CSS-Schnipsel hinzufügen, um die Schaltflächen auf die gleiche Breite und ohne den zweiten Schaltflächenrand zu bringen.

Öffnen Sie die Seiteneinstellungen im Divi Builder und fügen Sie das folgende CSS hinzu

@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  display: block;
  width: 100%;
margin-left: 0px;    
  }
}

Sehen Sie sich nun das Design auf dem Handy an.

Stil #3: Der abgerundete Rahmen

Dieses abgerundete Design des Divi-Header-Moduls ist eine großartige Möglichkeit, Ihr Hintergrundbild und Ihren Header-Inhalt einzurahmen, um Ihren Call-to-Action noch stärker zu fokussieren. Alles, was Sie brauchen, sind einige Anpassungen am Randradius Ihrer Kopfzeile, ein Kastenschatten und ein benutzerdefinierter Abstand.

Erstellen Sie zunächst einen neuen Abschnitt in voller Breite mit einem Header in voller Breite.

Lassen Sie uns zunächst die Inhaltselemente für die Kopfzeile aktualisieren, indem wir den Titel, den Linktext für Schaltfläche Nr. 1 und ein Logo-Bild hinzufügen.

Fügen Sie als Nächstes ein Hintergrundbild hinzu, das groß genug ist, um die Höhe und Breite der Kopfzeile zu umfassen. Da es sich um einen abgerundeten Header handelt, versuchen Sie, ein Bild mit derselben Höhe und Breite (z. B. 1000 x 1000 Pixel) zu verwenden.

Aktualisieren Sie dann die restlichen Designeinstellungen wie folgt:

Einstellungen speichern.

Öffnen Sie dann die Abschnittseinstellungen, um die Hintergrundfarbe und den Abstand wie folgt hinzuzufügen:

Hintergrundfarbe: #000000
Benutzerdefinierte Polsterung: 5vw oben, 5vw unten

Schauen Sie sich nun das endgültige Design an.

Die gemischte Linke

Dieses Header-Design weist einige einzigartige Designmerkmale auf. Das Header-Modul wird tatsächlich in der Größe geändert und linksbündig ausgerichtet, um die rechte Hälfte des Abschnittshintergrundbilds freizugeben. Und der Inhalt des Header-Moduls hat einen Mischeffekt, der das Hintergrundbild durch den Inhalt hindurch freilegt. Um dies zu erreichen, benötigen Sie das richtige Hintergrundbild für Ihren Abschnitt. Im Allgemeinen möchten Sie, dass das Bild dunklere Elemente enthält, damit der gemischte Inhalt besser sichtbar ist.

Lass uns anfangen.

Erstellen Sie zunächst einen neuen Abschnitt in voller Breite mit einem Header in voller Breite.

Bevor wir mit der Aktualisierung unserer Kopfzeilenstile beginnen, springen Sie zuerst zu den Abschnittseinstellungen und fügen Sie den folgenden Hintergrund hinzu:

Fügen Sie ein Hintergrundbild mit dem Brennpunkt des Bildes rechts hinzu.

Hintergrundfarbe links: rgba(0,0,0,0.54)
Hintergrundfarbe rechts: rgba(255,255,255,0)
Verlaufsrichtung: 90deg
Radiale Richtung: Unten rechts
Startposition: 50%
Endposition: 0%
Farbverlauf über dem Hintergrundbild platzieren: JA

Der Zweck des Farbverlaufs besteht darin, die linke Seite des Bildes dunkler zu machen, damit der Inhalt des Headermoduls besser lesbar ist, wenn wir ihn überblenden. Außerdem können Sie den Abschnittshintergrund derzeit nicht sehen, da die Standardhintergrundfarbe für die Kopfzeile noch aktiv ist. Das werden wir als nächstes ändern.

Öffnen Sie die Kopfzeileneinstellungen und aktualisieren Sie den Inhalt mit einem Titel, einem Linktext für Schaltfläche Nr. 1 und einem dunklen Logo.

Ändern Sie nun die Hintergrundfarbe in Weiß.

Aktualisieren Sie dann Folgendes:

Schriftstärke des Titels: Ultra Bold
Titeltextfarbe: #000000
Titeltextgröße: 8vw
Höhe der Titelzeile: 1,1 em
Schaltfläche EINS Textgröße: 2.7vw
Schaltfläche Eins Textfarbe: #000000
Breite des Knopfes eins: 0.2em
Farbe des Randes der Schaltfläche eins: #edf000
Schriftstärke: Ultra Bold
Breite: 50% (Desktop, Tablet und Smartphone)
Mischmodus: Bildschirm

Hier ist das endgültige Design.

Stil #5: Der große Skalierungstyp

Dieses Divi-Header-Modul-Design bietet eine einfache und effektive Möglichkeit, großen Text zu erstellen, der mit dem Browserfenster skaliert, ohne das Design zu beeinträchtigen. Da wir ein Header-Modul mit voller Breite verwenden, müssen wir unseren Inhaltsbereich etwas erweitern. Dann müssen wir die vw-Längeneinheit verwenden, um unseren Text zu skalieren. Dieses Design wäre ideal für Abschnittsüberschriften.

Erstellen Sie zunächst einen neuen Abschnitt in voller Breite mit einem Header in voller Breite.

Aktualisieren Sie in den Header-Einstellungen mit voller Breite Folgendes:

Titel: Beratung
Untertiteltext: Dienstleistungen
Button #1 Linktext: Jetzt starten

Löschen Sie den Standardtext im Inhaltsfeld.

Fügen Sie dann ein helles Logobild hinzu.

Als nächstes werden wir die standardmäßige maximale Breite unseres Header-Containers erhöhen, um mehr horizontalen Platz für Ihren Header zu schaffen. Gehen Sie dazu auf die Registerkarte Erweitert und fügen Sie das folgende CSS unter Header-Container hinzu:

width: 100% ;
max-width: 100% ;

Aktualisieren Sie nun die restlichen Designeinstellungen wie folgt:

Fügen Sie ein Hintergrundbild hinzu.
Text- und Logoausrichtung: Mitte
Titelschriftart: Cuprum
Schriftstärke des Titels: Fett
Titelschriftart: TT
Titeltextfarbe: #bfbfbf
Titeltextgröße: 10vw
Titel Buchstabenabstand: 0.1em
Untertitelschriftart: Cuprum
Zwischenüberschriften-Textausrichtung: Rechts (dies hilft, den Text mit Buchstabenabstand zu zentrieren)
Zwischenüberschrift Textgröße: 3vw
Zwischentitel-Buchstabenabstand: 7.8vw
Breite des Knopfes Eins: 0px
Button One Schriftart: Cuprum
Button One Icon: siehe Screenshot

Der Trick besteht darin, die Längeneinheit vw für den Text zu verwenden. Passen Sie dann den Abstand der Zwischenüberschriften so an, dass er so gut wie möglich mit dem Titeltext übereinstimmt.

Um unseren horizontalen Abstand zu maximieren, müssen wir unserem Header-Inhalt wie folgt eine benutzerdefinierte Breite hinzufügen:

Inhaltsbreite: 80%;

Auch wenn dies weniger als die Standard-100% ist, wird die Änderung der Einstellung die Standardeinstellung überschreiben und mit dem zuvor hinzugefügten benutzerdefinierten CSS anpassen.

Schließlich fügen Sie einen Boxschatten hinzu, um das Design zu vervollständigen:

Box Shadow: siehe Screenshot
Stärke der Box-Schattenunschärfe: 0px
Stärke der Box-Schattenausbreitung: 60px

Sehen Sie sich nun das Endergebnis an.

Verwandeln Sie sie in Vollbild-Header!

Die obigen Designs können ganz einfach mit einem Klick auf eine Schaltfläche im Vollbildmodus erstellt werden. Dies ist eine leistungsstarke Funktion des Header-Moduls mit voller Breite. Gehen Sie einfach zu den Header-Design-Einstellungen und wählen Sie die Option "Make Fullscreen".

Außerdem müssen Sie die benutzerdefinierten Polsterungen für diese Designs entfernen , damit die Kopfzeile perfekt in das Browserfenster passt.

Abschließende Gedanken

Dies sind nur einige der mit dem Divi Header Module verfügbaren Header-Design-Möglichkeiten. Und das Experimentieren mit allen Designeinstellungen kann viel Spaß machen. Wenn überhaupt, hoffe ich, dass diese Beispiele als kleine Inspiration für Ihr nächstes Projekt dienen.

Ich freue mich, von Ihnen in den Kommentaren unten zu hören.

Danke schön!