Walder Component Guide
Optimale Bildgrößen
Um die Bildaufbereitung möglichst schmal zu halten, werden im Wesentlichen nur drei Bildformate verwendet:
- Hero Format (2560x1250px)
- Portrait Format (1480x1900px)
- Landscape Format (1480x1180px)
Produktbilder
Das Hero Format wird für folgende Elemente verwendet:
- Hero Slider
- Hero Banner
Das Portrait Format wird für folgende Elemente verwendet:
- Teaser Duo (Portrait Style)
- Teaser Karten Slider (Dynamisch aus Seitenbild)
- Teaser Karten Inline (Dynamisch aus Seitenbild)
- Mobile Navigation Teaser (Dynamisch aus Seitenbild)
Das Landscape Format wird für folgende Elemente verwendet:
- Teaser Duo (Landscape Style)
- Blog Karten Slider (Dynamisch aus Seitenbild)
- Blog Karten Inline (Dynamisch aus Seitenbild)
- Inline Teaser innerhalb eines Produktlistings
Sektionsbreiten
Volle Breite
Standard
Midsize
Small
Hero Banner
Headline
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.
Hero Slider
Produkt Karten
Teaser Karten Slider (6 Items)
Teaser Karten Slider (4 Items)
Teaser Karten Inline
Blog Karten Slider
Blog Karten Inline
Text/Bild Kombinationen
Teaser Duo
Bild/Text
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 magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Text/Bild
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 magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Bilder
Bildeinstellungen im CMS
Im CMS haben Sie die Möglichkeit, das Bildformat individuell anzupassen (siehe Abbildung).
Am Beispiel des Elements „Zwei Spalten, zentriert“ wurden die drei gängigsten Bildformate mit den entsprechenden Bildgrößen hinterlegt. Dabei bleibt die Breite der Bilder in der Regel unverändert – lediglich die Höhe variiert je nach gewähltem Format.
Übersicht der Bildformate:
Standard
Eignet sich für schmale Teaser- oder dekorative Bilder.Portrait
Ideal für hochformatige Bilder.Landscape
Geeignet für klassische Querformate.Kleiner Hero
Verhält sich ähnlich wie das Format „Standard“.Brand Landingpage
Etwas schmaler als das Format „Landscape“, speziell für markenspezifische Layouts.
Zentriertes Bild (Skaliert anhand Bildschirmbreite)
Bildslider
Bitte nur in "Small"-Sektionen und mit einheitlich formatigen Bildern verwenden
Zwei Spalten, zentriert
Bildformat: Standard
Zwei Spalten, zentriert
Bildformat: Portrait
Zwei Spalten, zentriert
Bildformat: Landscape
Drei Spalten, zentriert
Drei Spalten, gestreckt
Vier Spalten, zentriert
Drei Spalten, abgerundet
3 Spalten, Hintergrund
Bild-Raster
Text & Bild
Drei Spalten, Bild & Text
Lorem Ipsum dolor sit amet
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.
Drei Spalten, Bilder mit Unterschrift
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 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 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.
Drei Spalten, Bild/Text-Karten
Lorem Ipsum dolor
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.
Lorem Ipsum dolor
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.
Lorem Ipsum dolor
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.
Drei Spalten, abgerundete Bilder mit Unterschrift
Lorem Ipsum dolor
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.
Lorem Ipsum dolor
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.
Lorem Ipsum dolor
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.
Banner
Lorem Ipsum
Sonstiges
Zitat
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.
FAQ (Sektion Small oder Medium)
Content
Video Vimeo
Instagram Feed
CMS Bundle
