Widgets im Lieferumfang

Visual CMS bietet als Basis eine Vielzahl verschiedener Widgets, deren allgemeine Einstellungen im Folgenden genauer erläutert werden sollen. Daran anschließend folgt ein Kapitel zu den Möglichkeiten der Designeinstellungen für Widgets & Spalten, über welche sich das responsive Verhalten der Widgets in verschiedenen Auflösungen steuern lässt.

Aktion

Mit diesem Widget können dynamisch Artikel einer Aktion angezeigt werden. Aktionen werden im OXID eShop Administrationsbereich unter Kundeninformationen angelegt und verwaltet.

Widget-Aktion
Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Aktion
Hier wählen Sie die zuvor angelegte Aktion aus, indem Sie die ersten Buchstaben des Namens der gewünschten Aktion eintippen. Danach werden Ihnen passende Aktionen zur Auswahl angezeigt.
Titel
Über dieses Widget kann eine Überschrift gesetzt werden, deren Text hier festgelegt werden kann.
Kurzbeschreibung
Die Kurzbeschreibung bietet die Möglichkeit, unterhalb der Überschrift und oberhalb des Widget-Inhalts einen Text zu platzieren.
Anzahl
Mit der Anzahl bestimmen Sie, wie viele Artikel in einer Zeile angezeigt werden sollen.

Bemerkung

Die maximal mögliche Anzahl, bevor es zu Problemen mit dem Layout kommt, ist dabei vom verwendeten Template und der Breite des Widgets abhängig.

Anzeigeart
Über die Dropdown-Liste können für die Anzeige der Artikel verschiedene Layouts ausgewählt werden.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Artikel

Dieses Widget ermöglicht es, einzelne Artikel auf einer CMS-Seite zu platzieren.

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Artikel
Hier wählen Sie einen zuvor angelegten Artikel aus, indem Sie die ersten Buchstaben des Namens eintippen. Danach werden Ihnen passenden Artikel zur Auswahl angezeigt.
Anzeigeart
Das Feld gibt für die Anzeige der Artikel verschiedene Layouts zur Wahl.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Karussell / Slider

Mit dem Karussell bzw. dem Slider können mehrere Bilder in einer Slideshow angezeigt werden.

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Bilder
Die Bilder, die später angezeigt werden sollen, können hier hinzugefügt werden.

Klickt man rechts neben dem Feld auf die Schaltfläche, erscheint das Menü für die Mediathek. In diesem kann in der Registerkarte Medien aus einer Liste mit bereits in Visual CMS hochgeladenen Bildern ausgewählt werden. Außerdem können neue Bilder in der Registerkarte Upload hochgeladen werden.

Bemerkung

Die vordefinierte Breite bei Nutzung des Flow Themes beträgt hier 1140 Pixel (ohne die Option Fullwidth). Die Höhe des Widgets wird durch die Höhe des Bildes bestimmt.

Intervall
Das Intervall legt die Anzeigedauer pro Bild fest, bevor zum nächsten Bild gewechselt wird.
Navigationspfeile anzeigen
Falls aktiviert, werden links und rechts im Karussell Navigationspfeile angezeigt, über die zum nächsten oder zum vorherigen Bild gewechselt werden kann.
Navigationspunkte anzeigen
Durch Navigationspunkte, die unterhalb des Karussells angezeigt werden, ist sichtbar, wie viele Bilder es gibt und welches Bild gerade anzeigt wird. Außerdem kann darüber zu einem bestimmten Bild gesprungen werden.
Fullwidth
Die Option ermöglicht die Anzeige des Widgets in voller Breite.

Bemerkung

Bei der Nutzung ist zu beachten, dass ein Bild mit einer Breite von ca. 2000 Pixel genutzt werden sollte, um ein Hochskalieren bei Besuchern mit hohen Bildschirmauflösungen zu vermeiden. Die Bildhöhe wird vom Widget auf 272 Pixel festgelegt.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Kategorie

Mit dem Widget für Kategorie kann zum Beispiel eine CMS-Seite erstellt werden, die als Landing Page für eine Warenkategorie bestimmt sein soll. Für jede Kategorie, die angezeigt werden soll, muss ein Kategorie-Widget angelegt werden (als Beispiel mit der Kategorie Bekleidung).

Einstellungen

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Kategorie
Hier wählen Sie eine zuvor angelegte Kategorie aus, indem Sie die ersten Buchstaben des Namens eintippen. Danach werden Ihnen passende Kategorien zur Auswahl angezeigt.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Galerie

Mit der Galerie können mehrere Bilder zu einer Galerie zusammengefasst werden.

Einstellungen

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Bilder
Die Bilder, die später angezeigt werden sollen, können hier hinzugefügt werden.

