Medien - Slider

Verwenden Sie den Inhaltstyp Slider, um eine Diashow von Bildern in den Page Builder Arbeitsbereich hinzuzufügen. Sie können neue Bilder hochladen oder vorhandene Bilder aus der Galerie oder dem Produktkatalog auswählen. Ein Slider kann so eingestellt werden, dass er automatisch abgespielt wird, oder er kann manuell über Navigationsschaltflächen gesteuert werden. So verknüpfen Sie den Slider mit einer bestimmten Aktion: Dynamic Block.

Media-Slider auf dem Frontend

Werkzeugkästen

Wenn Sie mit dem Inhaltstyp “Slider” arbeiten, fügen Sie einzelne Folien und den Slider-Container, der eine oder mehrere Folien enthält, hinzu und bearbeiten sie. Für jedes dieser Elemente gibt es eine eigene Toolbox, die Sie für die Gestaltung von Folien auf der Seite Page Builder verwenden.

Werkzeugkasten für einzelne Folien

Individuelle Folien-Toolbox

Werkzeug	Symbol	Beschreibung
Bewegen		Verschiebt die Folie an eine andere Position auf dem Slider.
(Beschriftung)	Dia #	Gibt die Nummer des aktuellen Dias an.
Einstellungen		Öffnet die Seite “Folie bearbeiten”, wo Sie die Eigenschaften der aktuellen Folie ändern können.
Duplizieren		Erzeugt eine Kopie der aktuellen Folie.
Entfernen		Löscht das aktuelle Dia aus dem Slider.

Slider-Toolbox

Werkzeug	Symbol	Beschreibung
Bewegen		Bewegt den Slider an eine andere Position auf dem Arbeitsbereich.
(Beschriftung)	Slider	Identifiziert den Slider-Container.
Einstellungen		Öffnet die Seite “Slider bearbeiten”, auf der Sie die Eigenschaften des Videos und des Containers ändern können.
Ausblenden		Blendet den aktuellen Slider aus.
Anzeigen		Zeigt den versteckten Slider.
Duplizieren		Erstellt eine Kopie des Slider.
Entfernen		Entfernt den Slider vom Arbeitsbereich.

Hinzufügen einer einzelnen Folie

1. Öffnen Sie die Seite, den Block oder den dynamischen Block, in dem Sie den Slider platzieren möchten, und erweitern Sie den Abschnitt Inhalt.

2. Erweitern Sie im Bereich Page Builder den Bereich Medien und ziehen Sie einen Slider-Platzhalter in eine Zeile, Spalte oder Registerkarte auf dem Arbeitsbereich.

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

   Ziehen Sie den Slider auf den Arbeitsbereich

   Der Slider-Container wird auf dem Arbeitsbereich mit einer einzelnen, leeren Folie angezeigt.

3. Klicken Sie in den Slider-Container, um den Texteditor anzuzeigen und den Inhalt für die erste Folie einzugeben.

   Sie können auch komplexere Bannerinhalte einfügen, indem Sie die Einstellungen Inhalt verwenden.

4. Klicken Sie auf den Navigationspunkt unten im Slider, um die Toolbox für die einzelne Folie anzuzeigen, und wählen Sie das Symbol Einstellungen ( ).

   Slider haben zwei Werkzeugkästen. Vergewissern Sie sich, dass Sie die untere Toolbox für die Folie verwenden.

5. Vervollständigen Sie die Einstellungen, wie im Folgenden beschrieben sections:

   • Aussehen
   • Hintergrund
   • Inhalt
   • Erweitert

6. Klicken Sie abschließend auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Weitere Folien hinzufügen

Die folgenden Abschnitte beschreiben eine Reihe von Schritten, um mit einer einzelnen Folie zu beginnen und einen responsiven Slider zu erstellen, der bestimmte Produkte vorstellt und mit ihnen verlinkt. Wenn Sie noch keine individuelle Folie haben, folgen Sie den vorherigen Anweisungen, um eine individuelle Folie zum Arbeitsbereich hinzuzufügen.

Verwenden Sie eine oder eine Kombination der folgenden Methoden, um Folien hinzuzufügen.

Methode 1: Duplizieren Sie eine vorhandene Folie

Sie können Zeit sparen, indem Sie eine Folie duplizieren, die bereits mit den erforderlichen Einstellungen konfiguriert wurde.

