Laden Sie ein KOSTENLOSES CTA Column Swipe Hero Section Design für Divi . herunter

Der Heldenbereich Ihrer Seite verdient alle Aufmerksamkeit, die er bekommen kann. Es gibt endlose Möglichkeiten, Ihren Heldenbereich zu gestalten, je nachdem, worum es auf Ihrer Website geht und wie sich Ihre Zielgruppe verhält. Für einige Websites kann es praktisch sein, mehrspaltige CTA-Karten zu platzieren, ohne ein überwältigendes Erlebnis zu schaffen. Eine gute Möglichkeit, dies zu erreichen, besteht darin, CTA-Karten mit Spaltendurchzug zu erstellen. Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie ein atemberaubendes Design von Grund auf erstellen, das diese Technik angeht. 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 The Hero Sections KOSTENLOS herunter

Um die kostenlosen Heldenabschnitte in die Hände zu bekommen, müssen Sie sie 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

Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und fügen Sie einen Hintergrund mit Farbverlauf ein.

• Farbe 1: #ffffff
• Farbe 2: #f5ede5
• Verlaufsrichtung: 90deg
• Startposition: 17%
• Endposition: 17%

Abstand

Wechseln Sie zur Registerkarte Design und fügen Sie benutzerdefinierte obere und untere Abstände für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 5vw (Desktop), 10vw (Tablet), 13vw (Telefon)
• Untere Polsterung: 5vw (Desktop), 10vw (Tablet), 13vw (Telefon)

Zeile 1 hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #fff6ed

Größe

Wechseln Sie zur Registerkarte Design und ändern Sie auch die Größeneinstellungen der Zeile.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 60vw (Desktop), 100% (Tablet & Telefon)
• Maximale Breite: 100%
• Zeilenausrichtung: Rechts

Abstand

Wir fügen auch einige benutzerdefinierte Abstandswerte zu den Abstandseinstellungen hinzu.

• Obere Polsterung: 6vw
• Untere Polsterung: 6vw
• Linke Polsterung: 5.5vw
• Rechte Polsterung: 24vw

Grenze

Gehen Sie als nächstes zu den Rahmeneinstellungen und fügen Sie mit den folgenden Einstellungen einen linken Rahmen hinzu:

• Breite des linken Rands: 6px
• Farbe des linken Rands: #FFFFFF

Box Schatten

Fügen Sie einen subtilen Kastenschatten hinzu, um dem Heldenbereich Tiefe zu verleihen.

• Stärke der Box-Schattenunschärfe: 100px
• Schattenfarbe: rgba(0,0,0,0.22)

CSS-Klasse

Und verwenden Sie eine CSS-Klasse auf der Registerkarte "Erweitert". Später in diesem Beitrag werden wir diese CSS-Klasse verwenden, um die Bildlaufleiste auszublenden.

• CSS-Klasse: swipe-scrollbar

Hauptelement

Um ein horizontales Scrollen/Wischen zu erstellen, müssen wir die Spalten horizontal platzieren. Dazu fügen wir dem Hauptelement der Zeile benutzerdefinierten CSS-Code hinzu.

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

Überläufe

Gehen Sie zu den Sichtbarkeitseinstellungen und ändern Sie die Überläufe der Zeile.

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

Spalteneinstellungen

Nachdem Sie die Zeileneinstellungen abgeschlossen haben, können Sie die Einstellungen der ersten Spalte öffnen.

Hintergrund mit Farbverlauf

Fügen Sie einen Hintergrund mit Farbverlauf hinzu.

• Farbe 1: rgba(245,237,229,0.91)
• Farbe 2: rgba(219,34,65,0.84)
• Startposition: 35%
• Endposition: 81%
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Hintergrundbild

Zusammen mit einem Hintergrundbild.

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung

Abstand

