Überblick über die Widgets
Ab der Professional Edition bietet OXID das Tool Visual CMS (VCMS), das sogenannte Standardwidgets zur Verfügung stellt. DIXENO hat diese Standardwidgets für das v-flex-Theme optimiert. Außerdem können Sie nach Bedarf weitere, von DIXENO entwickelte Widgets im Shop einbinden. Neu entwickelte Widgets werden durch Module in den OXID-Shop eingebunden.
Im Folgenden werden die Widgets erläutert.
Hinweis: Es werden nur komplexere Einstellungen erläutert. Einige Einstellungen wiederholen sich und werden nur einmal erläutert.
Durch DIXENO angepasste Standardwidgets
Aktion
Zweck: Zeigt dynamisch Artikel einer Aktion an
Beispiel: Gewählt ist die Aktion Test mit einer Beschreibung und 4 Artikeln.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Aktion | Tippen Sie den ersten Buchstaben Ihrer gewünschten Aktion ein und Sie erhalten Vorschläge |
| Titel | Überschrift der Aktion, die oberhalb der Artikel angezeigt wird |
| Kurzbeschreibung | Text, der unterhalb der Überschrift eingebunden wird |
| Anzahl | Anzahl der Artikel innerhalb einer Zeile Auf mobilen Bildschirmen werden die Artikel untereinander angezeigt Ab einer Anzahl von 4 Artikeln werden Navigationspfeile eingeblendet:  |
| Breite an Fenstergröße anpassen | Elementbreite ragt über die Begrenzung der Zeile (row) hinaus, sofern das Element die vollen 12 Spalten der Zeile einnimmt Ohne diese Option würde ein weißer Abstand das Element vom Fensterrand trennen |
Ergebnis:
Artikel
Zweck: Ermöglicht es, einzelne Artikel auf einer CMS-Seite zu platzieren. Wahlweise können Sie die Schaltfläche In den Warenkorb bei einem Artikel deaktivieren bzw. ausblenden.
Ergebnis:
Bild
Zweck: Fügt ein Bild in die VCMS-Seite ein. Das Bild wird in der Größe so angepasst, dass sein Seitenverhältnis beibehalten wird und es den gesamten Inhaltsrahmen des Elements ausfüllt. Wenn das Seitenverhältnis des Bildes nicht mit dem Seitenverhältnis seines Rahmens übereinstimmt, wird das Bild beschnitten, damit es passt.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Bezeichnung | Text, der unten links auf das Bild gesetzt wird |
| Bezeichnung anzeigen | Nur wenn diese Option aktiviert ist, wird die Bezeichnung angezeigt |
| URL | Sie können hier relative Pfade eingeben, die auf Ihren eigenen Shop verweisen (z. B. /produkte/lebensmittel/). Oder Sie geben vollständige Pfade mit https ein, wie z. B. https://www.dixeno.de/. |
| Im neuen Fenster öffnen | Wenn bei Klick auf das Bild eine URL geöffnet werden soll, können Sie hier steuern, ob die URL sich in einem neuen Fenster öffnet |
| Verknüpft mit | Keine Verknüpfung: Bei Klick auf das Bild passiert nichts. Lightbox: Bei Klick auf das Bild wird das Bild durch einen dunklen Hintergrund hervorgehoben URL: Bei Klick auf das Bild wird das Bild über seinen Link aufgerufen und im Browser angezeigt. Wenn Sie eine URL in der Option URL hinterlegt haben, wird die diese URL stattdessen geöffnet. |
| Quadratisches Bild anzeigen | Breite und Größe des Bildes sind gleich Hinweis: Wenn Sie eine maximale Höhe gleichzeitig eingeben, wird das Bild u. U. nicht mehr quadratisch angezeigt. |
| Maximale Höhe | Höhe des Bildes in Pixel Die Breite des Bildes bleibt gleich gemäß den Spalten, die es einnimmt |
| Weiterer Bildtext | Text, der unterhalb des Bildes mit einem grauen Hintergrund angezeigt wird |
Ergebnis:
Hero
Zweck: Zeigt ein Hero-Bild (ähnlich einem Web-Banner) mit Text und Schaltflächen an. Elemente wie Texte und Schaltflächen werden immer links auf dem Hero-Bild angezeigt. Sie können nur die Textausrichtung der Elemente anpassen.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Preheadline Text (optional) | Text, der oberhalb der Überschrift angezeigt wird |
| Preheadline Farbe (optional) | Farbe des Textes |
| Überschrift | Hauptüberschrift, die im Hero groß dargestellt wird |
| Ü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 Hauptüberschrift |
| Text transform | Normal: Der Text wird so dargestellt, wie Sie den Text im Feld Überschrift eingetragen haben. Lowercase: Alle Buchstaben werden in Kleinbuchstaben umgewandelt. Upppercase: Alle Buchstaben werden in Großbuchstaben umgewandelt. |
| Inhalt | Text, der unterhalb der Überschrift angezeigt wird |
| Textfarbe | Farbe des Textes |
| Elementausrichtung | Bestimmt die Textausrichtung aller Elemente (Überschriften, Texte und Buttons) |
| Hintergrundbild | Bild, das als Hintergrund eingebunden wird Abhängig von der Größe des Bildes wird das Bild in der Höhe ggf. abgeschnitten |
| Bildskalierung | cover: Das Bild nimmt die gesamte Breite ein contain: Die Breite des Bildes wird ans Fenster angepasst. Das Bild wird so skaliert, dass sein Seitenverhältnis beibehalten wird und es in den Inhaltsrahmen des Elements passt. Das gesamte Objekt wird so gestaltet, dass es den Rahmen ausfüllt, wobei das Seitenverhältnis beibehalten wird. Das Bild wird in einem grauen Container eingebunden:  |
| Farbüberlagerung | Farbe, die über das Bild gelegt wird |
| Transparenz | Deckkraft bzw. Transparenz der Farbe in Prozent Wenn Sie z. B. "30" eingeben, wird die Farbe mit einer Deckkraft von 30 % über das Bild gelegt |
| Maximale Höhe | Standardmäßig passt sich die Höhe an den Elementen an, die Sie einbinden. Beachten Sie, dass Schaltflächen ggf. nicht innerhalb des Bildes angezeigt werden, wenn die Höhe zu gering eingestellt ist. |
| Button 1 | Die Schaltfläche wird oberhalb von Button 2 angezeigt |
| Button 1 URL | Sie können hier relative Pfade eingeben, die auf Ihren eigenen Shop verweisen (z. B. /produkte/lebensmittel/). Oder Sie geben vollständige Pfade mit https ein, wie z. B. https://www.dixeno.de/ |
| Button 2 | Sie können hier relative Pfade eingeben, die auf Ihren eigenen Shop verweisen (z. B. /produkte/lebensmittel/). Oder Sie geben vollständige Pfade mit https ein, wie z. B. https://www.dixeno.de/ |
| Button 2 URL | Die Schaltfläche wird unterhalb von Button 1 angezeigt |
| Ganzes Banner mit der Button 1 URL verlinken | Wenn Sie diese Option aktivieren, ist das gesamte Banner mit allen seiner Elemente klickbar |
Ergebnis:
Icon
Zweck: Integriert ein SVG-Icon der Font Awesome-Familie, dessen Größe in Pixel standardmäßig 50 x 50 px ist. Die Icons werden dynamisch aus dem Ordnerout geladen. Wenn Sie in diesem Order Ihre eigenen Icons ablegen, können Sie neue Icons im Widget nutzen.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Icon | Wählen Sie das gewünschte Icon Die Präfixe der Icons geben Auskunft über den Stil des Icons: far_: Das Icon hat keine Füllfarbe, sondern nur eine normaldicke Rahmenfarbe (regular) fal_: Das Icon hat keine Füllfarbe, sondern nur eine dünne Rahmenfarbe (light) fas_: Das Icons hat eine Füllfarbe (solid) fab_: Social-Media-Icons (brand) |
| Iconfarbe | Farbe für Rahmen und Füllung (sofern vorhanden) des Icons |
| Icon Breite | Angabe in Pixeln Die Breite wird kalkuliert durch: width: calc(IhrePixelAngabe - 30%) |
| Icon Höhe | Angabe in Pixeln Die Höhe wird kalkuliert durch: height: calc(IhrePixelAngabe - 30%) |
| Icon in einem Kreis darstellen | Ein Kreis umgibt das Icon Achten Sie darauf, eine Breite (und ggf. Höhe) beim Icon anzugeben, die größer als 50 px ist. Nur dann wird der Kreis ansprechend dargestellt. |
| Kreisfarbe | Füll- und Rahmenfarbe für den Kreis |
| Überschrift | Überschrift, die beim Icon angezeigt wird |
| Überschriftfarbe | Farbe der Überschrift |
| Text | Text, der unterhalb der Überschrift angezeigt wird |
| Textfarbe | Farbe des Textes |
| Text ausrichten | Ausrichtung des Textes (dazu zählt nicht die Überschrift) |
| Iconposition | Position des Icons im Verhältnis zum Text |
Ergebnis:
Karussell
Zweck: Zeigt mehrere Bilder in einer Slideshow an, wobei der Slider gemäß einem Intervall die Bilder automatisch verschieben kann
Einstellungen:
| Option | Beschreibung |
|---|---|
| Bilder | Wählen Sie die Bilder, die im Karussell angezeigt werden sollen |
| URL | URL, auf die das Bild verlinkt Aktuell lassen sich nur URLs angeben, die ein www beinhalten. Die URL https://example.com würde z. B. nicht angenommen werden. Dafür aber die URL https://www.example.com oder |
| Intervall | Zeit in Sekunden, bis zum nächsten Bild gewechselt wird |
| Navigationspfeile anzeigen | Wenn Sie diese Option aktivieren, werden links und rechts im Karussell Pfeile für die Navigation angezeigt: |
| Navigationspunkte anzeigen | Wenn Sie diese Option aktivieren, werden im unteren Bereich Punkte für die Navigation angezeigt: |
| Breite an Fenstergröße anpassen | Wenn Sie diese Option aktivieren, nimmt die Spalte die gesamte Fensterbreite ein. Es gibt keinen weißen Rand links und rechts von der Spalte. |
| Slidertype | Karussell: Nach dem letzten Bild folgt wieder das erste Bild ohne Unterbrechung Slider: Nach dem letzten Bild rutscht das Karussell nach links zum ersten Bild und beginnt von vorn |
| Anzahl Slides <= 576px | Definieren Sie, wie viele Bilder bei dieser Auflösung angezeigt werden sollen. Bei einer kleinen Auflösung sollten Sie 1 einstellen, damit die Elemente gut lesbar auf Handybildschirmen dargestellt werden. |
| Anzahl Slides <= 768px | Definieren Sie, wie viele Slides bei dieser Auflösung angezeigt werden sollen. |
| Anzahl Slides <= 992px | Definieren Sie, wie viele Bilder bei dieser Auflösung angezeigt werden sollen. |
| Anzahl Slides <= 1200px | Definieren Sie, wie viele Bilder bei dieser Auflösung angezeigt werden sollen. |
| Anzahl Slides <= 1400px | Definieren Sie, wie viele Bilder bei dieser Auflösung angezeigt werden sollen. |
| Anzahl Slides > 1400px | Definieren Sie, wie viele Bilder bei dieser Auflösung angezeigt werden sollen. |
| Aktive Slides zentrieren | Die Option greift nur beim Slidertyp Slider. Das erste Bild wird mittig angezeigt ohne das letzte Bild links von ihm: |
Ergebnis:
Kategorie
Zweck: Listet die gewählte Kategorie mit Kategoriebild und Verlinkung
Einstellungen:
| Option | Beschreibung |
|---|---|
| Horizontal | Kategorie wird mit Bild wie ein Balken eingefügt |
| Vertikal | Kategorie wird mit Bild wie eine Kachel eingefügt |
Hinweis: Wenn Sie die Option Vertikal wählen und die Kategorie einen größeren Platz einnimmt (z. B. nimmt die Kategorie 3 Spalten ein), müssen Sie sicherstellen, dass die Auflösung des Kategoriebilds groß genug ist, damit das Bild nicht verpixelt wird.
Ergebnis horizontal:
Ergebnis vertikal:
Spacer
Zweck: Fügt einen vertikalen Abstand zwischen zwei Zeilen bzw. zwei übereinanderliegenden Widgets ein und kann als Weißraum oder als Linie gestylt werden
Spalte
Zweck: Fügt eine Spalte für die Anordnung der Widgets ein
Einstellungen:
| Option | Beschreibung |
|---|---|
| Hintergrundfarbe | Farbe des Spaltenhintergrunds |
| Hintergrundbild | Bild, das die gesamte Spalte einnimmt |
| Hintergrundbild fixieren | Fixiert das Hintergrundbild und erweckt beim Scrollen den Anschein, die Inhalte der Spalte würden über das Hintergrundbild geschoben. |
| Farbüberlagerung | Farbe, die auf das Bild gelegt wird |
| Transparenz | 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 |
| Breite an Fenstergröße anpassen | Wenn Sie diese Option aktivieren, nimmt die Spalte die gesamte Fensterbreite ein. Es gibt keinen weißen Rand links und rechts von der Spalte. |
| Inhalt in Containerbreite darstellen | Wenn Sie diese Option aktivieren, ist die Spalte so breit wie der restliche Inhalt auf der Seite. Es wird ein weißer Rand links und rechts der Spalte angezeigt. |
| Zeilenabstände zwischen den VCMS-Widgets (wenn über mehrere Zeilen angelegt) | Wenn Sie die Option aktivieren und mehrere Widgets untereinander platzieren, wird ein Abstand unterhalb eines Widgets eingefügt: Ohne diese Option werden Widgets ohne unteren Abstand in die Spalte eingefügt und grenzen somit direkt aneinander |
| Keine Abstände zwischen den VCMS-Widgets | Wenn Sie die Option aktivieren und mehrere Widgets unter- und nebeneinander platzieren, gibt es keine Abstände zwischen den Widgets: |
Tabs
Zweck: Fügt Kategorien als Registerkarten ein
Einstellungen:
Text
Zweck: Beinhaltet einen umfangreichen WYSIWYG-Editor, mit dem der Inhalt von CMS-Inhalten bis ins kleinste Detail gestaltet werden kann
Einstellungen:
| Option | Beschreibung |
|---|---|
| Inhalt | Inhalt, den Sie durch einen Editor beliebig mit Text und Bildern oder Videos gestalten können |
| Breite an Fenstergröße anpassen | Wenn Sie diese Option aktivieren, nimmt das Text-Widget die gesamte Fensterbreite ein. Es gibt keinen weißen Rand links und rechts von der Spalte (sofern das Widget die gesamte Zeile einnimmt). |
| Mehr lesen - Nach X Zeilen | Ab der hier eingegeben Zeile wird der Inhalt durch die Schaltfläche Mehr lesen unterbrochen. Erst wenn Sie auf die Schaltfläche klicken, sehen Sie den gesamten Inhalt: |
Zufälliger Artikel
Zweck: Ermöglicht es, einzelne zufällige Artikel aus einer Kategorie auf einer CMS-Seite anzuzeigen
Hinweis: Wenn das Widget keine Artikel mit den definierten Einstellungen in einer Kategorie findet (z. B. Artikel mit einem Mindestpreis von 50 Euro), zeigt das Widget standardmäßig einen Artikel aus dem gesamten Warensortiment zufällig an.
Einstellungen:
| Option | Beschreibung |
|---|---|
| Kategorie | Wählen Sie die Kategorie, von der ein Artikel zufällig angezeigt werden soll |
| Anzeigedauer | Zeit nachdem sich der Artikel ändern soll (0 = bei jedem Aufruf) |
| Min. Bestand | Nur Artikel, die mehr als den hier angegebenen Lagerbestand haben, werden angezeigt |
| Min. Preis | Nur Artikel, die mindestens den hier angegebenen Preis haben, werden angezeigt |
| Max. Preis | Nur Artikel, die höchstens den hier angegebenen Preis haben, werden angezeigt |
| Nur reduzierte Artikel | Wenn Sie diese Option aktivieren, werden nur Artikel, bei denen Sie einen Streichpreis (UVP ist größer als der Preis) definiert haben, angezeigt |
| Zufälligen Shop Artikel verwenden, wenn kein Kategorie Artikel gefunden wurde | Wenn Sie diese Option aktivieren, wird ein Artikel aus dem gesamten Warensortiment zufällig angezeigt Angaben zu Preisen, Bestand und reduzierter Artikel werden dann ignoriert. |
| Warenkorb-Button deaktivieren | Wenn Sie diese Option aktivieren, wird die Schaltfläche In den Warenkorb nicht angezeigt. Sie können aber immer auf den Artikel klicken, um zur Artikeldetailseite zu gelangen und dort den Artikel in den Warenkorb zu legen. |
Ergebnis:
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:
<div class="anchor-widget ">
<a class="d-block" id="IhrText"></a>
</div>
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- und CSS-Code 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:
