Kategorie Listing

Wähle einen individuellen Einstiegspunkt für das Element- das ist besonders sinnvoll, wenn Du eine bestimmte Kategorie-Struktur zum Beispiel auf der Startseite darstellen möchtest.

Füge benutzerdefinierte CSS-Klassen für benutzerdefiniertes Styling hinzu. Mehrere Klassen können mit einem Leerzeichen getrennt hinzugefügt werden. Keine Punkte vor den Klassennamen.

Wähle zwischen verschiedenen Layout-Typen für das Kategorie Listing Bild + Text | Bild | Text

Bestimmt den inneren Abstand zwischen den einzelnen Kategorie-Kacheln.

Definiere die Anzahl an Kategorien pro Zeile für jeden Viewport.

Insbesondere auf mobilen Geräten kann die Auflistung der Kategorien sehr viel vertikalen Raum einnehmen. Um das zu vermeiden kannst Du pro Viewport bestimmen, ob das Kategorie-Listing als Slider angezeigt wird. Die Anzahl der Kategorien pro Zeile gibt dann die Anzahl gleichzeitig sichtbarer Kacheln im Slider an. Tipp: Es können auch Kommazahlen für die Kategorien pro Zeile eingetragen werden, sodass der Slider die nächste Kacheln teilweise anzeigt. Das suggeriert dem Kunden, dass es hier noch mehr Kategorien zu entdecken gibt.

Hintergrundfarbe der Kategorie Listing Kachel.

Rahmen zur Umrandung der Kategorie Listing Kachel.

Fügt einen inneren Abstand zur Kategorie Kachel hinzu. Die hinterlegte Hintergrundfarbe wird um das Kategoriebild herum sichtbar sein.

Fügt einen Randradius für die Kanten der Kategorie Listing Kachel hinzu. Beachte, dass das Bild ebenfalls einen individuellen Randradius haben kann.

Durch verschiedene Mouse-Over und Mouse-Out Effekte lässt sich die Sichtbarkeit des Inhalts auf der Kategorie Kachel steuern. So kann der Inhalt beispielsweise erst sichtbar werden, wenn sich die Maus darüber befindet - oder verschwindet, wenn die Maus über das Element bewegt wird, sodass das Kategoriebild komplett sichtbar wird.

Wähle zwischen der allgemeinen Text-Schriftfamilie oder der Überschriften-Schriftfamilie.

Definiert die horizontale Ausrichtung des Textes – hauptsächlich sichtbar, wenn eine Minimale Breite (px, %) für das Textelement festlegen.

Die Schriftgröße des Textelements. Die Schriftgröße wird mit der Größe des Viewports skaliert und kann auf kleineren Bildschirmen kleiner erscheinen.

Definiert die Schriftstärke des Textes. Achte darauf, Schriftstile zu verwenden, die in der verwendete Schriftart vorhanden sind.

Werden Schriftschnitte abgerufen, welche die Schrift nicht ausliefert, wenden Browser das Näherungsverfahren an.

Die Farbe des Textes auf dem Text Element.

Die Hintergrundfarbe des Text Elements.

Beachten auch das Alphakanalfeld in der Farbauswahl, um teilweise transparente Hintergründe zu erstellen.

Mit der Hintergrundunschärfe kann alles hinter dem Text Element mit dem eingegebenen Wert in Pixeln unscharf gemacht werden. Der Effekt ist nur sichtbar, wenn über die Farbauswahl eine transparente oder teilweise transparente Hintergrundfarbe ausgewählt wurde. Beispiel:

Definiert, ob sich das Textelement auf oder neben dem Bild befindet.

Diese Option ist nur verfügbar, wenn der Layouttyp auf Bild + Text eingestellt ist.

Die horizontale Ausrichtung bestimmt zusammen mit der vertikalen Ausrichtung die grundlegende Platzierung des Inhalts auf dem Bild.

Die vertikale Ausrichtung bestimmt zusammen mit der horizontalen Ausrichtung die grundlegende Platzierung des Inhalts auf dem Bild.

Die minimale Breite bestimmt, wie breit das Textelement mindestens sein muss.

Diese Einstellung erzeugt in Verbindung mit der Maximale Breite (px, %) eine dynamische Breite zwischen minimaler und maximaler Breite.

Die maximale Breite bestimmt, wie breit das Textelement höchstens sein darf.

Diese Einstellung erzeugt in Verbindung mit der Maximale Breite (px, %) eine dynamische Breite zwischen minimaler und maximaler Breite.

Bestimmt die Innenabstände im Text-Element Container und fällt vor allem dann auf, wenn für diesen Container eine Hintergrundfarbe eingestellt wurde.

Sorgt dafür, dass der Text-Element Container nicht am Bildrand klebt und bestimmt zudem die genaue Positionierung abhängig von der vertikalen und horizontalen Ausrichtung.

Legt einen Rahmenradius für den Text-Element Container fest.

Beachte, dass dies nur sichtbar ist, wenn eine Hintergrundfarbe definiert wurde.

Definiert eine kleine Hover-Animation für das Textelement. Wähle zwischen Keine | Zeige Pfeil | Pfeilanimation.

Mit dem Anzeigemodus entscheidest Du, wie das Bild dargestellt werden soll:

• Füllen/Zugeschnitten: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.

• Beinhalten/Feste Höhe: Das Bild wird gestreckt und auf die Größe der Box angepasst. Es wird hierbei nicht beschnitten.

Gibt die Mindesthöhe des Elements an.

Gibt die horizontale Ausrichtung des Bildes innerhalb der Box des Elements an.

Gibt die vertikale Ausrichtung des Bildes innerhalb der Box des Elements an.

Durch die Option Hintergrundbild mit Farbe überlagern dämpfst Du das Kategoriebild nach belieben mit einer Teiltransparenten Farbe ab und machst so den Text auf dem Bild lesbarer.

Zusätzlich kannst Du dieses Overlay als Farbverlauf zu transparent einstellen und, sofern aktiviert, einen Winkel für diesen Farbverlauf wählen. Beispiel:

Definiere einen individuellen Randradius für das Bild.

Beachte, dass das gesamte Element ebenfalls einen Randradius haben kann.

Bietet Dir die Möglichkeit, einen kleinen Hover-Effekt auf das Element anzuwenden.