Klickt man rechts neben dem Feld auf die Schaltfläche, erscheint das Menü für die Mediathek. In diesem kann in der Registerkarte Medien aus einer Liste mit bereits in Visual CMS hochgeladenen Bildern ausgewählt werden. Außerdem können neue Bilder in der Registerkarte Upload hochgeladen werden.

Spalten
Hier kann festgelegt werden, wie viele Bilder pro Spalte angezeigt werden sollen.
Bezeichnung anzeigen
Bei Aktivierung wird unten über den Bildern jeweils eine Bezeichnung angezeigt, die aus dem Dateinamen der Bilder generiert wird.

Verknüpft mit:

  • Lightbox: Angeklickte Bilder der Galerie werden in einer Lightbox angezeigt. Zusätzlich kann in der Lightbox zum nächsten und vorherigen Bild gewechselt werden.
  • Bild URL: Werden Bilder mit dieser Option angeklickt wird, werden diese direkt über ihren Link aufgerufen und im Browser angezeigt.
Thumbnail anzeigen
Die Vorschaubilder werden für die Galerie verkleinert und auf eine einheitliche und quadratische Größe zugeschnitten.
Thumbnail-Größe
Hier kann die maximale Breite der Vorschaubilder festgelegt werden, wenn die darüber liegende Option Thumbnail anzeigen aktiviert ist.
Fullwidth
Die Option ermöglicht die Anzeige des Widgets in voller Breite.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Hero

Mit dem Hero-Widget kann ein Hero-Image erstellt werden. Dieses stellt eine besondere Art von Web-Banner dar. Es ist meist zentriert und nimmt die ganze Bildschirmbreite ein. Mit dem Widget ist es möglich, Text darüber zu platzieren, außerdem kann eingestellt werden, dass das Hero-Image beim Scrollen fixiert bleibt.