Wechseln Sie zur Registerkarte Design und fügen Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 4vw (Desktop), 10vw (Tablet), 12vw (Telefon)
• Untere Polsterung: 4vw (Desktop), 10vw (Tablet), 12vw (Telefon)
• Linke Polsterung: 2vw (Desktop), 5vw (Tablet), 7vw (Telefon)
• Rechte Polsterung: 2vw (Desktop), 5vw (Tablet), 7vw (Telefon)

Grenze

Fahren Sie fort, indem Sie den Randradius '20px' zu jeder der Ecken in den Randeinstellungen hinzufügen.

Hauptelement

Ein weiterer wichtiger Teil, damit dies funktioniert, ist das Hinzufügen einer einzigen Zeile CSS-Code zum Hauptelement der Spalte.

width: 100% !important;

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Zeit, Module hinzuzufügen! Sie können beliebig viele Module hinzufügen und nach Ihren Wünschen gestalten. Wenn Sie jedoch genau das gleiche Beispiel erstellen möchten, das in der Vorschau dieses Beitrags geteilt wurde, beginnen Sie mit einem Textmodul und fügen Sie H3-Inhalte ein.

H3-Texteinstellungen

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

• Überschrift 3 Schriftart: Poppins
• Überschrift 3 Schriftstärke: Leicht
• Überschrift 3 Textfarbe: #e92640
• Überschrift 3 Textgröße: 1,5 vw (Desktop), 3,5 vw (Tablet), 4,5 vw (Telefon)

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir brauchen, ist ein weiteres Textmodul. Geben Sie einen Absatzinhalt Ihrer Wahl ein.

Texteinstellungen

Gehen Sie als nächstes zu den Texteinstellungen und nehmen Sie einige Änderungen vor.

• Textschriftart: Poppins
• Schriftstärke des Textes: Leicht
• Textfarbe: #e92640
• Textgröße: 0,8 vw (Desktop), 1,9 vw (Tablet), 2,8 vw (Telefon)

Abstand

Wir fügen auch einen unteren Rand hinzu, um Platz in unserer Spalten-Swipe-Karte zu schaffen.

• Unterer Rand: 18vw (Desktop), 30vw (Tablet), 42vw (Telefon)

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Weiter zum nächsten Modul, das ein Button-Modul ist. Geben Sie eine Kopie Ihrer Wahl ein.

Tasteneinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Schaltflächeneinstellungen entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0,8 vw (Desktop), 1,8 vw (Tablet), 2,5 vw (Telefon)
• Schaltflächentextfarbe: #f5ede5
• Breite des Tastenrahmens: 1px
• Farbe des Knopfrahmens: #f5ede5
• Schaltflächenrandradius: 5px
• Schaltflächenschriftart: Poppins

Abstand

Erhöhen Sie die Größe der Schaltfläche, indem Sie benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
• Rechte Polsterung: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Das nächste Modul, das wir brauchen, ist ein Divider-Modul. 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: #f5ede5

Textmodul #3 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: Poppins
• Schriftstärke des Textes: Leicht
• Textfarbe: #f5ede5
• Textgröße: 0,8 vw (Desktop), 1,9 vw (Tablet), 2,8 vw (Telefon)
• Textzeilenhöhe: 2.3em

Abstand

Fügen Sie auch einen oberen Rand hinzu.

• Oberer Rand: 2vw

Säule bis zu 5 Mal klonen und für andere CTAs wiederverwenden

Sobald Sie die erste Spalte und alle darin enthaltenen Module abgeschlossen haben, können Sie die gesamte Spalte bis zu 5 Mal klonen, je nachdem, wie viele CTA-Karten mit Spalten-Swipe Sie anzeigen möchten. Stellen Sie sicher, dass Sie die gesamte Kopie für jedes Spaltenduplikat zusammen mit den Schaltflächenlinks ändern.

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die zweite Reihe! Wir verwenden diese Zeile, um eine Überlappung mit der vorherigen zu erstellen. Wählen Sie die folgende Spaltenstruktur:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und passen Sie die Größeneinstellungen entsprechend an:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Später im Beitrag fügen wir die benötigten Module hinzu und erstellen eine negative obere Überlappung, damit es so aussieht, als wären die Module Teil der ersten Reihe. Das bedeutet, dass wir die zweite Reihe nicht brauchen, um in unserem Design überhaupt Platz einzunehmen. Aus diesem Grund entfernen wir alle standardmäßigen oberen und unteren Zeilenabstände.

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

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H1-Inhalt hinzufügen

