Medien - Regler

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

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

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

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

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

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

Mithilfe der Einstellungen für Inhalt können Sie auch komplexere Bannerinhalte einfügen.

Klicken Sie auf den Navigationspunkt unten im Regler, um die Symbolleiste für die jeweilige Folie anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).

Regler haben zwei Werkzeugkästen. Stellen Sie sicher, dass Sie die Folie-Toolbox am unteren Rand verwenden.

Führen Sie die Einstellungen nach Bedarf gemäß den folgenden Abschnitten aus:

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

Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

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

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

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

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

• Appearance
• Background
• Content
• Advanced

Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

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

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

Eine neue leere Folie mit einem eigenen Navigationspunkt und einer eigenen Werkzeugleiste wird dem Regler 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 das Symbol Einstellungen ( {width="20"} ) auszuwählen.

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

• Appearance
• Background
• Content
• Advanced

Klicken Sie nach Abschluss des Vorgangs in der oberen rechten Ecke auf Save , um die Seite 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 den Sie den Schieberegler platzieren möchten, und erweitern Sie den Abschnitt "Content".

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

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

Wählen Sie den benötigten Widget Type aus.

Legen Sie die Einstellungen fest, die je nach Typ des Widgets unterschiedlich sind

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

Klicken Sie nach Abschluss des Vorgangs oben rechts auf Insert Widget .

Ändern Sie die anderen Einstellungen nach Bedarf.

Klicken Sie nach Abschluss des Vorgangs oben rechts auf Save .

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

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

Wählen Sie in der Symbolleiste der einzelnen Folien das Symbol Einstellungen ( {width="20"} ) aus und füllen Sie die Einstellungen nach Bedarf gemäß den folgenden Abschnitten aus.

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

Wählen Sie einen der folgenden Platzierungstypen für die Folie aus:

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

Geben Sie den Wert Slide Name ein.

Wenn Sie im Bearbeitungsmodus arbeiten, wird der Name der Folie als QuickInfo über dem Navigationspunkt angezeigt. Der Name der Folie 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 festlegen, dass sie die gesamte Höhe der Seite abdeckt, 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 unten im Regler, um die Symbolleiste für die jeweilige Folie anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).

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

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

Sie können auch Elemente wie Textlinks, Bilder und Widgets einfügen.

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

Die erste Folie in diesem Beispiel hat ein Hintergrundbild, aber keinen Nachrichtentext. Der Text Buy 3 Get 1 Free über dem Regler befindet sich in einem Textcontainer (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 Objektträger klickt. Sie können einen von drei Linktypen verwenden:

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

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

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

• Category - Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie im Kategoriebaum. Suchen Sie nach der Kategorie basierend auf einem Teil- oder Vollnamen. Wählen Sie die Kategorie aus dem erweiterten Bereich des angezeigten Baums aus.

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

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

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

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

{width="300"}

Wenn Sie verhindern möchten, dass der Besucher von Ihrem Store weg navigiert, aktivieren Sie das Kontrollkästchen Open in new tab . Wenn das Kontrollkästchen deaktiviert wird, wird das verknüpfte Ziel in derselben Browser-Registerkarte geöffnet, wodurch der Besucher effektiv von Ihrem Store weg navigiert.

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

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

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

• Setzen Sie Show Button auf einen der folgenden Werte:

  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	Auf der Folie wird nur beim Bewegen des Mauszeigers eine Schaltfläche angezeigt.
  Never Show	Auf der Folie wird nie eine Schaltfläche angezeigt.

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

• Setzen Sie Button Type auf einen der folgenden Werte:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Beschreibung
  Primary	Wendet den primären Schaltflächenstil aus dem aktuellen Stylesheet an.
  Secondary	Wendet ggf. den sekundären Schaltflächenstil aus dem aktuellen Stylesheet an.
  Link	Erstellt einen Hyperlink anstelle einer Schaltfläche.

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

Setzen Sie Show Overlay auf einen der folgenden Werte:

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, legen Sie den Wert Overlay Color fest:

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

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

Um die horizontale Positionierung des Inhalts zu steuern, der der Folie hinzugefügt wird, wählen Sie den Wert Alignment:

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

Wenn Sie einen anderen Rahmenstil als None festlegen, füllen Sie die Anzeigeoptionen für die Rahmenanzeige aus:

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

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

Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

Geben Sie Werte in Pixel an, damit der Wert Margins and Padding die äußeren Ränder und den inneren Abstand der Folie angibt.

Geben Sie jeden entsprechenden Wert in das Dia-Diagramm ein.

Erweitern Sie im Bedienfeld Page Builder den Eintrag Elements und ziehen Sie einen Platzhalter für Text auf eine Zeile, Spalte oder Registerkarte, die auf der Bühne festgelegt ist.

Beim Ziehen markiert eine rote Führungslinie den Einfügepunkt über dem Schieberegler.

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

Formatieren Sie den Text nach Bedarf im Editor.

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

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

{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 Mindest-Höhe eines Schiebereglers so festlegen, dass die gesamte Höhe der Seite gestreckt wird. So erhalten Sie überzeugende Optionen für Hintergrundbilder und Videos mit vollständigem Seitenumbruch.

{width="400"}

Wenn der Regler beim Laden der Seite beginnen soll, setzen Sie Autoplay auf Yes und setzen Sie Autoplay Speed auf die Anzahl der Millisekunden in der Verzögerung zwischen den Folien.

Standardmäßig ist die Geschwindigkeit auf 4000 ms eingestellt, was vier Sekunden beträgt. Wenn Sie die automatische Wiedergabe auf "No" setzen, wird standardmäßig die erste Folie angezeigt und der Kunde muss auf die Foliennavigation (Punkte oder Pfeile) klicken, um die nächste Folie nacheinander anzuzeigen.

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

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

Mit verblassen scheinen die Folien an Ort und Stelle zu bleiben, doch der Inhalt ändert sich reibungslos von einem zum nächsten. Ohne Überblendung 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, setzen Sie Infinite Loop auf Yes.

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

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

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

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

Füllen Sie die Regler-Einstellungen für Erweitert nach Bedarf aus.

Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Um die Positionierung der Folien innerhalb des übergeordneten Regler-Containers zu steuern, wählen Sie den Wert Alignment:

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

Wenn Sie einen anderen Rahmenstil als None festlegen, füllen Sie die Anzeigeoptionen für die Rahmenanzeige aus:

(Optional) Geben Sie die Namen von CSS classes aus dem aktuellen Stylesheet an, das auf den Regler-Container angewendet werden soll.

Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

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

Geben Sie die entsprechenden Werte in das Diagramm ein.

Öffnen Sie die Seite, auf der Sie den Regler eingefügt haben, und setzen Sie Enable Page auf Yes.

Klicken Sie in der oberen rechten Ecke auf den Pfeil Save und wählen Sie Save & Close.

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 Reglers die Größe des Fensters, damit Sie sehen können, wie es auf einem Mobilgerät angezeigt wird.

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