Die meisten Textlinks machen eines im Hover: Farbe ändern Die Elementor Creative Links Widget Von Master Addons gibt Ihnen viel mehr zum Spielen, Klammern, die um die Wörter herum geschoben werden, eine Füllung, die über den Text streicht, einen 3 D-Flip und ein Dutzend andere Hover-Effekte, die Sie auf jeden Link legen können, ohne eine CSS-Datei zu öffnen.
Unten fügen wir das Widget hinzu, gehen jede Inhaltssteuerung durch, decken die Style-Optionen ab und führen die Effektliste herunter. Screenshots vom Editor kommen mit jedem Schritt. Zunächst befindet sich das Widget im Panel.
Was das Creative Links Widget bewirkt #
Es braucht einen einfachen Inline-Link und bringt es in Bewegung. Die Widget für kreative Schaltflächen Stile eine solide, gepolsterte Taste Creative Links ist die Text-Link-Version: ein “Weiterlesen”, ein Aufruf zum Handeln im Nav-Stil oder eine einzelne Phrase, die Sie innerhalb eines Satzes hervorheben möchten Die Animation feuert im Schwebeflug, und Sie wählen sie aus einem Dropdown.
Sie erhalten außerdem ein optionales Symbol, eine alternative Beschriftung, die einige Effekte offenbaren, Ausrichtungssteuerungen und eine Registerkarte Stil mit Typografie, Rand und einer Reihe von Farboptionen, die um die Linkanimationen herum aufgebaut sind. Es befindet sich in der kostenlosen Master Addons-Sammlung, sodass es auf jeder Elementor-Site ausgeführt wird. Die vollständige Widgets und Erweiterungen Liste hat den Rest.
Lieber vor jeder einstellung sehen? hier das widget in aktion.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu dabei? starten Sie mit der Installationsführung.
- Eine Seite oder Vorlage, die im Elementor-Editor geöffnet ist.
So fügen Sie das Creative Links-Widget hinzu #
Dieser Teil geht schnell:
- Öffnen Sie eine Seite mit Elementor und klicken Sie oben links auf das Widget-Panel-Symbol (das Raster).
- Typ Kreative Links Im Suchfeld, oder scrollen Sie nach unten zum Master Addons Kategorie.
- Ziehen Sie die Kreative Links Widget auf die Leinwand.
Es landet mit Platzhalter “Klicken Sie hier” Text, bereit für Sie zu bearbeiten.
Inhaltliche Einstellungen erklärt #
Wählen Sie den Link und öffnen Sie den Inhalt Tab. Hier stellen Sie den Text, den Effekt, und wo der Link zeigt.
Wirkungen #
Die Wirkungen Dropdown ist der ganze Grund, dieses Widget zu verwenden Wählen Sie eins aus und der Link animiert im Hover Die Liste läuft über 20 Optionen hinaus:
Halterungen, 3 D-Effekt, Bottom Line Slide, Bottom Border Vergrößern, Einschieben, Border Slide Down, 2nd Border Slide Up, Border Translate, 2nd Text and Border, Reveal Push Out, Text Fill, Circle, Three Dots, Border Switch, Scale Down, Fall Down, Move Up, Cross, 3 D Slide, 3 D Slide Down, und ein paar mehr.
Die Namen verraten nicht viel, also schau mit dem Mauszeiger in der Live-Vorschau, was jeder macht Klammern und Text Fill funktionieren gut in Body Copy Die 3 D-Optionen sind lauter und passen zu Überschriften oder einem Heldenlink.
Artikelausrichtung, Linkausrichtung und Rücktextausrichtung #
Artikelausrichtung Stellt das gesamte Widget (Links, Mitte, Rechts). Link-ausrichtung und Zurück Textausrichtung Verarbeiten Sie den Linktext und die alternative Beschriftung, die einige Effekte mit sich bringen. Alle drei sind responsive, sodass Sie sie pro Gerät mit dem Umschalten festlegen können.
Linktext und alternativer Linktext #
Die Link-text Ist die sichtbare Beschriftung, sagen Sie “Klicken Sie hier” Die Alternativer Linktext (“Go!” in den Screenshots) ist das zweite Label, das die Effekte vertauscht, die einen offenbaren Halten Sie es kurz, da es nur den Raum bekommt, den die Animation hinterlässt.
Symbol- und Symbolabstand #
Sie können ein Symbol neben dem Text setzen und dann die Lücke mit setzen Symbolabstand. Master Addons bündelt acht Premium SymbolbibliothekenEs gibt also viel zu wählen von direkt im Elementor.
Link-url #
Geben Sie das Ziel ein Link-url. Das Zahnradsymbol daneben hält die üblichen Optionen: in einem neuen Tab öffnen, nofollow hinzufügen Für einen Link vor Ort fügen Sie eine beliebige Seite Ihrer eigenen Website ein.
Stileinstellungen erklärt #
Wechseln Sie zu den Stil Tab und öffnen Link-stile. So sieht der Link vor und nach der Animation aus.
- Breite und Symbolgröße: Größe des Linkfelds und des Symbols für sich.
- Typografie: Schriftfamilie, Größe, Gewicht und Buchstabenabstand für das Etikett.
- Link-polsterung: Abstand innerhalb des Linkbereichs Es gibt auch etwas Spielraum für Effekte zum Animieren.
- Randtyp, Breite, Farbe und Radius: Viele Effekte laufen auf einer Bordüre (Brackets, Border Slide Down und der Rest), daher zählen diese hier mehr als auf einem normalen Link.
- Kastenschatten: Tiefe auf dem Linkfeld, wenn Sie es wollen.
Normal - und Hover-Farben #
Die Farbsteuerungen teilen sich auf in Normal und Schweben Staaten. Neben dem Üblichen Textfarbe und Hintergrundfarbe‘Sie werden sehen Vordere BG-Farbe, Vor BG Color, und Nach BG Color. Diese zusätzlichen Ebenen sind das, was die Folien- und Fülleffekte dazwischen animieren. Stellen Sie sie also ein, wenn Sie die Farbe steuern möchten, die die mittlere Animation anzeigt.
Eine Wirkung in Aktion sehen #
Hier der Brackets-Effekt auf der Leinwand Bewegen Sie den Link und auf jeder Seite rutscht eine Klammer rein, so dass “Klicken Sie hier” als “[Klicken Sie hier]” lautetJeder Effekt verhält sich in der Live-Vorschau so, was es einfach macht, ein paar zu probieren, bevor Sie sich festlegen.
Tipps für die Nutzung von Creative Links #
- Den Effekt auf den Punkt bringen. Subtile wie Text Fill oder Bottom Line Slide sitzen gut in Absätzen. Speichern Sie 3 D Slide and Cross für Überschriften und Heldenbereiche.
- Sehen Sie sich die BG-Farben an. Der Hintergrund von vorne, davor und danach kann Ihren Text mitten in der Animation auswaschen. Überprüfen Sie also, ob der Link während des gesamten Effekts lesbar bleibt.
- Halten Sie das alternative Etikett kurz. Ein langer alternativer Linktext wird in dem Raum, den die Animation verlässt, eng.
- Berührung nicht vergessen. Hover feuert nicht auf einem Telefon, also muss der Ruhezustand von alleine fertig aussehen.
Brauchen sie einen voll soliden button statt textlink? das ist die Widget für kreative Schaltflächen. Möchten Sie eine Überschrift, Beschreibung und einen Knopf zusammen? Schauen Sie sich die an Call to Action-Widget.
Häufig gestellte Fragen #
Was ist das Elementor Creative Links Widget?
Es handelt sich um ein Master Addons Widget, das animierte Textlinks zu Elementor hinzufügt Statt einer einfachen Farbänderung erhalten Links Hover-Effekte wie Klammern, Textfüllung, Kreis und 3 D-Dia, die alle aus einem Dropdown ohne benutzerdefiniertes CSS gesetzt werden.
Wie viele Linkeffekte sind enthalten?
Das Widget enthält 20+ Effekte, darunter Klammern, 3 D-Effekt, Bottom Line Slide, Slide In, Text Fill, Circle, Three Dots, Border Switch, Cross und 3 D Slide Sie sehen sich jeden live im Elementor-Editor an, bevor Sie veröffentlichen.
Ist das Creative Links Widget kostenlos?
Ja. Creative Links ist Teil des kostenlosen Plugins Master Addons for Elementor Pro plant weitere Widgets und Erweiterungen hinzufügen Siehe die Preisseite Zum vollständigen Vergleich.
Was ist der Unterschied zwischen Creative Links und Creative Buttons?
Creative Links animiert Inline-Textlinks, wie ein “Weiterlesen” oder eine Phrase in einem Satz Creative Buttons styles a solid, padded button Wählen Sie Links für text-style Calls to Action und Buttons für block-style.
Funktionieren die Link-Hover-Effekte mobil?
Hover-Effekte brauchen eine Maus, damit sie nicht auf Touchscreens auslösen Entwerfen Sie den Ruhezustand so, dass er vollständig aussieht, und der Link funktioniert immer noch und liest sich gut auf Telefonen und Tablets.
Einwickelnd #
Das Elementor Creative Links Widget gibt Ihren Textlinks echte Bewegung: 20+ Hover-Effekte, ein Symbol und Farbsteuerungen, die auf die Animationen abgestimmt sind, nichts davon erfordert Code Wählen Sie einen Effekt aus, stellen Sie die Farben ein und Ihre Links hören auf, einfach nur dort zu sitzen Von hier aus der Rest des Master Addons Widget-Bibliothek Blick wert ist.
