ヽ༼ຈل͜ຈ༽ﾉ RiOT Elementekatalog ヽ༼ຈل͜ຈ༽ﾉ

Unter dieser Auflistung finden sich allgemeine Attribute, die an unterschiedlichen Elementen eingestellt werden können. Sie dient als Übersicht und Referenz für diese häufig verwendeten Attribute. Elementspezifische Attribute und Einstellungen sind unter den anderen Tabs bei den jeweiligen Elementen erklärt.

Artikelnummern öffnen

Hier können sechsstellige Artikelnummern, durch ";" getrennt, eingegeben werden. Ausverkaufte Artikel werden dabei herausgefiltert und nicht ausgegeben.

Artikel aus Produktliste öffnen

Hier kann eine Produktliste ausgewählt werden, um die darin enthaltenen Produkte auszugeben. Ausverkaufte Artikel werden dabei herausgefiltert und nicht ausgegeben.

Hintergrundfarbe öffnen

Hier kann eine Hintergrundfarbe für das Element ausgewählt werden. Diese kann direkt als HEX oder RGBA Wert eingetragen, oder per Colorpicker ausgewählt werden.

Hintergrundbild öffnen

Hier kann ein Hintergrundbild für das Element gewählt werden. Der Pfad kann direkt angegeben oder über das Scene7 Menü ausgewählt werden. Optional können unterschiedliche Bilder für verschiedene Bildschirmgrößen gewählt werden. Wird nur das oberste Feld ausgefüllt, wird das Bild auf allen Bildschirmgrößen angezeigt.

Bildwiederholung bei Hintergrundbildern öffnen

Hier kann eingestellt werden, ob sich das Hintergrundbild wiederholen soll, wenn das Bild kleines ist, als das Element, für das es den Hintergrund bilden soll. Wird hauptsächlich bei Hintergrundmustern genutzt, sodass nur ein "Schnipsel" des Musters abgelegt werden muss.

Buttongröße öffnen

Hier kann die Größe des Buttons angepasst werden. Zur Auswahl stehen "standard" und "kleiner".

Buttontyp öffnen

Hier kann die Darstellung des Buttons angepasst werden. Zur Auswahl stehen "standard" (grauer Button, weiße Schrift), "primary" (roter Button, weiße Schrift) und "cta-button" (weißer Button, graue Schrift, rotes Efa).

Bildpfad öffnen

Der Bildpfad kann direkt angegeben oder über das Scene7 Menü ausgewählt werden. Optional können unterschiedliche Bilder für verschiedene Bildschirmgrößen gewählt werden. Wird nur das oberste Feld ausgefüllt, wird das Bild auf allen Bildschirmgrößen angezeigt.

Lazyloading öffnen

Hier kann eingestellt werden, ob das Bild nachgeladen werden soll, oder nicht. Bilder nachzuladen ist die Standardeinstellung, die auch aus Performancesicht empfohlen wird. Wenn für unterschiedliche Bildschirmauflösungen verschiedene Bilder angezeigt werden sollen, muss Lazyloading aktiv sein.

Link-URL öffnen

Hiermit kann ein Element verlinkt werden. Der (komplette) Pfad ist immer mit einem vorangestellten "/" anzugeben, wenn es sich um einen Link innerhalb unserer (sheego-)Seite handelt. Handelt es sich um einen Link auf externe Seiten, ist die komplette URL anzugeben ("https://www.google.de").

Link-Typ öffnen

Hier kann eingestellt werden, ob es sich um einen normalen Link ("Standardverlinkung") handelt, ob sich die Seite in einem neuen Tab öffnen soll ("neuer Tab"), oder ob es sich um einen "Videolayer" handelt. Bei Letzterem muss als "Link-URL" entweder eine komplette Scene7-Video-URL angegeben werden oder die ID eines Youtube-Videos.

Außenabstand nach unten öffnen

Hier kann ein Außenabstand ("außerhalb des Containers") nach unten, optional unterschiedliche für verschiedene Bildschirmgrößen, eingetragen werden. Wird hier nichts eingestellt, gibt es keine Abstände.

Außenabstand nach oben öffnen

