In diesem Artikel erkläre ich dir alle Möglichkeiten des Button-Widgets.
1. Klicke auf das Plus Icon auf der linken Seite.
2. Nun kannst du das Widget Button per Drag-and-drop Funktion an die gewünschte Stelle auf deiner Seite ziehen und einsetzen.
3. Schreibe hier deinen Button Text. Das wird in den meisten Fällen dein Handlungsaufruf (CTA) Text sein. Z.B. "Jetzt Kontakt aufnehmen" oder "Gratis downloaden" usw.
4. Klicke auf den Kreis, wenn du eine zweite Textzeile hinzufügen möchtest. Auch hier kannst du wieder einen Text angeben und ob der Text links oder rechts angeordnet sein soll.
5. Füge ein Icon hinzu, indem du auf den Kreis links neben "Icon hinzufügen" klickst. Klicke einmal direkt auf das Icon, um aus verschiedenen Symbolen auswählen zu können. Außerdem hast du die Möglichkeit zu entscheiden, ob das Icon vor ("an der Vorderseite") oder hinter ("an der Rückseite") dem Text stehen soll.
6. Füge hier einen Link hinzu.
7. Du hast hier viele Optionen von verschiedenen Verlinkungen, die du machen kannst:
Seite, die du erstellt hast
Seite von deinem Shop
externen Link auf jede beliebige Seite im Internet
Ankerpunkt, den kannst du auf jeder beliebigen Seite z.B. bei einem Block in den Einstellungen setzten (wenn jemand auf den Button klickt, landet diese Person bei diesem Ankerpunkt)
Datei aus deinem Dateimanager
Pop-up (ein Fenster, das sich öffnet auf der gleichen Seite)
E-Mail Verlinkung
Telefonnummer Verlinkung
8. Hier hast du die Option, einen "nofollow" Link zu erstellen.
9. Sobald du fertig bist, klicke auf "wählen". Jetzt ist dein Link beim Button hinterlegt.
10. Klicke auf den Button, um weitere Einstellungen vorzunehmen. "Bearbeiten" führt dich zum gleichen Fenster, in dem du zuvor Einstellungen vorgenommen hast.
11. Bei "Link bearbeiten" kannst du den zuvor erwähnten Link bearbeiten.
12. Unter "Style bearbeiten" kannst du verschiedene Aspekte des Button-Styles ändern.
13. Passe beispielsweise die Button- und Randfarbe an, bestimme den Text-Style und wähle, ob Schattierung vorhanden sein soll. Auch das Padding (wie viel Abstand zwischen Text und Button Rand ist), Eckenradius und die Randbreite kannst du hier anpassen.
14. Hier kannst den Hover Effekt einstellen. Dieser Effekt passiert, sobald ein Websitenutzer mit der Mouse über den Button fährt, aber noch nicht klickt.
15. Klicke auf "Ausrichtungseinstellung".
16. Bestimme hier die Position des Buttons, etwa rechts, links oder in der Mitte der Seite.
17. Füge eine "Animation" hinzu, indem du auf das "Stoppuhr-Icon" klickst.
18. Hier entscheidest du, um welchen Effekt es sich handelt. Entscheide beispielsweise, ob der Button gezoomt oder mit einem Bounce-Effekt versehen werden soll.
19. Bestimme die Animationsgeschwindigkeit, also wie schnell der Effekt abgespielt werden soll.
20. Es gibt die Möglichkeit, eine Animationsverzögerung festzulegen. In den meisten Fällen kannst du diese bei 0 ms lassen.
21. Klicke auf "Animation abspielen", um eine Vorschau zu sehen, wie die Animation des Buttons ausschaut.
22. Bei der Elementverzögerung hast du die Möglichkeit, dass das Element erst nach einer gewissen Zeit erscheint.
23. Du hast die Möglichkeit, einen Button zu kopieren. Der wird dann zwischengespeichert bei dem Symbol links unten.
24. Mit dem Papierkorb Symbol löschst du den Button.