So steigern Sie Ihren CTA mit einem „Winning Spin“-Scroll-Effekt

Es macht immer Spaß, einen Preis zu gewinnen. Aus diesem Grund vermarkten Unternehmen ihre Produkte und Dienstleistungen online, indem sie kostenlose Dinge verschenken. Dies kann ein Gutschein für ein kostenloses Dessert bei Ihrer ersten Bestellung sein oder ein kostenloses E-Book, wenn Sie eine E-Mail-Liste abonnieren. Aber manchmal können sogar Werbegeschenke im Web ignoriert werden. Das Hinzufügen eines eleganten Scroll-Effekts „Winning Spin“ kann eine großartige Möglichkeit sein, Ihrem CTA die Aufmerksamkeit zu schenken, die er verdient, und gleichzeitig eine ansprechende Interaktion für die Besucher zu schaffen.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihre CTAs mit einem „Winning Spin“-Scroll-Effekt in Divi steigern können. Wenn ein Benutzer auf der Seite nach unten scrollt, dreht sich der gewinnende Preis in die Sicht, um das kostenlose Angebot auf einzigartige Weise zu enthüllen. Und Sie können damit für fast jedes kostenlose Angebot werben, das Ihnen einfällt.

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!

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 „Wählen Sie ein vorgefertigtes Layout“.
   
4. Wählen Sie das Layout der Bäckerei-Homepage und klicken Sie, um das Layout zu verwenden.
   

Danach können Sie in Divi mit der Erstellung des CTA mit einem „Winning-Spin“-Scroll-Effekt beginnen.

Teil 1: Erstellen des Scroll-Effekts „Winning Spin“

Stellen Sie zunächst die Ebenenansicht über das untere Einstellungsmenü im Divi Builder bereit. Dies wird dazu beitragen, unsere Designelemente besser zu verwalten.

Abschnitt, Zeile und Spalten hinzufügen

Das vorgefertigte Layout enthält bereits mehrere Abschnitte mit Inhalten. Wir werden der Seite, auf der sich der CTA befinden soll, einen neuen Abschnitt hinzufügen. Fügen Sie für dieses Tutorial einen neuen regulären Abschnitt direkt unter dem Abschnitt mit der Bezeichnung „Dienste“ hinzu.

Fügen Sie innerhalb des Abschnitts eine zweispaltige Zeile hinzu.

Zeileneinstellungen

Öffnen Sie vor dem Hinzufügen von Modulen die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Breite: 94%
• Polsterung: 10px oben, 10px unten
• Randbreite: 1px
• Rahmenfarbe: rgba(0,0,0,0.12)

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

display:flex;
align-items: center;

Spalte 1 Rahmen

Sobald die Zeileneinstellungen abgeschlossen sind, öffnen Sie die Einstellungen für Spalte 1 und fügen Sie wie folgt einen rechten Rahmen hinzu:

• Breite des rechten Rands: 1px
• Farbe des rechten Rands: rgba(0,0,0,0.12)

Erstellen von Drehpfeil und Text mit einem Klappenmodul

Als nächstes erstellen wir den Spinnerpfeil und den Text, der als Pfeil dient, der auf die Gewinnerauswahl zeigt.

Blurb-Modul hinzufügen

Fügen Sie der linken Spalte ein neues Klappenmodul hinzu.

Inhalt anzeigen

Aktualisieren Sie dann den Klappentext mit einem neuen Titel und Symbol.

• Titel: Du gewinnst a
• Symbol: Rechtspfeil (siehe Screenshot)

Klappendesign

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Symbolfarbe: #a06d51
• Bild-/Symbolplatzierung: Links
• Symbolschriftgröße: 80px (Desktop), 50px (Tablet), 40px (Telefon)
• Titelschriftart: Patua One
• Schriftstärke des Titels: Fett
• Größe des Titeltexts: 40 Pixel (Desktop), 25 Pixel (Tablet), 20 Pixel (Telefon)
• Titel-Buchstaben-Abstand: 1px
• Höhe der Titelzeile: 2em

Blurb benutzerdefiniertes CSS

Ändern Sie als Nächstes die Reihenfolge des Klappentexts so, dass sich der Pfeil rechts statt links befindet, indem Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzufügen:

direction: rtl !important;

Entfernen Sie dann den Standardabstand unter dem Klappentitel, indem Sie dieses benutzerdefinierte CSS zum Klappentitel hinzufügen:

padding-bottom: 0px

Erstellen der Preisauswahl mit mehreren Klappentexten

In der rechten Spalte werden wir unsere Preisauswahlen hinzufügen, die sich drehen und sich schließlich auf einen Gewinner einigen werden. Dazu erstellen und positionieren wir 4 Klappenmodule mit Titel und Bild.

Klappentext erstellen 1

Um unseren ersten Klappentext in Spalte 2 zu erstellen, duplizieren Sie den Klappentext aus Spalte 1 und ziehen Sie ihn in Spalte 2.

Öffnen Sie die Einstellungen für den duplizierten Klappentext in Spalte 2 und entfernen Sie das benutzerdefinierte CSS für das Hauptelement:

Dadurch wird unser Symbol wieder nach links gebracht.

Titel und Bild aktualisieren

Aktualisieren Sie dann den Titel und das Bild wie folgt:

• Titel: KOSTENLOSES Cookie!
• Bild: Bild hochladen (ca. 100 x 100 Pixel)

Klappentext 1 Design

