So entwerfen Sie einzigartige mehrspaltige Heldenabschnitte mit Divis Spezialbereich

Bei allen Designtrends bleibt die Art und Weise, wie Sie Ihre Heldenabschnitte gestalten, äußerst wichtig. Mit Divi können Sie verschiedene Ansätze verfolgen und einen Heldenbereich erstellen, der sich abhebt und die Menschen ermutigt, ihren Aufenthalt auf Ihrer Website zu verlängern. Damit Sie sich für Ihre bevorstehenden Divi-Projekte inspirieren lassen können, zeigen wir Ihnen, wie Sie einzigartige mehrspaltige Heldenabschnitte nur mit den integrierten Optionen von Divi entwerfen. Mehrspaltige Heldenabschnitte sehen nicht nur gut aus, sondern helfen Ihnen auch dabei, mehr Inhalte strategisch im Heldenabschnitt zu platzieren, ohne Ihre Besucher zu überfordern.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Laden Sie das mehrspaltige Hero Section Layout KOSTENLOS herunter

Um das mehrspaltige Layout des Heldenabschnitts in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Beginnen wir mit der Neuerstellung!

Neuen Spezialbereich hinzufügen

Spaltenstruktur

Um einen nahtlosen mehrspaltigen Heldenbereich zu erstellen, verwenden wir einen der Divi-Spezialbereiche, auf die Sie im Visual Builder Zugriff haben. Wenn Sie sich für einen Spezialbereich entscheiden, können Sie die Rasterstruktur besser im Griff haben, wenn Sie einen mehrspaltigen Heldenbereich entwerfen. Für dieses spezielle Beispiel wählen wir die folgende Spaltenstruktur:

Hintergrundfarbe

Öffnen Sie die Abschnittseinstellungen und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Größe

Wir stellen sicher, dass zwischen den Abschnittsspalten keine Lücke entsteht, indem wir die Größeneinstellungen ändern.

• Spaltenhöhen ausgleichen: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%
• Innenbreite: 100%
• Innere maximale Breite: 100%

Abstand

Wir entfernen auch alle standardmäßigen oberen und unteren Auffüllungen der Zeilen und Spalten.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Spalte 1 oberer Abstand: 0px
• Spalte 1 untere Polsterung: 0px
• Spalte 2 obere Polsterung: 0px
• Spalte 2 untere Polsterung: 0px
• Spalte 3 obere Polsterung: 0px
• Spalte 3 untere Polsterung: 0px

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie der ersten Abschnittsspalte eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Abstand

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Textmodul zur Spalte hinzufügen

Absatz & H1-Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie ein neues Textmodul mit einem Absatz und H1-Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen.

• Textschriftart: Open Sans
• Textgröße: 0,9 vw (Desktop), 1,6 vw (Tablet), 2,2 vw (Telefon)

H1-Texteinstellungen

Ändern Sie auch die H1-Texteinstellungen.

• Überschrift Schriftart: Open Sans
• Schriftstärke der Überschrift: Halbfett
• Überschrift-Schriftart: Großbuchstaben
• Überschriftstextfarbe: #000000
• Überschriftstextgröße: 4vw
• Höhe der Überschriftslinie: 1.1em

Abstand

Fügen Sie auch einige benutzerdefinierte Füllwerte hinzu.

• Obere Polsterung: 10.8vw
• Linke Polsterung: 4vw
• Rechte Polsterung: 4vw

Zeile 2 hinzufügen

Spaltenstruktur

Die zweite Zeile, die wir in der ersten Abschnittsspalte benötigen, verwendet die folgende Spaltenstruktur:

Abstand

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Padding-Werte.

• Obere Polsterung: 3vw
• Linke Polsterung: 4vw
• Rechte Polsterung: 4vw

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Sobald Sie mit den Zeileneinstellungen fertig sind, können Sie der ersten Spalte ein neues Textmodul hinzufügen. Geben Sie H3-Inhalte Ihrer Wahl ein.

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H3-Texteinstellungen entsprechend:

• Überschrift 3 Schriftart: Open Sans
• Überschrift 3 Schriftstärke: Halbfett
• Überschrift 3 Schriftstil: Großbuchstaben
• Überschrift 3 Textfarbe: #000000
• Überschrift 3 Textgröße: 1,5 vw (Desktop), 2 vw (Tablet), 2,5 vw (Telefon)

