So erstellen Sie mit Divi . beeindruckende Heldenabschnitte

Heldenabschnitte; sie dienen allen möglichen Zwecken. Sie sind das Erste, was Besucher Ihrer Website sehen, sie zeigen sofort den Stil Ihrer Website und beeinflussen die Art und Weise, wie sich Ihre Besucher auf Ihrer Website fühlen und verhalten. Wir sind bereits an alle Arten von Heldenabschnitten gewöhnt, aber die meisten enthalten ein Heldenbild, einen Slogan und einen Aufruf zum Handeln. Es gibt aber auch andere Möglichkeiten. In diesem Beitrag zeigen wir Ihnen einen anderen Ansatz für Heldenabschnitte und folgen ihm mit einem Beispiel, das Sie mit Divi neu erstellen können.

Beispiel

Das Beispiel, das wir Ihnen zeigen, wie Sie mit Divi neu erstellen, sieht auf dem Desktop so aus:

Und so auf dem Handy:

So heben Sie Ihren Heldenbereich hervor

Bevor wir Ihnen zeigen, wie Sie das Beispiel neu erstellen, werfen wir einen Blick auf einige der Faktoren, die diesen Heldenabschnitt von anderen unterscheiden.

1. Großes, beschreibendes und zentralisiertes Logo

Das erste, was wir in unserem Beispiel verwenden, um unseren Heldenabschnitt hervorzuheben, ist ein zentriertes Headerformat anstelle des Standardformats. Außerdem verwenden wir ein transparentes Menü, das dazu beiträgt, die Menüelemente mit dem Design des Heldenbereichs zu überlappen. Die Verbindung zwischen Logo, Menü und Website ist bei Verwendung eines transparenten Hintergrunds klarer, da innerhalb des Heldenbereichs eine Unterteilung weniger vorhanden ist.

2. Konzentrieren Sie sich auf schriftliche Inhalte

Eine andere Sache, die Sie tun können, um Ihren Heldenbereich hervorzuheben, besteht darin, den geschriebenen Inhalt zu konzentrieren, den Sie haben. Auf diese Weise lenken Sie die Aufmerksamkeit der Besucher auf eine Stelle auf dem Bildschirm, was die Wahrscheinlichkeit erhöht, dass sie ihn lesen. Wenn Sie andererseits geschriebenen Inhalt in Ihrem gesamten Heldenbereich aufteilen, ist es wahrscheinlicher, dass bei den Änderungen ein Teil der Botschaft, die Sie vermitteln möchten, übersehen wird.

3. Heben Sie Alleinstellungsmerkmale hervor

Normalerweise enthält ein Hero-Abschnitt normale Textmodule, die den Slogan eines Produkts oder eines Unternehmens teilen. Sie können Blurb-Module jedoch auch innerhalb des Heldenbereichs verwenden. Diese Blurb-Module sind perfekt, wenn Sie die Alleinstellungsmerkmale Ihres Produkts oder Ihrer Dienstleistung sofort teilen möchten. Darüber hinaus können Sie auch wählen, ob Sie Calls-to-Action sofort einbinden möchten oder nicht. In unserem Beispiel sind diese Call-to-Actions in die Klappenmodule selbst integriert.

4. Produktbild reinigen

Um das Ganze abzurunden und den von Ihnen bereitgestellten schriftlichen Inhalt auszugleichen, empfehlen wir, ein sauberes Produktbild als Hintergrundbild für den Heldenbereich zu verwenden. Sie möchten, dass Ihr Heldenimage so qualitativ und selbsterklärend wie möglich ist, ohne den gesamten Heldenbereich zu übernehmen.

So erstellen Sie mit Divi . beeindruckende Heldenabschnitte

Abonnieren Sie unseren Youtube-Kanal

Beispiel mit Divi . neu erstellen

Nachdem wir die theoretische Seite durchgegangen sind, ist es an der Zeit, sie neu zu erstellen.

Kopfzeilenformat

Das erste, was Sie tun müssen, ist 'Zentriert' als Header-Stil auszuwählen, indem Sie zu Ihrem WordPress-Dashboard> Anpassen> Header & Navigation> Header-Format> gehen und 'Zentriert' als Header-Stil' auswählen.

Einstellungen der primären Menüleiste

Gehen Sie dann zurück zu Kopfzeile & Navigation > Primäre Menüleiste > und nehmen Sie die folgenden Anpassungen vor:

• Menühöhe: 211px
• Max. Höhe des Logos: 100px
• Textgröße: 16
• Buchstabenabstand: 2
• Schriftart: Lato Light
• Schriftstil: Großbuchstaben
• Textfarbe: #FFFFFF
• Farbe des aktiven Links: #FFFFFF
• Hintergrundfarbe: rgba(255,255,255,0)
• Hintergrundfarbe des Dropdown-Menüs: rgba(255,255,255,0)

Neuen Abschnitt hinzufügen

Wenn Sie fertig sind, fügen Sie eine neue Seite hinzu, aktivieren Sie den Divi Builder, aktivieren Sie Visual Builder und fügen Sie einen neuen Standardabschnitt hinzu.

Hintergrund mit Farbverlauf

Verwenden Sie den folgenden Verlaufshintergrund für diesen Abschnitt:

• Erste Farbe: #e2e2e2
• Zweite Farbe: rgba(255,255,255,0)
• Verlaufstyp: Linear
• Verlaufsrichtung: 180deg
• Startposition: 40%
• Endposition: 40%

