En standardknap får klik; en knap med lidt bevægelse får flere af dem. Den gratis Creative Button-widget i Master Addons til Elementor sender et bibliotek med forudindstillinger for svæveeffekt, fra subtile baggrundssweep til tekstbytteanimationer, så en opfordring til handling kan flytte sig, uden at du skriver en linje med CSS.
Du vælger en forudindstilling, skriver teksten, tilføjer et ikon, hvis du vil have en, og styler normal- og svævetilstandene. Denne vejledning dækker hele widgetten, træk ind til færdig knap.
Hvad Creative Buttons-widgetten gør #
Widgetten gengiver én call-to-action knap med en forudbygget hover animation. Animationerne kommer som 21 navngivne forudindstillinger, 6 gratis og 15 med Master Addons Pro, hver med sin egen bevægelse: baggrunde, der glider ind, grænser, der tegner sig selv, tekst, der vender til en alternativ besked. Alt andet fungerer som en normal Elementor knap: tekst, link, ikon, justering, og fuld farvekontrol per tilstand.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- Creative Buttons-widgetten aktiveret i indstillingspanelet Master Addons under Basic Widgets.
Sådan tilføjes Creative Buttons-widgetten #
I Elementor-editoren skal du søge i Elementer panel til Kreative knapper og træk widgetten over på siden. Der vises en mørk knap, hvor der står “Tilføj dit CTA-indhold”, som allerede er forbundet med Standard-effekten.
Vælg en forudindstilling for knappeffekt #
Open Knapforudindstilling og kontrol i fanen Indhold. Den Knap Effekter dropdown er hjertet af widget: Default, Winona, Ujarak, Wayra, Tamaya, og Rayen er gratis. Pipaluk, Moema, Isi, Aylen, Saqui, Wapasha, Nina, Nanuk, Nuka, Antiman, Itzel, Naira, Quidel, Sacnite, og Shikoba behov Master Addons Pro.
Hvert navn er en anden hover animation. Hold knappen på lærredet efter hvert valg, og editoren spiller effekten live, så forudindstillinger til audition tager sekunder. Navnene antyder ikke, hvad de gør, så at prøve fire eller fem er den hurtigste måde at finde den rigtige. Knapjustering og Knaptekstjustering sid lige under, hver med en responsiv vippe til indstillinger pr. enhed.
Indstil teksten, linket og alternativ tekst #
The Knap Controls gruppe dækker indholdet. Knaptekst er etiketten, og Link URL peger knappen et sted, med tandhjulsikonet for nye faner og nofollow muligheder.
Forudindstillinger kan bytte etiketten til en anden meddelelse på hover. Vælg enhver anden effekt end Standard og en Alternativ knaptekst feltet vises; demoen indstiller den til “Klik NU!” så knappen lyder “Tilføj dit CTA-indhold” i hvile og vender på svæve.
Tilføj et ikon #
The Ikon kontrol åbner Elementor ikon bibliotek, med Font Awesome og hvert ikon sæt, du har installeret.
Efter at have plukket en, Ikonposition anbringer den før eller efter etiketten, og Ikonafstand indstiller hullet; demoen bumper den til 12 pixels, så ikonet og teksten trækker vejret.
Style knappen #
Skift til Style faneblad og åben Knap Styles. Den øverste gruppe håndterer figuren: Bredde, Typografi, Knappolstring, Border Type, Grænseradius (8 i demoen, for blødt afrundede hjørner), Box Shadow, og Ikon Størrelse.
Under det, Normal og Hover faner hver bære tre farver: Tekstfarve, Baggrundsfarve, og Ikon Farve. Demoen giver den normale tilstand hvid tekst på blå:
Derefter vender svævetilstanden til mørk tekst på grøn, så effekten animerer mellem to klart forskellige udseende:
A Mønstre sektion nederst kommer fra den gratis Patterns udvidelse og tilføjer dekorative baggrundsmønstre.
Resultatet på siden #
På live-siden sidder knappen i sine normale farver, indtil markøren ankommer. Derefter afspilles forudindstillingen: baggrunden fejer til svævefarven, ikonet og tekstforskydningen, og den alternative tekst vises, hvis forudindstillingen bruger en.
Almindelige brugstilfælde #
- Helt sektion CTA'er hvor animationen trækker øjet til hovedhandlingen.
- Prissideknapper med et tekstbytte som “Kom i gang” til “Det er gratis!” på hover.
- Download og tilmeldingsknapper parret med et ikon for øjeblikkelig genkendelse.
- Landingssidesektioner der skal bruge én knap for at skille sig ud fra temaets standardindstillinger.
Tips til bedre kreative knapper #
- Audition forudindstillinger på lærredet. Hold knappen nede efter hvert effektvalg; animationen afspilles i editoren, ingen forhåndsvisning nødvendig.
- Gør svævetilstandskontrasten. Animationen læser bedst, når normale farver og svævefarver adskiller sig tydeligt, som den blå-til-grønne demo.
- Hold den alternative tekst kort. Tekstbytteforudindstillinger ser rene ud, når begge meddelelser er omtrent lige lange.
- Én kreativ knap pr. sektion. Bevægelsen får opmærksomhed; tre bevægelige knapper i træk konkurrerer med hinanden.
- Kontroller trykadfærden på mobilen. Berøringsskærme har ingen svæve, så sørg for, at den normale tilstand læses som klikbar alene.
Video Tutorial #
Du kan også se videoen nedenfor, hvis du gerne vil se den kreative knap i aktion, fra at vælge en forudindstillet effekt til den færdige svæveanimation på livesiden.
Ofte stillede spørgsmål #
Hvad er Creative Buttons-widgetten i Master Addons?
Det er en Elementor-widget til call-to-action-knapper med forudbyggede hover-animationer. Du vælger fra 21 navngivne effektforudindstillinger (6 gratis, 15 med Pro), indstiller teksten, linket og ikonet og styler normal- og hover-tilstandene separat fra Elementor-panelet.
Hvor mange knappeeffekter er inkluderet?
Den Button Effects dropdown lister 21 forudindstillinger. Standard, Winona, Ujarak, Wayra, Tamaya og Rayen er gratis, og resten har brug for Master Addons Pro, herunder Winona, Ujarak, Wayra, Tamaya, Rayen, Moema, Naira, og Shikoba. Hver anvender en anden hover animation, og editor lærred spiller effekten live, når du holder knappen.
Hvad er feltet Alternativ knaptekst?
Effekter kan bytte knappens etiket til en anden besked på hover. Når du vælger en anden effekt end Standard, vises feltet Alternativ knaptekst, så du kan indstille hover-meddelelsen, som at skifte “Kom godt i gang” til “Det er gratis!”.
Kan jeg tilføje et ikon til den kreative knap?
Ja. Kontrolelementet Ikon åbner ikonbiblioteket Elementor. Når du har valgt et ikon, placerer Ikonposition det før eller efter teksten, Ikonafstand indstiller mellemrummet, og Ikonstørrelse og Ikonfarve bor under fanen Stil.
Kan jeg style svævetilstanden separat?
Ja. Knapstilarter har faner Normal og Hover, hver med sin egen tekstfarve, baggrundsfarve og ikonfarve. Den forudindstillede animerer mellem de to tilstande, så kontrastfarver gør effekten mere synlig.
Indpakning #
Creative Buttons widget forvandler en almindelig CTA til en animeret uden brugerdefineret kode: Vælg en forudindstilling fra Effects dropdown, indstil teksten og ikonet, og giv de normale og svævende tilstande farver, der er værd at animere imellem. Det passer godt sammen med Creative Links widget til animerede tekstlinks. Gennemse det fulde sæt af Master Addons widgets og udvidelser, og se den Creative Button-widgetside til demoer og en sammenligning med Elementor Button-widgetten.