Hier kann ein Außenabstand ("außerhalb des Containers") nach oben, optional unterschiedliche für verschiedene Bildschirmgrößen, eingetragen werden. Wird hier nichts eingestellt, gibt es keine Abstände.

Innenabstand nach unten öffnen

Hier kann ein Innenabstand ("innerhalb des Containers") nach unten, optional unterschiedliche für verschiedene Bildschirmgrößen, eingetragen werden. Wird hier nichts eingestellt, gibt es keine Abstände.

Innenabstand nach oben öffnen

Schriftfarbe öffnen

Hier kann eine Farbe für den Text ausgewählt werden. Diese kann direkt als HEX oder RGBA Wert eingetragen, oder per Colorpicker ausgewählt werden.

Schriftgröße öffnen

Hier kann die Schriftgröße und -Art eingestellt werden. Die genauen Spezifikationen zu den Typen sind dem Styleguide zu entnehmen.

Schriftgewicht öffnen

Hier kann die "Dicke" der Schrift gewählt werden. Zur Auswahl stehen "thin", "regular" und "bold"(=fett).

Textausrichtung öffnen

Hier wird die Textausrichtung gewählt. Einstellungsmöglichkeiten sind links- bzw. rechtsbündig sowie zentriert oder als Blocksatz.

Text öffnen

Hier wird der Text eingegeben.

Econda-Tracking öffnen

Hier wird das Tracking für das Element eingestellt.

Element verstecken öffnen

Hier kann eingestellt werden, auf welchen Bildschirmgrößen das Element angezeigt oder versteckt werden soll. Wird hier nichts eingestellt, wird das Element auf jeder Bildschirmgröße angezeigt.

in neuer Zeile öffnen

Hier kann Eingestellt werden, ob das Element in einer eigenen "Zeile" stehen soll. Dies kann z.B. bei inline-Elementen wie Text genutzt werden, um einen Umbruch zu erzwingen.

Produktslider öffnen

Beschreibung zu Produktslider-Elementen

Hoverkachel öffnen

Beschreibung zu Hoverkachel-Elementen

Produktkachel öffnen

Beschreibung zu Produktkachel-Elementen

Raster öffnen

Mit den Raster-Elementen ist es möglich, Seitenbereiche in mehrere Einzelbereiche aufzuteilen, denen allen ein bestimmter prozentualer Anteil der Gesamtbreite der Seite zur Verfügung gestellt wird. Innerhalb dieser Einzelbereiche können dann neue Elemente eingesetzt werden, um so z.B. ein Bild neben einem Text anzuzeigen.

Die Raster-Elemente selbst haben keine Konfigurationsmöglichkeiten. Einstellungen wie z.B. Sichtbarkeit der einzelnen Bereiche sind dann im jeweils eingefügten Element selbst einzustellen.
Die Anzahl der Bereiche, in die aufgeteilt wird, sowie deren jeweiliger prozentualer Anteil an der Gesamtbreite der Seite ist in jedem Raster-Element vordefiniert. Die Aufteilung ergibt sich aus dem Namen des Elementes.

Erklärung zur Benamung und zur Aufteilung der Elemente:
Grundsätzlich ist die Seite in 12 Bootstrap-Bereiche eingeteilt. Jedem Element wird eine variable Anzahl dieser 12 Bereiche zugewiesen, die es einnehmen kann.
Um die Lesbarkeit der Texte und die Erkennbarkeit der Bilder auf jedem Gerät zu wahren, werden fast jedem Element auf kleineren Bildschirmgrößen eine höhere Anzahl der 12 Bereiche zur Verfügung gestellt, sodass z.B. auf einem Smartphone keine 4 winzigen Teaser nebeneinander "gequetscht" werden.

Beispiel: Template = 3-bereiche / xs-12_sm-3-3-6.tpl
Da das Template unter dem Ordner "3-bereiche" liegt, können hier drei Elemente eingefügt werden.
Auf der kleinsten Bildschirmgröße ("xs"-Breakpoint) werden jedem eingefügten Element 12 Bereiche Platz zugewiesen (xs-12). Das führt dazu, dass alle hier eingefügten Elemente "auf mobile" eine eigene Zeile erhalten.
Oberhalb dieses Breakpoints ("sm") werden den eingefügten Elementen dann jeweils 3, 3 und 6 (=ingesesamt 12) Bereiche zugewiesen (sm-3-3-6). Das heißt, dass ab diesem Punkt die Elemente alle in einer Zeile angezeigt werden.

