8 verzögerte Tastenanimationen für Ihren benutzerdefinierten Divi-Header-CTA

Das Hinzufügen von verzögerten Button-Animationen zu jedem CTA kann eine effektive Möglichkeit sein, die Aufmerksamkeit auf Besucher zu lenken und wiederum die Wahrscheinlichkeit eines Klicks zu erhöhen. In diesem Tutorial zeigen wir Ihnen, wie Sie mit Divi 8 verzögerte Tastenanimationen für einen benutzerdefinierten Header-CTA erstellen. Dazu kombinieren wir Animationseinstellungen auf eine Weise, die Sie vielleicht noch nie in Betracht gezogen haben. Außerdem können diese Animationen auf fast jede CTA-Schaltfläche auf Ihrer Website angewendet werden.

Lass uns anfangen.

Vorgeschmack

Hier ist ein Blick auf die 8 verzögerten Schaltflächenanimationen, die wir dem benutzerdefinierten Header-CTA in Divi hinzufügen werden:

Laden Sie das 8 verzögerte Header-Button-Animations-Layout KOSTENLOS herunter

Um die 8 verzögerten Schaltflächenanimationen aus diesem Tutorial 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!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie das Divi-Theme installieren und aktivieren. Stellen Sie sicher, dass Sie die neueste Version von Divi haben.

Sie müssen das Second Theme Builder Pack herunterladen, da wir für dieses Tutorial den benutzerdefinierten Header auf der 404-Seitenvorlage aus diesem Paket verwenden werden.

Danach sind Sie bereit zu gehen.

Importieren der Vorlage aus dem zweiten Theme Builder Pack

Navigieren Sie im WordPress-Dashboard zu Divi > Theme Builder. Wählen Sie im Theme Builder das Portabilitätssymbol oben rechts auf der Seite aus. Wählen Sie im Portabilitäts-Popup die Registerkarte Importieren, wählen Sie die Datei theme-builder-pack-2-404-page-template.json und klicken Sie auf die Schaltfläche Importieren. (Diese Importdatei befindet sich im Ordner Second Theme Builder Pack)

Sie können auch die Option auswählen, die globale Kopf- und Fußzeile als statische Layouts zu importieren.

Nachdem die Vorlage importiert wurde, klicken Sie auf das Symbol, um den benutzerdefinierten Kopfzeilenbereich zu bearbeiten.

Dadurch gelangen Sie zum Layout-Editor für Körpervorlagen, in dem wir die verzögerten Animationen zur Schaltfläche in der vorgefertigten Kopfzeile hinzufügen.

8 verzögerte Button-Animationen für Ihren benutzerdefinierten Header-CTA

Die folgenden 8 verzögerten Schaltflächenanimationen enthalten eine einzigartige Kombination aus integrierten Divi-Animationsoptionen und der CSS-Eigenschaft perspektivische. Die perspektivische Eigenschaft fügt einen 3D-Effekt hinzu, wenn die Schaltflächenanimation einen Flip- oder Fold-Effekt enthält. Für die meisten dieser Animationen fügen wir sowohl der Schaltfläche als auch der übergeordneten Spalte eine Animation hinzu, um komplexere Bewegungen zu erzielen.

Hier sind sie…

#1 Dropdown-Bounce

Tasteneinstellungen:

Die Animation der verzögerten Dropdown-Schaltfläche ist einfach und effektiv. Um es zu erstellen, öffnen Sie die Einstellungen des Schaltflächenmoduls und aktualisieren Sie Folgendes:

• Animationsstil: Bounce
• Animationsrichtung: Unten
• Animationsdauer: 1100 ms
• Animationsverzögerung: 1500 ms
• Anfangsdeckkraft der Animation: 100 %

#2 Vertikaler 3D-Flip

Um die verzögerte 3D-Schaltflächenanimation für vertikales Spiegeln zu erstellen, müssen Sie zuerst die perspektivische Eigenschaft zur übergeordneten Spalte der Schaltfläche (Spalte 2) hinzufügen.

Spalteneinstellungen

Um der Spalte eine Perspektive hinzuzufügen, öffnen Sie die Zeileneinstellungen und klicken Sie dann auf , um die Einstellungen für Spalte 2 zu bearbeiten. Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

perspective: 150px

Tasteneinstellungen:

• Animationsstil: Flip
• Animationsrichtung: Zentrum
• Animationsdauer: 1500 ms
• Animationsverzögerung: 1000ms
• Animationsintensität: 400%
• Anfangsdeckkraft der Animation: 100 %

#3 Horizontaler 3D-Flip

Die verzögerte 3D-Schaltflächenanimation für horizontales Spiegeln ähnelt dem vertikalen Spiegeln. Der einzige wirkliche Unterschied ist die Animationsrichtung.

Spalteneinstellungen:

Stellen Sie zunächst sicher, dass Sie die Perspektive zu Spalte 2 hinzugefügt haben, indem Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzufügen:

perspective: 150px

Tasteneinstellungen:

Öffnen Sie die Einstellungen des Tastenmoduls und aktualisieren Sie Folgendes:

• Tastenausrichtung: Mitte

Dadurch wird sichergestellt, dass die horizontale Spiegelung mit der übergeordneten Perspektiveneigenschaft zentriert ist.

• Animationsstil: Falten
• Animationsrichtung: Zentrum
• Animationsdauer: 1000ms
• Animationsverzögerung: 2000 ms
• Animationsintensität: 400%
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Linear

#4 Dropdown-Bounce + vertikaler 3D-Flip

Diese verzögerte Schaltflächenanimation wird durch die Kombination einer Sprunganimation (der Spalte hinzugefügt) und einer Flip-Animation (der Schaltfläche hinzugefügt) erreicht.

