Küche aus Altholz mit hellem Arbeitsbereich

Saunabereich in einem Chalet mit Holzverkleidung

headerSlider — Bühne mit 3 Slides

Vollbreite Header-/Hero-Bühne

Die vollbreite Bühne am Seitenanfang: ein Slider aus Bildern, Videos (MP4, YouTube, Vimeo) oder einem 360-Grad-Rundblick, darüber ein Text-Overlay aus Eyebrow, Überschrift, Fließtext und bis zu zwei Buttons. Position und Breite der Textbox sind einstellbar, ebenso die Höhe je Geräteklasse — feste Bildproportion oder volle Bildschirmhöhe.

Für einen zweispaltigen Content-Slider mit Text neben Bild ist introSlider gedacht, für ein einzelnes Bildband ohne Slider fullwidthImage.

introSlider — Slide 1 von 3

Zweispaltiger Content-Slider

Links die Textspalte, rechts der Bild-Slider — beide Seiten sind synchronisiert und wechseln gemeinsam. Jede Slide bringt eigene Überschrift, eigenen Text und eigene Buttons mit.

introSlider — Slide 2 von 3

Standard 33/66

Am Desktop steht das Element standardmäßig auf 33/66: schmale Textspalte, breite Bildspalte. Auf Tablet und Mobil stapeln beide Spalten. Die horizontale Reihenfolge lässt sich umkehren.

introSlider — Slide 3 von 3

Steuerung in der Textspalte

Pfeile und Seitenanzeige liegen in der Content-Spalte; die Anzeige gibt es als Strich, Punkte oder Nummern. Für eine reine Bildergalerie ist gallery die einfachere Wahl, für die Vollbild-Bühne headerSlider.

Zuschnitt von Altholzbrettern in der Werkstatt

Verarbeitete Altholzoberflaeche im Detail

mediaElement — Inhaltstyp: Bild

Ein Medium, fünf Quellen

Ein einzelnes Medium mit Überschrift und Beschreibungstext darüber und darunter. Über die Auswahl „Inhalt“ entscheidet sich, was gezeigt wird: Bild, selbst gehostetes HTML5-Video, YouTube, Vimeo oder eine 360-Grad-Rundblick-Tour.

Werkstattaufnahme: bearbeitetes Altholzbrett

Diese Instanz steht auf „Bild“, weil Video-Einbettungen im Katalog eine externe Quelle bräuchten. Die Video-Optionen bringen zusätzlich Poster-Bild, Autoplay, Endlosschleife, Stummschaltung und Steuerelemente mit.

Wohnbereich mit grossflaechiger Altholzwand

fullwidthImage — Bildband über die volle Breite

Mit Overlay-Text

Ein Hintergrundbild über die gesamte Sektionsbreite, darüber mittig Überschrift, Text und Buttons. Optional mit Parallax-Effekt und Farb-Overlay. Gedacht als optischer Trenner oder CTA-Band zwischen zwei Inhaltsblöcken — nicht als Bühne am Seitenanfang, dafür ist headerSlider da.

gallery — Bilderraster mit 6 Bildern

Vier Spalten am Desktop

Das klassische Bilderraster: beliebig viele Bilder als Grid, per Klick in der Lightbox vergrößerbar. Spaltenzahl, Bild-Seitenverhältnis und Bilder pro Seite sind Einstellungen; bei Bedarf lässt sich die Galerie auch als Slider ausgeben.

Stube mit klassischem Altholz und originaler Patina

Sobald je Bild ein Titel, ein Text oder ein Link nötig wird, ist imageWithTextEntries beziehungsweise imageEntries das richtige Element.

comparisonSlider — Vorher/Nachher mit 3 Einträgen

Ziehbarer Vergleichsregler

Je Eintrag zwei Bilder übereinander, getrennt von einem ziehbaren Griff: links das Vorher-Bild, rechts das Nachher-Bild. Die Startposition des Reglers ist in Prozent einstellbar, ebenso Breite von Trennlinie und Griff.

Eintrag 1 — Regler startet bei 50 %

Eintrag 2 — Regler startet bei 25 %

Eintrag 3 — Regler startet bei 75 %

newsticker — durchlaufendes Lauftext-Band für kurze Hinweise, Aktionen oder Öffnungszeiten. Genau eine Textzeile, die endlos scrollt; die Geschwindigkeit ist einstellbar. Für News-Artikel ist newsEntries zuständig, für Fließtext @textarea.