Darüber hinaus gibt es noch die speziellen Raster für Teaser (Kirsche, Traube, Apfel). Deren genaue Aufteilung ist dem jeweiligen Styleguide zu entnehmen.

Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.
Raster-Übersicht

Dynamisches Raster öffnen

Beim dynamischen Raster besteht die Möglichkeit, die Einzelbereiche der Seite in Hinblick auf die 12 Bootstrap-Bereiche für die verschiedenen Devices frei aufzuteilen. Dabei sind folgende zwei Schritte zu beachten:
Schritt 1: Unter der Grundeinstellung werden die Anzahl der Blöcke bestimmt und auch die Spaltenanzahl pro Block. Es muss vorher bedacht werden, wie der Soll-Zustand des Rasters aussehen soll. Damit der komplette Bereich einer Seite genutzt wird, muss die Blockanzahl x Spaltenanzahl pro Block immer 12 ergeben.
Beispiel: Blockanzahl 3 x Spaltenanzahl 4 = 12

Schritt 2: Nach erstmaligen Speichern werden die Blöcke zunächst gleich behandelt. Bei erneutem Bearbeiten kommt der Tab „Erweitert“ hinzu. Dieser gibt einem die Möglichkeit, die Spaltenanzahl der einzelnen Blöcke für verschiedene Devices einzuteilen. Jedoch gilt auch hier, dass der Soll-Zustand vorher bedacht werden muss, d.h. auch hier sollt sich für das jeweilige Device eine Spaltenanzahl von 12 ergeben.
Beispiel: Erweiterte Funktion für MD geändert in 5-2-5 Blockanzahl bleibt wie zuvor 3, nur die Spaltenaufteilung kann für XS, S, SM und MD neu eingeteilt werden (unterschiedliche Spaltenaufteilung bei den jeweiligen Devices ist möglich).

Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

Bild öffnen

Die CTA-Elemente befinden sich in der Templateauswahl unter Grundelemente > Cta > button.tpl, efa_link.tpl, unterstreichen_link.tpl.

Hierbei handelt es sich um Grundbausteine, die in offenen Platzhaltern eingesetzt werden können. Es gibt folgende Elemente sowie deren Konfigurationsreiter und -möglichkeiten:

Bild öffnen

Beschreibung Bild

Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

Hoverbild öffnen

Beschreibung Hoverbild

Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

Seitenhintergrund öffnen

Beschreibung Seitenhintergrund

Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

CTA öffnen

Die CTA-Elemente befinden sich in der Templateauswahl unter Grundelemente > Cta > button.tpl, efa_link.tpl, unterstreichen_link.tpl.

Hierbei handelt es sich um Grundbausteine, die in offenen Platzhaltern eingesetzt werden können. Es gibt folgende Elemente sowie deren Konfigurationsreiter und -möglichkeiten:

Button öffnen

Bei den CTA-Buttons handelt es sich um Buttons mit angerundeten Ecken in verschiedenen Ausprägungen, die immer einen Pfeil ('>') vor dem Text haben.

Reiter Sichtbarkeit:
Hier kann eingestellt werden, auf welchen Bildschirmgrößen das Element angezeigt oder versteckt werden soll. Die verschiedenen Bildschirmgrößen sind in Form unserer regulären Bootstrap-Breakpoints definiert. Wird hier nichts eingestellt, wird das Element auf jeder Bildschirmgröße angezeigt.
Reiter Abstände:
Hier können vom Element ausgehende Abstände nach oben oder unten, optional unterschiedliche für verschiedene Bildschirmgrößen, eingetragen werden. Wird hier nichts eingestellt, gibt es keine Abstände.
Reiter Link:
Dieses Element kann verlinkt und entsprechend vertrackt werden. Im folgenden die Einstellungsmöglichkeiten:
Link-Typ: Hier kann eingestellt werden, ob die Verlinkung regulär (im selben Tab) aufgerufen wird, ob ein neuer Tab geöffnet werden soll oder ob es sich um einen Videolayer handelt.
Link-URL: ToDo! Wurde beim Link-Typ ein Videolayer gewählt, muss hier die entsprechende Video-ID aus der Youtube-URL eingetragen werden.
Reiter Text:
Hier wird der Text eingegeben, den das Element enthalten soll.
Reiter CTA:
Unter Buttontyp kann gewählt werden zwischen "standard" (grauer Button mit weißer Schrift), "primary" (roter Button mit weißer Schrift) und "cta-button" (weißer Button mit rotem Pfeil und grauer Schrift).
Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