1. Klicken Sie auf den Navigationspunkt unter der Folie, um die Toolbox anzuzeigen, und wählen Sie das Symbol Duplizieren ( ).

   Duplizieren einer Folie_

2. Klicken Sie auf den Navigationspunkt für die neue Folie, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( ).

3. Ändern Sie die Einstellungen nach Bedarf, wie im Folgenden beschrieben sections:

   • Aussehen
   • Hintergrund
   • Inhalt
   • Erweitert

4. Klicken Sie abschließend auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Methode 2: Eine neue leere Folie hinzufügen

1. Bewegen Sie den Mauszeiger über den Slider-Container am oberen Rand, um die Toolbox anzuzeigen, und wählen Sie das Symbol Hinzufügen ().

   Ein leeres Dia hinzufügen_

   Eine neue leere Folie mit eigenem Navigationspunkt und Werkzeugkasten wird dem Slider hinzugefügt und auf dem Arbeitsbereich angezeigt.

   Neue Folie mit Toolbox

2. Klicken Sie auf den Navigationspunkt für die neue Folie, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( ).

3. Ändern Sie die Einstellungen nach Bedarf, wie im Folgenden beschrieben sections:

   • Aussehen
   • Hintergrund
   • Inhalt
   • Erweitert

4. Wenn Sie fertig sind, klicken Sie auf Speichern in der oberen rechten Ecke, um die Seite Edit Slide zu schließen.

Widget auf einer Folie hinzufügen

Mit den folgenden Schritten können Sie jede beliebige Widgetsart zu Ihrem Page Builder Arbeitsbereich hinzufügen:

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

2. Öffnen Sie die Seite, den Block oder den dynamischen Block, in dem Sie den Slider platzieren möchten, und erweitern Sie den Abschnitt Inhalt.

3. Erweitern Sie im Bereich Page Builder den Bereich Medien und ziehen Sie einen Slider-Platzhalter in eine Zeile, Spalte oder Registerkarte auf dem Arbeitsbereich.

4. Klicken Sie in den Slider-Container, um die Symbolleiste Texteditor anzuzeigen, und klicken Sie auf das Symbol Widget einfügen ).

5. Wählen Sie den Widget-Typ, den Sie benötigen.

6. Geben Sie die Einstellungen an, die je nach Widget-Typ unterschiedlich sind

   Beispiel für das Einfügen eines Widgets auf einer Folie

7. Wenn Sie fertig sind, klicken Sie in der oberen rechten Ecke auf Widget einfügen.

8. Ändern Sie die anderen Einstellungen nach Bedarf.

9. Wenn Sie fertig sind, klicken Sie auf Speichern in der oberen rechten Ecke.

   Beispiel für ein eingefügtes Widget auf der Folie

Jede Folie anzeigen

Um die einzelnen Folien auf dem Arbeitsbereich anzuzeigen, klicken Sie auf den nächsten Punkt unter der aktuell angezeigten Folie.

Slider vollendet

Die Folie im vorangegangenen Beispiel hat ein Hintergrundbild, ein transparentes mobiles Bild und ein Inline-Bild, das mit dem Texteditor hinzugefügt wurde. Diese Technik funktioniert gut auf mobilen Geräten, indem das Hintergrundbild ausgeschaltet und nur das kleinere Inline-Bild angezeigt wird. Die Produktfolie in diesem Beispiel hat die folgenden zusätzlichen Einstellungen:

Individuelle Dia-Einstellungen ändern

1. Ändern Sie die Anzeige des Slider auf dem Arbeitsbereich, um die Folie anzuzeigen, die Sie ändern möchten.

