So erstellen Sie ein klebriges CTA-Menü, während Sie auf der Seite nach unten scrollen

Traditionell sind Sticky-Menüs oben (oder unten) auf einer Seite sichtbar, sobald die Seite geladen wird. Das Erstellen eines klebrigen CTA-Menüs, während der Benutzer auf der Seite nach unten scrollt, kann jedoch eine kreative und effektive Möglichkeit sein, diese wichtigen CTAs jederzeit anklickbar zu halten. In gewisser Weise ist es das Beste aus beiden Welten. Es ermöglicht dem CTA, seine erstklassige Platzierung im ursprünglichen Design beizubehalten. Und es hält eine verkleinerte Version des CTA (der Schaltfläche) in einer klebrigen Menüstruktur sichtbar, mit der Benutzer vertraut sind.

In diesem Tutorial zeigen wir Ihnen, wie Sie ein klebriges CTA-Menü erstellen, während Sie in Divi auf der Seite nach unten scrollen. Dies funktioniert hervorragend für Desktop- und mobile Benutzer, indem es eine intuitive und dennoch einzigartige Möglichkeit bietet, Besucher zum Handeln zu verleiten.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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!

https://youtu.be/kpjbG8frPTQ

Abonnieren Sie unseren Youtube-Kanal

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

So erstellen Sie ein klebriges CTA-Menü, während Sie in Divi . durch eine Seite scrollen

Gebäude-CTA Nr. 1

Um mit der Erstellung unseres ersten CTA zu beginnen, verwenden wir ein Klappenmodul mit einer benutzerdefinierten CTA-Schaltfläche, die beim Scrollen des Benutzers oben und unten auf der Seite angezeigt wird.

Erstellen Sie zunächst eine neue einspaltige Zeile im regulären Abschnitt.

Klappentext hinzufügen

Fügen Sie in der Spalte der Zeile ein Klappenmodul hinzu.

Öffnen Sie die Klappeneinstellungen und fügen Sie ein Bild Ihrer Wahl anstelle des Standardsymbols hinzu. Ich verwende ein Bild aus dem Cryptocurrency Layout Pack.

Aktualisieren Sie auf der Registerkarte Design die Textstile wie folgt:

• Titelüberschriftsebene: H2
• Titelschriftart: Titillium Web
• Schriftstärke des Titels: Semi Bold
• Ausrichtung des Titeltextes: Mitte
• Titeltextgröße: 36 Pixel (Desktop), 28 Pixel (Telefon)
• Höhe der Titelzeile: 1,5 em
• Körperlinienhöhe: 2em

Zeile für CTA-Schaltfläche hinzufügen

Fügen Sie unter der Zeile mit dem gerade erstellten Klappentext eine neue einspaltige Zeile hinzu.

Es ist wichtig, dass die Zeileneinstellungen korrekt sind, damit die Funktionalität der Sticky Buttons korrekt ausgerichtet wird.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Breite: 100%
• Max. Breite: 1400px (Desktop), 100 % (Tablet)

Call-to-Action-Schaltfläche hinzufügen

Fügen Sie in der neuen Zeile ein Call-to-Action-Modul hinzu. Das Update folgendes:

• Wir benötigen nur das Button-Element in diesem Modul, damit wir den Titel und den Haupttext loswerden können.
• Stellen Sie sicher, dass Sie eine Link-URL für die Schaltfläche hinzufügen (vorerst reicht '#'), damit die Schaltfläche beim Gestalten des Layouts sichtbar ist. Sie können dies später jederzeit aktualisieren.
• Deaktivieren Sie die Option „Hintergrundfarbe verwenden“.

(HINWEIS: Sie können die weiße Schaltfläche noch nicht auf weißem Hintergrund sehen, aber das wird sich im nächsten Schritt ändern)

Aktualisieren Sie auf der Registerkarte "Design" die folgenden Schaltflächenstile:

• Schaltflächentextgröße: 14px (Desktop), 11px (Telefon)
• Schaltflächentextfarbe: #1b1f50
• Schaltflächenhintergrundfarbe: #09d5fe
• Breite des Tastenrahmens: 0px
• Tastenabstand der Buchstaben: 2px
• Schaltflächenschriftart: Titillium Web
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: TT
• Knopfpolsterung: 1em oben, 1em unten

Aktualisieren Sie das Design wie folgt:

• Breite: 33,33 %
• Modulausrichtung: Mitte
• Padding: 0px oben, 0px unten