Efa-Link öffnen

Beim text-link text-link--efa handelt es sich um einen Textlink, der immer einen Pfeil ('>') vor dem Text hat.

Reiter Sichtbarkeit:
Hier kann eingestellt werden, auf welchen Bildschirmgrößen das Element angezeigt oder versteckt werden soll. Die verschiedenen Bildschirmgrößen sind in Form unserer regulären Bootstrap-Breakpoints definiert. Wird hier nichts eingestellt, wird das Element auf jeder Bildschirmgröße angezeigt.
Reiter Abstände:
Hier können vom Element ausgehende Abstände nach oben oder unten, optional unterschiedliche für verschiedene Bildschirmgrößen, eingetragen werden. Wird hier nichts eingestellt, gibt es keine Abstände.
Reiter Link:
Dieses Element kann verlinkt und entsprechend vertrackt werden. Im folgenden die Einstellungsmöglichkeiten:
Link-Typ: Hier kann eingestellt werden, ob die Verlinkung regulär (im selben Tab) aufgerufen wird, ob ein neuer Tab geöffnet werden soll oder ob es sich um einen Videolayer handelt.
Link-URL: ToDo! Wurde beim Link-Typ ein Videolayer gewählt, muss hier die entsprechende Video-ID aus der Youtube-URL eingetragen werden.
Reiter Text:
Hier wird der Text eingegeben, den das Element enthalten soll.
Reiter CTA:
Unter CTA-Typ kann gewählt werden zwischen "standard" (graue Schrift mit rotem Pfeil) und "weiß" (Schrift und Pfeil weiß).
Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

Unterstreichen-link öffnen

Dies ist das Standardelement für verlinkte Texte.

Reiter Sichtbarkeit:
Hier kann eingestellt werden, auf welchen Bildschirmgrößen das Element angezeigt oder versteckt werden soll. Die verschiedenen Bildschirmgrößen sind in Form unserer regulären Bootstrap-Breakpoints definiert. Wird hier nichts eingestellt, wird das Element auf jeder Bildschirmgröße angezeigt.
Reiter Abstände:
Hier können vom Element ausgehende Abstände nach oben oder unten, optional unterschiedliche für verschiedene Bildschirmgrößen, eingetragen werden. Wird hier nichts eingestellt, gibt es keine Abstände.
Reiter Link:
Dieses Element kann verlinkt und entsprechend vertrackt werden. Im folgenden die Einstellungsmöglichkeiten:
Link-Typ: Hier kann eingestellt werden, ob die Verlinkung regulär (im selben Tab) aufgerufen wird, ob ein neuer Tab geöffnet werden soll oder ob es sich um einen Videolayer handelt.
Link-URL: ToDo! Wurde beim Link-Typ ein Videolayer gewählt, muss hier die entsprechende Video-ID aus der Youtube-URL eingetragen werden.
Reiter Text:
Hier wird der Text eingegeben, den das Element enthalten soll.
Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

Slider öffnen

Mit dem Slider-Element können verschiedene andere Elemente in einen gemeinsamen Slider zusammengefasst werden, dabei ist es theoretisch egal ob es sich hierbei um eine Produktkachel, ein PL-Banner oder ein Bühne handelt.

Die Element Attribute