2. Wählen Sie in der Toolbox für die einzelnen Folien das Symbol Einstellungen ( und nehmen Sie die Einstellungen nach Bedarf gemäß den folgenden Abschnitten vor.

3. Klicken Sie in der oberen rechten Ecke auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Erscheinungsbild

1. Wählen Sie eine der folgenden Arten der Folienplatzierung:

   Poster	Zentriert den Inhalt der Folie im Container des Sliders. Das Overlay, falls verwendet, erstreckt sich über die gesamte Breite des Sliders.
   Collage links	Platziert den Inhalt der Folie in einem definierten Bereich auf der linken Seite des Containers des Sliders. Das Overlay, falls verwendet, deckt nur den definierten Bereich ab.
   Collage Mitte	Platziert den Folieninhalt in einem definierten Bereich, der auf dem Slider-Container zentriert ist. Das Overlay, falls verwendet, deckt nur den definierten Bereich ab.
   Collage Rechts	Platziert den Inhalt der Folie in einem definierten Bereich auf der rechten Seite des Containers des Sliders. Die Überlagerung, falls verwendet, deckt nur den definierten Bereich ab.

   Dia-Positionierung_

2. Geben Sie den Foliennamen ein.

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

   Name der Folie in der Navigation

3. Geben Sie die Mindesthöhe 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 zum Beispiel 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.

Wenn die Folie auf die volle Höhe der Seite (100vh) eingestellt ist, dehnt der Slider, der die Folie enthält, auch die volle Höhe der Seite aus, um die Höhe der Folie aufzunehmen.

Hintergrund

Es gibt viele Möglichkeiten, den Hintergrund einer Folie zu definieren. Sie können eine einfache Farbe oder ein Hintergrundbild verwenden, aber auch komplexere Effekte steuern.

Hintergrundfarbe

Geben Sie die Hintergrundfarbe an, indem Sie ein Farbfeld auswählen, auf den Farbwähler klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben. Damit wird die Hintergrundfarbe der Zeile festgelegt. Sie können auch die Deckkraft der Farbe einstellen.

Keine Farbe (Standard)

Sie können den Wert auf eine von drei Arten einstellen:

• Ein vordefinierter Farbname, z. B. Weiß
• Der hexadezimale Farbwert für die Farbe, z. B. #ffffff
• Der rgba-Wert für die Farbe mit Deckkraft in Prozent, z. B. rgba(255, 255, 255, 0.75)

Wenn Sie eine Farbe auswählen möchten, klicken Sie auf das Feld links neben dem Feld Keine Farbe.

Auswählen eines Farbfelds

Wenn Sie auf das Farbfeld klicken, um den Farbwähler erneut zu öffnen, zeigt das Feld unter dem Slider die aktuellen Rot-, Grün-, Blau- und Alphawerte (rgba) an. Die letzte Zahl gibt die aktuelle Deckkraft in Prozent als Dezimalzahl an. Sie können den Slider verwenden, um die Deckkraft anzupassen, oder den gewünschten Dezimalwert eingeben.

Deckkraft der Hintergrundfarbe einstellen

Page Builder unterstützt auch eine Transparenzebene oder einen Alpha-Kanal in Hintergrundbildern, der verwendet werden kann, um Hintergründe mit unterschiedlichen Deckungsgraden zu erstellen.

Hintergrund-Typ

Ein Hintergrundtyp kann ein Bild oder ein Video sein. Page Builder ist standardmäßig auf Bild eingestellt und zeigt verschiedene Bildeinstellungen. Wenn Sie Video wählen, tauscht Page Builder die Bildeinstellungen gegen Videoeinstellungen aus. Die Einstellungen für beide Hintergrundtypen werden in den folgenden Abschnitten beschrieben.

Hintergrundtyp

Bildtyp-Einstellungen

Wenn Sie den Hintergrundtyp auf Bild einstellen, verwenden Sie die folgenden Einstellungen, um die Anzeige des Hintergrundbildes zu definieren.

Banner mit Hintergrundbild

• Hintergrundbild - Verwenden Sie bei Bedarf die bereitgestellten Werkzeuge, um ein Hintergrundbild für das Banner auszuwählen:

  Hochladen	Lädt eine Bilddatei von Ihrem lokalen Computer in die Galerie hoch und wendet sie dann als Hintergrundbild für das Banner an.
  Aus Galerie auswählen	Fordert Sie auf, ein vorhandenes Bild aus der Galerie als Hintergrundbild für das Banner auszuwählen.
  	Ermöglicht es Ihnen, das Bild entweder auf die Kamerakachel zu ziehen oder das Bild in Ihrem lokalen Dateisystem zu suchen.

• Hintergrundbild für Mobilgeräte - Verwenden Sie bei Bedarf die gleichen Werkzeuge, um ein anderes Hintergrundbild für die Anzeige auf Mobilgeräten auszuwählen.

• Hintergrundgröße - Legen Sie mit dieser Option fest, wie das Hintergrundbild im Verhältnis zur Breite des Banners skaliert werden soll:

  Abdeckung	Das Hintergrundbild deckt die gesamte Breite des Banners ab.
  Umfassen	Das Hintergrundbild ist auf die Breite des Inhaltsbereichs begrenzt.
  Automatisch	Wendet die Größe aus der aktuellen Stilvorlage an.

  Hintergrundgröße

• Hintergrundposition - Setzen Sie diese Option, um festzulegen, wie das Hintergrundbild im Verhältnis zum Banner verankert wird:

  Oben	Links / Mitte / Rechts
  Mitte	Links/Mitte/Rechts
  Unten	Links / Mitte / Rechts

  Der Ankerpunkt ist wie eine Stecknadel, mit der das Bild an der angegebenen Hintergrundposition am Banner befestigt wird.

• Hintergrundbefestigung - Legen Sie den Befestigungstyp fest, um zu bestimmen, wie sich das Hintergrundbild im Verhältnis zur scrollenden Seite bewegt:

  Scrollen	Das angehängte Hintergrundbild wird synchronisiert, um sich beim Scrollen der Seite nach unten zu bewegen.
  Fixiert	(Nicht verfügbar für Mobilgeräte) Das Hintergrundbild bewegt sich nicht, wenn der Container über das Bild scrollt und bleibt an der angegebenen Hintergrundposition fixiert.

Videotyp-Einstellungen

Wenn Sie den Hintergrundtyp auf Video setzen, verwenden Sie die folgenden Einstellungen, um die Anzeige des Hintergrundbildes zu definieren.

• Video-URL - Geben Sie eine gültige Video-URL ein. Gültige Video-URLs können Links zu sein:

  • YouTube-Videos: https://youtu.be/CoDhMRUUjeI
  • Vimeo-Videos: https://vimeo.com/190156113
  • Gültige Videodateien (wir empfehlen .mp4): https://myvideos.com/spiral.mp4

  Hintergrundvideo-URL

• Überlagerungsfarbe - Wählen Sie eine Farbe aus, um dem Video einen transparenten Farbton zu verleihen.

• Endlosschleife - Setzen Sie diese Option auf Nein, um das Video einmal abzuspielen und dann anzuhalten. Wenn diese Option auf Ja (Standard) eingestellt ist, wird das Video in einer Endlosschleife wiederholt.

• Lazy Load - Setzen Sie dies auf Nein, damit das Video mit der Seite geladen wird, auch wenn es nicht sichtbar ist. Wenn diese Option auf Ja (Standard) eingestellt ist, wird das Video nur dann von der Quelle geladen, wenn es auf dem Bildschirm sichtbar ist.

• Nur bei Sichtbarkeit abspielen - Setzen Sie diese Option auf Nein, damit das Video sofort nach dem Laden abgespielt wird, unabhängig davon, ob es sichtbar ist. Wenn diese Option auf Ja (Standard) eingestellt ist, wird das Video nur abgespielt, wenn es sichtbar ist.

• Fallback-Bild - Geben Sie bei Bedarf ein Bild an, das auf dem Bildschirm angezeigt werden soll, bevor ein Video geladen wird und für den Fall, dass das Video aus irgendeinem Grund nicht geladen wird.

Inhalt

Sie können den Folieninhalt direkt auf dem Arbeitsbereich oder beim Ändern der Einstellungen ändern. Die Einstellungen bieten komplexere Inhaltsfunktionen, wie z. B. Folienverknüpfungen und -schaltflächen, sowie Überlagerungen. Die Position des Inhalts spiegelt die Einstellung für die Platzierung Erscheinungsbild wider.

Einfacher Inhalt auf dem Arbeitsbereich

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

   Die Editor-Symbolleiste erscheint über dem Textfeld.

2. Verwenden Sie die Editor-Symbolleiste zum Eingeben und Formatieren von Text sowie zum Einfügen von Elementen wie Links, Bildern und Widgets.

   Arbeitsbereich mit formatiertem Text

Komplexer Inhalt in den Einstellungen

1. Klicken Sie auf den Navigationspunkt am unteren Rand des Sliders, um die Toolbox für die einzelne Folie anzuzeigen, und wählen Sie das Symbol Einstellungen ( ).

2. Geben Sie im Abschnitt Inhalt den Nachrichtentext ein, der mit der Folie angezeigt werden soll.

3. Scrollen Sie nach unten zum Abschnitt Inhalt und verwenden Sie den Editor Nachrichtentext, um den Bannertext einzugeben und zu formatieren.

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

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

   Die erste Folie in diesem Beispiel hat ein Hintergrundbild, aber keinen Nachrichtentext. Der Buy 3 Get 1 Free Text über dem Slider befindet sich in einem Textcontainer, der später hinzugefügt wird.

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

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

   • URL - Verweist entweder auf eine relative oder eine vollqualifizierte URL.

     Verknüpfung mit einer URL

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

     Auswählen eines zu verlinkenden Produkts

   • Kategorie - Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie in der Kategorienstruktur. Suchen Sie die Kategorie entweder anhand eines Teilnamens oder des vollständigen Namens. Wählen Sie die Kategorie aus dem erweiterten Bereich der angezeigten Struktur.

     Auswahl einer zu verknüpfenden Kategorie

   • Seite - Identifiziert die Zielseite als eine bestimmte Inhaltsseite. Suchen Sie die Seite entweder anhand eines Teilnamens oder des vollständigen Namens. Wählen Sie die Seite aus der Liste der Suchergebnisse aus.

     Auswahl einer zu verlinkenden Seite

   Seit der Version 2.4.1 unterstützt Page Builder nicht mehr die Verknüpfung von Folien und Links innerhalb des verschachtelten Textes, da es Probleme mit der Anzeige im Frontend gibt. 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.

   

</div>

Wenn Sie verhindern möchten, dass der Besucher Ihren Shop verlässt, aktivieren Sie das Kontrollkästchen In neuer Registerkarte öffnen. Wenn das Kontrollkästchen deaktiviert ist, wird das verlinkte Ziel in derselben Registerkarte des Browsers geöffnet, was dazu führen kann, dass der Besucher Ihren Shop verlässt.

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

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

   Aussehen der Folie - Collage rechts

Sie können auch mehrere Schaltflächen oder Links verwenden, indem Sie dem Banner einen block hinzufügen. Um Konflikte zu vermeiden, halten Sie alle Links oder Schaltflächen in einem separaten Block und fügen Sie keine Links oder Schaltflächen direkt in das Banner ein.

• Setzen Sie Schaltfläche anzeigen auf einen der folgenden Werte:

  Immer	Es erscheint immer eine Schaltfläche auf der Folie.
  Bei Mauszeiger	Eine Schaltfläche erscheint auf der Folie nur, wenn der Mauszeiger darüber schwebt.
  Nie zeigen	Eine Schaltfläche wird nie auf der Folie angezeigt.

• Geben Sie den Schaltflächentext ein, der auf der Schaltfläche erscheinen soll.

• Setzen Sie Schaltflächentyp auf einen der folgenden Werte:

  Primär	Wendet den primären Schaltflächenstil aus der aktuellen Stilvorlage an.
  Sekundär	Wendet den sekundären Schaltflächenstil aus der aktuellen Stilvorlage an, falls zutreffend.
  Link	Erzeugt einen Hyperlink anstelle einer Schaltfläche.

  Der Schaltflächenstil aus dem aktuellen Thema bestimmt das Format der Schaltfläche. Normalerweise hat eine primäre Schaltfläche eine auffälligere Hintergrundfarbe als eine sekundäre Schaltfläche.

1. Stellen Sie Overlay anzeigen auf einen der folgenden Werte ein:

   Immer	Das Overlay ist immer sichtbar.
   Beim Schweben	Das Overlay erscheint nur bei Hover.
   Nie zeigen	Das Overlay ist nicht sichtbar.

   Sie können ein Overlay verwenden, um eine Hintergrundfarbe auf den aktiven Inhaltsbereich anzuwenden, die durch die Einstellung Erscheinungsbild definiert ist. Das Hintergrundbild der Folie ist weiterhin über die gesamte Breite der Folie sichtbar.

   Einstellungen für Folienüberlagerungen

   Wenn Sie ein Overlay anzeigen möchten, legen Sie die Overlay-Farbe fest:

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

   Farbe des Folien-Overlays

Erweitert

1. Wählen Sie die Ausrichtung, um die horizontale Positionierung des der Folie hinzugefügten Inhalts zu steuern.

   Standard	Wendet die Standardeinstellung der Ausrichtung an, die in der Stilvorlage des aktuellen Themas angegeben ist.
   Links	Richtet den Inhalt entlang des linken Randes der Folie aus, unter Berücksichtigung der angegebenen Polsterung.
   Zentriert	Richtet den Inhalt in der Mitte der Folie aus, wobei die angegebene Auffüllung berücksichtigt wird.
   Rechts	Richtet den Inhalt entlang des rechten Randes der Folie aus, unter Berücksichtigung der angegebenen Füllung.

2. Legen Sie den Stil Rahmen fest, der auf alle vier Seiten der Folie angewendet wird:

   Standard	Wendet den Standard-Rahmenstil an, der in der zugehörigen Stilvorlage angegeben ist.
   Keiner	Stellt keine sichtbare Anzeige der Folienränder zur Verfügung.
   Gepunktet	Der Containerrand erscheint als gepunktete Linie.
   Gestrichelt	Der Containerrand erscheint als gestrichelte Linie.
   Durchgehend	Der Containerrand wird als durchgezogene Linie dargestellt.
   Doppelt	Der Containerrand wird als Doppellinie dargestellt.
   Rille	Der Containerrand erscheint als gerillte Linie.
   Steg	Der Containerrand erscheint als geriffelte Linie.
   Einzug	Die Umrandung des Containers erscheint als eingezogene Linie.
   Außenlinie	Der Containerrand erscheint als Umrandungslinie.

3. Wenn Sie einen anderen Rahmenstil als None einstellen, vervollständigen Sie die Rahmenanzeigeoptionen:

   • Rahmenfarbe - Geben Sie die Farbe an, indem Sie ein Farbfeld auswählen, auf den Farbwähler klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.

     Rahmenfarbe

   • Rahmenbreite - Geben Sie die Anzahl der Pixel für die Breite der Rahmenlinie ein.

   • Rahmenradius - Geben Sie die Anzahl der Pixel ein, um die Größe des Radius zu definieren, der verwendet wird, um jede Ecke des Rahmens abzurunden.

4. (Optional) Geben Sie die Namen der CSS-Klassen aus der aktuellen Stilvorlage an, die auf die Folie angewendet werden sollen.

   Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

5. Geben Sie Werte in Pixel für Ränder und Auffüllung ein, um die äußeren Ränder und die innere Auffüllung der Folie festzulegen.

   Geben Sie die entsprechenden Werte in das Foliendiagramm ein.

   Ränder	Die Größe des Leerraums, der an den Außenkanten aller Seiten der Folie angebracht wird.
   Auffüllung	Die Menge an Leerraum, die an den Innenkanten aller Seiten der Folie angebracht wird.

Einen Titel für den Slider hinzufügen

Wenn Sie einen Titel über dem Slider wünschen, fügen Sie einfach einen [Textinhaltstyp] über dem Slider hinzu. Formatieren Sie dann den Text nach Bedarf.

1. Erweitern Sie im Bedienfeld Page Builder Elemente und ziehen Sie einen Text-Platzhalter in eine Zeile, Spalte oder Registerkarte auf dem Arbeitsbereich.

   Dabei markiert eine rote Hilfslinie den Einfügepunkt oberhalb des Sliders.

   Ziehen eines Textplatzhalters über einen Slider

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

   Bearbeiten des Slider-Titeltextes

Slider-Einstellungen ändern

1. Bewegen Sie den Mauszeiger über den Slider-Container, um die Haupt-Toolbox anzuzeigen, und wählen Sie das Symbol Settings ().

   Slider-Werkzeugkasten

2. Geben Sie die Mindesthöhe für die Folie ein.

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

   Sie können beispielsweise die Mindesthöhe eines Sliders so festlegen, dass er die gesamte Höhe der Seite einnimmt, wodurch Sie überzeugende Optionen für ganzseitige Hintergrundbilder und Videos erhalten.

   Slider Mindesthöhe

3. Wenn Sie möchten, dass der Slider sofort nach dem Laden der Seite beginnt, setzen Sie Autoplay auf Yes und Autoplay Speed auf die Anzahl der Millisekunden in der Verzögerung zwischen den Slides.

   Standardmäßig ist die Geschwindigkeit auf 4000 ms, d. h. vier Sekunden, eingestellt. Wenn Sie die automatische Wiedergabe auf Nein einstellen, wird standardmäßig die erste Folie angezeigt, und der Kunde muss auf die Foliennavigation (Punkte oder Pfeile) klicken, um die nächste Folie der Reihe nach anzuzeigen.

   Einstellungen für die automatische Wiedergabe von Folien

4. Um den Übergang von einem Dia zum nächsten sanft zu gestalten, setzen Sie Überblenden auf Ja.

   Mit Überblendung scheinen die Folien an ihrem Platz zu bleiben, aber der Inhalt wechselt fließend von einer Folie zur nächsten. Ohne Überblendung sehen Sie die horizontale Bewegung von einer Folie zur nächsten.

   Einstellungen für Überblendung und Endlosschleife

5. Um die Diashow unbegrenzt wiederholen zu lassen, während die Seite geöffnet ist, setzen Sie Endlosschleife auf Ja.

6. Um die Art der Navigationssteuerung für den Slider auszuwählen, gehen Sie wie folgt vor:

   • Um Nächste und Vorherige Pfeile auf der linken und rechten Seite jedes Dias einzufügen, setzen Sie Pfeile anzeigen auf Ja.

   • Um eine Reihe von Navigationspunkten unter dem Slider einzufügen, setzen Sie Punkte anzeigen auf Ja.

   Slider zeigen Pfeile und Punkte_

7. Vervollständigen Sie die Erweitert Slidereinstellungen nach Bedarf.

8. Wenn Sie fertig sind, klicken Sie auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Erweitert - Slider

1. Wählen Sie die Ausrichtung, um die Positionierung der Folien innerhalb des übergeordneten Slider-Containers zu steuern:

   Standard	Wendet die Standardeinstellung der Ausrichtung an, die in der Stilvorlage des aktuellen Themas angegeben ist.
   Links	Richtet die Folien entlang des linken Randes des Slider-Containers aus, unter Berücksichtigung der angegebenen Polsterung.
   Zentriert	Richtet die Dias in der Mitte des Slider-Containers aus, unter Berücksichtigung der angegebenen Füllung.
   Rechts	Richtet die Dias entlang des rechten Randes des Containers aus, unter Berücksichtigung der angegebenen Füllung.

2. Legen Sie den Stil Rahmen fest, der auf alle vier Seiten des Slider-Containers angewendet wird:

   Standard	Wendet den Standard-Rahmenstil an, der durch das zugehörige Stylesheet festgelegt ist.
   Keiner	Bietet keinen sichtbaren Hinweis auf die Containergrenzen.
   Gepunktet	Der Containerrand erscheint als gepunktete Linie.
   Gestrichelt	Der Containerrand erscheint als gestrichelte Linie.
   Durchgehend	Der Containerrand wird als durchgezogene Linie dargestellt.
   Doppelt	Der Containerrand wird als Doppellinie dargestellt.
   Rille	Der Containerrand erscheint als gerillte Linie.
   Steg	Der Containerrand erscheint als geriffelte Linie.
   Einzug	Die Umrandung des Containers erscheint als versenkte Linie.
   Außenlinie	Der Containerrand erscheint als Umrandungslinie.

3. Wenn Sie einen anderen Rahmenstil als None einstellen, vervollständigen Sie die Rahmenanzeigeoptionen:

   • Rahmenfarbe - Geben Sie die Farbe an, indem Sie ein Farbfeld auswählen, auf den Farbwähler klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.

   • Rahmenbreite - Geben Sie die Anzahl der Pixel für die Breite der Rahmenlinie ein.

   • Rahmenradius - Geben Sie die Anzahl der Pixel ein, um die Größe des Radius zu definieren, der verwendet wird, um jede Ecke des Rahmens abzurunden.

4. (Optional) Geben Sie die Namen der CSS-Klassen aus der aktuellen Stilvorlage an, die auf den Slider-Container angewendet werden sollen.

   Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

5. Geben Sie Werte in Pixeln für Margins und Padding ein, um die äußeren Ränder und die innere Auffüllung des Slider-Containers zu bestimmen.

   Geben Sie die entsprechenden Werte in das Diagramm ein.

   Ränder	Die Menge an Leerraum, die an der Außenkante aller Seiten des Containers angebracht wird.
   Auffüllung	Die Menge an Leerraum, die auf den inneren Rand aller Seiten des Containers angewendet wird.

Testen Sie den Slider

1. Öffnen Sie die Seite, auf der Sie den Slider eingefügt haben, und setzen Sie Seite aktivieren auf Ja.

2. Klicken Sie in der oberen rechten Ecke auf den Pfeil Speichern und wählen Sie Speichern und schließen.

3. Suchen Sie die Seite im Raster Seiten und wählen Sie Anzeigen in der Spalte Aktion.

   Slider-Vorschau - Standardansicht_

   Wenn Sie den Slider in der Vorschau anzeigen, ändern Sie die Größe des Fensters, damit Sie sehen können, wie er auf einem mobilen Gerät angezeigt wird.

   Slider-Vorschau - mobile Ansicht_