Die meisten Textlinks machen eines im Hover: Farbe ändern Die Elementor Creative Links Widget Von Master Addons gibt Ihnen noch viel mehr zum Spielen: Klammern, die um die Wörter herum geschoben werden, eine Füllung, die über den Text streicht, ein 3 D-Flip (Pro) und insgesamt 22 Hover-Effekte, die Sie auf jedem Link ablegen 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 ist im kostenlosen Master Addons Plugin mit 10 Effekten, und Master Addons Pro entsperrt die anderen 12. Die volle 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 eine und der Link animiert auf hover Die Liste hat 22 Optionen Zehn sind kostenlos und zwölf brauchen Pro:
Kostenlos: Halterungen, Bottom Line Slide, Bottom Border Enlarge, 2nd Border Slide Up, Text Fill, Three Dots, Scale Down, Move Up, Effect 21 und Effect 22.
Pro: 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.
Die Namen verraten nicht viel, also in der Live-Vorschau den Link mit der Maus bewegen, um zu sehen, was jeder einzelne macht Klammern und Text Fill funktionieren gut in Body Copy Die 3 D-Optionen (Pro) sind lautere und passende Überschriften oder ein 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 bei Reveal Push Out, Move Up, Cross, 3 D Slide, und 3 D Slide Down eintauscht Halten Sie es kurz, da es nur den Platz 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: eine Umrandung um die Linkbox Die beweglichen Linien in Effekten wie Bottom Line Slide stammen aus den Farben Before und After BG, nicht aus dieser Umrandung.
- 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 und Cross (beide Pro) 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 ist ein Master Addons Widget, das animierte Textlinks zu Elementor hinzufügt Statt einer einfachen Farbänderung erhalten Links Hover-Effekte wie Klammern, Textfüllung und (mit Pro) Kreis und 3 D-Dia, die alle aus einem Dropdown ohne benutzerdefiniertes CSS gesetzt werden.
Wie viele Linkeffekte sind enthalten?
Das Widget hat 22 Effekte Zehn sind kostenlos, darunter Klammern, Bottom Line Slide, Text Fill, Three Dots und Move Up Zwölf benötigen Pro, darunter 3 D Effect, Slide In, Circle, 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 mit 10 Effekten Master Addons Pro fügt die anderen 12 Effekte hinzu 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 #
Die Elementor Creative Links Widget Gibt Ihren Textlinks Bewegung: 22 Hover-Effekte (10 frei), ein Symbol, und Farbsteuerungen für die Animationsschichten, ohne Code Wählen Sie einen Effekt, stellen Sie die Farben ein, und Ihre Links hören auf, einfach da zu sitzen Von hier aus, der Rest der Master Addons Widget-Bibliothek Blick wert ist.
