Animierten „In den Einkaufswagen“-Button schütteln

Warum einen Button animieren?

Das Hinzufügen einer Animation zu Ihrer Schaltfläche „In den Warenkorb“ ist eine wirkungsvolle Möglichkeit, die Aufmerksamkeit darauf zu lenken und sicherzustellen, dass Ihr Call-to-Action (CTA) auf der Seite hervorsticht. Diese Technik kann Verbessern Sie das Benutzerengagement als auch Erhöhen Sie die Klickrate, wodurch es wahrscheinlicher wird, dass Benutzer die gewünschte Aktion ausführen.

Eine der wirkungsvollsten und am häufigsten verwendeten Animationen ist der „Shake“-Effekt, der der Schaltfläche eine dynamische Bewegung verleiht, sodass sie für Benutzer kaum zu übersehen ist.

Schauen Sie sich dieses Beispiel an:

Erstellen Sie mit GemPages einen animierten Shake-Button zum Hinzufügen zum Warenkorb

Das Erstellen einer Shake-Animation für Ihren Button in GemPages ist einfach und anpassbar. Befolgen Sie diese Schritte, um den Effekt zu implementieren und zu optimieren:

Schritt 1: Animation in den Schaltflächeneinstellungen aktivieren

Sobald Sie im GemPages Editor sind, wählen Sie die In den Warenkorb Schaltfläche auf Ihrer Seite, um die Einstellungen zu öffnen.

Gehen Sie in der linken Seitenleiste zu Erweitert Blättern Sie nach unten zum Animation Option und schalten Sie sie ein.

Schritt 2: Wenden Sie die Shake-Animation an

Wähle aus Shake Effekt aus den Animationsoptionen. Sie können die Schaltfläche so einstellen, dass sie nur beim Schweben oder beim Erscheinen wackelt, je nach Wunsch.

Passen Sie dann die Animationseinstellungen um zu steuern, wie sich der Shake-Effekt verhält.

• Intensität: Definieren Sie, wie stark die Schüttelbewegung ist.
• Geschwindigkeit: Stellen Sie ein, wie schnell der Shake-Effekt eintritt. 
• Verzögern: Geben Sie eine Verzögerung (in Sekunden) an, bevor die Animation beginnt.
• Lockerung: Wählen Sie aus, wie die Animation im Zeitverlauf fortschreitet:
  • Linear: Durchgehend eine konstante Geschwindigkeit.
  • Einfaches Einsteigen: Beginnt langsam und wird schneller.
  • Ausklang: Startet schnell und wird langsamer.
  • Einfaches Ein- und Aussteigen: Eine Kombination aus langsamem Start und langsamem Ende.
• Schleife: Entscheiden Sie, ob die Shake-Animation kontinuierlich wiederholt oder nur einmal ausgeführt werden soll.

Um darüber zu erfahren, lesen Sie unbedingt unseren Leitfaden: Animationseinstellungen, du kannst lesen Dieser Artikel.

Schritt 3: Speichern und veröffentlichen

Speichern Sie in der oberen Leiste die Updates und klicken Sie auf Veröffentlichen um Ihre Änderungen im Schaufenster live zu schalten.