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:

---

Letztes Update: 1. Juli 2026 16:30:51