Elemente Creative Link Hover-Effekte
Das Master Addons Creative Links Widget macht aus einem Textlink einen animierten Link mit Hover-Effekt, er ist kostenlos und hat 22 Effekte: 10 Arbeiten im kostenlosen Plugin und 12 brauchen Master Addons Pro. Fügen Sie den Linktext, ein optionales Symbol und die URL hinzu, wählen Sie einen Effekt aus und färben Sie dann die Teile der Animation aus. Verwenden Sie es für Aufrufe zur Aktion innerhalb eines Abschnitts, Fußzeilenlinks oder einer kurzen Liste von Links.
So fügen Sie Link-Hover-Effekte in Elementor hinzu
Sie benötigen Elementor und das kostenlose Plugin Master Addons Jedes Widget enthält einen Link Hier sind ein Details Dokumentation zum Element kreative Links.
- Überprüfen Sie, ob Creative Links unter eingeschaltet ist Master-Addons, Widgets.
- Suchen Sie im Elementor-Editor nach Kreative Links Und auf die Seite ziehen.
- Geben Sie den Link Text und die Link URL ein.
- Wählen Sie einen Effekt aus Wirkungenund fügen Sie ein Symbol oder einen alternativen Linktext hinzu, wenn der Effekt einen verwendet.
- Stellen Sie im Tab Stil Typografie, Polsterung und die Farben Normal und Hover ein.
- Duplizieren Sie das Widget für jeden zusätzlichen Link, den Sie benötigen.
22 Link Hover-Effekte (10 kostenlos, 12 Pro)
Wählen Sie die Animation in der Wirkungen Dropdown Kostenlose Effekte: Halterungen, Bottom Line Slide, Bottom Border Vergrößern, 2nd Border Slide Up, Text Fill, Three Dots, Scale Down, Move Up, Effekt 21 und Effekt 22. Pro-Effekte: 3 D-Effekt, Slide In, Border Slide Down, Border Translate, 2nd Text and Border, Reveal Push Out, Circle, Border Switch, Fall Down, Cross, 3 D Slide und 3 D Slide Down.
- Jeder Effekt ist ein einfaches CSS auf dem Link und seinen Ebenen::vorher und:nachher.
- Move Up, Reveal Push Out, Cross und die 3 D Slide-Effekte zeigen den Alternative Link Text im Hover.
- Push Out, Text Fill, Scale Down, Fall Down und Move Up aufdecken zeigen das Symbol nicht an.
Stylen Sie den Link und seine Animationsschichten
Link-stile Umfasst Breite, Symbolgröße, Typografie, Link-Padding, Rand, Randradius und Box-Shadow Die Registerkarten Normal und Hover legen Textfarbe und Hintergrundfarbe fest, plus die Farben der Ebenen animieren die Effekte: Front BG Color (Back BG Color on hover), Before BG Color und After BG Color. Text Fill Color erscheint, wenn Sie den Text Fill-Effekt auswählen.
- Normal - und Hover-Farben werden separat eingestellt.
- Vorher und Nachher BG Colors steuern die Linien, Klammern und Füllungen, die sich bewegen.
- Breite, Polsterung und Ausrichtung reagieren.
Elementor-Hover-Optionen vs. kreative Links
Elementor verfügt über Hover-Animationen auf dem Button-Widget und Elementor Pro über Zeigeranimationen im Nav-Menü-Widget. Hier passt jedes einzelne.
| Brauchen | Elementortaste | Elementor Pro Nav-Menü | Master Addons Creative Links |
|---|---|---|---|
| Was es animiert | Der ganze Knopf (wachsen, pulsieren, schweben, wackeln und andere) | Menüpunkte mit Unterstreichung, Überstreichung, gerahmt, Hintergrund - oder Textzeigern | Ein einzelner Textlink mit Zeilen, Klammern, Füllungen oder 3 D-Flips |
| Anzahl der Effekte | Eine Liste von Hover-Animationen für die gesamte Schaltfläche | 6 Zeigertypen mit eigenen Animationen | 10 kostenlos, 22 mit Pro |
| Text im Hover tauschen | Nein | Nein | Ja, mit alternativem Linktext zu einigen Effekten |
| Funktioniert für ein vollständiges Menü | Nein | Ja, mit Dropdowns und einem mobilen Umschalter | Nein, ein Link pro Widget |
| Kosten | Kostenlos | Elementor Pro | Kostenlos, 12 Effekte in Pro |
Für ein ganzes Navigationsmenü das Elementor Pro Nav Menü oder die Master Addons Navigationsmenü Passt besser Zu Knöpfen mit Hover-Effekten siehe Kreativer Knopf.
Häufig gestellte Fragen für kreative Links
Was ist der Unterschied zwischen "Link Text" und "Alternativer Link Text"?
Link Text ist die sichtbare Beschriftung Alternative Link Text ist die Beschriftung, die mit Reveal Push Out, Move Up, Cross, 3 D Slide und 3 D Slide Down im Hover gleitet oder eindreht, wenn man sie leer lässt, verwenden diese Effekte den Link Text wieder Text Fill, Scale Down und Fall Down verwenden immer den Link Text.
Ist das Creative Links Widget kostenlos?
Ja. Creative Links ist im kostenlosen Master Addons Plugin mit 10 Effekten und allen Stilkontrollen Master Addons Pro fügt 12 Effekte hinzu, darunter 3 D Effect, Circle, Border Switch und die 3 D Slide Effekte.
Wofür sind die "Before BG Color" und "After BG Color"?
Die meisten Effekte zeichnen ihre Linien, Klammern und füllen mit den Ebenen:: vor und: nach dem Link. Bevor BG Farbe und nach BG Farbe die Farbe dieser Ebenen einstellen, in den Registerkarten Normal und Hover Welche Ebene zeichnet, was vom Effekt abhängt, also ändern Sie eine Farbe und schauen Sie sich die Vorschau an.
Funktionieren die Effekte auf mobilen (Touchscreen) Geräten?
Telefone und Tablets haben keinen Hover Die meisten mobilen Browser wenden den Hover-Stil für einen Moment an, wenn der Link angetippt wird, und öffnen ihn dann, sodass Besucher möglicherweise nur einen kurzen Blitz des Effekts sehen. Der Link selbst funktioniert normal.
Wie wähle ich den richtigen Effekt?
Ordnen Sie den Effekt an die Stelle an, an der der Link sitzt Bottom Line Slide, Bottom Border Enlarge und Brackets sind leise genug für Fließtext und Footer Text Fill, Move Up und Three Dots ziehen mehr Aufmerksamkeit auf sich und passen zu einem einzigen Call to Action Probieren Sie ein paar in der Editorvorschau aus, bevor Sie sich entscheiden.
Kann ich verschiedene Effekte auf verschiedene Links im selben Widget anwenden?
Jedes Creative Links Widget enthält einen Link mit einem Effekt. Fügen Sie für mehrere Links ein Widget pro Link hinzu und wählen Sie den Effekt auf jedem aus. Duplizieren Sie ein gestyltes Widget, um die Farben gleich zu halten.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
