So fügen Sie Ihrem Heldenbereich mit Divi . eine absolut positionierte untere Leiste hinzu

Die Art und Weise, wie Sie Elemente in Ihrem Heldenbereich strukturieren, kann manchmal schwierig werden. Sie möchten eine gute Balance haben, ohne die Menge an Inhalten, die Sie teilen möchten, drastisch reduzieren zu müssen. Glücklicherweise haben sich einige optimierte Ansätze im gesamten Web bewährt. Einer dieser Ansätze besteht darin, Ihrem Heldenbereich eine absolut positionierte untere Leiste hinzuzufügen. Es sieht nicht nur gestalterisch gut aus, sondern hilft Ihnen auch, mehrere Handlungsaufforderungen hinzuzufügen, ohne das Design aus dem Gleichgewicht zu bringen.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihrem Heldenbereich in Divi eine absolut positionierte untere Leiste hinzufügen. Die untere Leiste, die wir hinzufügen werden, enthält vier Teile; drei Schaltflächen und ein Kontaktformular. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

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

Desktop

Handy, Mobiltelefon

Laden Sie das Absolute-Positioned Bottom Bar Hero Section Layout KOSTENLOS herunter

Um das kostenlose Heldenbereichslayout 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!

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und wenden Sie einen Verlaufshintergrund an.

• Farbe 1: rgba(0,0,0,0,62)
• Farbe 2: rgba(0,0,0,0.97)
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Hintergrundbild

Laden Sie als nächstes ein Hintergrundbild Ihrer Wahl hoch.

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

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

Überläufe

Wir verstecken auch die Überläufe des Abschnitts.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Abstand

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und wenden Sie einen oberen und unteren Rand an.

• Höchste Marge: 20%
• Untere Marge: 20%

Textmodul Nr. 1 zur Spalte hinzufügen

H1-Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul mit H1-Inhalten Ihrer Wahl.

H1-Texteinstellungen

Wechseln Sie zur Design-Registerkarte des Moduls und formatieren Sie den H1-Text wie folgt:

• Überschrift Schriftart: Work Sans
• Textfarbe der Überschrift: #ffffff
• Textgröße der Überschrift:
  • Desktop: 80px
  • Tablet: 50px
  • Telefon: 40px
• Abstand der Überschriftsbuchstaben:
  • Desktop: -4px
  • Tablet & Telefon: -2px

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Fügen Sie direkt unter dem vorherigen ein weiteres Textmodul hinzu und fügen Sie Beschreibungsinhalte Ihrer Wahl hinzu.

Texteinstellungen

Passen Sie die Texteinstellungen des Moduls entsprechend an:

• Textschriftart: Open Sans
• Textfarbe: #a0a0a0

Größe

Ändern Sie auch die Größeneinstellungen.

• Breite:
  • Desktop: 68 %
  • Tablet & Telefon: 100%

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in dieser Zeile benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl bei.

Link hinzufügen

Fügen Sie einen Schaltflächenlink hinzu.

• Schaltflächen-Link-URL: #

Tasteneinstellungen

Wechseln Sie zur Design-Registerkarte des Moduls und gestalten Sie die Schaltfläche wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #ffffff
• Breite des Tastenrahmens: 0px

• Button-Schriftart: Work Sans
• Schaltflächensymbol anzeigen: Ja
• Platzierung der Schaltflächensymbole: Links

Zeile 2 hinzufügen

Spaltenstruktur

Es ist Zeit, unsere untere Heldenbereichsleiste zu erstellen! Dazu fügen wir eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite:
  • Desktop: 100 %
  • Tablet & Telefon: 80%
• Maximale Breite: 2560px

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

Box Schatten

Fügen Sie auch einen Kastenschatten hinzu.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: 50px
• Schattenfarbe: rgba(135,135,135,0.08)

Position

Wechseln Sie dann zur Registerkarte "Erweitert" und positionieren Sie die gesamte Zeile auf dem Desktop neu. Setzen Sie es bei kleineren Bildschirmgrößen auf die Standardeinstellungen zurück. Die Positionseinstellungen dieser Reihe stellen sicher, dass die Reihe am Boden des Abschnittscontainers haftet.

• Position:
  • Desktop: Absolut
  • Tablet & Telefon: Standard
• Ort: Unten Mitte

Spalte 1 Einstellungen

Abstand

Fahren Sie fort, indem Sie die Einstellungen von Spalte 1 öffnen und einige benutzerdefinierte Abstandswerte anwenden.

• Obere Polsterung: 3%
• Untere Polsterung: 3%
• Linke Polsterung: 3%
• Rechte Polsterung: 3%

Grenze

Wir verwenden auch einige responsive Rahmeneinstellungen für diese Spalte.

• Oberer Rand:
  • Breite des oberen Rands: 5px
  • Farbe des oberen Rands:
    • Standard: rgba(255,255,255,0)
    • Hover: #ffffff
• Untere Grenze:
  • Breite des unteren Rands:
    • Desktop & Tablet: 0px
    • Telefon: 3px
  • Farbe des unteren Rands: rgba(255,255,255,0.11)
• Linker Rand:
  • Breite des linken Rands:
    • Desktop: 0px
    • Tablet: 3px
    • Telefon: 0px
  • Farbe des linken Rands: rgba(255,255,255,0.11)

Spalte 2 Einstellungen

Abstand

Weiter zu den Einstellungen der zweiten Spalte. Fügen Sie den Abstandseinstellungen einige Abstandswerte hinzu.

• Obere Polsterung: 3%
• Untere Polsterung: 3%
• Linke Polsterung: 3%
• Rechte Polsterung: 3%