Aktualisieren Sie dann die Designeinstellungen wie folgt:

• Bildbreite: 80 Pixel (Desktop), 50 Pixel (Tablet), 40 Pixel (Telefon)
• Inhaltsbreite: 92%
• Breite: 100%

Ursprung transformieren

Wir werden die Klappentexte mit der Option „Transformationsrotation“ drehen, daher ist es wichtig, einen Transformations-Ursprung zu wählen, der für die Art und Weise, wie die Klappentexte gedreht werden sollen, sinnvoll ist. Wir werden die erste nicht rotieren, aber dies wird als gute Vorlage für die Zukunft dienen.

Aktualisieren Sie den Transformations-Ursprung für den Klappentext wie folgt:

• Ursprung der Transformation: rechte Mitte

Sie sollten auch die Bild-/Symbolanimation entfernen.

Absolute Position

Geben Sie auf der Registerkarte "Erweitert" den Klappentext und die absolute Position wie folgt ein:

• Position: Absolut
• Ort: rechts Mitte

Erstellen von Klappentext 2

Um den zweiten Klappentext zu erstellen, duplizieren Sie Klappentext 1.

Rotierender Klappentext 2

Fügen Sie dann eine Transformationsdrehung wie folgt hinzu:

• Transformieren Rotation Z-Achse: 25deg

Sie werden sehen, dass der Klappentext nun aus dem Sichtbereich der Zeile gedreht ist.

Blurb 3 . erstellen und drehen

Um den dritten Klappentext zu erstellen, duplizieren Sie Klappentext 2. Aktualisieren Sie dann die Transformationsrotation wie folgt:

• Transformieren Sie die Drehung Z-Achse: 50deg

Blurb 4 . erstellen und drehen

Um den vierten Klappentext zu erstellen, duplizieren Sie Klappentext 3. Aktualisieren Sie dann die Transformationsrotation wie folgt:

• Transformieren Sie die Drehung Z-Achse: 75deg

Blurb-Titel und Bilder aktualisieren

Wenn Sie mit dem Hinzufügen der 4 Klappentexte fertig sind, gehen Sie zurück und aktualisieren Sie den Titel und das Bild für jeden nach Bedarf.

Spalten-Scroll-Rotation

Um den Scroll-Effekt hinzuzufügen, drehen wir die gesamte Spalte, die die 4 gedrehten Klappen enthält.

Öffnen Sie die Einstellungen für Spalte 2 und aktualisieren Sie Folgendes:

• Ursprung der Transformation: rechte Mitte

Öffnen Sie unter der Registerkarte "Erweitert" die Registerkarte "Rotations-Scroll-Effekt" und aktualisieren Sie Folgendes:

• Drehen aktivieren: JA
• Startrotation: -75% (bei 15%)

Aktualisieren Sie dann den Bewegungseffekt-Trigger auf „Top of Element“.

Zeile mit verstecktem Überlauf aktualisieren

Gehen Sie nun zurück zu den Zeileneinstellungen und blenden Sie den Überlauf des Inhalts aus, indem Sie die folgende Zeileneinstellung aktualisieren:

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

Teil 2: Erstellen des Preis-CTA

Für diesen letzten Teil des Tutorials werden wir einen CTA erstellen, der Informationen zum Preis und eine Schaltfläche anzeigt. Und wir werden einen Scroll-Effekt hinzufügen, um den CTA anzuzeigen, nachdem die "Gewinndrehung"-Animation abgeschlossen ist. Dies wird einen überraschenden Effekt imitieren.

Zeile hinzufügen

Fügen Sie zunächst eine einspaltige Zeile direkt unter der gerade erstellten Zeile hinzu.

Textmodul hinzufügen

Um den Inhalt unseres CTA hinzuzufügen, kopieren wir einen Textbaustein aus dem vorgefertigten Layout auf der Seite. Suchen und kopieren Sie den Textbaustein mit dem Titel „Online einkaufen“.

Fügen Sie es dann in die gerade erstellte Zeile ein.

Textdesign

Aktualisieren Sie das Textdesign wie folgt:

• Textschriftart: PT Sans
• Schriftstärke des Textes: Fett
• Text Textgröße: 16px
• Textzeilenhöhe: 2em
• Textausrichtung: Mitte

CTA-Schaltfläche hinzufügen

Suchen Sie als nächstes die Schaltfläche oben im vorgefertigten Layout und kopieren Sie es.

Fügen Sie es dann direkt unter dem Textbaustein ein.

Zeilen-Scroll-Effekt

Um den CTA anzuzeigen, nachdem der „Gewinndreher“ den Preis ausgewählt hat, öffnen Sie die Zeileneinstellungen und aktualisieren Sie den folgenden Scroll-Effekt:

Unter der Registerkarte Ein- und Ausblenden…

• Ein- und Ausblenden aktivieren: JA
• Anfangsdeckkraft: 0% (bei 50%)
• Mittlere Deckkraft: 100 % (bei 55 %)

Endergebnis

Abschließende Gedanken

Hoffentlich gibt Ihnen dieser „Winning-Spin“-Scroll-Effekt einige frische Ideen, wie Sie einen ansprechenderen CTA auf Ihrer eigenen Website gestalten können. Der Aufbau erfordert ein wenig Finesse mit den Transformationsoptionen und Bildlaufeffekten von Divi. Aber sobald es fertig ist, lässt sich das Layout ganz einfach mit Ihren eigenen einzigartigen Inhalten aktualisieren.

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

Danke schön!