Zeit, Module hinzuzufügen! Beginnen Sie mit einem ersten Textmodul und geben Sie H1-Inhalte Ihrer Wahl ein.

H1-Texteinstellungen

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

• Überschrift Schriftart: Poppins
• Überschriftstextfarbe: #e92741
• Überschriftstextgröße: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)

Abstand

Fügen Sie als nächstes einige Randwerte hinzu.

• Obere Marge: -35vw (Desktop), 7vw (Tablet), 10vw (Telefon)
• Linker Rand: 5vw
• Rechter Rand: 12vw

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das zweite Modul, das wir brauchen, ist ein weiteres Textmodul. Geben Sie einen Absatzinhalt Ihrer Wahl ein.

Texteinstellungen

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

• Textschriftart: Poppins
• Schriftstärke des Textes: Leicht
• Textfarbe: #e92741
• Textgröße: 0,8 vw (Desktop), 1,9 vw (Tablet), 2,8 vw (Telefon)
• Textzeilenhöhe: 2.8em

Abstand

Wir fügen dem Textmodul auch einige benutzerdefinierte Randwerte hinzu.

• Obere Marge: 2vw (Desktop), 7vw (Tablet), 10vw (Telefon)
• Unterer Rand: 2vw (Desktop), 7vw (Tablet), 10vw (Telefon)
• Linker Rand: 5vw
• Rechter Rand: 13vw (Desktop), 5vw (Tablet & Telefon)

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das nächste Modul, das wir brauchen, ist ein Button-Modul. Geben Sie eine Kopie Ihrer Wahl ein.

Tasteneinstellungen

Gehen Sie dann zur Registerkarte Design und gestalten Sie die Schaltfläche.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0.9vw
• Schaltflächentextfarbe: #e92741
• Schaltflächenhintergrundfarbe: #f5ede5
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 5px
• Schaltflächenschriftart: Poppins

Abstand

Wir erhöhen auch die Größe der Schaltfläche, indem wir einige benutzerdefinierte Abstandswerte hinzufügen.

• Oberer Rand: 2vw
• Linker Rand: 5vw
• Obere Polsterung: 1.5vw (Desktop), 2.5vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1,5 vw (Desktop), 2,5 vw (Tablet), 3 vw (Telefon)
• Linke Polsterung: 6vw (Desktop), 9vw (Tablet), 15vw (Telefon)
• Rechte Polsterung: 6vw (Desktop), 9vw (Tablet), 15vw (Telefon)

Box Schatten

Vervollständigen Sie das Schaltflächenmodul-Design, indem Sie einen subtilen Kastenschatten hinzufügen.

• Vertikale Position des Kastenschattens: 20px
• Stärke der Box-Schattenunschärfe: 50px
• Stärke der Box-Schattenausbreitung: -5px
• Schattenfarbe: rgba(0,0,0,0.19)

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 einen schönen kostenlosen Abschnitt für Spalten-Swipe-Helden geteilt und Ihnen auch gezeigt, wie Sie ihn von Grund auf neu erstellen können. Dies ist eine großartige Möglichkeit, mehrere CTA-Karten in Ihrem Heldenbereich zu präsentieren, ohne ein Design zu haben, das zu überwältigend aussieht. Wir hoffen, dass Ihnen dieses Tutorial gefallen hat und wenn Sie Fragen oder Anregungen haben, hinterlassen Sie diese bitte 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.