> For the complete documentation index, see [llms.txt](https://docs.pixeleyes.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pixeleyes.de/anleitungen-instructions/english/documentation-of-our-shopware-6-plugins/cms-widgets-for-the-shopping-experiences/image-slider-images-and-layout-blocks.md).

# Image Slider, Images & Layout Blocks

Categories **"CMS Widgets - Slider"**, **"CMS Widgets - Images"** and **"CMS Widgets - Layout"** in the block catalogue.

## Image Slider

A slider with up to **8 slides** (A–H), each with its own image, title and content—for references, product highlights, or an image gallery with text.

* **Arrow navigation** (on/off)
* **Dot navigation** (on/off)
* **Navigation position** – None, Inside or Outside (for arrows)
* **Display mode**
  * *Original* – images are scaled to the page width without height restrictions; the slider adjusts its height dynamically.
  * *Fixed height* – like Original, but the slider keeps the height of the tallest image.
  * *Cropped* – images are scaled to the current page width; any vertical overflow is cropped to the configured height.
* **Minimum height**, **vertical alignment** (of the content over the image)
* **Speed** (transition), **auto-advance slides** (on/off) + **timeout**
* Per slide (A–H): **image**, **title**, **content** – simply leave blank to use fewer than 8 slides.

## Single Image

A single image, optionally clickable—available as a block in **1, 2, 3 or 4 columns** (e.g. for a logo or image gallery).

* **Image**, **display mode**, **maximum height**
* **Link target** (see [Shared Settings](/anleitungen-instructions/english/documentation-of-our-shopware-6-plugins/cms-widgets-for-the-shopping-experiences/shared-settings-border-text-alignment.md)), new tab
* Image loading behaviour, image animation

## Layout Blocks

Pure **column containers with no content of their own**—for freely filling with any elements (including Shopware's own standard elements).

Available in the following splits:

* Symmetric: **2, 3, 4, 5, 6 columns**
* Asymmetric: **1:2**, **2:1**, **1:2:1**, **1:1:2**, **2:1:1**

{% hint style="info" %}
These blocks have no configuration panel of their own—once placed, simply drag the desired elements into the individual columns.
{% endhint %}