Elementor-Animierter Gradientenhintergrund (Pro): Bewegliche Gradientenabschnitte
Animated Gradient BG ist eine Master Addons Pro Erweiterung, die einen langsam bewegten linearen Gradienten hinter einen Container, Abschnitt oder eine Spalte setzt Man wählt zwei oder mehr Farben, den Winkel, die Dauer und die Lockerung, und der Gradient driftet in einer Schleife ohne Bild oder Videodatei hin und her, er wird oft für Heldenabschnitte, Call-to-Action-Bänder und kommende baldige Seiten verwendet Für gradientenfarbenen Text statt Hintergrund, versuchen Sie es kostenlos Gradientenüberschrift Widget.
Zwei oder mehr Farben, ein beweglicher Farbverlauf
Farben hinzufügen in der Farbe Liste, eine Zeile pro Farbe Die Erweiterung braucht mindestens zwei, Sie spaltet sie gleichmäßig über einen linearen Verlauf und wiederholt die erste Farbe am Ende, so hat die Schleife keine harte Kante Es gibt keine Einstellungen für Farbstopppositionen oder einen radialen Verlauf Die Editorvorschau aktualisiert sich, während Sie Farben auswählen.
- Farbliste: Zeilen hinzufügen, duplizieren oder löschen Zwei bis vier Farben lesen sich meist am besten.
- Transparente Farben: Der Verlauf sitzt auf einer eigenen Ebene über dem normalen Hintergrund des Abschnitts, sodass Farben mit Transparenz ein Hintergrundbild durchscheinen lassen.
- Wo es funktioniert: Container, Abschnitte und Spalten, im Reiter Stil Widgets bekommen das Panel nicht.
Winkel, Dauer und Lockerung
Winkel Legt die Richtung des Gefälles von -45 auf 180 Grad fest, wobei -45 als Standard gilt. Gesamtanimationsdauer (Sekunden) Läuft von 1 bis 20 und standardmäßig bis 6. Es ist die Zeit, die der Gradient benötigt, um hin und her zu driften. Animationseffekt Legt die Lockerung fest: Linear, Einfach, Einfach ein, Einfach aus, Einfach aus, oder eine von drei glatten Kurven, mit Materialdesign (glatt) als Standard.
- Langsam und dezent: 12 bis 20 Sekunden funktionieren gut hinter Heldentext.
- Immer an: Die Schleife startet beim Laden der Seite und hat keinen Hover - oder Scroll-Trigger.
- Übergangsglattheit: Dieser Schieberegler wird im Panel angezeigt, ändert jedoch nichts an der Animation in der aktuellen Version.
Elementorgradientenhintergrund vs. animierter Gradient BG
Die freie Hintergrundeinstellung von Elementor hat einen Gradiententyp (auf Elementor 4.2.4 markiert), aber der Gradient bewegt sich nicht Sie können ihn animieren, indem Sie CSS-Keyframes selbst schreiben, oder die Erweiterung verwenden.
| Merkmal | Elementargradient | CSS von Hand | Animierter Gradient BG |
|---|---|---|---|
| Preis | Kostenlos | Kostenlos | Master Addons Pro |
| Bewegung | Statisch | Ja, du schreibst die Keyframes | Ja, eingebaut |
| Farben | 2, mit Haltestellenstandorten | Irgendwelche | 2 oder mehr, gleichmäßig verteilt |
| Gradiententyp | Linear oder radial | Irgendwelche | Nur linear |
| Winkel | 0 bis 360, pro Gerät | Irgendwelche | -45 bis 180 |
| Geschwindigkeit und Lockerung | Nein | Ja | Dauer 1 bis 20 s, 8 Lockerungsmöglichkeiten |
| Einrichten in | Stilblende | Benutzerdefiniertes CSS | Stilblende |
Für einen Standgradienten reicht die eigene Einstellung von Elementor und gibt mehr Kontrolle über Stopps und Gradiententyp Die Erweiterung erspart Ihnen das Schreiben von Keyframes, wenn Sie möchten, dass sich der Gradient bewegt.
Verwandte: Gradientenüberschrift (kostenlos) für Verlaufstext, zzgl Partikel (kostenlos) und Hintergrundschieber (kostenlos) für andere bewegliche Hintergründe.
So fügen Sie einen Hintergrund mit animiertem Gradienten in Elementor hinzu
Sobald die Erweiterung eingeschaltet ist, erscheint das Panel in der Registerkarte Stil jedes Behälters, Abschnitts und jeder Spalte Hier ist ein Detail Dokumentation zum Hintergrund des animierten Gradienten.
- Wenn Master Addons Pro aktiv ist, gehen Sie zu Master-Addons > Erweiterungen Und schalten Sie ein Animierter Gradient BG.
- Bearbeiten Sie Ihre Seite mit Elementor und wählen Sie einen Container, Abschnitt oder eine Spalte aus.
- Öffnen Sie die Stil Tab und erweitern Hintergrund des animierten Gradienten.
- Einstellen Aktivieren Sie den animierten Gradienten Zu Ja. Es erscheinen drei Musterfarben.
- Ändern Sie die Farben in der Farbe Liste, dann einstellen Winkel, Gesamtanimationsdauer (Sekunden) und Animationseffekt.
- Aktualisieren Sie die Seite und überprüfen Sie, ob Ihr Text für jede Farbe lesbar bleibt.
Häufig gestellte Fragen zum animierten Gradienten BG
Ist Animierter Gradient BG frei?
Nein. Es ist Teil von Master Addons Pro. Der freie Gradient-Hintergrund von Elementor ist statisch, daher benötigt ein beweglicher Gradient diese Erweiterung oder Ihr eigenes CSS.
Kann ich es über einem Hintergrundbild verwenden?
Ja. Der Verlauf wird auf einer eigenen Ebene über dem normalen Hintergrund des Abschnitts gezeichnet Wählen Sie Farben mit etwas Transparenz im Farbwähler aus und das Hintergrundbild zeigt durch.
Wie viele Farben kann ich in einer Animation verwenden?
Mindestens zwei, und danach so viele, wie man hinzufügt Die Farben sind gleichmäßig verteilt, so dass zwei bis vier in der Regel das sauberste Ergebnis liefern.
Läuft die Animation ständig ab, oder kann ich sie auf Hover abspielen lassen?
Es spielt sich ständig ab Die Schleife startet beim Laden der Seite und hat keinen Hover - oder Scroll-Trigger, für einen Hover-Only-Effekt bräuchte man ein eigenes CSS, zum Beispiel mit dem Benutzerdefiniertes CSS Erweiterung.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
