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 udvidelse i Master Addons Pro tilføjer den effekt til enhver beholder, sektion eller kolonne: 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, sektioner og kolonner en Animeret Gradient Baggrund panel i deres måde 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 lempelsen er din at indstille.
Et lille script tilføjer et gradientlag bag indholdet og animerer det med CSS, så der er ingen video at være vært for eller billede at komprimere, og teksten øverst forbliver valgbar.
Før du starter #
- WordPress med elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin? Følg installationsvejledning først.
- -en Master Addons Pro licens, fordi Animated Gradient BG er en Pro-udvidelse.
Sådan aktiveres udvidelsen Animated Gradient BG #
Fra dit WordPress dashboard, gå til Master Addons og åbn Udvidelser fane. Animated Gradient BG sidder i animationswidgets 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 måde 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): den tid, gradienten tager at drive over og tilbage. Demoen bruger 6 sekunder.
- Overgangsglathed (sekunder): vist i panelet med en standard på 3, men i den aktuelle version ændrer det ikke animationen. Brug varigheden og Animationseffekten til at justere følelsen i stedet.
- 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 i fanen Master Addons Extensions, vælg en beholder, sektion eller kolonne, 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. Total animationsvarighed indstiller, hvor mange sekunder en hel cyklus tager, fra 1 til 20, og animationseffekt indstiller lempelsen. Skyderen Overgangsglathed påvirker ikke animationen i den aktuelle version.
Sænker den animerede gradient min side?
Effekten er en CSS animation sat op af et lille script snarere end en video eller billedfil, så der er meget lidt ekstra at downloade. Det er en af de lettere måder at sætte bevægelse i en helt sektion.
Er Animated Gradient BG-udvidelsen gratis?
Nej. Animeret gradient BG er en Pro udvidelse i Master Addons. Elementor har en gratis Gradient baggrundstype, men den gradient bevæger sig ikke.
Indpakning #
de Animeret Gradient BG udvidelse forvandler en sektionsbaggrund til langsomt bevægende farve: en farveliste, en vinkel, en varighed og en lempelse. 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ægelige baggrund, den gratis Gradient Overskrift widget dækker gradienttekst og det fulde sæt af Master Addons widgets og udvidelser er én side væk.
