So erstellen Sie einen Hero-Bereich mit dem Fullwidth-Header-Modul von Divi

Das Erstellen eines Hero-Bereichs ist eine hervorragende Möglichkeit, die Aufmerksamkeit auf wichtige Inhalte auf Ihrer Seite zu lenken. Es ist ein überdimensionaler Inhalt, den Sie verwenden können, um Ihre Geschichte zu erzählen, Informationen über Ihre Arbeit zu teilen oder ein Produkt oder eine Dienstleistung hervorzuheben. Mit dem Fullwidth-Header-Modul von Divi können Sie einen Titel, einen Untertitel, zwei Schaltflächen, Textkörper, ein Logobild und ein Kopfbild hinzufügen. Natürlich können Sie auch die Hintergrundoptionen verwenden, um Bilder, Farbverläufe, Farben, Muster und Masken hinzuzufügen und zu kombinieren. Sie können alle diese Einstellungen in den Einstellungen des einen Header-Moduls mit voller Breite bearbeiten, anstatt zwischen mehreren Bild-, Text- und Schaltflächenmodulen wechseln zu müssen.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem Header-Modul von Divi in ​​voller Breite einen ansprechenden und auffälligen Hero-Bereich erstellen.

Lass uns anfangen!

Vorgeschmack

Hier ist eine Vorschau dessen, was wir entwerfen werden.

Was Sie für den Einstieg benötigen

Bevor wir beginnen, stellen Sie sicher, dass Sie die neueste Version von Divi auf Ihrer Website haben.

Jetzt können Sie loslegen!

So erstellen Sie einen Hero-Bereich mit dem Fullwidth-Header-Modul von Divi

Erstellen Sie eine neue Seite mit einem vorgefertigten Layout

Beginnen wir mit der Verwendung eines vorgefertigten Layouts aus der Divi-Bibliothek. Für dieses Design verwenden wir die Veterinarian Landing Page aus dem Veterinarian Layout Pack.

Fügen Sie Ihrer Website eine neue Seite hinzu, geben Sie ihr einen Titel und wählen Sie dann die Option Divi Builder verwenden.

Wir werden für dieses Beispiel ein vorgefertigtes Layout aus der Divi-Bibliothek verwenden, also wählen Sie Layouts durchsuchen.

Suchen Sie nach dem Veterinary Landing Page-Layout und wählen Sie es aus.

Wählen Sie Dieses Layout verwenden aus, um das Layout zu Ihrer Seite hinzuzufügen.

Jetzt sind wir bereit, unser Design zu erstellen.

Fügen Sie das Fullwidth-Header-Modul hinzu

Wir werden den Hero-Abschnitt mit dem Header-Modul in voller Breite neu erstellen. Fügen Sie der Seite unterhalb der vorhandenen Kopfzeile einen neuen Abschnitt in voller Breite hinzu.

Fügen Sie dem Abschnitt ein Header-Modul mit voller Breite hinzu.

Löschen Sie dann den ursprünglichen Kopfzeilenabschnitt.

Passen Sie das Fullwidth-Header-Modul an

Inhalt hinzufügen

Öffnen Sie die Einstellungen des Header-Moduls mit voller Breite und fügen Sie dem Modul den folgenden Inhalt hinzu:

• Titel: Tierarzt
• Untertitel: DiviVet. Im Dienste unserer besten Freunde
• Schaltfläche Nr. 1: Alle Dienste anzeigen
• Schaltfläche Nr. 2: Vereinbaren Sie einen Termin
• Körper: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.

Als nächstes fügen Sie das Header-Bild der Tierärzte mit den Tieren hinzu.

Verlaufshintergrundeinstellungen

Wechseln Sie zu den Hintergrundeinstellungen. Löschen Sie die ursprüngliche Hintergrundfarbe und fügen Sie dann einen Hintergrundverlauf hinzu.

• 0%: rgba(255.170.205,0,48)
• 40 %: rgba(110,66,255,0,24)
• 87 %: rgba(124.239.255,0,71)
• Verlaufstyp: Elliptisch
• Verlaufsposition: Rechts

