En flad baggrundsfarve gør sit arbejde og forsvinder. En gradient, der langsomt driver mellem farver, får den samme sektion til at føles levende uden at tilføje et eneste billede. Den Animeret Gradient BG forlængelse i Master Addons til Elementor tilføjer den effekt til enhver sektion eller beholder: Vælg dine farver, indstil vinklen og hastigheden, og baggrunden cykler gennem dem alene.
Her er effekten, der kører på en live-side. Afsnittet skifter gennem sit farvesæt, mens indholdet forbliver sat:
Hvad Animated Gradient BG-udvidelsen gør #
Når de er aktiveret, får containere og sektioner en Animeret Gradient Baggrund panel i deres Style tab, lige under den normale Baggrund sektion. Du indlæser den med to eller flere farver, og udvidelsen gengiver en gradient, der animerer mellem dem i en løkke. Vinklen, den samlede cyklustid, og glatheden af hver overgang er alle dine at indstille.
Alt kører i CSS på selve elementet, så der er ingen video at være vært for eller billede at komprimere, og teksten på toppen forbliver valgbar og læsbar.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin? Følg installationsvejledning first.
- Animated Gradient BG er en gratis udvidelse, så der kræves ingen Pro-licens.
Sådan aktiveres udvidelsen Animated Gradient BG #
Fra dit WordPress dashboard, gå til Master Addons og åbn Udvidelser fane. Animated Gradient BG sidder i Animation Widgets gruppe, ved siden af Partikler og Baggrund Slider. Klik på dens toggle, så den bliver lilla, og derefter hit Gem ændringer og vent på den grønne “Indstillinger gemt med succes”-meddelelse.
Opsæt forløbet på et afsnit #
Vælg beholderen eller sektionen i Elementor-editoren, og åbn Style fane. Den Animeret Gradient Baggrund sektion med det lilla MA-badge sidder lige under Baggrund. Flip Aktiver animeret gradient til Ja, og kontrolelementerne vises, mens lærredet forhåndsviser effekten live.
- Animationseffekt: lettelsen af farvebevægelsen, Ease In i demoen.
- Vinkel: gradientens retning, -45 i demoen for et diagonalt sweep.
- Samlet animationsvarighed (sekunder): én hel tur gennem alle dine farver. Demoen bruger 6 sekunder.
- Overgangsglathed (sekunder): hvor forsigtigt en farve afleverer til den næste, 3 sekunder i demoen. Panelets tip siger det lige: højere værdier skaber jævnere overgange mellem farver.
- Farve: en repeater, der holder forløbet, stopper. Klik Tilføj vare for en anden farve, eller X'et for at droppe en.
Vælg farverne #
Hver række i listen Farve åbner en standardvælger. Demoen starter med et cyan, lilla og orange sæt, og skifter derefter stop ind og ud: Fjern en, og løkken strammes, tilføj en dyb blå (# 3D6CD6), og cyklussen samler den op med det samme. Live-forhåndsvisningen gør dette til den sjove del; du ser stemningen i sektionen ændre sig med hvert stop, du rører ved.
To eller tre farver i samme temperaturområde læses som elegant. Fem farver på tværs af hele hjulet læses som en pauseskærm. Start i det små.
Resultatet på siden #
Udgiv og se afsnittet ånde gennem sine farver, som i GIF øverst på denne side. Den fulde cyklus tager hvad du indstiller som varigheden, derefter loops. Knapper, overskrifter, og billeder sidder på toppen upåvirket.
En praktisk bemærkning: mørk tekst forbliver læsbar på lyse gradientstop, men kan forsvinde på mættede. Kontroller din overskrift mod hver farve i sættet, ikke kun den første ramme.
Hvor animerede gradienter fungerer godt #
- Heltesektioner. Bevægelse over folden uden en tung baggrundsvideo.
- Call-to-action bands. En skiftende baggrund trækker øjet til knappen, der kører på den.
- Kommer snart og landing pages. En fuldskærmsgradient bærer en sparsom side alene.
- Portefølje- og agentursider. Mærkefarver cykler gennem overskriften uden at betale for en lagervideo.
- Prissætning sektioner. En subtil gradient bag den fremhævede plan adskiller den fra resten.
Video Tutorial #
Se gradienten bygget fra bunden, fra at aktivere udvidelsen til den færdige bevægelige baggrund.
Ofte stillede spørgsmål #
Hvordan tilføjer jeg en animeret gradient baggrund i Elementor?
Aktiver udvidelsen Animated Gradient BG på fanen Master Addons Extensions, vælg en sektion eller beholder, og åbn fanen Style. Slå Aktiver animeret gradient til i panelet Animated Gradient Background, tilføj to eller flere farver, og baggrunden begynder at cykle med det samme.
Hvor mange farver kan gradienten bruge?
Så mange som du tilføjer til Farverepeateren. Hvert klik på Tilføj element opretter endnu et forløbsstop, og animationen cykler gennem dem alle inden for den samlede varighed, du indstiller. To til fire farver dækker de fleste designs.
Kan jeg styre hastigheden på gradientanimationen?
Ja, med to indstillinger. Total animationsvarighed indstiller, hvor mange sekunder en hel farvecyklus tager, og overgangsglathed styrer, hvor gradvist hver farve blandes ind i den næste. Højere glathedsværdier genererer flere keyframes for en blødere overdragelse.
Sænker den animerede gradient min side?
Effekten genereres med CSS-animation på elementet frem for en video- eller billedfil, så der er ikke noget ekstra at downloade. Det er en af de lettere måder at sætte bevægelse i en heltesektion.
Er Animated Gradient BG-udvidelsen gratis?
Ja. Animated Gradient BG leveres med den gratis version af Master Addons for Elementor, i gruppen Animation Widgets under fanen Udvidelser. Prissiden dækker, hvad Pro-planerne tilføjer.
Indpakning #
Udvidelsen Animated Gradient BG forvandler en sektionsbaggrund til langsomt bevægende farve: en farveliste, en vinkel og to tidsindstillede skydere. Hold paletten stram, kontroller tekstkontrasten mod hvert stop, og sektionen bærer bevægelse med nul aktivvægt. Den passer godt sammen med Entrance Animation udvidelse for indhold, der ankommer over den bevægende baggrund, og det fulde sæt af Master Addons widgets og udvidelser er én side væk.
