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
Teaser Duo
Produktslider
Produkt Karten
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.
Video Vimeo
Instagram Feed
Teaser Karten Slider (6 Items)
Teaser Karten Slider (4 Items)
Teaser Karten Inline
Blog Karten Slider
Blog Karten Inline
Zentriertes Bild (Skaliert anhand Bildschirmbreite)
Bildslider
Bitte nur in "Small"-Sektionen und mit einheitlich formatigen Bildern verwenden
Text/Bild Kombinationen
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.
FAQ (Sektion Small oder Medium)
Content
Bilder
Zwei Spalten, zentriert
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
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam lorem ipsum dolor sit amet.
CMS Bundle
CMS Bundle