Wählen Sie als Nächstes die Registerkarte Hintergrundmaske und fügen Sie dem Hintergrund eine Hintergrundmaske hinzu.

• Hintergrundmaske: Corner Blob
• Maskenfarbe: #FFFFFF
• Maskentransformation: Vertikal

Passen Sie Textstile an

Wenn unser Kopfzeileninhalt und Hintergrund vorhanden sind, gehen wir zum Design-Tab, um die Textstile anzupassen. Öffnen Sie zunächst die Titeleinstellungen und passen Sie den Text wie folgt an:

• Titelschrift: Nunito
• Schriftstärke des Titels: Ultra Bold
• Titelschriftstil: TT (Großgeschrieben)

Ändern Sie die Farbe, Größe und den Abstand des Titeltexts.

• Titeltextfarbe: #a9cb6b
• Titeltextgröße: 14px
• Abstand der Titelbuchstaben: 2px

Wechseln Sie zum Haupttextabschnitt und passen Sie die Schriftart an. Verwenden Sie die Responsive-Einstellungen von Divi, um eine kleinere Textgröße für mobile Geräte hinzuzufügen.

• Farbe des Textkörpers: #000000
• Körpertextgröße-Desktop: 18px
• Textgröße: Mobil: 14px
• Höhe der Körperlinie: 1,8 m

Öffnen Sie als Nächstes die Untertiteleinstellungen und passen Sie die Schriftart an.

• Schriftart für Untertitel: Nunito
• Untertitelschriftstärke: Fett
• Untertiteltextfarbe: #000000

Ändern Sie schließlich die Textgröße für Desktop und Mobilgeräte (verwenden Sie erneut die Responsive-Einstellungen, um eine kleinere Textgröße auf Mobilgeräten hinzuzufügen) und passen Sie die Zeilenhöhe an.

• Untertitel-Textgröße – Desktop: 56px
• Untertitel-Textgröße – mobil: 32 Pixel
• Untertitelzeilenhöhe: 1.2em

Passen Sie Button One-Stile an

Als Nächstes werden wir die Schaltflächenstile anpassen. Beginnen Sie damit, benutzerdefinierte Stile für Button One zu aktivieren, und passen Sie dann die Textgröße an.

• Verwenden Sie benutzerdefinierte Stile für Schaltfläche Eins: Ja
• Textgröße der Schaltfläche 1: 14px

Fügen Sie der Schaltfläche einen Hintergrundverlauf hinzu. Gradientenwerte sind wie folgt:

• 58 %: #316EFF
• 100 %: #1D2B60
• Steigungsrichtung: 90 Grad

Passen Sie als Nächstes die Randeinstellungen und die Schriftarteinstellungen an.

• Rahmenbreite der Schaltfläche 1: 0px
• Randradius der Schaltfläche Eins: 80 Pixel
• Buchstabenabstand der Schaltfläche Eins: 2px
• Button-One-Schriftart: Nunito
• Button One Schriftstärke: Ultra Bold
• Button One Schriftstil: TT (Großgeschrieben)

Deaktivieren Sie das Schaltfläche-Eins-Symbol.

• Schaltfläche Eins-Symbol anzeigen: Nein

Passen Sie als Nächstes die Rand- und Abstandseinstellungen für das Desktop-Design an und fügen Sie einen Boxschatten hinzu.

• Button One Margin-Top-Desktop: 200px
• Button One Margin-Bottom-Desktop: 0px
• Button One Padding-Top-Desktop: 16px
• Button One Padding-Bottom-Desktop: 16px
• Button One Padding-Links-Desktop: 2em
• Button One Padding-Right-Desktop: 50em
• Button-Box-Schatten: Unten

Verwenden Sie die Responsive-Einstellungen, um auf mobilen Geräten unterschiedliche Rand- und Auffüllwerte festzulegen.

• Button One Margin-Top-Mobile: 25px
• Button One Padding-Right-Mobile: 10em

Es gibt einige Probleme mit dem Textumbruch bei unserer Schaltfläche, die wir später mit benutzerdefiniertem CSS beheben werden.

