So betonen Sie Ihren Sticky Button in einem wunderschönen CTA-Abschnitt mit Divi

Als die Divi Sticky Options-Funktion veröffentlicht wurde, wurde der Release-Post in unserem Blog von Live-Demos begleitet, die Ihnen die Vielseitigkeit dieser neuen Funktion zeigen. Damit Sie Sticky-Optionen besser verstehen und in Ihrem Design verwenden können, zeigen wir Ihnen in diesem Tutorial, wie Sie eines der Live-Demo-Designs neu erstellen. Das Design, das wir neu erstellen, konzentriert sich darauf, Ihren klebrigen Knopf zu betonen. Es ist ein textbasierter CTA-Abschnitt, mit dem Sie Ihren Call-to-Action auf schöne Weise hervorheben können. 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 CTA-Abschnittslayout KOSTENLOS herunter

Um das kostenlose CTA-Abschnittslayout in die Hände zu bekommen, müssen Sie es zunächst ü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!

1. Elementstruktur aufbauen

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Dies kann eine neue oder eine vorhandene Seite sein, aber wir empfehlen, sie zu einer Seite hinzuzufügen, die bereits Inhalt enthält, damit Sie genug Platz zum Scrollen haben, um die Effekte tatsächlich zum Leben zu erwecken. Öffnen Sie die Abschnittseinstellungen und wenden Sie eine Hintergrundfarbe Ihrer Wahl an.

• Hintergrundfarbe: #00965a

Größe

Wechseln Sie zur Registerkarte Design des Abschnitts und wenden Sie eine maximale Höhe an. Diese maximale Höhe hilft uns sicherzustellen, dass die Höhe des Abschnitts begrenzt ist.

• Maximale Höhe: 100vh

Überläufe

Da wir später im Tutorial einige Scroll-Effekte anwenden werden, müssen wir auch die Überläufe des Abschnitts ausblenden, um sicherzustellen, dass nichts über den Abschnittscontainer hinausgeht.

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

Neue Zeile hinzufügen

Spaltenstruktur

Nachdem die Abschnittseinstellungen vorgenommen wurden, fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und wenden Sie einige benutzerdefinierte Größeneinstellungen an. Diese Größeneinstellungen ermöglichen es dem Zeilencontainer, die gesamte Breite der Zeile einzunehmen, was unserem Design einen Vollbildeffekt verleiht.

• Breite: 100%
• Maximale Breite: keine

Spalte 2 Einstellungen

Abstand

Öffnen Sie als nächstes die Einstellungen von Spalte 2 und wenden Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen an.

• Untere Polsterung: 60px
• Linke Polsterung:
  • Tablet & Telefon: 5%
• Rechte Polsterung:
  • Desktop: 10vw
  • Tablet & Telefon: 5%

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem Textmodul in Spalte 1. Fügen Sie Inhalte Ihrer Wahl hinzu. Um genau das gleiche Design wie in der Vorschau dieses Beitrags zu erstellen, fügen Sie einige relevante Wörter ein, die den CTA stärken, den wir später im Tutorial in Spalte 2 platzieren werden. Stellen Sie sicher, dass Sie jedes Wort auch in einer eigenen Zeile platzieren.

Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Texteinstellungen. Sie werden feststellen, dass wir die Breite des Darstellungsbereichs als Einheit für die Textgröße verwenden. Die Verwendung der Breiteneinheit des Darstellungsbereichs hilft uns, den Text auf allen Bildschirmgrößen reaktionsschnell zu halten.

• Textschriftart: Work Sans
• Schriftstärke des Textes: Fett
• Textfarbe: #000000
• Textgröße: 10vw
• Textzeilenhöhe: 0.2em

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Weiter zur zweiten Spalte. Fügen Sie dort ein Textmodul mit einer Call-to-Action-Kopie Ihrer Wahl hinzu.

Texteinstellungen

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

• Textschriftart: Work Sans
• Textfarbe: #ffffff
• Textgröße: 56px
• Textzeilenhöhe: 1,2em

Größe

Weisen Sie auch dem Textmodul eine maximale Breite zu.

• Maximale Breite: 400px

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir in unserem Design benötigen, ist ein Button-Modul in Spalte 2. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

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

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 16px
• Schaltflächentextfarbe: #000000
• Hintergrundfarbe der Schaltfläche:
  • Standard: #ffffff
  • Schweben: rgba(255,255,255,0.7)
• Breite des Tastenrahmens: 5px
• Farbe des Knopfrahmens: rgba(0,0,0,0)

• Schaltflächenrandradius: 5px
• Button-Schriftart: Work Sans
• Schaltflächensymbol anzeigen: Nein

2. Wenden Sie Scroll- und Sticky-Effekte an

Vertikale Bewegung zum Textmodul in Spalte 1 hinzufügen

Nachdem die Grundlage für unser Design gelegt wurde, ist es an der Zeit, die Scroll- und Sticky-Effekte anzuwenden! Öffnen Sie das Textmodul in Spalte 1 und wenden Sie eine reaktionsschnelle vertikale Bewegung an.

• Vertikale Bewegung aktivieren: Ja
• Startversatz:
  • Desktop: 10
  • Tablet & Telefon: 0
• Mittenversatz: 0
• Endversatz:
  • Desktop: -10
  • Tablet & Telefon: 0
• Bewegungseffekt-Trigger: Top of Element

Fügen Sie einen Sticky-Effekt zu Spalte 2 hinzu

Als Nächstes öffnen wir die Einstellungen von Spalte 2 und wenden einen Sticky-Effekt auf dem Desktop an. Da die Spalten und Module bei kleineren Bildschirmgrößen untereinander und nicht nebeneinander platziert werden, werden die Sticky-Einstellungen bei kleineren Bildschirmgrößen auf „Nicht kleben“ zurückgesetzt.

• Klebrige Position:
  • Desktop: Bleiben Sie oben
  • Tablet & Telefon: Nicht kleben
• Sticky Top Offset: 80px
• Untere Klebrigkeitsgrenze: Abschnitt
• Versatz von umgebenden klebrigen Elementen: Ja
• Übergangsstandard- und Sticky-Stile: Ja

Fügen Sie Sticky-Styling zum Button in Spalte 2 hinzu

Nachdem die Spalte 2 nun klebrig geworden ist, können wir der Säule selbst und den Modulen in der Säule ein klebriges Styling zuweisen. Die einzigen bleibenden Änderungen, die wir vornehmen werden, konzentrieren sich jedoch auf die Schaltfläche. Öffnen Sie das Modul, gehen Sie zu den Schaltflächeneinstellungen und invertieren Sie die Text- und Schaltflächenfarben. Das ist es! Sobald Sie das Layout gespeichert und den Visual Builder verlassen haben, können Sie das schöne Design live auf Ihrer Website sehen.

• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000

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 eines der Designs neu erstellen können, die als Demo im Beitrag zum Update der Sticky Options-Funktion verwendet wurden. Dieses Design konzentriert sich darauf, Ihre Sticky-Schaltfläche hervorzuheben, indem der Stil geändert wird, sobald der Sticky-Status aktiviert ist. Sie konnten die JSON-Datei auch kostenlos herunterladen! 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.