How to Add a Slider to a Page
Use the Slider element to display multiple content panels in a carousel. Each slide can hold images, testimonials, offer cards, or other nested elements. Visitors move between slides using arrows or pagination dots.
This guide explains how to add a slider and configure the main settings that control slides and navigation.
Before You Start
Make sure you have:
- A page open in the Page Builder.
- Content ready for each slide (images, headlines, buttons, or testimonials).
- A section wide enough for the carousel (sliders work best in full-width or near full-width containers).
Avoid nesting a slider inside another slider. That usually breaks navigation and confuses mobile visitors.
Step 1: Add the Slider Element
- Open Pages and click Edit on your page.
- In the element panel, find Slider.
- Drag Slider into the target section or container.
- Click the slider on the canvas to open settings.
Sliders are commonly used for testimonials, product highlights, before/after galleries, and feature cards.
Step 2: Create and Manage Slides
Slides are called blocks in the Slider settings.
| Action | What it does |
|---|---|
| Add block | Creates a new slide. |
| Remove block | Deletes a slide from the carousel. |
| Reorder blocks | Changes slide order left to right. |
| Edit slide content | Opens the nested elements inside that slide. |
Adding content inside a slide
- Select a slide block.
- Add nested elements inside it—for example Image, Text, Button, or Icon.
- Style nested content per slide as needed.
Keep each slide focused. One main image plus a short headline often performs better than dense paragraphs inside every slide.
Step 3: Configure Slide Layout
| Setting | What it does |
|---|---|
| Slide width | How wide each slide appears in the carousel viewport. |
| Slide height | Vertical space for the slide area when height is controlled. |
| Padding | Inner spacing inside each slide block. |
| Slide alignment | How slide content aligns within the carousel. |
| Slide gap | Space between adjacent slides when multiple slides peek on screen. |
On mobile, test whether one slide per view is clearest. Partial “peek” slides can work for galleries but may feel cramped for text-heavy content.
Step 4: Configure Navigation Arrows
| Setting | What it does |
|---|---|
| Show arrows | Enables previous/next arrow controls. |
| Arrow position | Where arrows sit relative to the slider. |
| Arrow size | Click/tap target size—important on mobile. |
Arrows should remain visible against your slide background. If slides are busy images, enable arrow backgrounds or choose a high-contrast style.
Step 5: Configure Pagination Dots
| Setting | What it does |
|---|---|
| Show pagination | Displays dot indicators for slide position. |
| Dot spacing | Distance between dots. |
| Active dot state | How the current slide dot is highlighted. |
Dots help visitors understand how many slides exist and which one is active. Test dot tap targets on mobile—they should be easy to press.
Step 6: Responsive Preview
Use the builder device toggles (desktop, tablet, mobile) to check:
- Slide width does not clip important text.
- Arrows and dots are tappable on touch screens.
- Nested images scale correctly inside each slide.
- Gap and padding still look balanced on smaller widths.
See Responsive preview for the full preview workflow.
Step 7: Save, Publish, and Test
- Click Save in the builder.
- Publish the page. See Publish a page.
- Open the live URL.
- Click arrows and dots to move through every slide.
- Test on a phone if mobile traffic matters.
Testing checklist
- Every slide is reachable via arrows and dots.
- No slide shows broken images or empty blocks.
- Navigation is not blocked by overlapping elements.
- Autoplay is off unless you intentionally configured it elsewhere.
Slider vs Image Gallery
The Slider element is a carousel with multiple slides and navigation controls. If you only need a single static image, use the Image element instead. If you need a grid of images without carousel navigation, consider a multi-column container layout.
Troubleshooting
| Problem | What to check |
|---|---|
| Arrows do not move slides | Arrows enabled; no overlapping element blocking clicks. |
| Dots missing | Pagination enabled in slider settings. |
| Slide content clipped | Slide width, height, and padding on mobile breakpoint. |
| Slider looks empty | Each block has nested content; images finished uploading. |
| Layout breaks on mobile | Reduce text per slide; increase padding; test one slide per view. |
Outcome
Your page now includes a working carousel. Visitors can browse multiple panels without scrolling through a long vertical section—useful for testimonials, offers, and visual proof.
Related Docs
FAQ
Can I put buttons and text inside slider slides?
Yes. Each slide block supports nested elements such as images, text, buttons, and icons. Keep layouts simple so navigation stays clear.
Should I use arrows, dots, or both?
Many pages use both for clarity. At minimum, enable one navigation method visitors can discover on mobile.
How many slides should I add?
Three to seven strong slides usually work well. Too many slides reduce the chance visitors see every panel.
Can I use a slider for testimonials?
Yes. Testimonials are a common use case—one quote or screenshot per slide with arrows or dots to browse.
Why should I avoid nested sliders?
A slider inside another slider creates confusing navigation and poor mobile usability. Use one carousel per section instead.