Divi: So verwenden Sie das Fullwidth Header-Modul zum Erstellen eines Hero-Bereichs

Möchten Sie mit dem Fullwidth Header-Modul einen Hero Divi-Bereich erstellen oder selbst einen entwerfen?

Erstellen Sie einen Heldenabschnitt von Website von Grund auf neu oder mit dem Divi Fullwidth Header-Modul sind die beiden Möglichkeiten, ein auffälliges Design für Ihre zu erstellen Webseite. 

In diesem Artikel sehen wir uns die Vor- und Nachteile der Verwendung eines Fullwidth-Header-Moduls gegenüber der Erstellung eines eigenen Hero-Bereichs mit Divi an.

Lassen Sie uns gehen!

Die Bedeutung von Website-Hero-Abschnitten

Ein Hero-Abschnitt ist der allererste Abschnitt, den Ihr Besucher Sehen Sie, wann sie bei Ihnen ankommen Website. Dabei handelt es sich häufig um ein Banner in voller Breite, das auch als Hero-Header bezeichnet wird. Es ist ein prominenter Platz auf Ihrer Website, weil es einen bleibenden ersten Eindruck hinterlassen kann.

Lesen Sie auch: Divi: So zeigen Sie das Fullwidth Header-Modul im Vollbildmodus an

Daher ist es wichtig, dass es so gestaltet ist, dass es gut lesbar und dennoch auffällig und überzeugend ist. Website Hero-Abschnitte sind wichtig, weil sie die Aufmerksamkeit potenzieller Kunden erregen, eine Seite schnell beschreiben und zu zusätzlichem Engagement und potenziellen Leads führen können. Heldenabschnitte sollten mit einem Branding versehen sein und einen H1-Titel und einen CTA enthalten.

Erstellen Sie einen Heldenbereich von Grund auf neu

Wenn Sie einen Hero-Bereich von Grund auf entwerfen, haben Sie die vollständige Kontrolle über das Design und Inhalt. Abhängig von Ihrer Situation und Ihren Bedürfnissen könnte dies eine großartige Lösung für Ihre Website sein. 

Werfen wir einen Blick auf die Vor- und Nachteile dieses Ansatzes.

Vorteile dieses Ansatzes

Schauen wir uns zunächst die Vorteile des Erstellens eines Website-Hero-Bereichs von Grund auf mit Divi an.

• Volle Designkontrolle
• Verwenden Sie ein beliebiges Divi-Modul

Nachteile dieses Ansatzes

Schauen wir uns nun die Nachteile der Erstellung eines Heldenabschnitts von Grund auf an.

• Sie müssen von Grund auf neu bauen
• Benötigt mehrere Mods

Erstellen Sie einen Hero-Bereich mit dem Divi Fullwidth Header-Modul

Das Erstellen eines Hero-Bereichs mit dem Divi Fullwidth Header-Modul macht es einfach, in nur wenigen Minuten ein auffälliges, responsives Design für Mobilgeräte zu erstellen. 

Werfen wir einen Blick auf die Vor- und Nachteile dieses Ansatzes.

Vorteile dieses Ansatzes

Werfen wir einen Blick auf die Vorteile des Erstellens eines Hero-Bereichs mit dem Divi Fullwidth Header-Modul.

• All dein Inhalt befindet sich in einem einzigen Modul
• Design bereits optimiert

Nachteile dieses Ansatzes

Lassen Sie uns nun die Nachteile des Entwerfens eines Hero-Bereichs mit dem Divi Fullwidth Header-Modul bewerten.

• Weniger Flexibilität beim Design

Das Divi Fullwidth Header-Modul bietet Optionen für Inhalt vordefiniert, während viele eingeschränkt werden können, wenn Sie einen Inhalt hinzufügen möchten, der im Modul nicht verfügbar ist. Dies bedeutet, dass Sie beim Gesamtdesign weniger Flexibilität haben.

