Von DIXENO entwickelte Widgets
Accordion
Realisiert durch Modul: DIXENO - [WIDGET] Accordion (dxwidgetaccordion)
Zweck: Fügt einen Balken mit einer Überschrift ein, der per Klick auf den Titel/einen Pfeil erweitert werden kann, um mehr Inhalt anzuzeigen
Einstellungen:
| Option | Beschreibung |
|---|---|
| Titel | Text, der auf das Akkordion gelegt wird |
| Inhalt | Inhalt, der angezeigt wird, sobald man auf den Titel des Akkordions klickt |
| Gruppierung | Diese Option bietet sich an, wenn Sie beispielsweise 2 Akkordions untereinander platzieren. Wenn Sie beiden dieselbe Gruppe zuweisen (z. B. Gruppe 1), schließt sich das jeweils andere Akkordion, wenn Sie eines der beiden erweitern |
Beispiel: Zwei Akkordions befinden sich unterhalb in einer Spalte und gehören zu keiner Gruppe.
Ergebnis:
Alert
Realisiert durch Modul: DIXENO Framework - [WIDGET] Headline (dxwidgetheadline)
Zweck: Fügt einen Hinweis mit beliebigen Text ein. Abhängig von der Art des Hinweises (Info, Warnung, Success) wird der Hinweis in unterschiedlichen Farben dargestellt (grau, rot, grün).
Einstellungen:
| Option | Beschreibung |
|---|---|
| Alert Style | Info: Grauer Hinweis: Error: Roter Hinweis:  Success: Grüner Hinweis:  |
| Text | Text der Meldung |
Anker
Realisiert durch Modul: DIXENO Framework - [WIDGET] Anker (dxwidgetanchor)
Zweck: Fügt ein unsichtbares Element mit einer von Ihnen definierten ID ein. Das Element können Sie dann per URL ansprechen, sodass Sie einen Sprunganker an einer beliebigen Stelle setzen können. Folgender HTML-Code wird damit erzeugt:
```
```
Einstellungen:
| Option | Beschreibung |
|---|---|
| Seitenanker für Links | Text, der als ID im Frontend umgewandelt wird |
| Offset Y-Achse | Verschiebt das Anker-Element vertikal (in Pixeln) (hängt einen Style ans Anker-Element style="transform: translateY([IhreZahl]px)) |
Beispiel: Sie geben unter Seitenanker für Links den Text Neu ein. Im Shop-Frontend wird ein unsichtbares Div-Element mit der ID neu integriert (<div id="neu">). Anschließend können Sie einen Link auf der Seite integrieren, der auf dieses Element per #neu verweist.
Attribute
Realisiert durch Modul: DIXENO Framework - [WIDGET] Attribute (dxwidgetattribute)
Zweck: Fügt ein Element ein, das von Ihnen definierten Text sowie Attribute mit Werten darstellt. Die Werte der Attribute können durch Text oder eine Zahl angegeben werden, wobei durch eine Zahl das Attribut als Skala dargestellt wird (100 = 100 % auf der Skala).
Beispiel:
Ergebnis:
Button
Realisiert durch Modul: DIXENO Framework - [WIDGET] Button (dxwidgetbutton)
Zweck: Fügt eine Schaltfläche ein, für die ein vorgegebenes Layout sowie ein Icon gewählt werden können
Beispiel (alle Button-Typen):
Card
Realisiert durch Modul: DIXENO Framework - [WIDGET] Card (dxwidgetcard)
Zweck: Bindet ein kartenförmiges Element mit Bild, Text und URL ein
Footer Newsletterform
Zweck: Bindet einen Bereich für die Newsletteranmeldung ein
Einstellungen:
| Option | Beschreibung |
|---|---|
| Abonnieren CTA Text (optional) | Text der links angezeigt wird |
| Formfeld (E-Mail) - Platzhalter-Text | Text, der innerhalb des E-Mail-Feldes für die Anmeldung angezeigt wird als Platzhalter |
| Button Text | Text, der auf der Schaltfläche für die Anmeldung angezeigt wird |
Google Maps
Realisiert durch Modul: DIXENO Framework - [WIDGET] Google Maps (dxwidgetgooglemaps)
Zweck: Bindet eine Google Maps-Karte in den Inhalt ein. Standardmäßig wird die Adresse aus den Theme-Einstellungen gezogen (Erweiterungen > Themes > v-flex Theme > Registerkarte: Einstell > Kontakt). Durch eine benutzerdefinierte Adresse können Sie diese Adresse überschreiben.
Hinweis: Um den Datenschutz von Besuchern und Besucherinnen sicherzustellen (u. a. werden Schriftarten von Google auf der Karte verwendet), muss der Anzeige der Google Maps-Karte explizit zugestimmt werden. Einmal zugestimmt, werden alle Google Maps-Karten angezeigt:
Einstellungen:
Beispiel: Gewählt ist das Widget ohne benutzerdefinierte Einstellungen, sodass die Adresse DIXENO GmbH, Friedrichstraße 15, 33102 Paderborn aus den Theme-Einstellungen verwendet wird.
Ergebnis:
Headline
Realisiert durch Modul: DIXENO Framework - [WIDGET] Headline (dxwidgetheadline)
Zweck: Fügt eine Überschrift ein, wobei Sie die Überschriftebene (H1, H2, H3 usw.) sowie Formatierungen wie die Farbe festlegen können.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Titel | Text der Headline |
| Überschrift-Ordnung | Sie können eine Ebene von 1 bis 6 wählen, wobei h1 die oberste Ebene darstellt. Beachten Sie, dass eine Seite immer nur eine h1-Überschrift hat und Suchmaschinen es schlecht bewerten, wenn Sie mehrere h1-Überschriften benutzen. Zudem sollten die Überschriften logisch aufgebaut sein. Nach einer Überschrift h2 folgt eine Überschrift h3, zum Beispiel. |
| Textfarbe | Farbe der Headline |
| Texttransform | Normal: Der Text wird so dargestellt, wie Sie den Text im Feld Titel eingetragen haben. Lowercase: Alle Buchstaben werden in Kleinbuchstaben umgewandelt. Upppercase: Alle Buchstaben werden in Großbuchstaben umgewandelt. |
| Position | Legt fest, ob die Headline linksbündig, mittig oder rechtsbündig dargestellt wird. |
Hotspot
Realisiert durch Modul: DIXENO Framework - [WIDGET] Hotspot Widget (dxwidgethotspot)
Zweck: Bindet ein Bild ein, auf das Sie Punkte mit Infoboxen ("Hotspots") einfügen können. Wenn ein Besucher bzw. eine Besucherin auf einen Hotspot klickt, öffnet sich ein kleines Fenster mit zusätzlichen Informationen. Die Anzeige der Hotspots ist responsiv. Auf großen Bildschirmen werden die Hotspots innerhalb des Bildes angezeigt. Auf kleinen Bildschirmen wie auf Handys werden die Hotspots unterhalb des Bildes angezeigt.
Konfiguration: Sie wählen zuerst das Bild, auf das Sie die Hotspots einfügen wollen. Anschließend klicken Sie im Bild auf die Stelle, an der Sie ein Hotspot einbinden möchten. Es öffnen sich weitere Einstellungen zum Hotspot.
Hinweis: Um ein bereits bestehenden Hotspot zu bearbeiten oder zu löschen, müssen Sie im Bild auf den gewünschten Hotspot klicken und Sie erhalten alle Einstellungen zum Hotspot. Beachten Sie außerdem, dass Sie bei Änderungen mindestens zweimal speichern müssen: Einmal, nachdem Sie die Einstellungen eines Hotspots geändert haben. Ein zweites Mal, um das Widget und somit das gesamte Bild mit den Hotspots zu speichern. Wenn die zweite Schaltfläche ausgegraut ist, müssen Sie erst die Hotspot-Einstellungen speichern.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Art des Hotspots | Textbox: Wenn aktiviert, können Sie einen beliebigen Text mit Überschrift, einem Bild sowie einem Link einfügen. Artikel: Wenn aktiviert, können Sie einen Artikel mit Bild, Kurzbeschreibung, Preis und Verlinkung anzeigen lassen. Sie müssen dafür nur den gewünschten Artikel in den Einstellungen wählen. Kategorie: Wenn aktiviert, können Sie eine Kategorie mit Bild, Kurzbeschreibung und Verlinkung anzeigen lassen. Sie müssen dafür nur die gewünschte Kategorie in den Einstellungen wählen. |
| Stil des Hotspots | Legt die Farbe des Hotspots fest (Weiß oder Schwarz) |
| Position des Inhalts | Legt fest, auf welcher Seite des Hotspots die Infobox geöffnet wird |
| Titelbild festlegen | Hier können Sie ein Bild in die Infobox einbinden, das oberhalb des Texts angezeigt wird. |
| Überschrift | Überschrift, die oben in der Infobox eingefügt wird |
| Textbox | Zusätzlicher Text unterhalb der Überschrift |
| Link | Hier können Sie eine URL einfügen, die als Verlinkung unten in die Infobox eingebunden wird. Wenn der Link auf Ihre eigene Website führt, reicht eine relative URL. Beispiel: /kaffeemaschinen/ |
Beispiel 1: Im linken Hotspot ist ein Artikel hinterlegt. Er öffnet sich rechts unten und hat einen dunklen Stil. Im rechten Hotspot ist ein selbst definierter Text sowie ein Bild hinterlegt. Er öffnet sich zentriert und überlagert damit den Hotspot. Er hat einen hellen Stil.
Beispiel 2: Im linken Hotspot ist eine Kategorie hinterlegt.
In den Warenkorb / Benachrichtigen
Realisiert durch Modul: DIXENO Framework - [Widget] In den Warenkorb / Benachrichtigungs - Button (dxwidgettobasketbutton)
Zweck: Bindet eine Schaltfläche in den Inhalt ein, über die (abhängig vom Lagerbestand des Artikels) ein Artikel in den Warenkorb gelegt oder eine Benachrichtigung bei Verfügbarkeit angefordert werden kann. Das Widget wird mit dem Benachrichtigungsmodul von DIXENO installiert.
Konfiguration: Um das Widget zu nutzen, geben Sie den gewünschten Artikel an. Anschließend wird eine Schaltfläche in den VCMS-Inhalt integriert, über die sich der Artikel in den Warenkorb legen oder eine Benachrichtigung einrichten lässt. Welche Schaltfläche angezeigt wird, ist abhängig von dem Lagerbestand des Artikels. Somit passt sich die Schaltfläche dynamisch an.
Ergebnis (links: Artikel ist nicht verfügbar, rechts: Artikel ist verfügbar):
Kontaktformular
Realisiert durch Modul: DIXENO Framework - [WIDGET] Kontaktformular (dxwidgetcontactform)
Zweck: Bindet ein Kontaktformular ein, in dem Sie die ausfüllbaren Felder bestimmen sowie den Inhalt der Antwort-E-Mail definieren können.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Formulartitel | Überschrift des Formulars |
| Beschreibung | Text, der unterhalb der Überschrift angezeigt wird |
| Formularfelder | Felder, die Sie im Formular anzeigen möchten Beachten Sie die Hinweise unterhalb dieser Option. Per * lässt sich ein Feld als Pflichtfeld definieren, das der Besucher ausfüllen muss |
| "Senden" Text | Text auf der Schaltfläche zum Absenden des Formulars |
| E-Mail Betreff | Betreff der E-Mail, die bei Kontaktanfrage an Sie gesendet wird |
| Danke-Nachricht | Diese Nachricht wird nach dem Absenden oberhalb des Kontaktformulars in grün angezeigt: |
| E-Mail Empfänger | Standardmäßig werden Kontaktanfragen an die E-Mail-Adresse gesendet, die Sie in den Grundeinstellungen unter E-Mail-Adresse für Infos des Shops hinterlegt haben. Hier können Sie eine alternative Empfängeradresse eintragen, z. B. support@example.com. |
| Automatische Antwort aktivieren | Wenn aktiviert, wird eine automatische E-Mail mit den Einstellungen zu Absender, Betreff und Nachricht an den Besucher gesendet |
| Absender für automatische Antwort | Absender-E-Mail-Adresse der E-Mail an Besucher |
| Betreff für automatische Antwort | Betreff der E-Mail an Besucher |
| Nachricht für automatische Antwort | Inhalt der E-Mail an Besucher |
| Formular-ID | Automatisch generierte ID des Formulars, die nicht geändert werden sollte |
Loginbox
Realisiert durch Modul: DIXENO Framework - [WIDGET] Loginbox (dxwidgetlogin)
Zweck: Integriert das Formular, über das sich Kunden anmelden/registrieren können.
Ergebnis:
Newsletter Form
Realisiert durch Modul: DIXENO Framework - [WIDGET] Newsletter Form (dxwidgetnewsletter)
Zweck: Bindet ein Newsletter-Anmeldeformular ein.
Einstellungen:
| Option | Beschreibung |
|---|---|
| [Aktiv] Anrede | Wenn aktiviert, werden die Checkboxen "Herr" und "Frau" im Formular angezeigt |
| [Aktiv] Vorname, Nachname | Wenn aktiviert, werden die Textfelder "Vorname" und "Nachname" im Formular angezeigt Ohne weitere Einstellungen sind die Felder optional. |
| [Pflichtfeld] Vorname, Nachname | Wenn aktiviert, sind die Felder "Vorname" und "Nachname" Pflichtfelder |
| Freitext (Info) | Sie können hier auch HTML-Code und Style-Angaben verwenden, z. B. um auf den Datenschutz hinzuweisen. Beispiel: Informationen zur Verarbeitung Ihrer personenbezogenen Daten finden Sie in unseren <a href="https://www.dixeno.de/datenschutz/" style="color:green";>Datenschutzhinweisen</a> |
| Opt-In Text Checkbox 1 | Sie können diese Checkbox für eine Opt-in-Abfrage wie: "Ja, ich möchte den DIXENO-Newsletter der DIXENO GmbH abonnieren." nutzen. |
| [Pflichtfeld] Opt-In-Checkbox 1 | Wenn aktiviert, muss das Häkchen bei dieser Checkbox gesetzt werden |
| Opt-In Text Checkbox 2 | Falls ein weiteres Opt-in mit dem Newsletter verbunden ist, lässt sich dieses Opt-in mit dieser Checkbox einholen. Beispiel: Ja, ich stimme der Speicherung und Verarbeitung meiner Daten durch die DIXENO GmbH zu, damit meine Anfrage bearbeitet werden kann. |
| [Pflichtfeld] Opt-In-Checkbox 2 | Wenn aktiviert, muss das Häkchen bei dieser Checkbox gesetzt werden |
| Weitere Formularfelder, die übermittelt werden sollen (ohne Speichern in die DB) | Beachten Sie die Hinweise unterhalb dieses Feldes. Am besten kopieren Sie sich die Beispiele in dieses Feld hinein und passen die Beispiele an ihre Anforderungen an. Die Felder werden nicht in die Datenbank gespeichert. |
Ergebnis:
Verlauf
Realisiert durch Modul: DIXENO Framework - [WIDGET] Verlauf (dxwidgetgradient)
Zweck: Fügt ein Element mit einem farblichen Verlauf ein. Das Element nimmt die gesamte Breite ein. Sie können 2 Farben und den Verlaufswinkel festlegen. Text lässt sich über den Verlauf legen, indem das Verlaufwidget immer oberhalb aller anderen Widgets liegt.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Höhe | Höhe des Elements mit dem Verlauf in Pixel |
| Hintergrundfarbe | Farbe, die komplett auf das Element mit dem Verlauf als Hintergrund gelegt wird |
| Verlaufsfarbe | Farbe, die auf die Hintergrundfarbe gelegt wird |
| Verlaufswinkel | Winkel des Verlauf, wobei sich die Farben etwa in der Mitte vermischen 0/kein Wert = Hintergrundfarbe verläuft von oben nach unten in die Verlaufsfarbe 90 = Hintergrundfarbe verläuft von links nach rechts in die Verlaufsfarbe 180 = Hintergrundfarbe verläuft von unten nach oben in die Verlaufsfarbe 270 = Hintergrundfarbe verläuft von rechts nach links in die Verlaufsfarbe |
| Vertikale Verschiebung | Das gesamte Element mit dem Verlauf wird um die hier angegebene Zahl in Pixel nach unten verschoben |
| Schräger Winkel (Winkel) | Das gesamte Element mit dem Verlauf wird um den definierten Winkel gedreht Es lassen sich Minuszahlen. Beispiel mit -20 Grad (grau nach weiß):  |
Ergebnis:
Video
Realisiert durch Modul: DIXENO Framework - [WIDGET] Video (dxwidgetvideo)
Zweck: Integriert ein Video, das auf dem eigenen Webserver abgelegt ist. Mit dem Widget können Sie z. B. ein automatisch gestartetes Video als erstes Element einbinden, sodass das Video wie ein animierter Hero-Banner wirkt.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Farbüberlagerung | Farbe, die über das Video-Fenster gelegt wird |
| Deckkraft (in %) | Deckkraft bzw. Transparenz der Farbe in Prozent Wenn Sie z. B. "30" eingeben, wird die Farbe mit einer Deckkraft von 30 % über das Video gelegt |
| Bilder | Bild, das anstatt eines Video-Thumbnails angezeigt wird Ein Besucher oder eine Besucherin muss auf das Bild klicken, damit sich das Video anschließend starten lässt. Hier bietet es sich an, gleichzeitig eine Schaltfläche über die Einstellung Button einzubinden (z. B. "Video starten"). Auf diese Weise verdeutlichen Sie, dass sich hinter dem Bild ein Video verbirgt. |
| Title | Text, der als weiße Schrift auf dem Bild/auf der Thumbnail des Videos angezeigt wird Der Titel wird nur angezeigt, wenn ein Bild und/oder eine Overlay-Farbe definiert ist. |
| Schaltfläche | Schaltfläche, die auf das Video-Fenster gelegt wird Nur wenn Sie gleichzeitig ein Bild eingebunden haben, bietet sich eine Schaltfläche an. Mit der Schaltfläche können Sie verdeutlichen, dass der Besucher bzw. die Besucherin das Video damit starten kann. Es lässt sich keine URL hinterlegen. |
| Video wählen | Video, das sich auf Ihrem Webserver befindet Wenn Sie auf den Pfeil rechts klicken, erhalten Sie Vorschläge, von denen Sie einen Vorschlag wählen müssen. |
| Video ohne Ton abspielen | Der Ton des Videos wird ausgeschaltet. Der Ton lässt sich aber bei Bedarf einschalten. Bei einem Video mit Steuerelementen ist der Ton in der Leiste mit den Steuerelementen ausgeschaltet. Bei einem Video ohne Steuerelemente wird eine spezielle Schaltfläche angezeigt: Diese Einstellung empfiehlt sich, wenn Sie das Video wie einen Hero-Banner nutzen möchten |
| Autoplay | Das Video wird automatisch bei Aufruf der Seite gestartet. Diese Einstellung empfiehlt sich, wenn Sie das Video wie einen Hero-Banner nutzen möchten. Wenn Sie diese Einstellung nicht aktivieren, müssen Sie die Einstellung Steuerelement anzeigen aktivieren oder mit einem Bild und einem Button arbeiten. |
| Video wiederholen | Das Video wird wiederholt, nachdem es das Ende erreicht hat. Diese Einstellung empfiehlt sich, wenn Sie das Video wie einen Hero-Banner nutzen möchten. |
| Steuerelement anzeigen | Es werden Steuerelemente wie die Ladeleiste und Schaltflächen für den Ton sowie für den Vollbildmodus des Videos angezeigt: Wenn Sie diese Einstellung nicht aktivieren, müssen Sie die Option Autoplay aktivieren oder mit einem Bild und einem Button arbeiten. |
| Maximale Höhe (in px) | Standardmäßig füllt das Video den Bildschirm. Mit dieser Einstellung können Sie die Höhe des Videos in px definieren. Anschließend lässt sich über die Option Video-Einbettung die Darstellung des Videos zusätzlich beeinflussen. |
| Video-Einbettung | Die Option greift nur in Verbindung mit der Option Maximale Höhe (in px). gesamter Bereich: Das Video nimmt die gesamte mögliche Breite ein. in einen Container: Die Breite des Videos wird ans Fenster angepasst. Das Video wird so skaliert, dass sein Seitenverhältnis beibehalten wird und es in den Inhaltsrahmen des Elements passt. Das Video wird in einem grauen Container eingebunden:  |
Ergebnis mit den Einstellungen von obigem Screenshot:
Video YouTube/Vimeo
Realisiert durch Modul: DIXENO Framework - [WIDGET] Video (dxwidgetvideo)
Zweck: Integriert ein Video von YouTube oder Vimeo
Hinweis: Um den Datenschutz von Besuchern und Besucherinnen sicherzustellen, muss der Anzeige des YouTube-Videos explizit zugestimmt werden. Einmal zugestimmt, werden alle YouTube-Videos angezeigt:
Einstellungen:
| Option | Beschreibung |
|---|---|
| Overlayfarbe | Farbe, die über das Video-Fenster gelegt wird |
| Deckkraft | Deckkraft bzw. Transparenz der Farbe in Prozent Wenn Sie z. B. "30" eingeben, wird die Farbe mit einer Deckkraft von 30 % über das Video gelegt |
| Bilder | Bild, das anstatt eines Video-Thumbnails angezeigt wird Ein Besucher oder eine Besucherin muss auf das Bild klicken, damit sich das Video anschließend starten lässt. |
| ID - YouTube | ID des YouTube-Videos, das Sie einbinden möchten |
| ID - Vimeo | ID des Vimeo-Videos, das Sie einbinden möchten |
Ergebnis:
Zeitstrahl
Realisiert durch Modul: DIXENO Framework - [WIDGET] Zeitstrahl (dxwidgettimeline)
Zweck: Fügt ein Element mit Bild, Jahr und Text ein. Mit mehreren Zeitstrahl-Elementen untereinander können Sie einen Zeitstrahl für mehrere Jahre erstellen.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Titel | Text, der oben neben dem Bild angezeigt wird |
| Bild | Bild, das neben dem Zeitstrahl angezeigt wird |
| Inhalt | Text, der unterhalb des Titels angezeigt wird |
| Jahr | Jahr, das unterhalb des Bildes angezeigt wird |
| Position | Bestimmt die Position des Bildes und des Jahres |
Ergebnis:
Zusätzliche Row-Typen
Realisiert durch Modul: DIXENO Framework - [WIDGET] Zusätzliche Row Typen (dxwidgetsadditionalrowtypes)
Zweck: Ergänzt das VCMS durch die zusätzliche Funktion Slider Column hinzufügen. Über diese Funktion lässt sich ein Slider-Element in den Inhalt integrieren, in das Sie Widgets wie Text, Bild usw. einbinden können:
Die Zusätzliche Row erlaubt es nur, dass ausschließlich 1 Widget in einer Zeile steht und die volle Breite einnimmt. Ziehen Sie daher die Widgets immer bis zum Rand. Wenn Sie die VCMS-Seite speichern, wird die Breite der Widgets automatisch auf volle Breite angepasst.
Im folgenden Beispiel sind mehrere Artikel-Widgets untereinander eingebunden:
Einstellungen:
| Option | Beschreibung |
|---|---|
| Hintergrundfarbe | Farbe, die im Hintergrund des Sliders angezeigt wird |
| Titel | Wird links oben über dem Slider angezeigt: |
| Beschreibung | Wird unterhalb des Titels angezeigt |
| Automatisches Sliden in Sekunden | Dauer der Anzeige eines Slides, bis zum nächsten Slide gewechselt wird |
| Slidertype | Simpel: Der Slider bietet blau hinterlegte Pfeil-Schaltflächen zur Navigation:  Banner: Der Slider bietet weniger auffällige Navigationselemente Punkte in der Mitte und Pfeile an den Seiten zur Navigation:   Beachten Sie, dass bei sehr hellen Bildern oder Bildern mit viel Weißfläche die Navigationselemente übersehen werden könnten. Produkte: Geeignet für einen Slider, der ausschließlich Artikel-Widgets enthält (siehe Beispiel unten). Um auch auf größeren Bildschirmen eine Slide-Funktionalität zu bieten, sollten mindestens 6 Artikel-Widgets eingebunden sein. Schmale Kacheln (Kategorien, Logos): Geeignet für die Darstellung von Kategorien oder Logos (z. B. bei Kundenreferenzen) in einem Slider. Wenn Sie z. B. Kategorien einfügen mit dem Styling Vertical, werden diese Kategorien folgendermaßen angezeigt:  Eigene Konfiguration: Sie können individuelle Einstellungen, z. B. zur Anzahl der Slides je Bildschirmauflösung, tätigen (siehe Responsive). |
| Animation | Slide: Der angezeigte Slide wird nach links geschoben, um den nächsten Slide anzuzeigen. Fade: Der angezeigte Slide verschwindet sanft und der nächste Slide wird angezeigt (siehe auch Beispiel "Slider als Hero-Element" weiter unten). |
| Aktives Slide zentrieren | Spielt insbesondere mit der Einstellung Slider mit Anschnitt anzeigen zusammen. Wenn aktiviert, wird 1 Slide zentriert angezeigt. Die Anzeige der andere Slides richtet sich nach diesem Slide, sodass ggf. weniger Slides angezeigt werden, als für die Bildschirmgröße eingestellt ist:  Wenn deaktiviert, wird kein Slide zentral angezeigt. |
| Responsive | Die Einstellungsmöglichkeiten stehen nur zur Verfügung, wenn Sie bei Slidertype die Option Eigene Konfiguration wählen. Slider mit Anschnitt anzeigen: Wenn aktiviert, wird ein Teil des nächsten Slides angezeigt, z. B. ein Teil des nächsten Artikels. Wenn der Slider z. B. 4 Artikel laut Einstellungen anzeigen soll, sieht der Kunde 4 Artikel sowie Teile von weiteren Artikeln. Auf diese Weise weiß der Kunde sofort, dass weitere Slides bzw. Artikel im Slider angezeigt werden können.  Wenn deaktiviert werden nur so viele Slides angezeigt, wie Sie für die Bildschirmauflösungen einstellen.  Pfeile anzeigen: Hier können Sie definieren, ob für alle Bildschirmauflösungen Navigationspfeile angezeigt werden oder nur bei bestimmten Auflösungen. Punkte anzeigen: Hier können Sie definieren, ob für alle Bildschirmauflösungen Navigationspunkte angezeigt werden oder nur bei bestimmten Auflösungen. Anzahl Slides: Pro Bildschirmauflösung können Sie festlegen, wie viele Slides angezeigt werden. Wenn die Felder leer sind, wird 1 Slide angezeigt. |
| An Slidergrenzen stoppen | Spielt insbesondere mit der Einstellung Aktives Slide zentrieren zusammen. Wenn aktiviert, werden vor dem zentralen Slide keine weiteren Slides angezeigt:  |
| Bei Klick auf Pfeil um Anzahl vorhandener Slides springen | Wenn aktiviert, springt der Kunde x Slides weiter bei Klick auf dem Pfeil (x = Anzahl der Widgets in der Row) Wenn deaktiviert, springt der Kunde auf den nächsten Slide unabhängig von der Anzahl vorhandener Slides |
Beispiele:
Fügen Sie das Widget "Hero" in die Row ein. Das Widget muss die gesamte Breite einnehmen. Konfigurieren Sie ein Hintergrundbild für das Widget sowie ggf. Text und Schaltflächen. Für jeden weiteren Slide fügen Sie weitere Hero-Widgets ein. Im folgenden Beispiel sind es 3 Hero-Widgets:
Wählen Sie in der Row beim Slidertype die Option Banner und bei Animation die Option Fade. Speichern Sie die VCMS-Seite:
Hinweis: Damit alle Slides gleich hoch sind, definieren Sie in den Hero-Widgets eine maximale Höhe. Ohne diese Höhenangabe können Höhenabweichungen zwischen den Slides auftreten, da die Slide-Höhe sich nach dem Text in den Hero-Widgets ausrichtet.
Ergebnis:
Fügen Sie mindestens 6 Artikel-Widgets in die Row ein. Die Widgets müssen die gesamte Breite einnehmen:
Wählen Sie in der Row beim Slidertype die Option Produkte und speichern Sie die VCMS-Seite:
Ergebnis: