Medien - Schieberegler

Öffnen Sie die Seite, den Block oder den dynamischen Block, in dem bzw. dem Sie den Schieberegler platzieren möchten, und erweitern Sie den Content.

Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Slider Platzhalter in eine Zeile, Spalte oder Registerkarte auf der Bühne.

Im folgenden Beispiel ist die Hintergrundfarbe der Zeile gelb (#fffd16).

{width="600" modal="regular"}

Der Schieberegler-Container wird auf der Bühne mit einer einzigen, leeren Folie angezeigt.

Klicken Sie in den Schieberegler-Container, um den Texteditor anzuzeigen, und geben Sie den Inhalt für die erste Folie ein.

Sie können auch komplexere Bannerinhalte mit den Einstellungen Inhalt einfügen.

Klicken Sie auf den Navigationspunkt am unteren Rand des Schiebereglers, um die Toolbox für die einzelne Folie anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ) aus.

Schieberegler verfügen über zwei Werkzeugkästen. Stellen Sie sicher, dass Sie unten die Werkzeugkiste für Folien verwenden.

Füllen Sie die Einstellungen nach Bedarf entsprechend den folgenden Abschnitten aus:

• Appearance
• Background
• Content
• Search Engine Optimization
• Advanced

Klicken Sie abschließend auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Klicken Sie auf den Navigationspunkt unter der Folie, um die Toolbox anzuzeigen, und wählen Sie das Symbol Duplizieren ( {width="20"} ) aus.

{width="500" modal="regular"}

Klicken Sie auf den Navigationspunkt für die neue Folie, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ) aus.

Ändern Sie die Einstellungen nach Bedarf entsprechend den folgenden Abschnitten:

• Appearance
• Background
• Content
• Advanced

Klicken Sie abschließend auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Bewegen Sie den Mauszeiger über den Schieberegler oben, um die Toolbox anzuzeigen, und wählen Sie das Symbol Hinzufügen ( {width="20"} ) aus.

{width="500" modal="regular"}

Eine neue leere Folie mit einem eigenen Navigationspunkt und einer eigenen Toolbox wird dem Schieberegler hinzugefügt und auf der Bühne angezeigt.

{width="500" modal="regular"}

Klicken Sie auf den Navigationspunkt für die neue Folie, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ) aus.

Ändern Sie die Einstellungen nach Bedarf entsprechend den folgenden Abschnitten:

• Appearance
• Background
• Content
• Advanced

Wenn Sie fertig sind, klicken Sie oben rechts auf Save , um die Edit Slide ​zu schließen.

Erstellen Sie das Widget das Sie auf einer Folie sehen möchten.

Öffnen Sie die Seite, den Block oder den dynamischen Block, in dem bzw. dem Sie den Schieberegler platzieren möchten, und erweitern Sie den Content.

Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Slider Platzhalter in eine Zeile, Spalte oder Registerkarte auf der Bühne.

Klicken Sie in den Schieberegler-Container, um die Symbolleiste Texteditor anzuzeigen, und klicken Sie auf Widget einfügen ( {width="20"} ).

Wählen Sie die gewünschte Widget Type aus.

Legen Sie die Einstellungen fest, die sich je nach Typ des Widgets unterscheiden

{width="600" modal="regular"}

Wenn Sie fertig sind, klicken Sie oben rechts auf Insert Widget .

Ändern Sie die anderen Einstellungen nach Bedarf.

Wenn Sie fertig sind, klicken Sie oben rechts auf Save .

{width="600" modal="regular"}

Ändern Sie die Schieberegleranzeige auf der Bühne und zeigen Sie die Folie an, die Sie ändern möchten.

Wählen Sie in der Toolbox für die einzelnen Folien das Symbol Einstellungen ( {width="20"} ) aus und vervollständigen Sie die Einstellungen nach Bedarf entsprechend den folgenden Abschnitten.

Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Wählen Sie einen der folgenden Folienplatzierungstypen aus:

{width="600" modal="regular"}

Geben Sie die Slide Name ein.

Wenn Sie im Bearbeitungsmodus arbeiten, wird der Folienname als QuickInfo über dem Navigationspunkt angezeigt. Der Folienname ist in der Storefront nicht sichtbar.

{width="500" modal="regular"}

Geben Sie die Minimum Height für die Folie ein.

Die Mindesthöhe kann eine Zahl mit einer beliebigen gültigen CSS-Einheit (z. B. 100px, 50%, 50em, 100vh) oder eine Berechnung (z. B. 100vh - 237px) sein.

Sie können beispielsweise die Mindesthöhe der Folie so einstellen, dass sie die gesamte Seitenhöhe einnimmt, und dann Hintergrundbilder und Videos für überzeugende Designoptionen verwenden.

Klicken Sie auf den Platzhalter oder vorhandenen Text und geben Sie den neuen Text ein, der auf der Folie angezeigt werden soll.

Die Editor-Symbolleiste wird über dem Textfeld angezeigt.

Verwenden Sie die Editor-Symbolleiste, um Text einzugeben und zu formatieren sowie Elemente wie Links, Bilder und Widgets einzufügen.

