The gallery widget helps you showcase multiple images or visuals in an organized, interactive layout.
➡️ This guide will explain how to use the gallery widget to create engaging, clickable content that enhances your audience’s experience.
💡This feature is not available for legacy plans. If you're interested in using this functionality, contact your Customer Success Manager.
In this article:
What is the gallery widget?
A gallery widget is a dynamic widget that showcases a grid of images or visuals, allowing your audience to explore multiple pieces of content in one place.
By default, each gallery card includes an image, title, and paragraph. Cards are fully clickable, enabling you to guide your audience to another location, such as a new page, an external URL, or a detailed overlay.
How to add a gallery?
Step 1: Drag and drop
In the editor, click elements and scroll down to the widgets section. Drag and drop the gallery icon onto your page. The gallery takes over a block, so you can easily move it between blocks as needed.
By default, the gallery includes six cards, each featuring:
- An image that can be replaced.
- A title and a paragraph you can both change or style by clicking on it (as you’re used to)
- A button.
Each card is fully clickable, allowing you to direct your audience to a different page, an external URL, or an overlay.
Step 2: Gallery settings
The gallery widget includes six cards by default, but you can add or delete cards as needed. The minimum is one card, and the maximum is 15.
To adjust the gallery settings, click the orange bar in the top-right corner of the block.
To add a card, click on the + icon. You can add up to 15 cards to your gallery.
To change the appearance of your gallery, click on the settings icon in the orange bar.
Once in the settings, you will have 3 options:
- General settings
- Spacing
- Cards layout
General settings
- Spacing between cards: Set the amount of space you’d like between each card for a cleaner or more compact look.
- Card width size: You can adjust the width of your cards, with options ranging from XS (extra small) to XL (extra large).
- Hover effect: Choose how cards respond when hovered over: no effect, card zoom, or background image zoom.
Spacing: In the spacing settings, you manage spacing for the edges of your gallery widget block.
Card layout
- Display cards in: Select whether to display your cards as a gallery or switch them to a carousel format.
- Show card image: Show or hide images for your gallery.
- Show card text: Show or hide text for your gallery.
- Show card button: Show or hide buttons for your gallery.
Step 3: Cards settings
In addition to the gallery settings, you can customize individual cards. Navigate to a card and check the blue bar.
By accessing this blue bar, you can change the order of your cards by moving them wherever you want on the grid (drag and drop).
You can replace the image of the card by clicking the replace button when you hover over the image.
To update a card’s link, click the settings icon, go to the general settings > link > Edit link. The link applies to the entire card, so it will be clickable wherever your audience clicks, whether it’s the image, title, paragraph text, or button.
You can customize the look of your gallery with styling options like background, border, and shadow.
If you’d like to create a gallery with background images (similar to the first card in the example below), follow these steps:
- In the gallery settings (orange bar), disable show card image.
- Open the card settings (blue bar), go to Background, and upload a background image.
- In the card settings, increase the top and bottom spacing to make the card taller. In the example below, we’ve set the top spacing to a maximum of 200.
💡For improved readability, consider using a gradient overlay when displaying text over images.
Gallery on mobile
The gallery widget is fully responsive and works seamlessly on mobile devices. Use the mobile view mode to preview and ensure it looks great on smaller screens.
Gallery vs Carousel: choosing the right widget for your content
When you want to display cards in an interactive format, you can choose between the gallery and carousel widgets. Here’s a quick comparison to help you pick the best option for your Foleon Doc:
- Gallery Widget: Use when you want to present a larger number of cards in a visually digestible layout without overwhelming the user. Ideal for when you need all cards visible at once or to encourage browsing.
- Carousel Widget: Use when you want to create a dynamic, focused experience with a curated set of cards. It’s perfect for storytelling or guiding users through a sequence of content.
💡 Want to know more about the carousel widget? Check out all about the carousel widget.
Need more help? Check out our other articles on working with blocks and elements, or contact support.
Related articles