Die 33,33 % Breite der Schaltfläche ermöglicht es der Schaltfläche, in der Sticky-Position genau 1/3 des Browserfensters einzunehmen. Wenn Sie dies mit zwei anderen Schaltflächen (jeweils mit der gleichen Breite von 33,33 %) kombinieren, erhalten Sie eine vollständige CTA-Menüleiste mit Schaltflächen.

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS-Snippet zur Promo-Beschreibung hinzu (es enthält unnötige Abstände, die wir nicht benötigen):

display:none;

Fügen Sie dann ein weiteres Snippet zum Promo-Button hinzu:

display:block;

Den Button klebrig machen

Um die Schaltfläche klebend zu machen, verwenden wir die Sticky-Position-Option, um die Schaltfläche und den oberen und unteren Rand des Browserfensters zu kleben. Wir werden auch einen Offset für den standardmäßigen festen Divi-Header hinzufügen.

Aktualisieren Sie Folgendes:

• Klebeposition: Oben und unten kleben
• Sticky Top Offset: 54px (Desktop), 0px (Tablet)
• Versatz von umgebenden klebrigen Elementen: NEIN

Mit unserer Sticky-Position können wir jetzt den Stil der Schaltfläche im Sticky-Zustand anvisieren. In diesem Fall möchten wir den Button nach links verschieben, um später Platz für weitere Sticky Buttons zu schaffen.

Aktualisieren Sie den folgenden Transformationsstil im Sticky-Zustand:

• Transformieren X-Achse verschieben (klebrig): -100%

Dadurch wird die Schaltfläche über eine Distanz verschoben, die der genauen Breite der Schaltfläche (die 33,33 %) entspricht, sobald sie am oberen oder unteren Rand der Seite haftet.

Gebäude-CTA #2

Da wir nun einen Abschnitt mit einer funktionierenden Sticky CTA-Schaltfläche haben, können wir den vorherigen Abschnitt duplizieren und kleinere Anpassungen an der Schaltfläche vornehmen.

Zuerst duplizieren Sie den Abschnitt.

Öffnen Sie im neuen Abschnitt die Einstellungen für das Call-to-Action-Modul und aktualisieren Sie die Transformationsoptionen wie folgt:

• Transformieren X-Achse übersetzen (Sticky): 0px

Dies stellt eigentlich nur den Standardzustand wieder her, da wir diese Schaltfläche nicht verschieben möchten, da sie in der Mitte bleiben muss.

Gebäude-CTA #3

Um den dritten CTA-Abschnitt zu erstellen, duplizieren Sie den vorherigen Abschnitt.

Öffnen Sie dann im neuen Abschnitt die Einstellungen für das Call-to-Action-Modul und aktualisieren Sie die Transformationsoptionen wie folgt:

• Transformieren X-Achse übersetzen (Sticky): 100%

Dadurch wird die Schaltfläche um einen Abstand nach rechts verschoben, der der genauen Breite der Schaltfläche (dh 33,33 %) entspricht, sobald sie am oberen oder unteren Rand der Seite haftet.

Schaltflächentext und -farben aktualisieren

Um das Design zu verfeinern, aktualisieren Sie den Text und die Farben der CTA-Schaltfläche, damit sie zu Ihrem Website-Design passen. Hier sind die Einstellungen für dieses Beispiel:

Für CTA #2…

• Schaltflächentext: Unsere Pläne anzeigen
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #1b1f50

Für CTA #3…

• Schaltflächentext: Chatten Sie mit uns
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #4328b7

Fügen Sie dem oberen und unteren Abschnitt einen temporären Rand hinzu, um die Funktionalität zu testen

Auf einer normalen Website befinden sich diese CTAs irgendwo in der Mitte der Seite, sodass zusätzlicher Platz zum Scrollen auf der Seite vorhanden ist. Im Moment können wir den oberen und unteren Abschnitten der Seite einen temporären Rand hinzufügen.

Fügen Sie im oberen Abschnitt einen oberen Rand von 90 Vh hinzu.

Fügen Sie im unteren Abschnitt einen unteren Rand von 90 Vh hinzu.

Endergebnis

Schauen wir uns nun das Endergebnis an.

Abschließende Gedanken

Dieses Tutorial zeigt Ihnen eine kreative Möglichkeit, diese wichtigen CTAs im Vordergrund zu halten, damit Benutzer sie jederzeit anklicken können. Es fügt auch eine subtile Mikrointeraktion hinzu, die noch mehr Aufmerksamkeit auf sie lenkt, ohne vom Hauptinhalt der Seite abzulenken. Hoffentlich hilft dies dabei, diese kreativen Säfte zum Fließen zu bringen, damit Sie mit mehr Designs experimentieren können, um es noch besser zu machen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!