Ein Standard-Button bekommt Klicks; ein Button mit etwas Bewegung bekommt mehr davon Die kostenlose Kreatives Schaltflächen-Widget In Master-Addons für Elementor Liefert eine Bibliothek mit Hover-Effekt-Voreinstellungen, von subtilen Hintergrund-Sweeps bis hin zu Text-Swap-Animationen, sodass ein Call-to-Action verschoben werden kann, ohne dass Sie eine CSS-Zeile schreiben.
Sie wählen eine Voreinstellung aus, geben den Text ein, fügen ein Symbol hinzu, wenn Sie eines wünschen, und stilisieren die normalen und Hover-Zustände. Diese Anleitung deckt das gesamte Widget ab und zieht in die fertige Schaltfläche ein.
Was das Creative Buttons Widget macht #
Das Widget rendert eine Call-to-Action-Taste mit einer vorgefertigten Hover-Animation Die Animationen kommen als 21 benannte Presets, 6 frei und 15 mit Master Addons Pro, jeweils mit eigener Bewegung: Hintergründe, die hineingleiten, Ränder, die sich selbst zeichnen, Text, der zu einer alternativen Nachricht umdreht Alles andere funktioniert wie eine normale Elementor-Taste: Text, Link, Symbol, Ausrichtung und Vollfarbsteuerung pro Zustand.
Bevor Sie beginnen #
- Wordpress Mit Elementer Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Das Creative Buttons-Widget ist im Master Addons-Optionsfeld unter Basis-Widgets aktiviert.
So fügen Sie das Widget Creative Buttons hinzu #
Suchen Sie im Elementor-Editor nach Elemente Panel für Kreative Schaltflächen Und ziehen Sie das Widget auf die Seite Es erscheint ein dunkler Button mit der Aufschrift “Add Your CTA Content”, bereits mit dem Default-Effekt verkabelt.
Wählen Sie eine Tasteneffektvoreinstellung aus #
Offen Tastenvoreinstellung und -steuerungen Im Reiter Inhalt Die Tasteneffekte Dropdown ist das Herzstück des Widgets: Default, Winona, Ujarak, Wayra, Tamaya und Rayen sind kostenlos. Pipaluk, Moema, Isi, Aylen, Saqui, Wapasha, Nina, Nanuk, Nuka, Antiman, Itzel, Naira, Quidel, Sacnite und Shikoba brauchen Master Add-dons Pro.
Jeder Name ist eine andere Hover-Animation Bewegen Sie nach jedem Pick den Button auf der Leinwand und der Editor spielt den Effekt live ab, so dauert das Vorsprechen von Voreinstellungen Sekunden Die Namen lassen nicht anklingen, was sie tun, also ist der Versuch von vier oder fünf der schnellste Weg, um den richtigen zu finden. Tastenausrichtung und Tastentextausrichtung Setzen Sie sich direkt darunter, jeweils mit einem responsiven Umschalter für Einstellungen pro Gerät.
Legen Sie den Text, den Link und den Alternativtext fest #
Die Tastensteuerungen Gruppe den Inhalt abdeckt. Schaltflächentext Etikett ist, und Link-url Zeigt die Schaltfläche irgendwo, mit dem Zahnradsymbol für Optionen mit neuer Lasche und Nofollow.
Voreinstellungen können das Label im Hover gegen eine zweite Nachricht austauschen Wählen Sie einen anderen Effekt als Standard und einen Alternativer Schaltflächentext Feld erscheint; die Demo setzt es auf “JETZT klicken!”, sodass auf der Schaltfläche “Add Your CTA Content” ruht und im Schwebeflug umdreht.
Ein Symbol hinzufügen #
Die Symbol Die Steuerung öffnet die Elementor-Symbolbibliothek mit Font Awesome und jedem von Ihnen installierten Symbolsatz.
Nachdem ich einen ausgewählt habe Symbolposition Platziert es vor oder nach dem Etikett und Symbolabstand Stellt die Lücke; Die Demo erhöht die Größe auf 12 Pixel, sodass Symbol und Text atmen.
Style den Knopf #
Wechseln Sie zu den Stil Tab und öffnen Knopfstile. Die oberste Gruppe handhabt die Form: Breite, Typografie, Knopfpolsterung, Grenztyp, Grenzradius (8 in der Demo, für weich abgerundete Ecken), Kastenschatten, und Symbolgröße.
Darunter, dass gewöhnlich und Schweben Tabs tragen jeweils drei Farben: Textfarbe, Hintergrundfarbe, und Symbolfarbe. Die Demo gibt den normalen Zustand weißen Text auf blau:
Dann dreht man den Hover-Zustand auf einen dunklen Text auf Grün, sodass der Effekt zwischen zwei deutlich unterschiedlichen Looks animiert:
ein Muster Abschnitt unten stammt von der freien Patterns-Erweiterung und fügt dekorative Hintergrundmuster hinzu.
Das Ergebnis auf der Seite #
Auf der Live-Seite sitzt der Button in seinen normalen Farben, bis der Cursor eintrifft Dann spielt die Voreinstellung: der Hintergrund swept auf die Hover-Farbe, das Icon und der Text verschieben sich, und der Alternativtext erscheint, wenn die Voreinstellung eine verwendet.
Häufige Anwendungsfälle #
- Heldensektion CTAs Wo die Animation den Blick auf die Haupthandlung lenkt.
- Schaltflächen der Preisseite Mit einem Texttausch wie “Get Started” auf “It's Free!” auf hover.
- Download - und Anmeldetasten Gepaart mit einem Symbol zur sofortigen Erkennung.
- Landingpage-Abschnitte Dazu ist eine Schaltfläche erforderlich, um sich von den Standardeinstellungen des Designs abzuheben.
Tipps für bessere kreative Buttons #
- Audition-Voreinstellungen auf der Leinwand. Bewegen Sie die Maustaste nach jeder Effektauswahl; Die Animation wird im Editor abgespielt, keine Vorschau erforderlich.
- Machen Sie den Hover-Zustandskontrast. Die Animation liest sich am besten, wenn sich normale und Hover-Farben deutlich unterscheiden, wie bei der Blau-Grün-Demo.
- Halten Sie den Alternativtext kurz. Text-Swap-Voreinstellungen sehen sauber aus, wenn beide Nachrichten etwa gleich lang sind.
- Ein kreativer Knopf pro Abschnitt. Die Bewegung erregt Aufmerksamkeit; Drei bewegliche Knöpfe hintereinander konkurrieren miteinander.
- Überprüfen Sie das Tippverhalten auf Mobilgeräten. Touchscreens haben keinen Hover, also stellen Sie sicher, dass der normale Zustand als von selbst anklickbar anzeigt.
Video-Tutorial #
Sie können sich das Video unten auch ansehen, wenn Sie die Kreativtaste in Aktion sehen möchten, von der Auswahl eines voreingestellten Effekts bis zur fertigen Hover-Animation auf der Live-Seite.
Häufig gestellte Fragen #
Was ist das Creative Buttons Widget in Master Addons?
Es handelt sich um ein Elementor-Widget für Call-to-Action-Buttons mit vorgefertigten Hover-Animationen, Sie wählen aus 21 benannten Effekt-Presets (6 frei, 15 mit Pro), setzen Text, Link und Icon und stylen die Normal - und Hover-Zustände getrennt vom Elementor-Panel.
Wie viele Button-Effekte sind enthalten?
Der Button Effects Dropdown listet 21 Presets auf Standard, Winona, Ujarak, Wayra, Tamaya und Rayen sind kostenlos, und der Rest benötigt Master Addons Pro, darunter Winona, Ujarak, Wayra, Tamaya, Rayen, Moema, Naira und Shikoba. Jeder wendet eine andere Hover-Animation an, und die Editor-Leinwand spielt den Effekt live ab, wenn Sie mit der Maus über die Schaltfläche fahren.
Was ist das Feld Alternativer Schaltflächentext?
Effekte können die Tastenbeschriftung im Hover gegen eine zweite Nachricht austauschen Wenn Sie einen anderen Effekt als Standard auswählen, erscheint das Feld Alternativer Tastentext, damit Sie die Hover-Nachricht einstellen können, z. B. “Get Started” auf “It's Free!” umschalten.
Kann ich dem Kreativ-Button ein Symbol hinzufügen?
Ja. Die Symbolsteuerung öffnet die Elementor-Symbolbibliothek. Nachdem Sie ein Symbol ausgewählt haben, wird es durch Icon Position vor oder nach dem Text platziert, Icon Spacing legt die Lücke fest und Icon Size und Icon Color werden live auf der Registerkarte Stil angezeigt.
Kann ich den Hover-Zustand separat stylen?
Ja. Button Styles hat Normal - und Hover-Tabs, jede mit eigener Textfarbe, Hintergrundfarbe und Symbolfarbe Die voreingestellte Animation zwischen den beiden Zuständen, sodass kontrastierende Farben den Effekt sichtbarer machen.
Einwickelnd #
Das Creative Buttons Widget verwandelt einen einfachen CTA in einen animierten ohne benutzerdefinierten Code: Wählen Sie eine Voreinstellung aus dem Effekt-Dropdown, setzen Sie den Text und das Symbol, und geben Sie die normalen und Hover-Zustände Farben, zwischen denen es sich lohnt zu animieren Es passt gut zum Creative Links Widget für animierte Textlinks Durchsuchen Sie den vollständigen Satz von Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Widget-Seite mit der kreativen Schaltfläche Für Demos und einen Vergleich mit dem Elementor Button Widget.