Einstellungen

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Überschrift
Der Text für die Überschrift wird hier eingegeben.
Inhalt
Hier ist es möglich, Text zu formatieren, aber auch Bilder, Tabellen, Links und Videos einzufügen. Zusätzlich ist es möglich in einer Quelltextansicht zu arbeiten.
Textfarbe
Die Schriftfarbe für die Überschrift und den Inhalt kann hier bestimmt werden. Ohne Angabe eines Wertes wird die Schriftfarbe des Templates verwendet.
Hintergrundfarbe
Die Farbe des Hintergrunds kann hier entweder über ein Farbfeld festgelegt oder als Hex-Schreibweise (#000000) abgebildet werden.
Hintergrundbild
Das Hintergrundbild kann hier hinzugefügt werden.

Tipp

Die vordefinierte Auflösung für das Flow Theme beträgt hier 1140×272 Pixel (ohne die Optionen Fullwidth, Fixierung oder an Fenstergröße anpassen). Soll die Höhe angepasst werden, kann dies über die Klasse dd-background per CSS erreicht werden.

Klickt man rechts neben dem Feld auf die Schaltfläche, erscheint das Menü für die Mediathek. In diesem kann in der Registerkarte Medien aus einer Liste mit bereits in Visual CMS hochgeladenen Bildern ausgewählt werden. Außerdem können neue Bilder in der Registerkarte Upload hochgeladen werden.

Hintergrundbild fixieren
Ist diese Option gesetzt, bleibt das Hintergrundbild beim Scrollen fixiert, während sich der Rest der Seite darüber bewegt. Dabei ist das Hintergrundbild in dem Bereich zu sehen, in dem sich das Widget befindet.

Tipp

Die empfohlene Auflösung beträgt hier ca. 2000x1200 Pixel. Wenn Fullwidth nicht gewünscht ist, kann beim Flow Theme statt vorgegebenem background-size:cover; dann background-size:1140px; eingesetzt werden. Für die Runterskalierung des Bildes bei Bildschirmauflösungen kleiner 1140 Pixel (940px > 720px > stufenlos) empfielt sich @media einzusetzen.

Widget-Höhe an Fenstergröße anpassen
Hierbei wird das Hintergrundbild in seiner vollen Höhe angezeigt. Dies kann für Landing Pages genutzt werden, auf denen nur der Hero sichtbar sein soll.

Bemerkung

Bei der Nutzung ist zu beachten, dass ein Bild mit hoher Auflösung (ca. 2000x1200 Pixel) genutzt werden sollte, um ein Hochskalieren bei Besuchern mit hohen Bildschirmauflösungen zu vermeiden.

CTA (Call-To-Action)
Mit einer Call-To-Action soll der Besucher durch gezielte Platzierung dazu aufgefordert werden, eine erwünschte Handlung, wie “Jetzt kaufen”, zu vollziehen. Erreicht wird dies, indem der Besucher nach einer Werbebotschaft noch einmal direkt angesprochen wird. Damit soll noch ein weiterer, vielleicht letzter nötiger Impuls gegeben werden, das Produkt zu kaufen oder sich weiter damit zu beschäftigen, ohne den Kunden zu bevormunden.

Empfohlen wird die Call-To-Action kurz und prägnant zu gestalten.

CTA URL
Hier kann der Link zur Call-To-Action Zielseite angegeben werden.
Fullwidth
Die Option ermöglicht die Anzeige des Widgets in voller Breite.

Tipp

Bei der Nutzung ist zu beachten, dass ein Bild mit einer Breite von ca. 2000 Pixel genutzt werden sollte, um ein Hochskalieren bei Besuchern mit hohen Bildschirmauflösungen zu vermeiden. Die Bildhöhe wird vom Widget auf 272 Pixel festgelegt.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Icon

Visual CMS liefert eine Vielzahl an Icons mit, die mit dem Icon-Widget genutzt werden können.

Einstellungen

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Icon
Welches Icon angezeigt werden soll, kann hier aus einer Liste ausgewählt werden.
Position
Das Icon kann innerhalb seiner Spalte oben oder links positioniert werden.
Farbe
Die Farbe des Icons kann hier entweder über ein Farbfeld festgelegt oder als Hex-Schreibweise (#000000) abgebildet werden.
Icon in einem Kreis darstellen
Durch diese Einstellung nimmt das Icon die Hintergrundfarbe der Seite an. Der Kreis um das Icon wird mit der zuvor gewählten Farbe versehen.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Bild

Bilder lassen sich über das Bild-Widget auf der CMS-Seite einfügen.

Um ein einfaches Bild auf eine CMS-Seite hinzuzufügen, befindet sich neben der Schaltfläche Widget hinzufügen eine weitere Schaltfläche. Bei deren Nutzung wird auf die Anzeige von weiteren Widget-Einstellungen verzichtet. Diese können aber nach der Platzierung nachträglich noch angepasst werden.

Einstellungen

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Bilder
Die Bilder, die später angezeigt werden sollen, können hier hinzugefügt werden.

Klickt man rechts neben dem Feld auf die Schaltfläche, erscheint das Menü für die Mediathek. In diesem kann in der Registerkarte Medien aus einer Liste mit bereits in Visual CMS hochgeladenen Bildern ausgewählt werden. Außerdem können neue Bilder in der Registerkarte Upload hochgeladen werden.

Bezeichnung
An dieser Stelle kann der Alt-Text des Bildes festgelegt werden.

Das Alt-Attribut soll sehbehinderten Menschen den Inhalt des Bildes vermitteln. Inzwischen hilft der Alt-Text aber auch Robots (Software zur Indexierung von Webseiten) von Suchmaschinen, die Bilder und damit den Inhalt der Webseite besser zu verstehen. Es ist somit ein Kriterium für die Onpage-Suchmaschinenoptimierung.

Bezeichnung anzeigen
Bei Aktivierung wird unterhalb den Bildern jeweils die Bezeichnung angezeigt, welche im Feld Bezeichnung angegeben wurde.

Verknüpft mit

  • Lightbox

    Angeklickte Bilder der Galerie werden in einer Lightbox angezeigt. Zusätzlich kann in der Lightbox zum nächsten und vorherigen Bild gewechselt werden.

  • Bild-URL

    Werden Bilder mit dieser Option angeklickt, werden diese direkt über ihren Link aufgerufen und im Browser angezeigt.

  • Keine Verknüpfung

    Ist diese Einstellung gesetzt, wird auf der CMS-Seite ein einfaches Bild angezeigt, welches nicht anklickbar ist.

URL
Hier kann das Bild mit einer URL verlinkt werden, wenn Bild URL unter Verknüpft mit ausgewählt wurde.
Im neuen Fenster öffnen
Durch diese Option wird beim Klicken auf das Bild ein Link in einem neuen Fenster geöffnet, wenn Bild URL unter Verknüpft mit ausgewählt und in der Option URL ein Link definiert wurde.
Thumbnail anzeigen
Die Vorschaubilder werden für die Galerie verkleinert und auf eine einheitliche und quadratische Größe zugeschnitten.
Thumbnail-Größe
Die maximale Breite der Vorschaubilder kann hier festgelegt werden. Die darüber liegende Option Thumbnail anzeigen muss dafür aktiviert sein.
Fullwidth
Die Option ermöglicht die Anzeige des Widgets in voller Breite.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Zufälliger Artikel

Dieses Widget ermöglicht es, einzelne zufällige Artikel aus einer Kategorie auf einer CMS-Seite anzuzeigen.

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Kategorie
Hier wählen Sie die gewünschte Kategorie aus, aus welcher die Artikel angezeigt werden sollen.
Anzeigedauer
Die Anzeigedauer legt fest, wie lange in Minuten Artikel angezeigt werden, bevor diese durch zufällige andere Artikel ausgetauscht werden. Per Default steht der Wert auf 0, wodurch Artikel nur bei einem erneuten Seitenaufruf wechseln.
Min. Bestand
Bestimmt, wie groß der im Artikel hinterlegte Lagerbestand sein muss, um als Artikel angezeigt zu werden.
Min. Preis
Der minimale Preis, den ein Artikel haben muss, um angezeigt zu werden.
Max. Preis
Der maximale Preis, den ein Artikel haben muss, um angezeigt zu werden.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Spacer

Mit dem Spacer ist es möglich, einen vertikalen Abstand zwischen zwei Zeilen bzw. zwei übereinanderliegenden Widgets festzulegen.

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Abstand
Die Größe des Abstands kann hier in Pixeln angegeben werden.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Tabs

Über das Widget Tabs lassen sich eine oder mehrere Kategorien in Tabs organisieren.

Einstellungen

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Tabs
Die in den Tabs gewünschten Kategorien können hier ausgewählt werden. Dabei ist es möglich, mehrere Kategorien hintereinander zu setzen. Die Reihenfolge hier bestimmt auch die Reihenfolge für die Anzeige der Tabs.
Anzahl
Mit der Anzahl wird bestimmt, wie viele Artikel in einer Zeile platziert werden sollen. Die maximal mögliche Anzahl wird dabei vom Template beschränkt.
Anzeigeart
Das Feld gibt für die Anzeige der Artikel verschiedene Layouts zur Wahl.
Aussehen
Hier kann das Aussehen der anklickbaren Kategorien geändert werden. Entweder haben diese die Form von Tabs oder Schaltflächen.
Animation
Wird zwischen Kategorien gewechselt, kann hier eingestellt werden, ob die Artikel sofort angezeigt oder über eine kurze Animation eingeblendet werden.
Tabs bündig ausrichten
Ist diese Option gesetzt, werden die Tabs auf die volle Breite der Seite verteilt.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Text

Das Widget Text beinhaltet einen umfangreichen WYSIWYG-Editor, mit dem der Inhalt von CMS-Inhalten bis ins kleinste Detail gestaltet werden kann.

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Inhalt
Hier ist es möglich Text zu formatieren, aber auch Bilder, Tabellen, Links und Videos einzufügen. Zusätzlich kann in einer Quelltextansicht gearbeitet werden.
Hintergrundfarbe
Die Farbe des Hintergrunds kann hier entweder über ein Farbfeld festgelegt, oder als Hex-Schreibweise (#000000) abgebildet werden.
Hintergrundbild
Das Hintergrundbild kann hier hinzugefügt werden.

Klickt man rechts neben dem Feld auf die Schaltfläche, erscheint das Menü für die Mediathek. In diesem kann in der Registerkarte Medien aus einer Liste mit bereits in Visual CMS hochgeladenen Bildern ausgewählt werden. Außerdem können neue Bilder in der Registerkarte Upload hochgeladen werden.

Hintergrundbild fixieren
Ist diese Option gesetzt, bleibt das Hintergrundbild beim Scrollen fixiert, während sich der Rest der Seite darüber bewegt. Dabei ist das Hintergrundbild in dem Bereich zu sehen, in dem sich das Widget befindet.
Fullwidth
Die Option ermöglicht die Anzeige des Widgets in voller Breite.

Tipp

Bei der Nutzung ist zu beachten, dass ein Bild mit hoher Auflösung (ca. 2000x1200 Pixel) genutzt werden sollte, um ein Hochskalieren bei Besuchern mit hohen Bildschirmauflösungen zu vermeiden.

Auf die Registerkarte Designeinstellungen wird im späteren Kapitel Designeinstellungen für Widgets eingegangen.


Baumstruktur

Über das Baumstruktur-Widget kann eine hierarchische Navigation eingefügt werden. Deren Struktur und Inhalt kann über die Baumstruktur Konfiguration festgelegt werden.

Typ
Über das Feld können Sie nachträglich den Widget-Typ ändern.
Root Knoten
Hier kann die oberste Ebene der Navigation ausgewählt werden. Nur die Punkte unterhalb des gewählten CMS-Inhaltes werden in der Navigation angezeigt.
Titel
Eine Überschrift, welche über dem Widget angezeigt wird, kann hier festgelegt werden kann.

Die Navigation kann beispielhaft wie folgt in eine Seite eingefügt werden:

Das Ergebnis würde wie folgt aussehen:

Tipp

Das Widget Baumstruktur muss auf jeder Unterseite enthalten sein, damit dort die Navigation ebenfalls auftaucht. Um sich die Arbeit zu erleichtern, empfiehlt es beim Erstellen der Unterseiten die Vorlagenfunktion von Visual CMS zu nutzen.