En side, hvor alt bare sidder der, lyder som en PDF. En side, hvor sektioner letter ind, når du når dem, føles bygget. Den Indgang Animation forlængelse i Master Addons til Elementor tilføjer den bevægelse til ethvert element: Vælg en effekt fra et bibliotek med 70 animationer, indstil timingen, og elementet animerer det øjeblik, det ruller til syne. Det er en del af Master Addons Pro, og den Elementor indgang animation udvidelse siden viser, hvordan den kan sammenlignes med Elementors indbyggede mulighed.
Her er effekten på en rigtig side. Hver sektion toner ind og stiger, når den kommer ind i viewporten:
Hvad udvidelsen Entrance Animation gør #
Når det er aktiveret, får hvert Elementor-element en Indgang Animation afsnit under Advanced fane. Tildel en animation der, og elementet starter skjult, og afspiller derefter sin effekt, når den besøgende ruller til det. Sektioner, beholdere, overskrifter, billeder, knapper: alt i editoren kan bære sin egen indgang.
Animationsbiblioteket dækker hele spektret af indgangsstile:
- Fade In familie: almindelig, Ned, Op, Venstre og Højre, hver med nummererede variationer, der ændrer rejseafstanden.
- Slide Fra Højre, venstre, top og bund.
- Mask From Top, bund, venstre og højre, som tørrer elementet ind.
- Roter ind med Down and Up varianter mod hvert hjørne.
- Zoom ind og Opskalere / Skaler ned familier til dybde.
- Flip In Op, ned, venstre og højre, plus Puls In, Pulse Out, Shake, Bounce In, og Jack In the Box.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin? Følg installationsvejledning first.
- En aktiv Master Addons Pro licens, da Entrance Animation er en Pro-udvidelse.
Sådan aktiveres udvidelsen Entrance Animation #
Fra dit WordPress dashboard, gå til Master Addons og åbn Udvidelser fane. Indgang Animation fører den Animation Widgets gruppe med en Hot badge, ved siden af Transforms og Reveal. Klik på dens toggle, så den bliver lilla, og derefter slå Gem ændringer og vent på den grønne “Indstillinger gemt med succes”-meddelelse.
Vælg en animation til et element #
Vælg elementet i Elementor-editoren, åbn Advanced fane, og udvid Indgang Animation sektion med det lilla MA-mærke. Den Animation dropdown holder hele biblioteket. I demoen får helten sektionen en Fade In effekt, mens dropdown viser Fade, Slide, Mask, Rotate, Zoom og Scale grupperne, der ruller forbi.
Vælg en, og editoren forhåndsviser den med det samme, så du kan bladre gennem valgmuligheder, indtil bevægelsen passer til indholdet. Fade In Up er den sikre standard: subtil løft, ingen drama, virker på næsten alt.
Afstem timingen #
Under Animation dropdown sidder fire timing kontroller.
- Varighed (ms): hvor længe animationen kører. Demoen bruger en overdreven 5000ms, så bevægelsen er let at se; på produktionssider føles 400 til 800ms normalt rigtigt.
- Forsinkelse (ms): en pause før effekten starter, 400ms i demoen. Stagger forsinkelser på tværs af søskende elementer, og de kommer ind efter hinanden i stedet for alle på én gang.
- Lettelse: accelerationskurven. Standard virker, men en lethed-out lander mere naturligt for indgange.
- Gentag tælling: hvor mange gange effekten spiller, fra 1 til 5, eller uendelig.
Resultatet på siden #
Publicer og rul. Hvert element holder, indtil det kommer ind i viewporten, og spiller derefter sin indgang: funktionslisten stiger på plads, servicekortene falmer ind som en række, og teamsektionen følger, når du når den. Animations-GIF'en øverst på denne side viser den nøjagtige sekvens fra demosidet.
En advarsel fra praksis: animere sektioner, ikke hver widget inde i dem. En side, hvor halvtreds elementer hver flyver ind fra et sted, læser som støj. En indgang pr. sektion holder rytmen.
Hvor indgangsanimationer fungerer godt #
- Heltesektioner. En fade-in overskrift sætter tonen i det øjeblik siden indlæses.
- Feature rækker. Kort, der stiger i rækkefølge ved hjælp af forskudte forsinkelser.
- Statistik og tællere. Bevægelse trækker øjet lige når tallene ruller til syne.
- Udtalelser. Citater, der letter i læsning som øjeblikke i stedet for en væg af tekst.
- Lange landingssider. Hver sektion, der annoncerer sig selv, holder rullemomentum i gang.
Video Tutorial #
Se animationerne i bevægelse, fra aktivering af udvidelsen til den færdige side.
Ofte stillede spørgsmål #
Hvordan tilføjer jeg en indgangsanimation i Elementor?
Aktiver udvidelsen Entrance Animation i fanen Master Addons Extensions, vælg et hvilket som helst element i editoren, og åbn Entrance Animation under fanen Advanced. Vælg en effekt fra dropdownen Animation, indstil varigheden og forsinkelsen, og elementet animerer, når det ruller til syne.
Hvilke animationer er inkluderet i udvidelsen?
70 effekter: Fade In (op, ned, venstre og højre, med variationer), Slide From og Mask From i alle fire retninger, Rotate In mod hvert hjørne, Zoom In, Scale Up og Scale Down, Flip In, Pulse In og Pulse Out, Shake, Bounce In, og Jack In the Box. Hver arbejder på sektioner, containere, og individuelle widgets.
Hvornår afspilles indgangsanimationen?
Når elementet kommer ind i viewport. Elementer over folden animerer på sideindlæsning, og alt længere nede venter på, at den besøgende ruller til det. Indstillingen Forsinkelse tilføjer en pause, før effekten starter, hvilket er, hvordan du forskyder en række kort.
Kan jeg styre animationshastigheden?
Ja. Varighed indstiller længden af effekten i millisekunder, Delay udsætter sin start, Easing former accelerationskurven, og Repeat Count afspiller den igen. En varighed på 400 til 800 ms med en kort forskydning mellem elementerne dækker de fleste designs.
Er udvidelsen Entrance Animation gratis?
Nej. Entrance Animation er en del af Master Addons Pro. Elementors gratis editor har sin egen grundlæggende indgangsanimation under Avanceret, Motion Effects, med en forudindstillet varighed og en forsinkelse.
Indpakning #
The Entrance Animation udvidelse giver hvert Elementor-element en rulleudløst indgang: en dropdown for effekten, fire felter for timingen. Hold varigheder under et sekund, forskyd forsinkelserne, og animer på sektionsniveau, og siden føles bevidst i stedet for dekoreret. For bevægelse, der reagerer på markøren i stedet for rullen, se på Floating Effects udvidelse, og den fulde liste over Master Addons widgets og udvidelser har resten.