Hintergrundbild

Laden Sie als Nächstes ein Hintergrundbild hoch und wählen Sie „Multiplizieren“ als Hintergrundbildmischung.

Zweispaltige Zeile hinzufügen

Hintergrundfarbe

Fügen Sie dem gerade erstellten Abschnitt eine zweispaltige Zeile hinzu und verwenden Sie '#b7afa1' als Hintergrundfarbe.

Spalte 1 Hintergrund mit Farbverlauf

Scrollen Sie nach unten und verwenden Sie den folgenden Verlaufshintergrund für die erste Spalte:

• Erste Farbe: rgba(255,255,255,0.43)
• Zweite Farbe: rgba(255,255,255,0)
• Spalte 1 Verlaufstyp: Radial
• Spalte 1 Verlaufsrichtung: Oben links
• Spalte 1 Startposition: 49%
• Spalte 1 Endposition: 49%

Spalte 2 Hintergrund mit Farbverlauf

Und verwenden Sie den folgenden Verlaufshintergrund für die zweite Spalte:

• Erste Farbe: rgba(255,255,255,0.43)
• Zweite Farbe: rgba(255,255,255,0)
• Spalte 2 Verlaufstyp: Radial
• Spalte 2 Radiale Richtung: Unten rechts
• Spalte 2 Startposition: 49%
• Spalte 2 Endposition: 49%

Größe

Gehen Sie zur Registerkarte Design, aktivieren Sie die Option 'Benutzerdefinierte Bundstegbreite verwenden' und verwenden Sie '1' für die Bundstegbreite.

Abstand

Öffnen Sie die Unterkategorie Abstand und verwenden Sie die folgenden Auffüllungen und Ränder:

• Obere Polsterung: 0px (Desktop), 20px (Tablet & Telefon)
• Rechte Polsterung: 25px
• Untere Polsterung: 20px
• Linke Polsterung: 25px
• Unterer Rand: 200px

Erstes Blurb-Modul

Symbol aktivieren

Fügen Sie der ersten Spalte der Zeile ein Blurb-Modul hinzu, aktivieren Sie die Option „Symbol verwenden“ und wählen Sie ein Symbol aus.

Symboleinstellungen

Gehen Sie dann zu den Designeinstellungen und nehmen Sie die folgenden Änderungen an der Unterkategorie Bild & Symbol vor:

• Symbolfarbe: #FFFFFF
• Bild-/Symbolplatzierung: Links
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 40px

Kopfzeilentexteinstellungen

Nehmen Sie dann folgende Einstellungen für die Unterkategorie Kopfzeilentext vor:

• Header-Schriftart: Roboto Light
• Schriftstil: Fett
• Header-Schriftgröße: 25px
• Kopfzeilentextfarbe: #FFFFFF
• Höhe der Kopfzeile: 1,5 em

Textkörpereinstellungen

Die Unterkategorie Textkörper erfordert die folgenden Änderungen:

• Körperschriftart: Lato Light
• Schriftgröße des Körpers: 13px
• Textkörperfarbe: #FFFFFF

Größe

Verwenden Sie als Nächstes "300px" als Inhaltsbreite.

Abstand

Verwenden Sie schließlich den folgenden Rand und die folgenden Abstände für das Blurb-Modul:

• Oberer Rand: -50px (Desktop), 0px (Tablet & Telefon)
• Obere Polsterung: 100px
• Rechte Polsterung: 10px
• Bodenpolsterung: 30px
• Linke Polsterung: 10px

Blurb-Modul klonen und in zweiter Spalte platzieren

Fahren Sie fort, indem Sie das zuvor erstellte Blurb-Modul klonen und es ebenfalls in die andere Spalte einfügen.

Hintergrundfarbe ändern

Das erste, was Sie in diesem geklonten Blurb-Modul ändern müssen, ist die Hintergrundfarbe. Ändern Sie es in 'rgba(89,60,31,0.5)'.

Icon ändern

Das nächste und letzte, was Sie ändern müssen, ist das Symbol im Inhalts-Tab.

Extra: Fügen Sie die neue Boxschatten-Option von Divi zu Row hinzu

Mit dem jüngsten Update können Sie nun auch Box-Schatten zu Zeilen, Modulen und Abschnitten hinzufügen. In diesem Beispiel fügen wir der Zeile einen Boxschatten hinzu. Das wird dazu beitragen, etwas Tiefe zu schaffen und den geschriebenen Inhalt in unserem Heldenbereich hervorzuheben.

• Horizontale Position des Boxschattens: -3px
• Vertikale Position des Kastenschattens: 31px
• Stärke der Box-Schattenunschärfe: 79px
• Stärke der Box-Schattenausbreitung: -4px
• Schattenfarbe: #424242
• Position des Boxschattens: Äußerer Schatten

Ergebnis

Lassen Sie uns ein weiteres schnelles Ergebnis zu dem Ergebnis nehmen, das Sie auf dem Desktop erzielen sollten, nachdem Sie diesem Beitrag gefolgt sind:

Und auf dem Handy:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen einen anderen Ansatz für Heldenabschnitte gezeigt. Wir haben Ihnen einige Tipps gegeben und diese Tipps ausgearbeitet, indem wir Ihnen zeigen, wie Sie ein Beispiel, das wir im Voraus mit Divi erstellt haben, nachbauen können. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von Ellagrin / shutterstock.com