Menü
Mode in großen Größen
ヽ༼ຈل͜ຈ༽ノ 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.

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

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

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.

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.

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.

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

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).

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.

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.

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.

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.

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.

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.

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.

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

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

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

Hier wird der Text eingegeben.
Mit dem HTML Tag <br> kannst ein Textumbruch eingefügt werden. Die Text umbrüche können auch nur in einem bestimmten Breakpoint aktiv sein. Dafür einfach <br-(xs/s/sm/md)> eintragen und schon ist in dem Bereich ein Umbruch.

Hier wird das Tracking für das Element eingestellt.

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.

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.

Beschreibung zu Produktslider-Elementen

Beschreibung zu Hoverkachel-Elementen

Beschreibung zu Produktkachel-Elementen

    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

    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

    Beispiel 1

    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).

    Beispiel 2

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

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:

    Beschreibung Bild

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

    Beschreibung Hoverbild

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

    Beschreibung Seitenhintergrund

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

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:

    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.

    Beim Text-CTA 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.

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

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.

    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.

    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.

    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.

    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.

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.

Beschreibung SEO.

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

Hier sind alle Elemente in der Übersicht und in ihrem Responsive-Verhalten mit Beispielen dargestellt:

Obst-Übersicht
Responsive-Verhalten

Beschreibung PL-Banner-groß-Bild.

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

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

Beschreibung ME Buehne im Slider.

Beschreibung ME Buehne mit Textblock.

Beschreibung ME Buehne Sale.

Beschreibung Startseiten Buehne.

  • 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

Beschreibung zu Kachel-Elementen

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.

    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.

    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.

    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.

    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:

    ... anzugeben. Dieser ist nur "auf mobile" sichtbar.

  • Tab Mobile-Alternative - Mobile-Link-Art:

    Hier kann eingestellt werden, ob "auf mobile" ein Text-CTA 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.

Beschreibung zu den Beratungstools (Farbtyp, Figurtyp)

Include... hier wohl eher nicht?

Standardmäßig werden beim einbinden des Gewinnspiel Widgets alle Gewinnspiele angezeigt. Altrnativ kann man in den Einstellungen über die raffelID nur ein bestimmtes GWS anzeigen.

Include...?

Beschreibung zur Kontaktbox

Haben Sie Fragen?

01805 – 88 06 88

24h täglich für Sie erreichbar
Festnetz 14 Cent/Min. inkl. MwSt.,
Mobilfunk max. 42 Cent/Min. inkl. MwSt.

Beschreibung zum Newsletterlayer

schließen

Newsletter

Nichts mehr verpassen!

  • Trends als Erste sehen
  • Keine Gutscheinaktion verpassen
  • Exklusive Angebote erhalten
Jetzt für den sheego Newsletter anmelden!
jetzt10 Gutscheinsichern!

Der sheego Newsletter ist für Sie vollkommen kostenlos und kann jederzeit und problemlos wieder abgemeldet werden. Den Gutschein erhalten Sie am Ende der Anmeldung.

Beschreibung zum Newsslider

aktuelle News & Events

Beschreibung zum Storefinder

Include...?

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

  • Kauf auf
    Rechnung
  • 30 Tage kostenlose Rückgabe
  • 24 Stunden Kundenservice
  • Alle Größen,
    ein Preis
  • Datensicherheit
  • Geprüfte Qualität