{width="500" modal="regular"}

Klicken Sie auf den Navigationspunkt am unteren Rand des Schiebereglers, um die Toolbox für die einzelne Folie anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ) aus.

Geben Sie im Abschnitt Content ​die Message Text ​ein, die mit der Folie angezeigt werden soll.

Scrollen Sie nach unten zum Abschnitt Content ​und verwenden Sie den Message Text-Editor, um Bannertext einzugeben und zu formatieren.

Sie können auch Elemente wie Text-Links, Bilder und Widgets einfügen.

Formatieren Sie den Text nach Bedarf mithilfe der Editor-Symbolleiste.

Die erste Folie in diesem Beispiel zeigt ein Hintergrundbild, aber keinen Nachrichtentext. Der Buy 3 Get 1 Free über dem Schieberegler befindet sich in einem Text-Container (später hinzugefügt).

Geben Sie bei Bedarf einen Link für die Folie an.

Der Link ist die Zielseite, die angezeigt wird, wenn der Kunde auf den Folienbereich klickt. Sie können einen von drei Link-Typen verwenden:

• URL - Links zu einer relativen oder vollständig qualifizierten URL.

• Product - Identifiziert die Zielseite anhand des Produktnamens oder der SKU. Suchen Sie nach dem Produkt anhand eines Namens, der entweder auf einem Teil- oder einem vollständigen Namen basiert. Wählen Sie das Produkt aus der Suchergebnisliste aus.

  {width="600" modal="regular"}

• Category - Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie in der Kategoriestruktur. Suche nach der Kategorie basierend auf einem Teil- oder Vollnamen. Wählen Sie die Kategorie aus dem erweiterten Abschnitt der angezeigten Baumstruktur aus.

  {width="600" modal="regular"}

• Page - Identifiziert die Zielseite als eine bestimmte Inhaltsseite. Suche nach der Seite basierend auf einem Teil- oder vollständigen Namen. Wählen Sie die Seite aus der Liste Suchergebnisse aus.

  {width="600" modal="regular"}

Ab Version 2.4.1 unterstützt Page Builder aufgrund von Problemen mit der Anzeige in der Storefront nicht mehr die Verknüpfung der Folie und von Links innerhalb des verschachtelten Texts. Wenn Sie einen Link in _Message Text_ verwenden, können Sie die Option _Link_ nicht konfigurieren. Wenn Sie es vorziehen, nur einen einzigen Link für die gesamte Folie zu verwenden, können Sie alle Links aus dem Text entfernen.

{width="300"}

Wenn Sie verhindern möchten, dass der Besucher Ihren Store verlässt, aktivieren Sie das Kontrollkästchen Open in new tab . Wenn das Kontrollkästchen deaktiviert ist, wird das verknüpfte Ziel in derselben Browser-Registerkarte geöffnet, die den Besucher effektiv von Ihrem Store weg navigieren könnte.

Fügen Sie bei Bedarf eine Schaltfläche hinzu, um Kunden aufzufordern, dem Link zu folgen.

Die Position Folie Erscheinungsbild“ platziert einen einzelnen Link oder eine einzelne Schaltfläche unter dem Text. Füllen Sie die Eigenschaften des Links oder der Schaltfläche aus, den bzw. die Sie hinzufügen möchten.

{width="600" modal="regular"}

• Legen Sie Show Button auf eine der folgenden Einstellungen fest:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Beschreibung
  Always	Auf der Folie wird immer eine Schaltfläche angezeigt.
  On Hover	Eine Schaltfläche wird nur beim Bewegen des Mauszeigers auf der Folie angezeigt.
  Never Show	Eine Schaltfläche wird nie auf der Folie angezeigt.

• Geben Sie die Button Text ein, die auf der Schaltfläche angezeigt werden soll.

• Legen Sie Button Type auf eine der folgenden Einstellungen fest:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Beschreibung
  Primary	Wendet die primäre Schaltflächenformatvorlage aus dem aktuellen Stylesheet an.
  Secondary	Wendet ggf. die sekundäre Schaltflächenformatvorlage aus dem aktuellen Stylesheet an.
  Link	Erstellt statt einer Schaltfläche einen Hyperlink.

  Der Schaltflächenstil des aktuellen Designs bestimmt das Schaltflächenformat. In der Regel weist eine primäre Schaltfläche eine auffälligere Hintergrundfarbe auf als eine sekundäre Schaltfläche.

Legen Sie Show Overlay auf eine der folgenden Einstellungen fest:

Sie können eine Überlagerung verwenden, um eine Hintergrundfarbe auf den aktiven Inhaltsbereich anzuwenden, der durch die Einstellung Erscheinungsbild definiert wird. Das Hintergrundbild der Folie bleibt für die gesamte Breite der Folie sichtbar.

{width="600" modal="regular"}

Wenn Sie eine Überlagerung anzeigen möchten, legen Sie die Overlay Color fest:

