Auf dieser Seite
Bausteine: Medien und Showcase
Acht Bausteine für Bilder, Video, Dateien und Darstellungen: Galerie, Video, Downloads, Mockup, Servicegebiet, KI-Demo, Vorher-Nachher-Vergleich und ein Bild mit erklärenden Punkten. Zu jedem stehen hier alle Einstellungen.
Überblick
Bausteine mit Bildern, Video, Dateien, Kartenausschnitt und Vorher-Nachher-Vergleich.
Diese Bausteine stehen im Editor unter „Medien & Showcase". Die meisten brauchen eigene Dateien: Laden Sie Bilder und Dokumente zuerst in die Mediathek hoch und wählen Sie sie anschließend im Baustein aus. Wie das geht, steht im Kapitel Inhalte, Mediathek und Blog.
Zu jedem Bild gehört ein Alternativtext. Er beschreibt in einem Satz, was zu sehen ist, und wird vorgelesen, wenn das Bild nicht angezeigt werden kann.
Warum hier nur zwei Beispiele stehen
Galerie, Video, Downloads, Vorher-Nachher und das Bild mit Punkten brauchen eigene Dateien; ohne sie zeigt ein Beispiel nichts. Prüfen Sie diese Bausteine deshalb mit Ihren eigenen Dateien in der Vorschau des Editors.
Galerie gallery
Bildraster für Arbeitsproben, Räume oder Produkte.
Die Kachelgröße in „span" wirkt nur im Layout „mosaic". Sobald ein Bild eine Kategorie trägt und „showCategories" an ist, erscheint über der Galerie eine Filterleiste.
- Im Editor
- Medien & Showcase
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 10
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
columns | Zahl | optional | 3 | Anzahl der Spalten im Raster. |
layout | Auswahl | optional | uniform (Darstellung) | Anordnung der Bilder: uniform (gleiche Kacheln), masonry (natürliche Höhen) oder mosaic (gemischte Größen). Mögliche Werte: uniform, masonry, mosaic |
showCategories | Ja/Nein | optional | Ja (Darstellung) | Blendet die Filterleiste nach Kategorien ein. |
items | Einträge | optional | leer | Die Bilder in Anzeigereihenfolge. |
items[].src | Text | Pflicht | keine Vorgabe | Adresse der Bilddatei. |
items[].alt | Text | optional | keine Vorgabe | Alternativtext, der das Bild beschreibt. |
items[].caption | Text | optional | keine Vorgabe | Unterschrift des Bildes. |
items[].category | Text | optional | keine Vorgabe | Kategorie des Bildes; sie erzeugt die Filterleiste. |
items[].span | Freies Objekt | optional | keine Vorgabe | Kachelgröße im Mosaik-Layout. |
Dazu kommen die gemeinsamen Einstellungen _style und columnsByBp.
Video video-embed
Video auf der Seite; extern gehostete Videos öffnen erst nach Klick.
Eigene Videodateien tragen Sie in „src" ein; sie werden direkt abgespielt. Ein Video auf einer fremden Plattform gehört in „url" — es lädt erst nach einem Klick auf die Vorschau, damit vorher keine Daten dorthin fließen.
- Im Editor
- Medien & Showcase
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 5
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
src | Text | optional | keine Vorgabe | Adresse einer eigenen Videodatei; sie wird direkt abgespielt. |
url | Text | optional | keine Vorgabe | Adresse eines externen Videos; es öffnet erst nach Klick auf die Vorschau. |
poster | Text | optional | keine Vorgabe | Vorschaubild, das vor dem Abspielen zu sehen ist. |
caption | Text | optional | keine Vorgabe | Kurze Unterschrift unter dem Inhalt. |
Dazu kommen die gemeinsamen Einstellungen _style.
Downloads download-cards
Karten mit herunterladbaren Dateien wie Preislisten oder Merkblättern.
Jede Karte verweist auf eine Datei. Laden Sie die Datei zuerst in die Mediathek hoch und tragen Sie deren Adresse in „url" ein.
- Im Editor
- Medien & Showcase
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 8
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
columns | Zahl | optional | 2 | Anzahl der Spalten im Raster. |
items | Einträge | optional | leer | Die Dateien in Anzeigereihenfolge. |
items[].title | Text | Pflicht | keine Vorgabe | Name der Datei, wie er auf der Karte steht. |
items[].meta | Text | optional | keine Vorgabe | Zusatzangabe wie Format und Größe. |
items[].url | Text | Pflicht | keine Vorgabe | Adresse der Datei. |
items[].type | Text | optional | keine Vorgabe | Dateityp; er bestimmt das Symbol auf der Karte. |
Dazu kommen die gemeinsamen Einstellungen _style und columnsByBp.
Mockup mockup
Gerahmte Bildschirm-Darstellung aus eigenem HTML oder SVG.
Der Baustein nimmt fertiges HTML oder eine SVG-Grafik auf. Ist „html" gefüllt, hat es Vorrang vor „svg"; der Rahmen aus „frame" gilt nur für die SVG-Fassung.
- Im Editor
- Medien & Showcase
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 5
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
html | Text | optional | leer | HTML des Mockups; es wird bevorzugt vor dem SVG. |
svg | Text | optional | leer | SVG des Mockups; es greift, wenn kein HTML gesetzt ist. |
title | Text | optional | keine Vorgabe | Überschrift über dem Rahmen. |
caption | Text | optional | keine Vorgabe | Kurze Unterschrift unter dem Inhalt. |
frame | Auswahl | optional | card | Rahmen um das Mockup: browser (Browserfenster), card (Karte) oder plain (ohne Rahmen). Mögliche Werte: browser, card, plain |
Dazu kommen die gemeinsamen Einstellungen _style.
Servicegebiet area-map
Darstellung des Einzugsgebiets mit Ortsliste, ohne Kartendienst von außen.
Der Baustein zeichnet keine echte Landkarte, sondern eine eigene Darstellung aus Ihren Angaben. Dadurch werden keine Daten an einen Kartendienst übertragen.
- Im Editor
- Medien & Showcase
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 7
Andere Orte auf Anfrage.
- Hildesheim
- Salzgitter
- Peine
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
center | Text | Pflicht | keine Vorgabe | Ort in der Mitte des Gebiets. |
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
note | Text | optional | keine Vorgabe | Hinweis unter dem Gebiet, etwa zu Anfahrtskosten. |
radiusLabel | Text | optional | keine Vorgabe | Beschriftung des Umkreises. |
cities | Einträge (Text oder Objekt) | optional | leer | Die Orte im Gebiet, entweder als Name oder mit Link. |
cities[].name | Text | Pflicht | keine Vorgabe | Name des Ortes. |
cities[].url | Text | optional | keine Vorgabe | Ziel, auf das der Ort verlinkt. |
Dazu kommen die gemeinsamen Einstellungen _style.
KI-Assistent-Demo assistant-demo
Vorführung des Chat-Assistenten direkt auf der Seite.
Der Baustein zeigt ein Chatfenster, das mit dem KI-Assistenten der Website spricht. Er ist deshalb nur auf Websites sinnvoll, auf denen dieser Assistent eingerichtet ist.
- Im Editor
- Medien & Showcase
- Seitenaufbau
- Eigenständig
- Einstellungen
- 3
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
context | Text | optional | keine Vorgabe | Kontext-Schlüssel für die Antworten; ohne Angabe gilt die Kennung der Website. |
Dazu kommen die gemeinsamen Einstellungen _style.
Vorher-Nachher before-after
Zwei Bilder mit Schieberegler, um ein Ergebnis zu zeigen.
Beide Bilder sollten denselben Ausschnitt in derselben Größe zeigen — sonst springt der Vergleich beim Schieben. „start" legt fest, wo der Schieberegler beim Laden steht.
- Im Editor
- Medien & Showcase
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 8
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | Vorher / Nachher | Überschrift über dem Baustein. |
beforeSrc | Text | Pflicht | keine Vorgabe | Adresse des Bildes vom Zustand vorher. |
beforeAlt | Text | Pflicht | Zustand vorher | Alternativtext des Bildes vorher. |
afterSrc | Text | Pflicht | keine Vorgabe | Adresse des Bildes vom Zustand nachher. |
afterAlt | Text | Pflicht | Zustand nachher | Alternativtext des Bildes nachher. |
beforeLabel | Text | optional | keine Vorgabe | Beschriftung an der Seite vorher. |
afterLabel | Text | optional | keine Vorgabe | Beschriftung an der Seite nachher. |
start | Zahl | optional | 50 | Startposition der Trennlinie in Prozent. Wertebereich: 0–100 |
Dazu kommen die gemeinsamen Einstellungen _style.
Bild mit Punkten image-hotspots
Ein Foto, in dem einzelne Stellen mit Punkten erklärt werden.
Die Punkte werden in Prozent der Bildbreite und -höhe gesetzt: x von links, y von oben. So bleiben sie auf jeder Bildschirmgröße an derselben Stelle des Bildes.
- Im Editor
- Medien & Showcase
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 8
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | Alles auf einen Blick | Überschrift über dem Baustein. |
src | Text | Pflicht | keine Vorgabe | Adresse der Bilddatei. |
alt | Text | Pflicht | Uebersichtsfoto mit markierten Stellen | Alternativtext, der das Bild beschreibt; er ist für die Barrierefreiheit Pflicht. |
items | Einträge | optional | leer | Die Punkte im Bild. |
items[].x | Text oder Zahl | Pflicht | keine Vorgabe | Waagerechte Lage des Punktes in Prozent der Bildbreite. Wertebereich: 0–100 |
items[].y | Text oder Zahl | Pflicht | keine Vorgabe | Senkrechte Lage des Punktes in Prozent der Bildhöhe. Wertebereich: 0–100 |
items[].title | Text | Pflicht | keine Vorgabe | Titel des Punktes. |
items[].text | Text | optional | keine Vorgabe | Erklärung zu dieser Stelle im Bild. |
Dazu kommen die gemeinsamen Einstellungen _style.