Passen Sie die Stile der Schaltfläche zwei an

Taste zwei hat einige unterschiedliche Farben und Abstände, ist aber Taste eins ziemlich ähnlich. Um einige sich wiederholende Designschritte zu sparen, kopieren wir die Stile des Moduls für Schaltfläche eins in das Modul für Schaltfläche zwei und passen dann an, was wir ändern müssen.

Klicken Sie zuerst mit der rechten Maustaste auf den Abschnitt der Schaltfläche 1 und kopieren Sie die Stile der Schaltfläche 1.

Klicken Sie dann mit der rechten Maustaste auf den Abschnitt der Schaltfläche zwei und fügen Sie die Stile der Schaltfläche eins ein.

Jetzt können wir die Schaltfläche zwei Stile anpassen. Ändern Sie die Textfarbe.

• Textfarbe für Schaltfläche 2: #121F60

Passen Sie den Hintergrundverlauf für Schaltfläche zwei an.

• 30 %: rgba(0,229,198,0)
• 100 %: #00e5c6

Verwenden Sie die Responsive-Einstellungen, um den Hintergrundverlauf für mobile Geräte anzupassen.

• 0%: rgb(0,229,198,0)
• 100 %: #00e5c6

Passen Sie als Nächstes den Rand und die Polsterung für das Desktop-Design an.

• Button Two Margin-Top-Desktop: 0px
• Schaltfläche zwei Rand-unten-Desktop: 0px
• Schaltfläche 2 Margin-Links-Desktop: 30%
• Button Two Padding-Top-Desktop: 16px
• Button Two Padding-Bottom-Desktop: 16px
• Button Two Padding-Links-Desktop: 48em
• Button Two Padding-Rechts-Desktop: 2em

Verwenden Sie die Responsive-Einstellungen, um unterschiedliche Rand- und Auffüllwerte für das mobile Design festzulegen.

• Button 2 Margin-links-mobil: 5%
• Knopf 2 Polsterung-links-mobil: 35%
• Knopf 2 Polsterung-rechts-mobil: 5%

Benutzerdefinierte CSS

Schließlich ist der Großteil der Designarbeit erledigt. Jetzt müssen wir benutzerdefiniertes CSS hinzufügen, um das Design zu vervollständigen. Wechseln Sie zur Registerkarte Erweitert und öffnen Sie den Abschnitt Benutzerdefiniertes CSS.

Beginnen wir zunächst mit dem Header Image CSS. Dieses CSS ermöglicht die Anzeige des Header-Bildes über der Schaltfläche.

z-index: 1;
position:relative;

Als nächstes benutzerdefiniertes CSS zum Titel. Wir werden mithilfe der Responsive-Einstellungen unterschiedliche Werte für die Desktop- und mobile Ansicht festlegen.

Für Desktop:

padding-top:50px;
padding-bottom:30px;

Für Handy:

padding-top:5px;
padding-bottom:10px;

Fügen Sie abschließend das folgende CSS zu Button One und Button Two hinzu.

white-space: nowrap;

Endergebnis

Hier ist das endgültige Design für unseren Header-Hero-Bereich in voller Breite.

Abschließende Gedanken

Mit dem Header-Modul in voller Breite können Sie ganz einfach einen schönen Hero-Bereich erstellen, um für Ihre Dienste zu werben und Ihren Besuchern mitzuteilen, worum es auf Ihrer Website geht. Die integrierten Einstellungen machen es einfach, das Design jedes Aspekts der Kopfzeile anzupassen, und alles befindet sich an einem Ort, sodass Sie nicht zwischen mehreren Modulen wechseln müssen, um Ihren Heldenabschnitt zu erstellen. Weitere einzigartige Designs für Heldenabschnitte finden Sie in diesem Tutorial: So verwenden Sie Divis Hintergrundmasken und -muster für einen Heldenabschnitt. Verwenden Sie das Header-Modul in voller Breite, um Ihre Hero-Abschnitte zu erstellen? Wir würden uns freuen, von Ihnen in den Kommentaren zu hören!