Wir stellen Ihnen den

"Revolution Banner Slider" vor.

Revolution Banner Slider ist ein neues Plugin für Shopware 6
von SplineCommerce LLC. Mit diesem Plugin können Sie Slider oder einfache Banner mit vielen Funktionen erstellen. Das benutzerdefinierte CMS-Element enthält viele neue und hilfreiche Funktionen um Ihre Seite attraktiver zu machen.
Sehen Sie hier detaillierte Informationen zur Verwendung des Banner-Sliders.

Element Einstellungen

Nach der Plugin-Installation finden Sie das neue Element in der Kategorie Text & Bilder Block. Wenn Sie auf das Konfigurationssymbol klicken, sehen Sie das Popup-Fenster mit den Elementeinstellungen.

Inhalt

In der ersten Registerkarte des Popups können Sie so viele Banner hinzufügen, wie Sie für den Slider benötigen. Ändern Sie die Position jedes Banners mit den Pfeilen. Alle Banner haben ihre eigenen Optionen und sind nicht voneinander abhängig. In der Nähe des Bannerbildes finden Sie die Schaltfläche Optionen mit Zahnradsymbol. Diese Schaltfläche führt Sie zur erweiterten Konfiguration des aktuellen Slides, die für jedes Element einzigartig ist.

Einstellungen

Sie finden die Konfiguration des Sliders auf der Registerkarte "Einstellungen", auf der Sie Einstellungen wie Pfeile, Navigationspunkte, automatische Höhe, automatische Wiedergabe und Dauer der automatischen Wiedergabe konfigurieren können.

SEO & Miniaturansichten

Meta Daten

Für bessere SEO-Zwecke können Sie Metadaten wie Bildtitel, Alternativtext oder das ändern des Dateinamens selbst hinzufügen.

Thumbnail

Das Plugin ermöglicht es Ihnen, benutzerdefinierte Größen zu generieren oder das vorhandene Miniaturbild zu verwenden. Mit diesem Thumbnail-Generator können Sie die richtige Bildgröße für verschiedene Geräte auswählen.

Element Konfiguration

Mit Ebenen arbeiten

Nachdem Sie auf den Konfigurationsbutton geklickt haben, beginnt die Magie. Sie sehen unten Ihr Slider Bild und ein Plus-Symbol. Dieses Symbol steht für Ebenen, und Sie können beliebig viele Ebenen hinzufügen.
Eine neue Ebene ist leer mit einem standardmäßigen dunklen Hintergrund, den Sie ändern können. Sie sollten jedoch zuerst auswählen, ob es sich um ein Bild innerhalb der Ebene oder um einen Text handelt.

Die Ebene wird in Ihrem Bild angezeigt und Sie können sie per Drag & Drop verschieben, indem Sie darauf klicken oder ihre Größe mit dem Ziehwerkzeug in der rechten unteren Ecke der Ebene ändern. Bitte achten Sie darauf, dass alle Ebenen zunächst in der Bildmitte angelegt werden.

Alle Ebenen haben eine Nummerierung, und um eine davon auszuwählen, müssen Sie auf diese Ebene oder die Registerkarte mit der entsprechenden Nummer der Ebene klicken. Die aktive Ebene hat auf der Vorschauseite einen dünnen blauen Rand.

Ebenen Registerkarten Konfigurator

Im Folgenden finden Sie eine detaillierte Beschreibung der einzelnen Registerkarten für die Ebene, ihrer Funktionen und der Änderung des Ebenenstils.

Registerkarte „Text“: Diese Registerkarte wird angezeigt, nachdem Sie die Textebene ausgewählt haben. Es enthält den standardmäßigen Texteditor von Shopware 6.

Inhaltsposition: In dieser Registerkarte können Sie die genaue Position des Inhalts der Ebene trotz Bild oder Text auswählen.

Hintergrund überlagern: Jede Ebene hat den gleichen dunklen Standardhintergrund. Sie können die gewünschte Hintergrundfarbe bearbeiten oder einen Hintergrund mit Farbverlauf hinzufügen. Wenn Sie es nicht benötigen, können Sie das Feld löschen und leer lassen.

Z-Index: Wenn Sie mehrere Ebenen verwenden, müssen Sie wahrscheinlich eine Ebene auf eine andere legen. Standardmäßig hat jeder Layer einen geringeren Z-Index (Priorität) als der nächste.

Box shadow: Um Ihre Ebene besser sichtbar zu machen, können Sie den Box Shadow an Ihre Ebene anpassen. Es ist einfach zu bedienen und Sie können das Ergebnis sofort sehen.

Padding: Sie können der Ebene globale Padding zuweisen, damit sie von allen Seiten gleich groß ist, oder Sie können die Padding-Kette auflösen und unterschiedliche Größen verwenden.

Medien: Über diese Registerkarte können Sie Ihrem Hauptposter Bilder hinzufügen. Nachdem Sie ein Bild hochgeladen oder ausgewählt haben, können Sie eine Miniaturansicht für eine Ebene erstellen und auswählen. Es kann ein Produktbild, ein schönes Gif oder etwas anderes sein. Sie können sie auch verlinken.

Randradius: Um Ihren Ebenen eine andere Form zu geben, geben Sie ihnen einen Randradius. Der Wert kann in Pixeln oder Prozent angegeben werden.