Abstand

Fahren Sie fort, indem Sie dem Telefon etwas oberen Rand hinzufügen.

• Obere Marge: 2vw (nur Telefon)

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Das zweite Modul, das wir in der ersten Spalte benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Ändern Sie als nächstes die Linienfarbe.

• Linienfarbe: #000000

Abstand

Fügen Sie einige benutzerdefinierte Randwerte hinzu, um Platz um die Trennlinie zu schaffen.

• Oberer Rand: 2vw
• Unterer Rand: 2vw
• Rechter Rand: 2vw

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das nächste und letzte Modul, das wir in dieser Spalte benötigen, ist ein weiteres Textmodul. Geben Sie einen Absatzinhalt Ihrer Wahl ein.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Textgröße: 0,6 vw (Desktop), 1,1 vw (Tablet), 2 vw (Telefon)
• Textzeilenhöhe: 2em

Abstand

Fügen Sie auch etwas untere und rechte Polsterung hinzu.

• Unterer Rand: 5vw (nur Telefon)
• Rechter Rand: 2vw

Alle Module in Spalte 1 zweimal klonen und Duplikate in die verbleibenden Spalten platzieren

Sobald Sie alle Module in Spalte 1 abgeschlossen haben, können Sie jedes davon zweimal klonen. Platzieren Sie die Duplikate in den beiden verbleibenden Spalten der Zeile.

Inhalt ändern

Stellen Sie sicher, dass Sie alle Inhalte in den Textbausteinen ändern.

Zeile 3 hinzufügen

Spaltenstruktur

Die nächste und letzte Zeile, die wir in der ersten Abschnittsspalte benötigen, verwendet die folgende Spaltenstruktur:

Abstand

Öffnen Sie die Zeileneinstellungen und ändern Sie die Abstandswerte.

• Oberer Rand: 2vw
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie der ersten Spalte ein Textmodul mit einer CTA-Kopie Ihrer Wahl hinzufügen.

Link hinzufügen

Fügen Sie auch einen Link zum gesamten Modul hinzu.

Hintergrundfarbe

Wir ändern auch die Hintergrundfarbe des Textmoduls.

• Hintergrundfarbe: #000000

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Schriftstärke des Textes: Ultra Bold
• Textschriftart: Großbuchstaben
• Textausrichtung: Mitte
• Textfarbe: #ffffff
• Textgröße: 1vw (Desktop), 1.7vw (Tablet), 2.5vw (Telefon)

Abstand

Und schaffen Sie Platz um das Modul herum, indem Sie einige benutzerdefinierte Rand- und Abstandswerte verwenden.

• Obere Marge: 4vw (Desktop), 11vw (Tablet), 0vw (Telefon)
• Obere Polsterung: 4vw
• Untere Polsterung: 4vw

Textmodul klonen und Duplikat in Spalte 2 platzieren

Nachdem Sie das Textmodul in Spalte 1 fertiggestellt haben, können Sie es klonen und das Duplikat in die zweite Spalte einfügen.

Inhalt ändern

Stellen Sie sicher, dass Sie den Inhalt und den Link ändern.

Hintergrundfarbe ändern

Ebenso die Hintergrundfarbe.

• Hintergrundfarbe: #e5e5e5

Textfarbe ändern

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Textfarbe.

• Textfarbe: #000000

Abstand ändern

Stellen Sie zu guter Letzt sicher, dass die Abstandseinstellungen nur die folgenden Werte enthalten:

• Obere Polsterung: 4vw
• Untere Polsterung: 4vw

Bildmodul zur Abschnittsspalte 2 hinzufügen

Bild hochladen

Auf zur nächsten Abschnittsspalte! Hier ist das erste Modul, das wir brauchen, ein Image-Modul. Laden Sie ein Bild Ihrer Wahl hoch oder verwenden Sie eines, das Sie im gezippten Ordner finden, der am Anfang dieses Beitrags geteilt wurde.

Größe

Gehen Sie zu den Größeneinstellungen und stellen Sie sicher, dass die Option "Vollbreite erzwingen" aktiviert ist. Dadurch wird sichergestellt, dass das Bild seine Größe über alle Bildschirmgrößen hinweg behält.

• Volle Breite erzwingen: Ja

Filter