Anzahl Slides:
Hier kannst du einstellen wie viele Slides sichtbar sein sollen, default mäßig sind 4 Slides eingestellt.
Theme:
Es gibt zwei verschiedene Themes für den Slider die das Aussehen des Sliders beeinflussen.
Default: Zeigt einen Slider mit roten Punkten unten sowie graue Pfeile
Bühne: Zeigt einen Slider mit grauen Punkten und weißen Pfeilen
Auto Play
Hier kann das automatische abspielen des Sliders aktiviert oder deaktiviert werden
Navigation Inset
Die einstellung setzt die Pfeile über den Content, so das dieser über 100% des Platzes angezeigt werden und die Pfeile darüber liegen.
Items XS <480
Hier kannst du die Einstellen wie viele Elemente aufeinmal angezeigt werden sollen
Items S <768
Hier kannst du die Einstellen wie viele Elemente aufeinmal angezeigt werden sollen
Items SM <991
Hier kannst du die Einstellen wie viele Elemente aufeinmal angezeigt werden sollen
Items MD >991
Hier kannst du die Einstellen wie viele Elemente aufeinmal angezeigt werden sollen
VF-Störer anzeigen
Hier kannst du einstellen ob ein VF-Störer angezeigt werden soll im Slider oder nicht

Struktur öffnen

Die Struktur-Elemente befinden sich in der Templateauswahl unter Grundelemente > Struktur

Diese Elemente können verwendet werden, um Bereiche der Seite in bestimmte Raster aufzuteilen, neue Bereiche hinzuzufügen oder eine Trennlinie zwischen zwei Bereichen einzufügen.

Seitenraster öffnen

Die Raster-Elemente selbst haben keine Konfigurationsmöglichkeiten. Einstellungen wie z.B. Sichtbarkeit der einzelnen Bereiche sind dann im jeweils eingefügten Element selbst einzustellen.
Die Anzahl der Bereiche, in die aufgeteilt wird, sowie deren jeweiliger prozentualer Anteil an der Gesamtbreite der Seite ist in jedem Raster-Element vordefiniert. Die Aufteilung ergibt sich aus dem Namen des Elementes.

Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

Trennlinie öffnen

Eine Trennlinie kann in einen Platzhalter zwischen zwei Elementen eingefügt werden, um z.B. zwei Themen deutlich voneinander abzutrennen.

Reiter Sichtbarkeit:
Hier kann eingestellt werden, auf welchen Bildschirmgrößen das Element angezeigt oder versteckt werden soll. Die verschiedenen Bildschirmgrößen sind in Form unserer regulären Bootstrap-Breakpoints definiert. Wird hier nichts eingestellt, wird das Element auf jeder Bildschirmgröße angezeigt.
Reiter Abstände:
Hier können vom Element ausgehende Abstände nach oben oder unten, optional unterschiedliche für verschiedene Bildschirmgrößen, eingetragen werden. Wird hier nichts eingestellt, gibt es keine Abstände.
Reiter Element:
Mit Breite kann bestimmt werden, ob die Trennlinie über die gesamte Seitenbreite verläuft oder nur über 55% (in dem Fall wird sie zentriert).
Unter Höhe wird die Dicke der gestrichelten Linie eingestellt.
Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

Zeilentrenner öffnen

Ein Zeilentrenner macht aus einer Zeile mit einem Platzhalter zwei Zeilen mit jeweils einem Platzhalter.

Der Zeilentrenner selbst hat keine Konfigurationsmöglichkeiten. Einstellungen wie z.B. Sichtbarkeit der einzelnen Bereiche sind dann im jeweils eingefügten Element selbst einzustellen.
Im folgenden ist ein Beispielelement eingefügt, das zum Testen beliebig verändert werden kann.

Zeilentrenner_10 öffnen

Ein Zeilentrenner macht aus einer Zeile mit einem Platzhalter zehn Zeilen mit jeweils einem Platzhalter.

Der Zeilentrenner selbst hat keine Konfigurationsmöglichkeiten. Einstellungen wie z.B. Sichtbarkeit der einzelnen Bereiche sind dann im jeweils eingefügten Element selbst einzustellen.
Im folgenden ist ein Beispielelement eingefügt, das zum Testen beliebig verändert werden kann.

Text öffnen

Das Textelement befindet sich in der Templateauswahl unter Grundelemente > Text > text.tpl.

Hierbei handelt es sich um einen Grundbaustein, der in offenen Platzhaltern eingesetzt werden kann. Es gibt folgende Konfigurationsreiter und -möglichkeiten:

