Use the Slideshow block to display a gallery of images in a single, coveted space. It helps you keep your visitors immersed and willing to discover more about your project. Learn how to wisely use one by reading this article.
Add a Slideshow Block
To add a Slideshow block to your content click the ⊕ inserter button inside the editor and search for “slideshow”. Alternatively, you can just type
/slideshow and press enter.
Add and Reorder Images
Use the Change Media button from top Toolbar to select your images, then click “Add to gallery” button from the bottom right corner. It’s best to use high-resolution images that are at least 1500 pixels wide.
Once you have selected images, within the “Edit Gallery” view you can drag and drop them to reorder however you please.
Add Titles and Captions to Images
To add an overlay text for a slide, click the “Change Media” button from top Toolbar and go to the “Edit Gallery” modal, then for each selected image you can set a small bit of text to describe it, as following:
- The “Alt” field displays a Title. Also used for SEO and displayed when the image fails to load.
- The “Caption” field displays a Description for each slide.
Customize the Design
Similar to the Hero block, both in the Toolbar above the selected block and in the Inspector sidebar, you can customize the design and behavior of the Slideshow blocks.
The Slideshow block maintains the same height during the navigation and its height is set by the highest value between the numbers below:
- The height of the slide with most content; this way the content will never get cut off.
- The height of the image with the greater width-to-height ratio; mostly used when you have a gallery of images without any content.
- The Minimum Height value set by the option in the right sidebar. Use it when you want to increase the height even further (eg. to a Full Height version).