De fleste tekstlinks gør én ting på hover: ændre farve. Den Elementor Creative Links widget fra Master Addons giver dig meget mere at spille med: parenteser, der glider ind omkring ordene, et fyld, der fejer hen over teksten, et 3D-flip (Pro) og 22 hover-effekter i alt, kan du slippe på ethvert link uden at åbne en CSS-fil.
Nedenfor tilføjer vi widgetten, gennemgår hver Content kontrol, dækker indstillingerne Style og kører ned effektlisten. Skærmbilleder fra editoren kommer med hvert trin. For det første er her, hvor widgetten sidder i panelet.
Hvad Creative Links-widgetten gør #
Det tager et almindeligt inline link og får det til at bevæge sig. Den Creative Buttons widget styles en solid, polstret knap. Creative Links er tekst-link versionen: en “Læs mere”, en nav-stil opfordring til handling, eller en enkelt sætning, du ønsker at skille sig ud inde i en sætning. Animationen fyrer på hover, og du vælger det fra én dropdown.
Du får også et valgfrit ikon, en alternativ etiket, som nogle effekter afslører, justeringskontroller og en fane Stil med typografi, kant og et sæt farvemuligheder, der er bygget op omkring linkanimationerne. Det er i det gratis Master Addons-plugin med 10 effekter, og Master Addons Pro låser de andre 12 op. Den fulde widgets og udvidelser list har resten.
Snarere se det, før du læser hver indstilling? Her er widget i aktion.
Før du starter #
- WordPress med elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i det? Start med den installationsvejledning.
- En side eller skabelon, der er åben i Elementor-editoren.
Sådan tilføjer du Creative Links-widgetten #
Denne del er hurtig:
- Åbn en side med Elementor, og klik på widgetpanelikonet (gitteret) øverst til venstre.
- skrift Kreative Links i søgefeltet, eller rul ned til Master Addons kategori.
- Træk Kreative Links widget på lærredet.
Den lander med pladsholder “Klik her”-tekst, klar til at redigere.
Indholdsindstillinger forklaret #
Vælg linket og åbn tilfreds fane. Det er her, du indstiller teksten, effekten og hvor linket peger.
Effekter #
de Effekter dropdown er hele grunden til at bruge denne widget. Vælg en og linket animerer på hover. Listen har 22 muligheder. Ti er gratis og tolv har brug for Pro:
Gratis: Beslag, nederste linjeslide, nederste kant forstørret, 2. kantglide op, tekstfyld, tre prikker, skaler ned, flyt op, effekt 21 og effekt 22.
PRO: 3D-effekt, glide ind, Border Slide Down, Border Oversæt, 2. tekst og kant, Reveal Push Out, Circle, Border Switch, Fall Down, Cross, 3D Slide, og 3D Slide Down.
Navnene giver ikke meget væk, så hold markøren over linket i live-forhåndsvisningen for at se, hvad hver enkelt gør. Beslag og tekstfyld fungerer godt i kropskopi. 3D-indstillingerne (Pro) er højere og passer overskrifter eller et heltelink.
Elementjustering, Linkjustering og Tilbage Tekstjustering #
Varejustering placerer hele widgetten (venstre, center, højre). Link Alignment og Tilbage Tekstjustering håndter linkteksten og den alternative etiket, som nogle effekter bringer ind. Alle tre reagerer, så du kan indstille dem pr. enhed med skiftet.
Link Tekst og Alternativ Link Tekst #
de Link Tekst er den synlige etiket, sig “Klik her”. Den Alternativ Link Tekst (“Gå!” i skærmbillederne) er den anden etiket, der bytter ind på Reveal Push Out, Move Up, Cross, 3D Slide, og 3D Slide Down. Hold det kort, da det kun får den plads animationen efterlader.
Ikon og ikonafstand #
Du kan sidde et ikon ved siden af teksten og derefter indstille mellemrummet med Ikonafstand. Master Addons bundter otte premium ikon biblioteker, så der er masser at vælge fra lige inde i Elementor.
link URL #
Drop destinationen ind link URL. Gearikonet ved siden af det indeholder de sædvanlige muligheder: åben i en ny fane, tilføj nofollow. For et link på stedet skal du indsætte en hvilken som helst side fra dit eget websted.
Stilindstillinger forklaret #
Skift til måde faneblad og åben Link Styles. Sådan ser linket ud før og efter animationen.
- Bredde og Ikon Størrelse: størrelse linkboksen og ikonet på egen hånd.
- Typografi: skrifttypefamilie, størrelse, vægt og bogstavafstand for etiketten.
- Link Padding: afstand inde i linkområdet. Det giver også nogle effekter plads til at animere.
- Kanttype, bredde, farve og radius: en kant omkring linkboksen. De bevægelige linjer i effekter som Bottom Line Slide kommer fra farverne Før og Efter BG, ikke fra denne kant.
- kasseskygge: dybde på linkboksen, hvis du ønsker det.
Normal og Hover farver #
Farvekontrollerne opdeles i normal og svæve stater. Sideløbende med det sædvanlige Tekstfarve og Baggrundsfarve, vil du se Front BG Farve, Før BG Color, og Efter BG Color. Disse ekstra lag er, hvad dias- og udfyldningseffekterne animerer mellem, så indstil dem, når du vil styre farven, der viser midt-animation.
At se en effekt i aktion #
Her er Brackets-effekten på lærredet. Hold linket og et beslag glider ind på hver side, så “Klik her” lyder som “[ Klik her ]”. Hver effekt opfører sig sådan i live-forhåndsvisningen, hvilket gør det nemt at prøve et par stykker, før du forpligter dig.
Tips til brug af Creative Links #
- Match effekten til stedet. Subtile dem som Text Fill eller Bottom Line Slide sidder godt i afsnit. Gem 3D Slide og Cross (begge Pro) til overskrifter og helteområder.
- Se BG-farverne. Foran, før og efter baggrunde kan vaske din tekst ud midt i animationen, så tjek linket forbliver læsbart gennem hele effekten.
- Hold den alternative etiket kort. En lang Alternativ Link Tekst bliver trang i det rum, animationen efterlader.
- Glem ikke berøring. Hover skyder ikke på en telefon, så hviletilstanden skal se færdig ud af sig selv.
Har du brug for en fuld solid knap i stedet for et tekstlink? Det er Creative Buttons widget. Vil du have en overskrift, beskrivelse og knap sammen? Se på Call to Action-widget.
Ofte stillede spørgsmål #
Hvad er Elementor Creative Links-widgetten?
Det er en Master Addons-widget, der tilføjer animerede tekstlinks til Elementor. I stedet for en almindelig farveændring får links svæveeffekter som Brackets, Text Fill og (med Pro) Circle og 3D Slide, alle indstillet fra en dropdown uden brugerdefineret CSS.
Hvor mange linkeffekter er inkluderet?
Widgetten har 22 effekter. Ti er gratis, herunder Brackets, Bottom Line Slide, Text Fill, Three Dots, og Move Up. Tolv har brug for Pro, herunder 3D Effect, Slide In, Circle, Border Switch, Cross, og 3D Slide. Du forhåndsviser hver enkelt live i Elementor editor, før du udgiver.
Er Creative Links-widgetten gratis?
Ja. Creative Links er en del af det gratis Master Addons for Elementor plugin med 10 effekter. Master Addons Pro tilføjer de andre 12 effekter. Se den prissætning side til den fulde sammenligning.
Hvad er forskellen mellem Creative Links og Creative Buttons?
Creative Links animerer inline tekst links, som en “Læs mere” eller en sætning i en sætning. Creative Buttons stilarter en solid, polstret knap. Pick Links til tekst-stil opkald til handling og Knapper til blok-stil dem.
Virker link hover-effekterne på mobilen?
Hover effekter har brug for en mus, så de ikke udløser på touchscreens. Design hviletilstanden for at se komplet ud, og linket fungerer stadig og læser godt på telefoner og tablets.
Indpakning #
de Elementor Creative Links widget giver din tekst links bevægelse: 22 hover effekter (10 gratis), et ikon, og farvekontroller for animationslagene, uden kode. Vælg en effekt, indstille farverne, og dine links stoppe bare sidder der. Herfra, resten af Master Addons widget bibliotek er et kig værd.