Aufbau der beiden Heldenabschnitte Schritt für Schritt

Nachdem Sie nun die Vor- und Nachteile beider Ansätze verstanden haben, bauen wir jeden Heldenabschnitt aus, damit Sie genau sehen können, wie jeder Ansatz funktioniert.

Erstellen Sie eine neue Seite mit Divi Builder

Um zu beginnen, müssen Sie Folgendes tun:

1. Divi installieren  auf Ihrer WordPress-Website.
2. Fügen Sie eine Seite hinzu und geben Sie ihr einen Titel.
3. Aktivieren Sie den visuellen Builder

Erstellen Sie Ihren Heldenbereich von Grund auf neu

Nachdem unsere Seite nun eingerichtet ist, beginnen wir mit der Erstellung eines Heldenbereichs von Grund auf neu.

Laden Sie DIVI jetzt herunter!!!

„Divi Builder“ aktivieren

Um den Drag-and-Drop-Builder von Divi verwenden zu können, müssen wir den Visual Builder aktivieren, indem wir auf die Schaltfläche klicken „Verwenden Sie DiviBuilder“. Dadurch wird die Seite mit dem Divi Visual Builder neu geladen.

Wählen Sie: Von Grund auf neu erstellen

Nachdem Ihre Seite mit aktiviertem Visual Builder neu geladen wurde, klicken Sie auf die Optionen „ VON GRUND AUF BAUEN damit wir beim Entwerfen eine leere Seite haben, mit der wir arbeiten können.

Zeile hinzufügen und Spalten konfigurieren

Erstellen Sie eine Zeile mit der folgenden Spaltenstruktur.

Mods hinzufügen

Lassen Sie uns nun die Inhaltsmodule hinzufügen, die wir benötigen.

• 2 Textbausteine, Teiler, eine Schaltfläche in der linken Spalte
• 1 Bildmodul in der mittleren Spalte
• 1 Bildmodul in der rechten Spalte

Abschnitt Stil

Lassen Sie uns nun die Abschnittseinstellungen konfigurieren.

Fügen Sie einen Abschnitt hinzu und konfigurieren Sie dann die folgenden Einstellungen:

• Hintergrund: #1d1d25

Kopfzeilentextstil

Kopfzeilentext anpassen:

• Überschrift 1:
  • Schriftstärke: Semi Bold
  • Textfarbe: #ffffff
  • Textgröße: 90px
  • Zeilenhöhe: 1,1 cm

Separator

Konfigurieren Sie die Teilereinstellungen:

• Linienfarbe: rgba(255,255,255,0.3)
• Teilergewicht: 10px
• Maximale Breite: 260 Pixel

Textkörper

Textkörper anpassen:

• Textfarbe: rgba(255,255,255,0.7)
• Textgröße: 13px
• Zeilenhöhe: 1,8 cm

Taste

Lassen Sie uns nun die Schaltfläche anpassen.

Auf der Registerkarte Schaltfläche:

• Benutzerdefinierte Stile für Schaltflächen verwenden: Ja
• Schaltflächentextgröße: 14px
• Textfarbe: #ffffff
• Schaltflächenhintergrund:
• Randbreite: 0 Pixel
• Randradius: 0 Pixel

Auf der Registerkarte Abstand:

• Oben und unten: 40px
• Links und rechts: 20px

Bilder hinzufügen

Fügen Sie die Bilder zu den Bildmodulen hinzu.

Linieneinstellungen anpassen

Inline-Parameter:

• Rand (links): 15vw

2. Spalte anpassen

Konfigurieren Sie in der zweiten Spalte diese Einstellungen:

Benutzerdefiniertes CSS

Fügen Sie den folgenden Code in den Codeabschnitt des Hauptelements ein:

argin-right: -15vw!important;
z-index: 100!important;

Abstand

Fügen Sie 100 Pixel obere Polsterung hinzu.

