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 BG-Erweiterung mit animiertem Gradienten In Master Addons Pro Fügt diesen Effekt jedem Behälter, Abschnitt oder jeder Spalte 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, Abschnitte und Spalten 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 rendert einen Verlauf, der zwischen ihnen in einer Schleife animiert Der Winkel, die Gesamtzykluszeit und die Lockerung sind Ihre einzustellen.
Ein kleines Skript fügt eine Farbverlaufsebene hinter den Inhalt hinzu und animiert ihn mit CSS, sodass kein Video gehostet oder Bild komprimiert werden kann und der Text oben wählbar 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.
- A Master Addons Pro Lizenz, da es sich bei Animated Gradient BG um eine Pro-Erweiterung handelt.
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): Die Zeit, die der Gradient braucht, um hin - und herzudriften Die Demo verbraucht 6 Sekunden.
- Übergangsglattheit (Sekunden): Im Panel mit einer Voreinstellung von 3 dargestellt, ändert in der aktuellen Version aber nicht die Animation Verwenden Sie stattdessen die Dauer und den Animationseffekt, um das Gefühl anzupassen.
- 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 im Reiter Master Addons Extensions, wählen Sie einen Container, einen Abschnitt oder eine Spalte 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. Gesamtanimationsdauer legt fest, wie viele Sekunden ein vollständiger Zyklus dauert, von 1 bis 20, und Animationseffekt legt die Lockerung fest Der Transition Smoothness-Slider hat keinen Einfluss auf die Animation in der aktuellen Version.
Verlangsamt der animierte Verlauf meine Seite?
Der Effekt ist eine CSS-Animation, die von einem kleinen Skript und nicht von einer Video- oder Bilddatei eingerichtet wird, daher gibt es nur sehr wenig Extra zum Herunterladen. Es ist eine der leichteren Möglichkeiten, in einem Heldenbereich Bewegung zu erzeugen.
Ist die Erweiterung Animated Gradient BG kostenlos?
Nr. Animierter Gradient BG ist eine Pro-Erweiterung in Master Addons Elementor hat einen freien Gradientenhintergrundtyp, aber dieser Gradient bewegt sich nicht.
Einwickelnd #
Die BG-Erweiterung mit animiertem Gradienten Verwandeln Sie einen Abschnittshintergrund in langsame Farbe: eine Farbliste, einen Winkel, eine Dauer und eine Lockerung Halten Sie die Palette eng, überprüfen Sie den Textkontrast an jedem Stopp, und der Abschnitt trägt Bewegung mit einem Gewicht von null Vermögenswerten. Er passt gut zu dem Erweiterung für Eingangsanimation Für Inhalte, die über die bewegte Kulisse kommen, ist die kostenlose Gradientenüberschrift Das Widget deckt den Farbverlaufstext und den gesamten Satz ab Master Addons Widgets und Erweiterungen Seite entfernt ist.