Reiter Sichtbarkeit:
Hier kann eingestellt werden, auf welchen Bildschirmgrößen das Element angezeigt oder versteckt werden soll. Die verschiedenen Bildschirmgrößen sind in Form unserer regulären Bootstrap-Breakpoints definiert. Wird hier nichts eingestellt, wird das Element auf jeder Bildschirmgröße angezeigt.
Reiter Hintergrund:
Hier kann eingestellt werden, ob der Text eine farbige Hinterlegung inklusive optionaler Transparenz haben soll. Auch dies kann optional für verschiedene Bildschirmgrößen angepasst werden. Wird hier nichts eingestellt, gibt es keine Hinterlegung.
Reiter Abstände:
Hier können vom Element ausgehende Abstände nach oben oder unten, optional unterschiedliche für verschiedene Bildschirmgrößen, eingetragen werden. Wird hier nichts eingestellt, gibt es keine Abstände.
Reiter Ausrichtung:
Hier kann die Textausrichtung festgelegt werden (Rechts- oder linksbündig, mittig zentriert oder Blocksatz).
Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

SEO Text HTML öffnen

Beschreibung SEO.

Video öffnen

Durch das Video Element können Videos von scene7 und youtube dargstellt werden.

Die Element Attribute

Video
Hier kann man einen scene7(media.sheego.de) oder youtube(youtube.com/1234) Link eingefügt werden, wodurch das Video auf der Seite angezeigt wird.
Für Videos von scene7 muss nur der Namen angegeben werden.
Video Poster
Hier kann ein Bild angegeben werden was als Platzhalter dient, wenn das Video noch nicht geladen ist oder es erst bei klick starten soll
Controls
Hier kann die Anzeige des Play/Pause Buttons usw. aktiviert oder deaktiviert werden
Autoplay
Hier kann der Automatische Start des Videos aktiviert oder deaktiviert werden
Sound
Hier kann der Sound des Videos aktiviert oder deaktiviert werden
Loop
Hier kann das Automatische wiederholden des Videos aktiviert oder deaktiviert werden
Layer
Hier kann das abspielen des Videos im Layer aktiviert oder deaktiviert werden

Inspiration Einstieg 1 öffnen

Beschreibung

Inspiration Einstieg 2 öffnen

Beschreibung

Inspiration Text öffnen

Beschreibung

Inspiration Buehne öffnen

Beschreibung

Neukunden Buehne öffnen

Beschreibung

Inspiration Raster öffnen

Beschreibung

Banner öffnen

PL-Banner-groß-Bild öffnen

PL-Banner-groß-Bild-Text öffnen

Beschreibung PL-Banner-groß-Bild-Text.

PL-Banner-klein-Bild öffnen

Buehne öffnen

ME Buehne im Slider öffnen

Beschreibung ME Buehne im Slider.

ME Buehne mit Textblock öffnen

Beschreibung ME Buehne mit Textblock.

ME Buehne Sale öffnen

Beschreibung ME Buehne Sale.

Startseiten Buehne öffnen

Beschreibung Startseiten Buehne.

Collage öffnen

Reiter Abstände:
Hier können vom Element ausgehende Abstände nach oben oder unten, optional unterschiedliche für verschiedene Bildschirmgrößen, eingetragen werden. Wird hier nichts eingestellt, gibt es keine Abstände.
HT Text
Hier kannst du den Text für die Headline des einzelnen Teasers setzen
Link Text
Hier kannst du den Text für die CTA setzen
BG Color Mobile:
Hier kannst du auswählen welche Farbe gesetzt werden soll.
Dafür kannst du HEX/RGB/RGBA werte eingeben oder die Farbe aus dem Colorpicker direkt wählen.
Um die Transparenz der Farbe einzustellen, gibt es rechts neben dem Colorpicker ein Auswahlschieber um die Transparenz auszuwählen.
Dabei wird der Farbwert automatisch in rgba umgewandelt, wobei der letzte Wert die Transparenz angibt (1 = 100%, 0.5 = 50% usw.)
BG Color:
Hier kannst du auswählen welche Farbe gesetzt werden soll.
Dafür kannst du HEX/RGB/RGBA werte eingeben oder die Farbe aus dem Colorpicker direkt wählen.
Um die Transparenz der Farbe einzustellen, gibt es rechts neben dem Colorpicker ein Auswahlschieber um die Transparenz auszuwählen.
Dabei wird der Farbwert automatisch in rgba umgewandelt, wobei der letzte Wert die Transparenz angibt (1 = 100%, 0.5 = 50% usw.)
Bild Tablet
Gibt das Bild an was für Tablet gezogen werden soll
Bild Desktop
Gibt das Bild an was für Desktop gezogen werden soll
Reiter Link:
Dieses Element kann verlinkt und entsprechend vertrackt werden. Im folgenden die Einstellungsmöglichkeiten:
Link-Typ: Hier kann eingestellt werden, ob die Verlinkung regulär (im selben Tab) aufgerufen wird, ob ein neuer Tab geöffnet werden soll oder ob es sich um einen Videolayer handelt.
Link-URL: ToDo! Wurde beim Link-Typ ein Videolayer gewählt, muss hier die entsprechende Video-ID aus der Youtube-URL eingetragen werden.