Ändern Sie als nächstes die Filtereinstellungen.

• Sättigung: 0%
• Helligkeit: 50%

Textmodul zur Abschnittsspalte 2 hinzufügen

Absatz & H3-Inhalt hinzufügen

Das zweite Modul, das wir in dieser Spalte benötigen, ist ein Textmodul. Geben Sie einen Absatz und H3-Inhalt Ihrer Wahl ein.

Hintergrundfarbe

Fügen Sie dem Modul eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #000000

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Textfarbe: #ffffff
• Textgröße: 0,9 vw (Desktop), 1,6 vw (Tablet), 2,2 vw (Telefon)

H3-Texteinstellungen

Ändern Sie auch die H3-Texteinstellungen.

• Überschrift 3 Schriftart: Open Sans
• Überschrift 3 Schriftstärke: Halbfett
• Überschrift 3 Schriftstil: Großbuchstaben
• Überschrift 3 Textfarbe: #ffffff
• Überschrift 3 Textgröße: 1,5 vw (Desktop), 2,5 vw (Tablet), 3 vw (Telefon)

Abstand

Fügen Sie in den Abstandseinstellungen einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 3vw
• Untere Polsterung: 3vw
• Linke Polsterung: 2vw
• Rechte Polsterung: 2vw

Klonen Sie beide Module und platzieren Sie Duplikate in Abschnitt Spalte 3 (umgekehrte Reihenfolge)

Sobald Sie beide Module abgeschlossen haben, können Sie sie klonen. Platzieren Sie die Duplikate in umgekehrter Reihenfolge in der verbleibenden Abschnittsspalte.

Textmodul ändern

Hintergrundfarbe ändern

Öffnen Sie das doppelte Textmodul in der dritten Abschnittsspalte und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Textfarbe ändern

Ändern Sie als nächstes die Textfarbe.

• Textfarbe: #000000

H3-Textfarbe ändern

Zusammen mit der H3-Textfarbe.

• Überschrift 3 Textfarbe: #000000

Bildmodul ändern

Bild ändern

Laden Sie als nächstes ein anderes Bild in das duplizierte Bildmodul hoch.

Filter ändern

Und ändern Sie die Filtereinstellungen.

• Sättigung: 0%
• Helligkeit: 147%

Trennmodul zur Abschnittsspalte 2 hinzufügen

Position

Wir fügen auch einige transformierte Trennwände hinzu, um unserem Design Details zu verleihen. Platzieren Sie das erste Trennmodul gleich hier:

Sichtweite

Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Fügen Sie als nächstes eine Linienfarbe hinzu.

• Linienfarbe: #ffffff

Transformieren Drehen

Und wandeln Sie den horizontalen Teiler in einen vertikalen um, indem Sie den linken Transformationswert ändern.

• Links: 270 Grad

Transformieren Übersetzen

Positionieren Sie das Teilermodul mit der Breiteneinheit des Ansichtsfensters in den Transformationsübersetzungseinstellungen neu.

• Rechts: -19vw (Desktop)
• Unten: -11vw (Desktop), -24vw (Tablet)

Sichtweite

Und das gesamte Modul auf dem Telefon ausblenden.

Trennmodul zur Abschnittsspalte 3 hinzufügen

Position

Das nächste und letzte Teilermodul muss genau hier hinzugefügt werden:

Sichtweite

Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie zur Registerkarte Design und ändern Sie die Linienfarbe.

• Linienfarbe: #000000

Transformieren Drehen

Verwandeln Sie als nächstes den horizontalen Teiler in einen vertikalen.

• Links: 270 Grad

Transformieren Übersetzen

Und positionieren Sie den Teiler mit den Transformationsübersetzungseinstellungen neu.

• Rechts: 2vw
• Unten: -11vw (Desktop), -24vw (Tablet)

Sichtweite

Um sicherzustellen, dass die Trennlinie über dem darunter liegenden Bildmodul angezeigt wird, erhöhen wir den Z-Index in den Sichtbarkeitseinstellungen. Wir werden auch das gesamte Modul auf dem Telefon ausblenden.

• Z-Index: 2

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie wunderschöne und einzigartige mehrspaltige Heldenabschnitte nur mit den integrierten Optionen von Divi erstellen können. Dies ist eine großartige Technik, die für verschiedene Arten von Websites verwendet werden kann. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

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.