• Klicken Sie auf Keine Farbe und wählen Sie ein Farbfeld aus.
• Geben Sie im Feld Color entweder einen gültigen Farbnamen oder einen Hexadezimalwert ein.

{width="600" modal="regular"}

Um die horizontale Positionierung von Inhalten zu steuern, die der Folie hinzugefügt werden, wählen Sie die Alignment aus:

Legen Sie den Border fest, der auf alle vier Seiten der Folie angewendet wird:

Wenn Sie einen anderen Rahmenstil als None festlegen, müssen Sie die Anzeigeoptionen für den Rahmen vervollständigen:

{width="600" modal="regular"}

(Optional) Geben Sie die Namen der CSS classes aus dem aktuellen Stylesheet an, die auf die Folie angewendet werden sollen.

Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

Geben Sie Werte in Pixeln für die Margins and Padding ein, um die äußeren Ränder und den inneren Abstand der Folie festzulegen.

Geben Sie jeden entsprechenden Wert in das Foliendiagramm ein.

Erweitern Sie im Page Builder Bedienfeld Elements und ziehen Sie einen Text-Platzhalter auf eine Zeile, Spalte oder einen Registerkartensatz auf der Bühne.

Beim Ziehen markiert eine rote Richtlinie die Einfügemarke über dem Schieberegler.

{width="600" modal="regular"}

Verwenden Sie den Editor, um den Text nach Bedarf zu formatieren.

{width="500" modal="regular"}

Bewegen Sie den Mauszeiger über den Schieberegler-Container, um die Haupt-Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen {width="20"} ) aus.

{width="500" modal="regular"}

Geben Sie die Minimum Height für die Folie ein.

Die Mindesthöhe kann eine Zahl mit einer beliebigen gültigen CSS-Einheit (z. B. 100px, 50%, 50em, 100vh) oder eine Berechnung (z. B. 100vh - 237px) sein.

Sie können beispielsweise die Mindesthöhe eines Schiebereglers festlegen, um die gesamte Höhe der Seite zu dehnen, sodass Sie überzeugende Optionen für Hintergrundbilder und Videos mit voller Seite erhalten.

{width="400"}

Soll der Schieberegler beim Laden der Seite gestartet werden, legen Sie Autoplay auf Yes und Autoplay Speed auf die Anzahl der Millisekunden in der Verzögerung zwischen den Folien fest.

Standardmäßig ist die Geschwindigkeit auf 4000 ms festgelegt, was vier Sekunden entspricht. Wenn Sie die automatische Wiedergabe auf No festlegen, wird standardmäßig die erste Folie angezeigt, und der Kunde muss auf die Foliennavigation (Punkte oder Pfeile) klicken, um die nächste Folie in der Reihenfolge anzuzeigen.

{width="600" modal="regular"}

Um den Übergang von einer Folie zur nächsten zu glätten, setzen Sie Fade auf Yes.

Mit dem Ausblenden scheinen die Folien an Ort und Stelle zu bleiben, aber der Inhalt ändert sich von einem zum nächsten reibungslos. Ohne Ausblenden sehen Sie die horizontale Bewegung von einer Folie zur nächsten.

{width="600" modal="regular"}

Damit die Diashow unbegrenzt wiederholt wird, während die Seite geöffnet ist, legen Sie Infinite Loop auf Yes fest.

Gehen Sie wie folgt vor, um den Typ der Navigationssteuerelemente für den Schieberegler auszuwählen:

• Um die Pfeile Weiter und Zurück auf der linken und rechten Seite jeder Folie einzuschließen, setzen Sie Show Arrows auf Yes.

• Um eine Reihe von Navigationspunkten unter dem Schieberegler einzufügen, setzen Sie Show Dots auf Yes.

{width="600" modal="regular"}

Füllen Sie SchiebereglereinstellungenErweitert) nach Bedarf aus.

Klicken Sie abschließend auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Um die Positionierung der Folien im übergeordneten Schieberegler-Container zu steuern, wählen Sie die Alignment aus:

Legen Sie den Border fest, der auf alle vier Seiten des Schieberegler-Containers angewendet wird:

Wenn Sie einen anderen Rahmenstil als None festlegen, müssen Sie die Anzeigeoptionen für den Rahmen vervollständigen:

(Optional) Geben Sie die Namen der CSS classes aus dem aktuellen Stylesheet an, die auf den Schieberegler-Container angewendet werden sollen.

Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

Geben Sie Werte in Pixeln für die Margins and Padding ein, um die äußeren Ränder und den inneren Abstand des Schieberegler-Containers zu bestimmen.

Geben Sie die entsprechenden Werte in das Diagramm ein.

Öffnen Sie die Seite, auf der Sie den Schieberegler eingefügt haben, und legen Sie Enable Page auf Yes fest.

Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

Suchen Sie die Seite im Raster Seiten und wählen Sie View in der Spalte Action ​aus.

{width="600" modal="regular"}

Ändern Sie bei der Vorschau des Schiebereglers die Größe des Fensters, damit Sie sehen können, wie es auf einem Mobilgerät angezeigt wird.

{width="400" modal="regular"}