Kreative Links

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 og et dusin andre svæveeffekter, du kan 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 den gratis Master Addons-samling, så den kører på ethvert Elementor-websted. 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:

1. Åbn en side med Elementor, og klik på widgetpanelikonet (gitteret) øverst til venstre.
2. Type Kreative Links i søgefeltet, eller rul ned til Master Addons kategori.
3. 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 Content fane. Det er her, du indstiller teksten, effekten og hvor linket peger.

Effekter #

The Effekter dropdown er hele grunden til at bruge denne widget. Vælg en og linket animerer på hover. Listen kører forbi 20 muligheder:

Beslag, 3D-effekt, Bundlinjeslide, Bundkant Forstør, Slide In, 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, 3D Slide, 3D Slide Down, og et par mere.

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-mulighederne 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 #

The 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å de effekter, der afslører en. 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 Style 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 masse effekter ride på en grænse (Brackets, Border Slide Down, og resten), så disse tæller mere her end på et normalt link.
• Box Shadow: dybde på linkboksen, hvis du ønsker det.

Normal og Hover farver #

Farvekontrollerne opdeles i Normal og Hover 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 for overskrifter og hero områ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 #

Indpakning #

Elementor Creative Links widget giver dine tekst links reel bevægelse: 20 + hover effekter, et ikon, og farvekontroller tunet til animationerne, ingen af det kræver kode. Vælg en effekt, indstille farverne, og dine links stoppe bare sidder der. Herfra, resten af de Master Addons widget bibliotek er et kig værd.