To make a hero slider in WordPress without a page builder, install the free SlideVerse plugin, insert the Base Slider & Hero Carousel block, and give each slide a background image, title, subtitle, description and button. Set a responsive height and a colour overlay for readable text, keep autoplay slow, and test on a phone. If you have only one message, use a single hero instead.
Should you use a hero slider?
A slider is the right tool when each slide leads somewhere different:
- A store with three collections.
- A venue promoting several upcoming events.
- A school with admissions, open days and news.
It's the wrong tool when you have one main message. Visitors often don't wait for slide two, so the headline and call to action they need may never be seen. In that case, use one strong hero — perhaps with an animated background for movement — and put the other messages lower on the page.
Build it
- Install and activate SlideVerse from Plugins → Add New.
- Edit your homepage, open the inserter and search for slider. Insert Base Slider & Hero Carousel.
- For the first slide, choose a background image and fill in the title, subtitle, description and button text and link.
- Set the colour overlay and its opacity so white text reads clearly on the image.
- Choose content alignment (left, centre or right) to suit where the image has empty space.
- Set the slide height — and adjust it for tablet and mobile.
- Add the other slides, then publish.
Set the block to full width (in the block toolbar, if your theme supports it) for an edge-to-edge hero.
Recommended settings
| Setting | Recommendation | Why |
|---|---|---|
| Slides | 2–4 | More slides rarely get seen |
| Slides per view | 1 | A hero shows one message at a time |
| Effect | Fade or slide | Fade feels calmer for hero images |
| Autoplay | Off, or a delay of 6–8 seconds | Enough time to read and act |
| Loop | On | No dead end after the last slide |
| Arrows and bullets | On | Visitors can choose |
| Keyboard control | On | Accessibility |
Images that work
- Size: about 1920px wide for full-width heroes, landscape, compressed (WebP or a well-compressed JPEG).
- Safe area: phones crop the sides. Keep faces and products near the centre, and leave calm space where the text sits.
- Consistency: use a similar style and brightness across slides so the overlay works for all of them.
- First slide matters most: it's the one everyone sees and the one that affects page speed. Make it the strongest and lightest.
Write slides people act on
- One idea per slide. A short title (under about 8 words), one line of supporting text and one button.
- Specific buttons. "Shop the winter collection" beats "Learn more".
- Different destinations. Each slide should link somewhere different, or it's one message repeated.
Accessibility and motion
SlideVerse helps by default:
- Autoplay pauses while a visitor hovers over or focuses the slider.
- Autoplay stays off for visitors who ask their device to reduce motion.
- Sliders support keyboard control, touch and swipe.
Check text contrast on every slide — the overlay should make the text readable on the brightest part of each image.
Page speed
The hero is usually the largest element on the page, so it decides how fast the page feels. SlideVerse loads its scripts and styles only on pages that contain a SlideVerse block, from your own site, with no CDN. Keep the first image light, avoid five heavy slides, and test with your speed tool of choice.
Going further with Pro
SlideVerse Pro adds creative transitions (coverflow, cube, flip, cards and presets), fraction and progress-bar pagination, ready-made templates and a Dynamic Content Slider that can build hero slides from posts or custom fields — useful for an events or listings site where slides should update themselves. From $19.99 a year.
For other slider types, see how to add an image slider in the block editor and the block editor slider plugin comparison.