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 the gallery widget, contact us here.
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.
.gif?width=674&height=340&name=cfbe97e4-322e-4d40-954a-6dfd0041ca5c%20(1).gif)
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 you can change
- A title to style as you see fit
- Paragraph text to style as you see fit
- A button
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).
To edit the image in your card:
You can replace the image of the card by clicking the replace button when you hover over the image.
You can also adjust the shape and size of the images on your card. Hover over your image and click the ⚙️ gear icon to navigate to image settings. Then, click general settings.
You can adjust the image ratio and scale here. This allows you to crop your image and set the size directly in Foleon.
In the image ratio settings, you can choose from the following options:
- Original - keeps the image at its original uploaded size
- Landscape - scales the image to a 3:2 aspect ratio
- Square - crops the image to a square shape
- Circle - crops the image to a circular shape
To change the size of the image, use the scale (%) slider.
💡 To ensure all images in your gallery are the same size, set both the image ratio and the scale percentage to the same settings for each image.
To edit the text in your card:
To edit either the title or paragraph text, simply click on the text field and make your changes.
⚠️ You cannot add a link in the card text. Instead, use the card settings to add a link to the card or edit the link in the button.
To update a card's link:
Each card is clickable, allowing you to direct your audience to another place—for example, the next page, an external URL, or an overlay. 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 vs. Slider: Choosing the right widget
When displaying interactive content in your Doc, you can choose between the gallery, carousel, and slider widgets. Each offers a unique way to present your content, depending on your goals and layout preferences. Below is a quick comparison to help you decide which widget to use:
Gallery Widget
Use the gallery when you want to show multiple cards in a grid-like layout. This is ideal when you want all items visible at once to encourage browsing or when you want to display a larger number of visuals in a digestible way.
✅ Best for: Browsable content collections, like portfolios or product grids.
Carousel Widget
Use the carousel when you want to display a curated set of cards in a scrollable, linear experience. The carousel supports rich content per card and is great for storytelling or highlighting a sequence of ideas.
✅ Best for: Guided content journeys, product highlights, or testimonials.
Slider Widget
Use the slider when you want to create a full-width, immersive experience. Unlike the carousel, the slider is optimized for larger visuals and includes features like auto-slide, infinite loop, and pagination.
✅ Best for: Visual storytelling, splash sections, or impactful CTAs.
Related articles