Zum Hauptinhalt springen Zur Suche springen Zur Hauptnavigation springen
Versandkostenfreie Lieferung ab CHF 80.00     •     30 Tage Rückgaberecht     •     Kauf auf Rechnung möglich     •     Click & Collect

Walder Component Guide

Optimale Bildgrößen

Um die Bildaufbereitung möglichst schmal zu halten, werden im Wesentlichen nur drei Bildformate verwendet:

  1. Hero Format (2560x1250px)
  2. Portrait Format (1480x1900px)
  3. Landscape Format (1480x1180px)

Produktbilder

Produktbilder müssen immer als Freisteller (transparenter Hintergrund) im Format PNG eingefügt werden, um eine optimale Darstellung zu gewährleisten.
Des Weiteren empfehlen wir eine Mindestbreite von 2000px, um auch im Zoom Modal eine ausreichende Bildqualität zu liefern und ein Zoom des Users zu ermöglichen.

Das Hero Format wird für folgende Elemente verwendet:

  1. Hero Slider
  2. Hero Banner

Das Portrait Format wird für folgende Elemente verwendet:

  1. Teaser Duo (Portrait Style)
  2. Teaser Karten Slider (Dynamisch aus Seitenbild)
  3. Teaser Karten Inline (Dynamisch aus Seitenbild)
  4. Mobile Navigation Teaser (Dynamisch aus Seitenbild)

Das Landscape Format wird für folgende Elemente verwendet:

  1. Teaser Duo (Landscape Style)
  2. Blog Karten Slider (Dynamisch aus Seitenbild)
  3. Blog Karten Inline (Dynamisch aus Seitenbild)
  4. Inline Teaser innerhalb eines Produktlistings

Sektionsbreiten

Volle Breite

Wird empfohlen für: Hero Slider / Hero Banner, Text/Bild Kombinationen

Standard

Wird empfohlen für: Produktslider, Teaser Karten Slider, Teaser Karten Inline, Blog Karten Slider, Blog Karten Inline, Instagram Feed

Midsize

Wird empfohlen für: Teaser Duo, FAQ

Small

Wird empfohlen für: Textelemente (z.B. Zitat), Vimeo, zentriertes Bild (z.B. in Blogbeiträgen), Image Slider

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

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Produktslider

Produktgalerie überspringen
-50%
Absatz und Keil bis 85 mm
Absatz und Keil bis 85 mm
Gabor
64,50 CHF 129,00 CHF
-25%
Ballerinas
Ballerinas
Gabor
90,00 CHF 120,00 CHF
-25%
Ballerinas
Ballerinas
Gabor
90,00 CHF 120,00 CHF
-25%
Ballerinas
Ballerinas
Gabor
90,00 CHF 120,00 CHF
-33%
Ballerinas
Ballerinas
Gabor
80,00 CHF 120,00 CHF
-25%
Ballerinas
Ballerinas
Gabor
90,00 CHF 120,00 CHF
-31%
Ballerinas
Ballerinas
Gabor
90,00 CHF 130,00 CHF
-33%
Ballerinas
Ballerinas
Gabor
80,00 CHF 120,00 CHF
-30%
Ballerinas
Ballerinas
Gabor
90,00 CHF 129,00 CHF
-25%
Ballerinas
Ballerinas
Gabor
90,00 CHF 120,00 CHF

Produkt Karten

-50%
Absatz und Keil bis 85 mm
Absatz und Keil bis 85 mm
Gabor
64,50 CHF 129,00 CHF
-30%
Ballerinas
Ballerinas
Gabor
90,00 CHF 129,00 CHF
-25%
Ballerinas
Ballerinas
Gabor
90,00 CHF 120,00 CHF
-33%
Ballerinas
Ballerinas
Gabor
80,00 CHF 120,00 CHF
-33%
Ballerinas
Ballerinas
Gabor
80,00 CHF 120,00 CHF
-25%
Ballerinas
Ballerinas
Gabor
90,00 CHF 120,00 CHF
-25%
Ballerinas
Ballerinas
Gabor
90,00 CHF 120,00 CHF
-25%
Ballerinas
Ballerinas
Gabor
90,00 CHF 120,00 CHF

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

DillySocks
Sashay
Rubirosa
Tiger Swiss

Zwei Spalten, zentriert
Bildformat: Standard

Sukkulente in weißem Topf vor hellblauem Hintergrund

Zwei Spalten, zentriert
Bildformat: Portrait

Sukkulente in weißem Topf vor hellblauem Hintergrund

Zwei Spalten, zentriert
Bildformat: Landscape

Sukkulente in weißem Topf vor hellblauem Hintergrund

Drei Spalten, zentriert

Sukkulente in weißem Topf vor hellblauem Hintergrund
Sonnenbrille mit goldenem Gestell auf reflektierendem Marmoruntergrund

Drei Spalten, gestreckt

Sukkulente in weißem Topf vor hellblauem Hintergrund
Sonnenbrille mit goldenem Gestell auf reflektierendem Marmoruntergrund

Vier Spalten, zentriert

Sukkulente in weißem Topf vor hellblauem Hintergrund
Sonnenbrille mit goldenem Gestell auf reflektierendem Marmoruntergrund
Felsiger Gebirgskamm mit schneebedeckten Gipfeln

Drei Spalten, abgerundet

Sukkulente in weißem Topf vor hellblauem Hintergrund
Sonnenbrille mit goldenem Gestell auf reflektierendem Marmoruntergrund

3 Spalten, Hintergrund

Sukkulente in weißem Topf vor hellblauem Hintergrund
Sonnenbrille mit goldenem Gestell auf reflektierendem Marmoruntergrund

Bild-Raster

Sonnenbrille mit goldenem Gestell auf reflektierendem Marmoruntergrund

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.

Sukkulente in weißem Topf vor hellblauem Hintergrund

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.

Sukkulente in weißem Topf vor hellblauem Hintergrund

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.

Sonnenbrille mit goldenem Gestell auf reflektierendem Marmoruntergrund

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

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.

Sukkulente in weißem Topf vor hellblauem Hintergrund

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.

Sonnenbrille mit goldenem Gestell auf reflektierendem Marmoruntergrund

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)

Title

Content

Instagram Feed

CMS Bundle

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
Enter Button Text ...

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
Enter Button Text ...