Elementor animeret gradient baggrund (Pro): Bevægelige gradient sektioner
Animated Gradient BG er en Master Addons Pro udvidelse, der sætter en langsomt bevægende lineær gradient bag en beholder, sektion eller kolonne. Du vælger to eller flere farver, vinklen, varigheden og lempelsen, og gradienten driver frem og tilbage i en løkke uden nogen billede eller videofil. Det bruges ofte til helt sektioner, call-to-action bands og kommer snart sider. For gradient-farvet tekst i stedet for en baggrund, prøv den frie Gradient Overskrift widget.
To eller flere farver, én bevægelig gradient
Tilføj farver i Color liste, en række pr. farve. Udvidelsen har brug for mindst to. Den placerer dem jævnt på tværs af en lineær gradient og gentager den første farve i slutningen, så løkken har ingen hård kant. Der er ingen indstillinger for farvestoppositioner eller en radial gradient. Editoren forhåndsvisning opdateringer, når du vælger farver.
- Farveliste: tilføj, duplikér eller slet rækker. To til fire farver læses normalt bedst.
- Gennemsigtige farver: gradienten sidder på sit eget lag over sektionens normale baggrund, så farver med gennemsigtighed lader et baggrundsbillede vise sig igennem.
- Hvor det virker: containere, sektioner og kolonner, i fanen Stil. Widgets får ikke panelet.
Vinkel, Varighed og Lettelse
Vinkel indstiller gradientens retning fra -45 til 180 grader, med -45 som standard. Samlet animationsvarighed (sekunder) kører fra 1 til 20 og er som standard 6. Det er den tid, gradienten tager at drive på tværs og tilbage. Animationseffekt indstiller lempelsen: Lineær, let, let ind, let ud, let ind ud eller en af tre glatte kurver, med materialedesign (glat) som standard.
- Langsom og subtil: 12 til 20 sekunder fungerer godt bag heltetekst.
- Altid tændt: løkken starter, når siden indlæses og har ingen svæve- eller rulleudløser.
- Overgangsglathed: denne skyder vises i panelet, men den ændrer ikke animationen i den aktuelle version.
Elementor Gradient Baggrund vs Animeret Gradient BG
Elementors gratis Baggrundsindstilling har en Gradient type (markeret på Elementor 4.2.4), men gradienten bevæger sig ikke. Du kan animere den ved selv at skrive CSS keyframes, eller bruge udvidelsen.
| Feature | Elementor Gradient | CSS i hånden | Animeret Gradient BG |
|---|---|---|---|
| Price | Free | Free | Master Addons Pro |
| Bevægelse | Statisk | Ja, du skriver keyframes | Ja, indbygget |
| Farver | 2, med stopsteder | Enhver | 2 eller flere, jævnt fordelt |
| Gradienttype | Lineær eller radial | Enhver | Kun lineær |
| Vinkel | 0 til 360 pr. enhed | Enhver | -45 til 180 |
| Hastighed og lempelse | No | Ja | Varighed 1 til 20 s, 8 lempelsesmuligheder |
| Opstillet i | Stilpanel | Brugerdefineret CSS | Stilpanel |
For en still-gradient er Elementors egen indstilling nok og giver mere kontrol over stop og gradienttype. Udvidelsen sparer dig for at skrive keyframes, når du vil have gradienten til at flytte.
Relateret: Gradient Overskrift (gratis) for gradienttekst, plus Partikler (gratis) og Baggrund Slider (gratis) til andre bevægelige baggrunde.
Sådan tilføjes en animeret gradientbaggrund i Elementor
Når udvidelsen er slået til, vises panelet i fanen Style i hver beholder, sektion og kolonne. Her er en detaljer dokumentation om Animeret Gradient Baggrund.
- Med Master Addons Pro aktiv, gå til Master Addons > Udvidelser og tænd Animeret Gradient BG.
- Rediger din side med Elementor, og vælg en beholder, sektion eller kolonne.
- Åbn Style tabulér og udvid Animeret Gradient Baggrund.
- Set Aktiver animeret gradient til Ja. Der vises tre prøvefarver.
- Ændre farverne i Color liste, og derefter indstille Vinkel, Samlet animationsvarighed (sekunder) og Animationseffekt.
- Opdater siden, og kontroller, at din tekst forbliver læsbar mod hver farve.
Ofte stillede spørgsmål til animeret gradient BG
Er animeret gradient BG gratis?
Nej. Det er en del af Master Addons Pro. Elementors gratis Gradient baggrund er statisk, så en bevægelig gradient har brug for denne udvidelse eller din egen CSS.
Kan jeg bruge det over et baggrundsbillede?
Ja. Gradienten tegnes på sit eget lag over sektionens normale baggrund. Vælg farver med en vis gennemsigtighed i farvevælgeren, og baggrundsbilledet vises igennem.
Hvor mange farver kan jeg bruge i én animation?
Mindst to, og så mange som du tilføjer efter det. Farverne er fordelt jævnt, så to til fire giver normalt det reneste resultat.
Spiller animationen hele tiden, eller kan jeg få den til at spille på hover?
Det spiller hele tiden. Sløjfen starter, når siden indlæses og har ingen svæve- eller rulleudløser. For en svæve-kun-effekt ville du have brug for din egen CSS, for eksempel med Brugerdefineret CSS extension.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
![Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
