Eine flache Hintergrundfarbe tut ihre Arbeit und verschwindet Ein Farbverlauf, der langsam zwischen den Farben driftet, lässt den gleichen Abschnitt lebendig wirken, ohne ein einziges Bild hinzuzufügen Die Animierter Gradient BG Erweiterung in Master-Addons für Elementor Fügt diesen Effekt jedem Abschnitt oder Container hinzu: Wählen Sie Ihre Farben aus, stellen Sie den Winkel und die Geschwindigkeit ein und der Hintergrund durchläuft sie von selbst.
Hier der Effekt, der auf einer Live-Seite läuft Der Abschnitt schaltet sich durch seinen Farbsatz, während der Inhalt stehen bleibt:
Was die BG-Erweiterung für animierte Gradienten bewirkt #
Sobald diese Option aktiviert ist, erhalten Container und Abschnitte eine Hintergrund des animierten Gradienten Panel in ihrem Stil Tab, direkt unter dem normalen Hintergrundabschnitt Sie laden es mit zwei oder mehr Farben, und die Erweiterung gibt einen Verlauf, der zwischen ihnen in einer Schleife animiert Der Winkel, die Gesamtzykluszeit und die Glätte jedes Übergangs sind alle Ihre einzustellen.
Alles läuft in CSS auf dem Element selbst, sodass es kein Video zum Hosten oder Bild zum Komprimieren gibt und der Text oben wählbar und lesbar bleibt.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? folgen Sie dem Installationsführung Zuerst.
- Animated Gradient BG ist eine kostenlose Erweiterung, daher ist keine Pro-Lizenz erforderlich.
So aktivieren Sie die BG-Erweiterung Animated Gradient #
Gehen Sie von Ihrem WordPress-Dashboard aus zu Master Addons Und öffnen Sie die Erweiterungen Tab. Animierte Gradient BG sitzt in der Animations-widgets Gruppe, neben Teilchen und Hintergrundschieber Klicken Sie auf den Knebel, damit er violett wird, und dann auf Änderungen speichern und warten auf den grünen Hinweis “Einstellungen erfolgreich gespeichert”.
Richten Sie die Steigung auf einem Abschnitt ein #
Wählen Sie den Container oder Abschnitt im Elementor-Editor aus und öffnen Sie den Stil Tab. Die Hintergrund des animierten Gradienten Abschnitt mit dem lila MA-Abzeichen sitzt direkt unter dem Hintergrund. Flip Aktivieren Sie den animierten Gradienten zu Ja, und die Steuerung erscheint, während die Leinwand den Effekt live in der Vorschau anzeigt.
- Animationseffekt: Die Lockerung der Farbbewegung, Ease In in der Demo.
- Winkel: Die Richtung des Gefälles, -45 in der Demo für einen Diagonal-Sweep.
- Gesamtanimationsdauer (Sekunden): Eine volle Fahrt durch alle Ihre Farben Die Demo verbraucht 6 Sekunden.
- Übergangsglattheit (Sekunden): Wie sanft eine Farbe auf die nächste übergibt, 3 Sekunden in der Demo Der Panel-Hinweis sagt es gerade: Höhere Werte erzeugen sanftere Übergänge zwischen Farben.
- Farbe: Ein Repeater, der den Verlauf hält, stoppt Klicken Sie Artikel hinzufügen Für eine andere Farbe, oder das X, um eine fallen zu lassen.
Wählen Sie die Farben #
Jede Zeile in der Color-Liste öffnet einen Standard-Picker Die Demo beginnt mit einem Cyan, Lila, und Orange-Set, dann vertauscht Stopps ein und aus: Entfernen Sie einen und die Schleife wird enger, fügen Sie ein tiefes Blau (#3D6CD6) hinzu und der Zyklus nimmt es sofort auf Die Live-Vorschau macht dies zum lustigen Teil; Sie beobachten, wie sich die Stimmung des Abschnitts mit jedem Stopp ändert, den Sie berühren.
Zwei oder drei Farben im gleichen Temperaturbereich lesen sich als elegant Fünf Farben quer über das ganze Rad als Bildschirmschoner Beginnen Sie klein.
Das Ergebnis auf der Seite #
Veröffentlichen und beobachten Sie, wie der Abschnitt durch seine Farben atmet, wie im GIF oben auf dieser Seite Der vollständige Zyklus nimmt alles, was Sie als Dauer festlegen, dann Schleifen Knöpfe, Überschriften und Bilder sitzen unbeeinflusst oben drauf.
Ein praktischer Hinweis: Dunkler Text bleibt auf hellen Farbverlaufsstopps lesbar, kann aber auf gesättigten verschwinden Überprüfen Sie Ihre Überschrift anhand jeder Farbe im Set, nicht nur des ersten Frames.
Wo animierte Verläufe gut funktionieren #
- Heldensektionen. Bewegung über der Falte ohne schweres Hintergrundvideo.
- Call-to-action-bands. Ein sich verschiebender Hintergrund lenkt den Blick auf den darauf fahrenden Knopf.
- Demnächst und Landingpages. Ein Vollbildverlauf trägt eine spärliche Seite für sich.
- Portfolio - und Agenturstandorte. Markenfarben, die durch den Header radeln, ohne für ein Stockvideo zu bezahlen.
- Preisabschnitte. Ein subtiler Verlauf hinter dem hervorgehobenen Plan trennt ihn vom Rest.
Video-Tutorial #
Beobachten Sie, wie der Farbverlauf von Grund auf neu aufgebaut wird, von der Aktivierung der Erweiterung bis zum fertigen beweglichen Hintergrund.
Häufig gestellte Fragen #
Wie füge ich einen animierten Farbverlaufshintergrund in Elementor hinzu?
Aktivieren Sie die Erweiterung Animated Gradient BG in der Registerkarte Master Addons Extensions, wählen Sie einen Abschnitt oder Behälter aus und öffnen Sie die Registerkarte Style Schalten Sie den Aktivierten Gradienten im Panel Animated Gradient Background ein, fügen Sie zwei oder mehr Farben hinzu, und der Hintergrund beginnt sofort zu zyklieren.
Wie viele Farben kann der Farbverlauf verwenden?
So viele, wie Sie dem Farbrepeater hinzufügen Jeder Klick auf Element hinzufügen erzeugt einen weiteren Verlaufsstopp, und die Animation durchläuft alle innerhalb der von Ihnen festgelegten Gesamtdauer Zwei bis vier Farben decken die meisten Designs ab.
Kann ich die Geschwindigkeit der Gradientenanimation steuern?
Ja, mit zwei Einstellungen Die Gesamtanimationsdauer legt fest, wie viele Sekunden ein vollständiger Farbzyklus dauert, und Transition Smoothness steuert, wie allmählich jede Farbe in die nächste übergeht Höhere Glättewerte erzeugen mehr Keyframes für eine weichere Übergabe.
Verlangsamt der animierte Verlauf meine Seite?
Der Effekt wird mit CSS-Animation auf dem Element erzeugt und nicht mit einer Video - oder Bilddatei, sodass es nichts extra zum Herunterladen gibt Es ist eine der leichteren Möglichkeiten, in einem Heldenbereich Bewegung zu setzen.
Ist die Erweiterung Animated Gradient BG kostenlos?
Ja. Animated Gradient BG wird mit der kostenlosen Version von Master Addons for Elementor ausgeliefert, in der Gruppe Animation Widgets des Reiters Erweiterungen Die Preisseite behandelt, was die Pro-Pläne hinzufügen.
Einwickelnd #
Die Erweiterung Animated Gradient BG verwandelt einen Abschnittshintergrund in langsam bewegte Farbe: eine Farbliste, einen Winkel und zwei Zeitschieber Halten Sie die Palette eng, überprüfen Sie den Textkontrast an jedem Stopp, und der Abschnitt trägt Bewegung mit null Assetgewicht Er passt gut zu den Erweiterung für Eingangsanimation Für Inhalte, die über den beweglichen Hintergrund ankommen, und den gesamten Satz von Master Addons Widgets und Erweiterungen Seite entfernt ist.