So ! Sie haben jetzt einen vollständig gestalteten benutzerdefinierten Heldenbereich.

Laden Sie DIVI jetzt herunter!!!

Erstellen Sie Ihren Hero-Bereich mit dem Fullwidth-Header-Modul von Divi

Sehen wir uns nun an, wie Sie diesen Hero-Abschnitt mit dem Fullwidth Header-Modul von Divi neu erstellen.

Laden Sie DIVI jetzt herunter!!!

Fügen Sie eine Seite hinzu und wählen Sie „Von Grund auf neu erstellen“ aus

Fügen Sie eine neue Seite hinzu, geben Sie ihr einen Titel, klicken Sie dann auf „Use Divi Builder“ und wählen Sie „Build From Scratch“.

Fügen Sie einen Abschnitt mit voller Breite und einen Header mit voller Breite ein

Abschnitt einfügen Gesamtbreiteund dann auswählen Header mit voller Breite in der Modulbibliothek.

Inhalt

Fügen Sie den Textinhalt zum Modul auf der Registerkarte Text hinzu.

Bilder

Fügen Sie die Bilder im Bild-Tab hinzu.

Hintergrundfarbe ändern

Konfigurieren Sie auf der Registerkarte Hintergrund die folgende Einstellung:

• Hintergrund: #1D1D25

Überschrift

Kopftexteinstellungen konfigurieren:

• Schriftstärke des Titels: Fett
• Textgröße: 90px

Textkörper

Körpertexteinstellungen konfigurieren:

• Haupttextfarbe: rgba(255,255,255,0.55)

Untertiteltext

Konfigurieren Sie die Untertiteltexteinstellungen:

• Untertitelschriftstärke: Fett
• Textfarbe: #4C594C
• Buchstabenabstand: 3px

Tasten

Lassen Sie uns nun die beiden Schaltflächen anpassen.

Knopf eins

Konfigurieren Sie auf der Registerkarte Schaltfläche Eins die folgenden Einstellungen:

• Verwenden Sie benutzerdefinierte Stile für Schaltfläche Eins: Ja
• Knopf Eins
  • Hintergrund: #4c594c
  • Randbreite: 0 Pixel
  • Randradius: 0px
  • Symbol anzeigen: JA
  • Symbol nur beim Hover anzeigen: Nein
  • Polsterung: 25 Pixel (oben und unten); 25 Pixel (links), 50 Pixel (rechts)

Knopf zwei

Konfigurieren Sie auf der Registerkarte Schaltfläche Zwei die folgenden Einstellungen:

• Verwenden Sie benutzerdefinierte Stile für Schaltfläche zwei: JA
• Rahmenbreite der Schaltfläche 0: XNUMX Pixel
• Randradius: 0px
• Polsterung: 25px (oben, unten, links und rechts)
• Button Box Shadow: Wählen Sie den 4
• Horizontale Position des Kastenschattens: 0px
• Vertikale Position des Kastenschattens: 2px
• Schattenfarbe: #ffffff

So ! Sie haben jetzt einen vollständig gestalteten Hero-Bereich mit dem Divi Fullwidth Header-Modul.

Siehe auch: Divi: So erstellen Sie Hintergrundübergänge zwischen Elementen

Laden Sie DIVI jetzt herunter!!!

Schlussfolgerung

Das Erstellen eines Hero-Bereichs mit Divi ist einfach, egal ob Sie von Grund auf neu erstellen oder das Fullwidth Header-Modul verwenden. Mit beiden Optionen können Sie beeindruckende Header-Designs erstellen, die Ihr Interesse wecken Besucher. 

Abhängig von Ihren individuellen Bedürfnissen ist jede Option eine großartige Option, die Sie beim Stylen Ihres Hero-Bereichs in Betracht ziehen sollten. 

Nachdem Sie die Vor- und Nachteile beider gelesen haben, wie würden Sie Ihren Heldenbereich gestalten?

Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.

Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.

Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...