A gallery, often referred to as the carousel effect, is a slideshow designed to display and cycle through a series of images. It's a cool way to let your audience click through different pictures and get into what you're showcasing.
💡The carousel effect we're talking about here is created with the use of overlays. When you click on an image, it triggers a pop-up window where you can use arrows to navigate through the content. To clarify, this method doesn't allow you to build an automatic slideshow in a block background.
Create a gallery in a few steps
Step 1 - Add a block to your page.
Step 2 - Add several columns to your block. To save time, it's easier to create one column and then duplicate the column. Below you can see that we duplicated four columns and then duplicated the block.
Step 3 - Add one image element to each column.
Step 4 - Create one overlay for each image. Open menu > pages > overlays > new overlay.
Step 5 - First, add three columns to your overlay. Place the main image as an image element in the middle column. Then, add left and right arrows as image elements to the side columns. For this, you'll have to create arrows in your brand style with a transparent PNG and add them to the media library.
Step 6 - On the side columns, set the background color to transparent.
Step 7 - Link each image element to its respective overlay.
Step 8 - Duplicate the overlays to inherit the block and column settings, and edit the images to your preference.
Step 9 - Link the overlays to each other to create the carousel effect. Use the arrows (image elements) to link to the next/previous overlays.
That's it! Curious to see what this looks like in action? Check it out here.