So bauen Sie es.

Spalteneinstellungen:

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Einstellungen von Spalte 2 wie folgt:

• Animationsstil: Bounce
• Animationsrichtung: Unten
• Animationsverzögerung: 2000 ms
• Anfangsdeckkraft der Animation: 100 %

Fügen Sie dann das perspektivische CSS wie folgt zum Hauptelement hinzu:

perspective: 150px;

Tasteneinstellungen:

Nachdem die Spalteneinstellungen vorgenommen wurden, aktualisieren Sie die Einstellungen des Tastenmoduls wie folgt:

• Animationsstil: Flip
• Animationsrichtung: Zentrum
• Animationsdauer: 1500 ms
• Animationsverzögerung: 1000ms
• Animationsintensität: 400%
• Anfangsdeckkraft der Animation: 100 %

Der Trick hier besteht darin, sicherzustellen, dass Sie den Start des Flips verzögern, nachdem die Spaltenanimation abgeschlossen ist.

#5 Swoop nach unten (nach unten schieben + drehen)

Um die „Swoop-Down“-Animation für den nächsten zu erhalten, müssen wir eine Slide-Animation (der Spalte hinzugefügt) und eine Roll-Animation (der Schaltfläche hinzugefügt) kombinieren.

Lass es uns tun.

Spalteneinstellungen:

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Einstellungen von Spalte 2 wie folgt:

• Animationsstil: Folie
• Animationsrichtung: Unten
• Animationsverzögerung: 1000ms
• Anfangsdeckkraft der Animation: 100 %

Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

perspective: 150px

Tasteneinstellungen:

Aktualisieren Sie dann die Schaltflächeneinstellungen wie folgt:

• Animationsstil: Rolle
• Animationsrichtung: Unten
• Animationsdauer: 1500 ms
• Animationsverzögerung: 1000ms
• Anfangsdeckkraft der Animation: 100 %

#6 Vergrößern (Zoom + Transformationsskalierung)

Diese verzögerte Schaltflächenanimation ist insofern einzigartig, als sie die Skalierung der Schaltfläche mithilfe der Transformationsskalierung umfasst. Dann fügen wir der Schaltfläche die Zoom-Animation hinzu.

So geht's.

Tasteneinstellungen:

Öffnen Sie die Tastenmoduleinstellungen und aktualisieren Sie Folgendes:

• Transformationsskala: 175%
• Animationsstil: Zoom
• Animationsrichtung: Zentrum
• Animationsdauer: 1500 ms
• Animationsverzögerung: 1000ms
• Anfangsdeckkraft der Animation: 100 %

#7 Puls (vergrößern + verkleinern)

Diese verzögerte Impulsanimation wird durch Kombinieren einer Zoom-Out-Animation (zur Spalte hinzugefügt) und einer Zoom-In-Animation (hinzugefügt der Schaltfläche) erstellt.

Lass es uns tun.

Spalteneinstellungen:

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Einstellungen für Spalte 2 wie folgt:

• Animationsstil: Zoom
• Animationsrichtung: Zentrum
• Animationsdauer: 1000ms
• Animationsverzögerung: 2000 ms
• Animationsintensität: -100%
• Anfangsdeckkraft der Animation: 100 %

Beachten Sie, dass wir einen negativen Wert (-100%) für die Animationsintensität hinzugefügt haben. Dadurch hat die Spalte den gegenteiligen Effekt, der die Spalte/Schaltfläche verkleinert (oder verkleinert).

Tasteneinstellungen:

Aktualisieren Sie dann die Schaltflächeneinstellungen wie folgt:

• Animationsstil: Zoom
• Animationsrichtung: Zentrum
• Animationsdauer: 1500 ms
• Animationsverzögerung: 1000ms
• Animationsintensität: 50%
• Anfangsdeckkraft der Animation: 100 %

Beachten Sie, dass die Animationsverzögerung so eingestellt ist, dass sie 1000 ms vor der Spaltenanimation auftritt, sodass die Schaltfläche vergrößert wird, bevor sie verkleinert wird.

#8 Spirale (nach links schieben + drehen)

Diese letzte verzögerte Schaltflächenanimation kombiniert eine Folienanimation (der Spalte hinzugefügt) und eine 720-Grad-Flip-Animation (der Schaltfläche hinzugefügt).

So geht's.

Spalteneinstellungen:

Öffnen Sie zunächst die Zeileneinstellungen und aktualisieren Sie die Einstellungen für Spalte 2 wie folgt:

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsdauer: 2000 ms
• Animationsverzögerung: 2000 ms
• Animationsintensität: 100%
• Anfangsdeckkraft der Animation: 100 %

Tasteneinstellungen:

Aktualisieren Sie dann die Einstellungen des Tastenmoduls wie folgt:

• Animationsstil: Flip
• Animationsrichtung: Zentrum
• Animationsdauer: 2000 ms
• Animationsverzögerung: 2000 ms
• Animationsintensität: 800%
• Anfangsdeckkraft der Animation: 100 %

Beachten Sie hier, dass die Animationsintensität auf 800 % eingestellt ist. Dadurch wird die Schaltfläche dreimal umgedreht, um den Dreheffekt zu erzeugen.

Endgültige Ergebnisse

Werfen wir einen letzten Blick auf die 8 verzögerten Tastenanimationen.

Abschließende Gedanken

Ich hoffe, dass diese 8 verzögerten Schaltflächenanimationen dazu beitragen, die Conversions für Ihre benutzerdefinierten Header-CTAs zu steigern. Sie können sich auch von diesen Beispielen inspirieren lassen und zusätzliche Designs und Anwendungen für Ihre eigene Website erkunden!

Haben Sie einen Favoriten?

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

Danke schön!