Grenze

Und schließen Sie die folgenden responsiven Rahmen ein:

• Oberer Rand:
  • Breite des oberen Rands: 5px
  • Farbe des oberen Rands:
    • Standard: rgba(255,255,255,0)
    • Hover: #ffffff
• Untere Grenze:
  • Breite des unteren Rands:
    • Desktop & Tablet: 0px
    • Telefon: 3px
  • Farbe des unteren Rands: rgba(255,255,255,0.11)
• Linker Rand:
  • Breite des linken Rands:
    • Desktop: 3px
    • Tablet: 3px
    • Telefon: 0px
  • Farbe des linken Rands: rgba(255,255,255,0.11)

Spalte 3 Einstellungen

Abstand

Die dritte Spalte benötigt auch benutzerdefinierte Padding-Werte.

• Obere Polsterung: 3%
• Untere Polsterung: 3%
• Linke Polsterung: 3%
• Rechte Polsterung: 3%

Grenze

Zusammen mit den folgenden Rahmeneinstellungen:

• Oberer Rand:
  • Breite des oberen Rands: 5px
  • Farbe des oberen Rands:
    • Standard: rgba(255,255,255,0)
    • Hover: #ffffff
• Linker Rand:
  • Breite des linken Rands:
    • Desktop: 3px
    • Tablet: 3px
    • Telefon: 0px
  • Farbe des linken Rands: rgba(255,255,255,0.11)

Spalte 4 Einstellungen

Hintergrundfarbe

Weiter zur letzten Spalte. Fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Abstand

Wenden Sie einige benutzerdefinierte responsive Padding-Werte an.

• Obere Polsterung
  • Desktop: 3%
  • Tablette: 3%
  • Telefon: 10%
• Untere Polsterung:
  • Desktop: 3%
  • Tablette: 3%
  • Telefon: 10%
• Linke Polsterung:
  • Desktop: 3%
  • Tablette: 5%
  • Telefon: 10%
• Rechte Polsterung:
  • Desktop: 3%
  • Tablette: 5%
  • Telefon: 10%

Position

Und positionieren Sie die gesamte Spalte auf dem Desktop neu. Dadurch wird die Größe der Spalte absolut und bleibt am unteren Rand der Zeile hängen.

• Position:
  • Desktop: Absolut
  • Tablet & Telefon: Standard
• Ort: Unten rechts

Schaltflächenmodul in vorherige Zeile klonen und Duplikat in Spalte 1 der neuen Zeile platzieren

Nachdem Sie die Zeilen- und Spalteneinstellungen abgeschlossen haben, können Sie mit dem Hinzufügen von Modulen beginnen. Wir verwenden das Button-Modul, das Teil der vorherigen Zeile ist. Klonen Sie das Modul und platzieren Sie sein Duplikat in der ersten Spalte der neuen Zeile.

Tastenausrichtung ändern

Öffnen Sie das Duplikat des Button Modules und ändern Sie die Ausrichtung.

• Tastenausrichtung: Mitte

Kopie & Links ändern

Ändern Sie als nächstes die Kopie und den Link des Moduls.

Schaltfläche in Spalte 1 zweimal klonen & Duplikate in Spalte 2 & 3 platzieren

Nachdem Sie die Einstellungen des Button-Moduls in Spalte 1 geändert haben, können Sie das gesamte Modul zweimal klonen und die Duplikate in Spalte 2 und 3 platzieren.

Kopie & Links ändern

Ändern Sie die Kopie und die Links für jedes Duplikat.

Textmodul zu Spalte 4 hinzufügen

H2-Inhalt hinzufügen

Weiter zur letzten Spalte der Zeile. Dort benötigen wir als erstes Modul ein Textmodul mit H2-Inhalten.

H2-Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Work Sans
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Buchstabenabstand: -2px

Abstand

Fügen Sie auch einen unteren Rand hinzu.

• Untere Marge: 10%

Kontaktformular Modul zu Spalte 4 hinzufügen

Felder mit voller Breite machen

Fügen Sie als Nächstes ein Kontaktformular-Modul direkt unter dem Textmodul hinzu. Öffnen Sie die Felder Name und E-Mail-Adresse einzeln und aktivieren Sie für beide die Option „Make Fullwidth“.

• Volle Breite machen: Ja

Feldeinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Feldeinstellungen wie folgt:

• Feldhintergrundfarbe: #ffffff
• Feldtextfarbe: #000000
• Felder obere Polsterung: 4%
• Felder untere Polsterung: 4%
• Fields-Schriftart: Work Sans
• Feldtextgröße: 13px

Captcha-Texteinstellungen

Nehmen Sie dann einige Änderungen an den Captcha-Texteinstellungen vor.

• Captcha-Schriftart: Work Sans
• Captcha-Textfarbe: #000000

Tasteneinstellungen

Wir gestalten auch den Button.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 17px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 0px
• Tastenabstand der Buchstaben: -1px
• Button-Schriftart: Work Sans

Grenze

Und zu guter Letzt fügen wir eine untere Rahmenbreite hinzu. Das ist es!

• Eingaben unterer Randbreite: 1px
• Eingaben Farbe des unteren Rands: #dddddd

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Ihrem Heldenbereich in Divi kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie eine absolut positionierte untere Leiste einschließen und entwerfen. Die Verwendung einer unteren Leiste hilft dir, mehr Inhalte in deinem Heldenbereich zu teilen, ohne dass es zu überwältigend wird. Mit dieser Technik können Sie jede Art von Design erstellen und mehrere CTAs ausführen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

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.