XMS Styleguide
Hilfreich für
- Seitentypen
- Feste Bestandteile
- Seitenelemente
Inhalt
- Seitentypen
- Introbereich
- Rich Text Editor
- Image, Image/Text und Video
- Accordion
- Teaser
- Colored cards
- Slider
- Steps
- Contact sticky
- Logo bar
- Webform
Seitentypen
Rich Text Editor
Headlines
Semantische Überschriften H1 bis H4 oder Textauszeichnung mit Absatzstil.
H1 Lorem ipsum
H2 Lorem ipsum
H3 Lorem ipsum
H4 Lorem ipsum
Textstile
Anzuwenden über die Textstile. Als spezielle Auszeichnung erlaubt der Rich Text Editor die semantische Auszeichnung als Zitat (eigener Button).
Text groß (50px) Cum sociis natoque penatibus et magnis dis parturient montes.
Text groß (24px) Cum sociis natoque penatibus et magnis dis parturient montes.
Text normal Cum sociis natoque penatibus et Beispiel für einen Textlink magnis dis parturient montes, nascetur ridiculus mus.
Text klein (16px) Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Text klein (14px) Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Zitat Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, aliquet nec, vulputate eget, arcu.
Text in Spalten
Anzuwenden über die Blockstile.
Text 2-spaltig lorem ipsum sic dolor amet. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Cum sociis natoque penatibus et magnis dis parturient montes. Cum sociis natoque penatibus et Beispiel für einen Textlink magnis dis parturient montes, nascetur ridiculus mus.
Listen
Anzuwenden über die Listenauszeichnung.
- Lorem ipsum sic dolor amet. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
- Cras dapibus. Vivamus elementum semper nisi. Cum sociis natoque penatibus. Et magnis dis parturient montes.
- Cum sociis natoque penatibus et Beispiel für einen Textlink magnis dis parturient montes.
- Lorem ipsum sic dolor amet. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
- Cras dapibus. Vivamus elementum Beispiel für einen Textlink semper nisi. Cum sociis natoque penatibus. Et magnis dis parturient montes.
- Cum sociis natoque penatibus et magnis dis parturient montes.
Buttons und Linkstile
So wird's gemacht:
- Link erstellen
- Objektstil anwenden
Image, Image/Text und Video
Image
Pixel- oder Vektorgrafiken werden über das Image-Element eingebunden. Die Abmessungen folgen dabei dem in der Spalte zur Verfügung stehenden Platz. Neben dem konkreten Medium kann pro Einsatz eine Bildbeschreibung angegeben werden.
Bei der Bildplatzierung kann eine Bildunterschrift eingetragen werden. Optional ist per Schalter die zusätzliche Ausgabe der Bildquelle (pflegbar in der Mediathek!) möglich.
Mit dem XDL Relaunch 2023/2024 erhalten alle Grafiken automatisch Abrundungen.
Image/Text
Das Element Image/Text platziert einen Text links oder rechts neben einer Grafik. Dabei kann die horizontale Aufteilung festgelegt werden:
- 1:1
- 5:7 und 7:5
- 4:8 und 8:4
Die vertikale Ausrichtung lässt sich zwischen oben/mitte/unten beeinflussen.
Lorem ipsum
Lorem ipsum sic dolor amet. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Cum sociis natoque penatibus et magnis dis parturient montes. Cum sociis natoque penatibus et
Als Variante kann ein Hintergrund hinter Image/Text aktiviert werden. Derzeit steht nur der Standardhintergrund ("XDL Shape-Collage") zur Verfügung.
Sic dolor
Lorem ipsum sic dolor amet. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Cum sociis natoque penatibus et magnis dis parturient montes. Cum sociis natoque penatibus et
Video
Die Einbindung von YouTube Videos erfolgt über das Element Videos.
Optionen
- Autoplay
- Bedienelemente (default: an)
- Poster
Die Einstellung "Autoplay" bedingt, dass das Video ohne Ton abgespielt wird.
Accordion
Das Element Accordion bietet eine ein-/ausklappbare Liste von Einträgen. Innerhalb der Accordion items können beliebige Inhaltselemente verwendet werden.
Optional können die Einträge mit Badges ausgezeichnet werden. Die Farbe der Badges wird bei den Einstellungen des Accordions selbst festgelegt und unterscheidet sich daher bei den einzelnen Einträgen nicht.
Optionen
- Ersten Eintrag offen anzeigen
- Einträge als FAQ Metadaten (schema.org) kodieren
- Badge Farbschema
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore Textlink magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
At vero eos et accusam
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Stet clita kasd gubergren
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore Textlink magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Colored cards
Die Colored cards sind neu in der XDL und ermöglichen farbige Textboxen mit Icon-Auszeichnung um z.B. Highlights zu betonen oder Produktbestandteile grafisch ansprechend und übersichtlich darzustellen.
Neben der Farbe kann pro Card item ein Icon aus dem aktuellen XDL Iconset ausgewählt werden. Eine Verlinkung ist optional.
Bis zu drei Cards werden maximal in einer Zeile dargestellt.
Brand Safety
Platzieren Sie Ihre Kampagne ausschließlich in sicheren Umfeldern, damit Ihre Marke geschützt bleibt.
Reichweite erhöhen
Erreichen Sie Ihre Zielgruppe außerhalb der Plattform – unabhängig davon, wo sie im Web unterwegs ist.
Steps
Um eine Schritt-für-Schritt Anleitung prominent abzubilden, dient das Element Steps.
Maximal vier Schritte werden in Kachelform abgebildet, wobei sich die Nummerierung automatisch aus der Reihenfolge der Items ergibt. Die Hintergrundfarbe des horizontalen Streifens wird über die umgebende Sektion hergestellt.
Variante wählen
Wählen Sie aus den drei Varianten die für Sie passende Form des Audience Networks.
Wir beraten Sie gerne.
Zielgruppe definieren
Grenzen Sie Ihre Zielgruppe anhand unterschiedlicher Kriterien ab, z. B. Karrierestufe, Jobtitel oder Geschlecht.
Kampagne umsetzen
Profitieren Sie von unserem Managed Service oder setzen Sie Ihre Audience Network Kampagne selbst um.
Variante wählen
Wählen Sie aus den drei Varianten die für Sie passende Form des Audience Networks.
Wir beraten Sie gerne.
Zielgruppe definieren
Grenzen Sie Ihre Zielgruppe anhand unterschiedlicher Kriterien ab, z. B. Karrierestufe, Jobtitel oder Geschlecht.
Kampagne umsetzen
Profitieren Sie von unserem Managed Service oder setzen Sie Ihre Audience Network Kampagne selbst um.
Lorem ipsum
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
Contact sticky
Das Element Contact sticky wird in einer Sektion auf der Seite platziert, bei der Ausgabe aber stets am unteren Bildschirmrand "fixiert" dargestellt. Es soll in erster Linie als Anchor-Link zu dem jeweiligen Formular auf der Seite genutzt werden.
Logo bar
Die Logo bar zeigt eine variable Anzahl von Logos. Die Darstellung erfolgt zunächst "entfärbt", bei MouseOver wird die Grafik in der originalen Farbe dargestellt. Optional kann ein Logo intern oder extern verlinkt werden.
Optionen
- Anzahl 2 | 4 | 5
