Ein Heldenbild sagt eines aus Ein Heldenhintergrund, der sich durch deine besten drei oder vier Fotos dreht, sagt erheblich mehr aus, ohne ein einziges Widget ins Layout zu setzen Die Hintergrund-Slider-Erweiterung In Master-Addons für Elementor Ersetzt den statischen Hintergrund eines Abschnitts durch eine Bild-Diashow: Wählen Sie die Fotos aus, wählen Sie einen Übergang aus und der Inhalt sitzt oben, während der Hintergrund dahinter wechselt.
Hier ist der fertige Held von der Demo, der mit einem Wirbelübergang durch seine drei Fotos radelt:
Was die Background Slider-Erweiterung bewirkt #
Sobald diese Option aktiviert ist, erhalten Container, Abschnitte und Spalten eine Hintergrundschieber Panel in ihrem Stil Tab, neben dem regulären Abschnitt Hintergrund Drehen Sie es an, fügen Sie Bilder aus der Mediathek hinzu, und der Abschnittshintergrund wird zu einer zeitgesteuerten Diashow Alles daran ist konfigurierbar:
- Bilder hinzufügen: Ein Galeriefeld, das die Folien enthält, ordnen oder entfernen Sie sie im Standard-Editor der WordPress-Galerie.
- Übergang: 24 Effekte zwischen Folien plus Zufällig: Fade, Slide in vier Richtungen, Zoom In and Out, Swirl, Burn, Blur und Flash, jeweils mit einer zweiten Variante.
- Animation: Ken Burns bewegt sich auf jeder Folie in neun Richtungen, zufällig oder keine.
- Benutzerdefinierte Overlay: Eine Farb-, Farbverlaufs- oder Bildschicht über den Folien sowie neun voreingestellte Overlay-Stile, die den Text lesbar halten.
- Verzögerung und Timer: Wie lange jede Folie hält (standardmäßig 5000 ms) und ob ein dünner Fortschrittsbalken die verbleibende Zeit auf jeder Folie anzeigt.
- Zufällige Anzeige, Bildauflösung, Cover: Mischen Sie die Reihenfolge, wenn die Seite generiert wird, wählen Sie die geladene Größe und steuern Sie, wie Bilder den Abschnitt füllen.
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.
- Hintergrund Slider ist eine kostenlose Erweiterung, daher ist keine Pro-Lizenz erforderlich.
- Zwei oder mehr Bilder, dimensioniert für die Anzeige über die gesamte Breite, idealerweise ähnliche Abmessungen.
So aktivieren Sie die Erweiterung Hintergrund-Slider #
Gehen Sie von Ihrem WordPress-Dashboard aus zu Master Addons Und öffnen Sie die Erweiterungen Tab. Hintergrund Schieberegler sitzt im Animations-widgets Gruppe, neben Animierter Gradient BG (Pro). Klicken Sie auf den Knebel, damit er lila wird, und schlagen Sie dann Änderungen speichern und warten auf den grünen Hinweis “Einstellungen erfolgreich gespeichert”.
Öffnen Sie das Panel und fügen Sie die Bilder hinzu #
Wählen Sie den Heldencontainer im Elementor-Editor aus und öffnen Sie den Stil Tab. Erweitern Sie die Hintergrundschieber Abschnitt mit dem lila MA-Abzeichen und Schalter Hintergrund-Slider aktivieren Zu Ja. Es erscheint die vollständige Einstellungsliste, mit einem Bewerben Schaltfläche oben zum Drücken von Änderungen an der Vorschau.
Klicken Sie auf Bilder hinzufügen und wählen Sie die Folien aus der Mediathek aus Die Demo verwendet drei Servicefotos Der Galerieeditor übernimmt die Reihenfolge: Ziehen, um neu anzuordnen, drücken Sie das X, um eines fallen zu lassen, oder In die Galerie für mehr hinzufügen.
Wählen Sie den Übergang und die Bewegung #
Die Übergang Dropdown entscheidet, wie eine Folie zur nächsten übergeht Die Liste läuft lang: Fade, Slide Left, Right, Up, and Down, Zoom In and Out, Swirl Left and Right, Burn, Blur, and Flash, jeweils in zwei Varianten Die Demo landet auf Wirbel links.
Die Animation Einstellung fügt Ken Burns Bewegung innerhalb jeder Folie, einen langsamen Schwenk und Zoom, die den Hintergrund zwischen den Übergängen lebendig hält, eine Richtung wählen oder auf einstellen Zufällig Und lassen Sie jede Rutsche ihren eigenen Weg treiben.
Überlagerung, Verzögerung und Timer #
Weißer Text auf einem vielbeschäftigten Foto braucht HilfeDrehen Benutzerdefinierte Overlay Farbe, Verlauf oder Bild auf den Folien anzeigen und legen oder eine der neun Voreinstellungen auswählen Überlagerung Stile mit Mustern, die auf Lesbarkeit ausgelegt sind Darunter Verzögerung Legt fest, wie viele Millisekunden jede Folie fasst (5000 in der Demo), Timer Zeigt eine Fortschrittsleiste für jede Folie an (die Folien drehen sich in beide Richtungen) und Cover Bilder den Abschnitt von Kante zu Kante füllen lässt.
Das Ergebnis auf der Seite #
Veröffentlichen und der Held zykliert von alleine, genau wie im GIF oben auf dieser Seite: Jedes Foto hält für die Verzögerung, wirbelt in das nächste, und die Überschrift und die Knöpfe bleiben oben fixiert Besucher erhalten eine bewegliche Kulisse ohne separates Slider-Widget, und die Abschnittsstruktur darunter ändert sich nie.
Wo ein Hintergrundschieber gut funktioniert #
- Heldensektionen. Drehen Sie drei starke Fotos, anstatt den ersten Eindruck auf eines zu setzen.
- Dienstleistungsbetriebe. Zeigen Sie das Team bei der Arbeit hinter einer Schlagzeile.
- Restaurants und Veranstaltungsorte. Gerichte und Innenräume radeln hinter dem Reservierungsknopf.
- Portfolios. Aktuelle Projekte als Hintergrund der Intro-Sektion.
- Landing-seiten. Produktwinkel, die sich hinter einem festen Aufruf zum Handeln drehen.
Video-Tutorial #
Sehen Sie sich den von Ende zu Ende erstellten Schieberegler an, von der Aktivierung der Erweiterung bis zum Radsporthelden auf der veröffentlichten Seite.
Häufig gestellte Fragen #
Wie füge ich einer Elementor-Sektion eine Hintergrund-Diashow hinzu?
Aktivieren Sie die Erweiterung Hintergrund-Schieberegler in der Registerkarte Master-Addons-Erweiterungen, wählen Sie den Abschnitt aus und öffnen Sie den Hintergrund-Schieberegler in der Registerkarte Stil Schalten Sie ihn ein, fügen Sie zwei oder mehr Bilder hinzu, wählen Sie einen Übergang, und der Abschnitt Hintergrund läuft automatisch ab.
Welche Übergangseffekte sind enthalten?
Vierundzwanzig plus Zufällig: Fade, Slide Left, Right, Up, and Down, Zoom In and Out, Swirl Left and Right, Burn, Blur, and Flash, jeweils mit einer zweiten Variante Eine separate Animationseinstellung fügt Ken Burns Pan-and-Zoom-Bewegung innerhalb jeder Folie hinzu.
Kann ich den Text über den Fotos lesbar halten?
Ja. Schalten Sie Custom Overlay für eine Farb, Farbverlaufs - oder Bildebene über den Folien ein, oder wählen Sie einen der neun voreingestellten Overlay-Stile Die Demo verwendet eine dunkle Überlagerung, sodass die weiße Überschrift und die Tasten den Kontrast auf jeder Folie halten.
Wie kontrolliere ich die Gleitgeschwindigkeit?
Das Delay-Feld legt fest, wie viele Millisekunden jede Folie sichtbar bleibt, standardmäßig 5000. Der Timer zeigt nur eine Fortschrittsleiste an, da sich die Folien in beide Richtungen von selbst drehen. Random Display mischt die Folienreihenfolge jedes Mal, wenn die Seite generiert wird. Auf einer zwischengespeicherten Seite ändert sich die Reihenfolge also erst, wenn der Cache gelöscht wird.
Ist die Background Slider-Erweiterung kostenlos?
Ja. Hintergrund Slider 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.
Hat Elementor eine eigene Hintergrund-Diashow?
Ja. Free Elementor hat einen Slideshow-Hintergrundtyp mit fünf Übergängen, einen Ken Burns Zoom in oder out, Lazyload und Positionierung pro Gerät Hintergrund Slider fügt 24 Übergänge hinzu, Ken Burns in neun Richtungen, Musterüberlagerungen, zufällige Reihenfolge und eine Timerleiste Die Produktseite verfügt über eine vollständige Vergleichstabelle.
Einwickelnd #
Die Hintergrund-Slider-Erweiterung Verwandeln Sie einen Abschnittshintergrund in eine Diashow mit einem Umschalter und einer Handvoll Auswahlmöglichkeiten: Bilder, Übergang, Überlagerung, Verzögerung Der Inhalt bleibt stehen, der Hintergrund erledigt die Arbeit und kein zusätzliches Schieberegler-Widget gelangt in das Layout Für Bewegung ohne Fotos wird die Hintergrunderweiterung für animierte Gradienten (Pro) deckt stattdessen denselben Abschnitt mit Farbe ab und den gesamten Satz von Master Addons Widgets und Erweiterungen Seite entfernt ist.
