On this page
Blocks: media and showcase
Eight blocks for images, video, files and renderings: gallery, video, downloads, mockup, service area, AI demo, before-and-after comparison and an image with explaining dots. All settings are listed for each of them.
Overview
Blocks with images, video, files, a map detail and a before-and-after comparison.
In the editor these blocks sit under "Media & showcase". Most of them need files of their own: upload images and documents to the media library first and then pick them in the block. How that works is described in the chapter Content, media library and blog.
Every image needs an alternative text. It describes in one sentence what can be seen and is read out when the image cannot be displayed.
Why there are only two examples here
Gallery, video, downloads, before-and-after and the image with dots need files of their own; without them an example shows nothing. So check these blocks with your own files in the editor preview.
Gallery gallery
Image grid for work samples, rooms or products.
The tile size in "span" only takes effect in the "mosaic" layout. As soon as an image carries a category and "showCategories" is on, a filter bar appears above the gallery.
- In the editor
- Media & showcase
- Page structure
- Section start
- Settings
- 10
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | no default | Heading above the block. |
columns | Number | optional | 3 | Number of columns in the grid. |
layout | Choice | optional | uniform (rendering) | Arrangement of the images: uniform (equal tiles), masonry (natural heights) or mosaic (mixed sizes). Possible values: uniform, masonry, mosaic |
showCategories | Yes/no | optional | Yes (rendering) | Shows the category filter bar. |
items | List of entries | optional | empty | The images in display order. |
items[].src | Text | Required | no default | Address of the image file. |
items[].alt | Text | optional | no default | Alternative text describing the image. |
items[].caption | Text | optional | no default | Caption of the image. |
items[].category | Text | optional | no default | Category of the image; it creates the filter bar. |
items[].span | Free-form object | optional | no default | Tile size in the mosaic layout. |
On top of these come the common settings _style and columnsByBp.
Video video-embed
Video on the page; externally hosted videos only open after a click.
Your own video files go into "src"; they play directly. A video on an external platform belongs in "url" — it only loads after a click on the preview, so no data goes there beforehand.
- In the editor
- Media & showcase
- Page structure
- Section start
- Settings
- 5
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | no default | Heading above the block. |
src | Text | optional | no default | Address of your own video file; it plays directly. |
url | Text | optional | no default | Address of an external video; it only opens after a click on the preview. |
poster | Text | optional | no default | Preview image shown before playback. |
caption | Text | optional | no default | Short caption below the content. |
On top of these come the common settings _style.
Downloads download-cards
Cards with downloadable files such as price lists or fact sheets.
Every card points to a file. Upload the file to the media library first and enter its address in "url".
- In the editor
- Media & showcase
- Page structure
- Inline
- Settings
- 8
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | no default | Heading above the block. |
subtitle | Text | optional | no default | Short line below the heading. |
columns | Number | optional | 2 | Number of columns in the grid. |
items | List of entries | optional | empty | The files in display order. |
items[].title | Text | Required | no default | Name of the file as shown on the card. |
items[].meta | Text | optional | no default | Additional detail such as format and size. |
items[].url | Text | Required | no default | Address of the file. |
items[].type | Text | optional | no default | File type; it determines the icon on the card. |
On top of these come the common settings _style and columnsByBp.
Mockup mockup
Framed screen mock-up built from your own HTML or SVG.
The block takes finished HTML or an SVG graphic. If "html" is filled it takes precedence over "svg"; the frame from "frame" only applies to the SVG version.
- In the editor
- Media & showcase
- Page structure
- Inline
- Settings
- 5
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
html | Text | optional | empty | HTML of the mock-up; it takes precedence over the SVG. |
svg | Text | optional | empty | SVG of the mock-up; it applies when no HTML is set. |
title | Text | optional | no default | Heading above the frame. |
caption | Text | optional | no default | Short caption below the content. |
frame | Choice | optional | card | Frame around the mock-up: browser (browser window), card or plain (no frame). Possible values: browser, card, plain |
On top of these come the common settings _style.
Service area area-map
Rendering of the service area with a list of towns, without an external map service.
The block does not draw a real map but a rendering of its own from your entries. That way no data is transferred to a mapping service.
- In the editor
- Media & showcase
- Page structure
- Inline
- Settings
- 7
Other places on request.
- Hildesheim
- Salzgitter
- Peine
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
center | Text | Required | no default | Town at the centre of the area. |
title | Text | optional | no default | Heading above the block. |
note | Text | optional | no default | Note below the area, for example about travel costs. |
radiusLabel | Text | optional | no default | Label of the radius. |
cities | Entries (text or object) | optional | empty | The towns in the area, either as a name or with a link. |
cities[].name | Text | Required | no default | Name of the town. |
cities[].url | Text | optional | no default | Target the town links to. |
On top of these come the common settings _style.
AI assistant demo assistant-demo
Demonstration of the chat assistant directly on the page.
The block shows a chat window that talks to the website AI assistant. It therefore only makes sense on websites where that assistant is set up.
- In the editor
- Media & showcase
- Page structure
- Standalone
- Settings
- 3
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | no default | Heading above the block. |
subtitle | Text | optional | no default | Short line below the heading. |
context | Text | optional | no default | Context key for the answers; without it the site identifier applies. |
On top of these come the common settings _style.
Before and after before-after
Two images with a slider to show a result.
Both images should show the same detail at the same size — otherwise the comparison jumps while you drag. "start" decides where the slider sits when the page loads.
- In the editor
- Media & showcase
- Page structure
- Inline
- Settings
- 8
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | Vorher / Nachher | Heading above the block. |
beforeSrc | Text | Required | no default | Address of the image showing the state before. |
beforeAlt | Text | Required | Zustand vorher | Alternative text of the before image. |
afterSrc | Text | Required | no default | Address of the image showing the state after. |
afterAlt | Text | Required | Zustand nachher | Alternative text of the after image. |
beforeLabel | Text | optional | no default | Label on the before side. |
afterLabel | Text | optional | no default | Label on the after side. |
start | Number | optional | 50 | Starting position of the divider in percent. Value range: 0–100 |
On top of these come the common settings _style.
Image with hotspots image-hotspots
A photo in which individual spots are explained with markers.
The dots are placed as a percentage of the image width and height: x from the left, y from the top. That keeps them on the same spot of the image at every screen size.
- In the editor
- Media & showcase
- Page structure
- Inline
- Settings
- 8
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | Alles auf einen Blick | Heading above the block. |
src | Text | Required | no default | Address of the image file. |
alt | Text | Required | Uebersichtsfoto mit markierten Stellen | Alternative text describing the image; it is required for accessibility. |
items | List of entries | optional | empty | The markers in the image. |
items[].x | Text or number | Required | no default | Horizontal position of the marker in percent of the image width. Value range: 0–100 |
items[].y | Text or number | Required | no default | Vertical position of the marker in percent of the image height. Value range: 0–100 |
items[].title | Text | Required | no default | Title of the marker. |
items[].text | Text | optional | no default | Explanation of this spot in the image. |
On top of these come the common settings _style.