Rahmen: Fügen Sie Ihrer Ebene einen Rahmen hinzu, indem Sie einen Stil, eine Farbe und eine Stärke auswählen.

Zusätzliche Einstellungen: Um einige Probleme zu vermeiden, haben wir einige zusätzliche Einstellungen angepasst: Die automatische Höhe gibt Ihnen die Möglichkeit, die Höhe der Ebene von der Inhaltshöhe abhängig zu machen.

Animationen: Sie können den Ebenen Animationen hinzufügen, das Timing anpassen und sie mithilfe von Animationen verschieben. Über diese Möglichkeit werden wir weiter unten noch konkreter sprechen.

Animation der Ebenen

Wie oben erwähnt, kann jede Ebene ihre eigene Animation haben. Die folgenden Einstellungen finden Sie unten. Startzeit, Animationstyp, Richtung, Start- und Endpunkte, Dauer, Beschleunigung und Iteration.

Animation einstellen

Um die Animation für die ausgewählte Ebene zu verwenden, müssen Sie zunächst den Auslöser auf der linken Seite aktivieren. Danach sehen Sie unten das Plus-Symbol, um eine Animation hinzuzufügen.

Lassen Sie uns herausfinden, was unsere Animationen leisten können.

Die folgende Liste hilft Ihnen, Animationen zu erstellen und direkt in der Verwaltung abzuspielen. Es ermöglicht Ihnen zu sehen, wie Ihre Animationen im Frontend funktionieren.

  1. Das Feld neben Nummer eins im Bild oben ist der Zeitpunkt, zu dem die Animation gestartet wurde. Die Zeit wird in Millisekunden festgelegt. Wenn Sie also beispielsweise 5000 eingeben, beginnt Ihre Animation 5 Sekunden nach dem Laden des Sliders. Alle Animationen haben ein Start-Timing-Feld, sodass Sie verschiedene Animationen gleichzeitig starten können. Sie können beispielsweise eine Ebene von rechts nach links verschieben und gleichzeitig drehen.
  2. Im zweiten Feld können Sie zwischen den Animationen wie Slide, Fade, Rotation, Width, Height und Bounce wählen. Mit diesen Typen können Sie verschiedene Effekte für verschiedene Ebenen erzielen, sodass Ihre Slider einzigartig sind. Alles, was Sie brauchen, ist Vorstellungskraft und Geduld, um den gewünschten Effekt zu erzielen.
  3. Der dritte Abschnitt ist ein wenig gemischtes Feld. Das hängt vom Animationstyp ab. In der Breiten- und Höhenanimation ist dieses Feld beispielsweise nicht vorhanden. In den Slide- und Bounce-Effekten können Sie die Richtung und den Betrag für die Fade-Animation auswählen. Sie können zwischen Einblenden oder Ausblenden wählen. Für die Drehung wählen Sie den Grad der Drehung. Sie können negative Werte für die Animation zum Verschieben und Drehen verwenden.
  4. Das Feld in der Nähe von Nummer vier definiert, wie lange eine Animation dauern soll, um einen Zyklus abzuschließen. Bitte beachten Sie, dass dieselbe Animation auf derselben Ebene nicht synchron arbeiten kann. Sie können die Ebene beispielsweise nicht gleichzeitig nach rechts und links verschieben, sodass die nächste vertikale Folienanimation beginnt, wenn die erste vorbei ist.
  5. Für das fünfte Element werden wir über zwei Felder sprechen, z. B. Easing und Iteration. Easing, oder wie wir es als Animations-Timing-Funktion bezeichnen, gibt die Geschwindigkeitskurve einer Animation an. Kurz gesagt, es ist eine Art, die Animationsgeschwindigkeit in einer definierten Zeit zu implementieren.
  6. Die Iteration-Eigenschaft gibt die Anzahl der Abspielzyklen an. Sie können es definieren oder den unendlichen Wert wählen, und Ihre Animation wird immer wiedergegeben.
  7. Nachdem Sie einige Animationen eingestellt haben, können Sie auf das Plus-Symbol klicken und es wird eine neue Animationskonfigurationszeile hinzugefügt. Einige Animationen können unendlich hinzugefügt werden, z. B. das Slide oder Fade.

Verschiedene Breakpoints

Denken Sie daran, dass Sie verschiedene Ebenen, Stile, Animationen usw. für dieselben Ebenen in allen Gerätegrößen für dasselbe Banner hinzufügen können. Wenn Sie die Desktop-Gerätekonfiguration einrichten, ohne zu einem anderen Geräte-Tab zu wechseln, wendet das Plugin Ihre Einstellungen automatisch auf kleinere Geräte an. Aber sofort nachdem Sie das Konfigurations-Popup schließen oder zu einem anderen Breakpoint wechseln, werden all diese Verbindungen entkettet. Diese Funktionalität verhindert Fehler beim Layer-Styling in kleineren Geräten.

Beispiele

Hier sind einige Beispiele unser Slider. In diesen Beispielen gibt es keine zusätzlichen Stile, JavaScripts oder ähnliches. Alle diese Slider wurden nur mit unserem Plugin erstellt. Wie Sie sehen, haben Sie viele Möglichkeiten, einzigartige und beeindruckende Slider zu erstellen.