Besonderheiten C3

Streichpreis
Hier kannst du den Originalpreis des Artikels eintragen der durchgestrichen wird
Reduzierterpreis
Hier kannst du den Preis nach der reduzierung angeben

Kachel öffnen

Beschreibung zu Kachel-Elementen

Teaser öffnen

Die Teaser-Elemente befinden sich in der Templateauswahl unter Werbeflaechen > Teaser

Teaser-Elemente bestehen aus einer Kombination aus Bildern und Texten und haben verschiedene Darstellungsvarianten.

teaser_button öffnen

Beim teaser_button.tpl handelt es sich um ein Element, das ein Bild und einen CTA-Button enthält. Der Button liegt dabei immer über der Grafik mit einem Abstand von 20px zum unteren Rand. Die Höhe des Elements richtet sich nach der Bildgröße und die Breite nach dem Raster, in dem es eingesetzt ist. Laut Styleguide darf dieses Element in den folgenden Rastern verwendet werden: raster_traube_xs-12, raster_kirsche. Es gibt folgende Einstellungsmöglichkeiten:

Link-URL:
Gibt an, wohin der Teaser (inklusive CTA) verlinken soll.
Tracking:
Hier wird der Tracking-Pfad für den Teaser (inklusive CTA) angegeben.
Abstand nach unten:
Per Default ist ein 20px Abstand nach unten eingestellt. Dieser kann angepasst werden (ggf. auch unterschiedlich für verschiedene Auflösungen).
Bild-URL:
Hier wird das Bild für den Teaser festgelegt. Dabei können für verschiedene Auflösungen unterschiedliche Bilder abgelegt werden.
CTA-Text:
Der Text für den CTA-Button.
Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

teaser_pl_underline öffnen

Der teaser_pl_underline.tpl kann genutzt werden, um den obersten Artikel einer auswählbaren Produktliste als Teaser anzuzeigen. Dabei wird das Artikelbild automatisch als Teaserbild eingesetzt und automatisch auf die gewählte PL verlinkt. Laut Styleguide darf dieses Element in den folgenden Rastern verwendet werden: raster_traube, raster_kirsche. Es gibt folgende Einstellungsmöglichkeiten:

Produktliste:
Die gewünschte Produktliste kann hier ausgewählt werden.
Tracking:
Hier wird der Tracking-Pfad für den Teaser angegeben.
Abstand nach unten:
Per Default ist ein 20px Abstand nach unten eingestellt. Dieser kann angepasst werden (ggf. auch unterschiedlich für verschiedene Auflösungen).
Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

teaser_text_inline öffnen

Der teaser_text_inline.tpl besteht aus einem Bild optional verschiedenen Textelementen, die über dem Bild liegen (Headline, Subline, CTA). Der Button liegt dabei immer über der Grafik mit einem Abstand von 20px zum unteren Rand. Die Höhe des Elements richtet sich nach der Bildgröße und die Breite nach dem Raster, in dem es eingesetzt ist. Laut Styleguide darf dieses Element in den folgenden Rastern verwendet werden: raster_apfel, raster_banane. Es gibt folgende Einstellungsmöglichkeiten:

Raster-Art:
Auswählen, in welchem Raster der Teaser eingesetzt wird. Dies ist nötig, da er sich in den beiden Rastern unterschiedlich verhalten soll und unterschiedlich viel Platz für Text zur Verfügung gestellt wird.
Textausrichtung:
Hier wird die Textposition des Teases festgelegt (links, rechts oder mittig).
Link-URL:
Gibt an, wohin der Teaser verlinken soll.
Tracking:
Hier wird der Tracking-Pfad für den Teaser angegeben.
Abstand nach unten:
Per Default ist ein 20px Abstand nach unten eingestellt. Dieser kann angepasst werden (ggf. auch unterschiedlich für verschiedene Auflösungen).
Bild-URL:
Hier wird das Bild für den Teaser festgelegt. Dabei können für verschiedene Auflösungen unterschiedliche Bilder abgelegt werden.
Headline-Text:
Feld zur Eingabe einer Überschrift.
Subline-Text:
Feld zur Eingabe einer Subline.
CTA-Text:
Feld zur Eingabe des CTAs. Dieser ist "auf mobile" nicht sichtbar, weswegen es nötig ist, einen (ggf. abweichenden) Text für das Feld...
Mobile-CTA-Text:
... anzugeben. Dieser ist nur "auf mobile" sichtbar und wird immer als CTA-Button dargestellt.
Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

teaser_text_underline öffnen

Der teaser_text_underline.tpl besteht aus einem Bild optional verschiedenen Textelementen, die unterhalb des Bildes liegen (Headline, Subline, CTA). Laut Styleguide darf dieses Element in den folgenden Rastern verwendet werden: raster_traube, raster_traube_xs-12, raster_kirsche, raster_apfel. Es gibt folgende Einstellungsmöglichkeiten:

Link-URL:
Gibt an, wohin der Teaser verlinken soll.
Tracking:
Hier wird der Tracking-Pfad für den Teaser angegeben.
Abstand nach unten:
Per Default ist ein 20px Abstand nach unten eingestellt. Dieser kann angepasst werden (ggf. auch unterschiedlich für verschiedene Auflösungen).
Bild-URL:
Hier wird das Bild für den Teaser festgelegt. Dabei können für verschiedene Auflösungen unterschiedliche Bilder abgelegt werden.
Headline-Text:
Feld zur Eingabe einer Überschrift.
Subline-Text:
Feld zur Eingabe einer Subline.
CTA-Text:
Feld zur Eingabe des CTAs. Dieser ist "auf mobile" nicht sichtbar, weswegen es nötig ist, im Tab Mobile-Alternative einen (ggf. abweichenden) Text für das Feld...
Tab Mobile-Alternative - Mobile-text-link text-link--efa:
... anzugeben. Dieser ist nur "auf mobile" sichtbar.
Tab Mobile-Alternative - Mobile-Link-Art:
Hier kann eingestellt werden, ob "auf mobile" ein text-link text-link--efa unterhalb des Bildes oder ein CTA-Button innerhalb des Bildes angezeigt werden soll.
Im folgenden sind Beispielelemente eingefügt, die zum Testen beliebig verändert werden können.

Unter Widgets befinden sich Elemente, deren Layout über das CMS nicht editierbar ist. Zum Einen gibt es hier Elemente, die komplett statisch im Code erstellt wurden und über das CMS lediglich platziert werden können (USP-Leiste, Beratungstools, Kontaktbox). Zum Anderen gibt es noch Elemente wie das Gewinnspiel und den Store, die zusätzlich über spezielle Module im CMS befüllt werden können.

Gutschein

Nie wieder Trends oder Aktionen verpassen?

Jetzt sheego Newsletter bestellen und 10 € Gutschein sichern!

Ich möchte den kostenlosen sheego Newsletter abonnieren. Die Abmeldung ist jederzeit möglich.

Newsslider öffnen

Beschreibung zum Newsslider

aktuelle News & Events

Storefinder öffnen

Beschreibung zum Storefinder

Include...?

USP-Leiste öffnen

Die USP-Leiste enthält 6 Elemente, die jeweils bei Klick ein eigenes Popover mit weiteren Informationen öffnen.