How to Create Elementor slider with text and image

What Is the Elementor Slides Widget?

The Elementor Slides widget (sometimes called the Slider widget) is a built-in widget available inside Elementor Pro. It lets you create a full-width or fixed-height slideshow where each slide can have its own background image, a headline, a description, and a call-to-action button. Think of it as a hero banner that rotates through multiple messages. This widget is different from the Image Carousel widget, which is just a simple row of scrolling images with no text overlay. The Slides widget is what you want when you need that classic homepage hero look — a bold image with your service name or tagline written over the top of it. Because it is part of Elementor Pro, you do need the paid version of Elementor installed and activated on your WordPress site to access it. The free version of Elementor does not include this widget.

What You Need Before You Start

Before jumping into Elementor, make sure you have these things ready: – WordPress installed and running on your site – Elementor Pro plugin installed and activated (the Slides widget is a Pro-only feature) – A page already created that you want to add the slider to – Your slide images ready to go — ideally at 1920×1080px or similar widescreen dimensions, compressed for web so they load fast – Your slide text prepared — headline, a short description, and a button label if you want a CTA One thing I always tell my clients: get your images sorted before you start building. Trying to design a slider while hunting around for photos slows everything down. Have them optimised and uploaded to your Media Library first.

How to Add the Elementor Slides Widget to Your Page

Open the page you want to edit and click Edit with Elementor to launch the Elementor editor. Once the editor loads, look at the widget search bar in the left panel and type ‘Slides’ or ‘Slider’. You will see the Slides widget appear — it has a small slideshow icon next to it and is labelled as a Pro widget. Drag the Slides widget from the left panel and drop it onto your page canvas in the section where you want the slider to appear. Elementor will instantly place a default slider on the page with a couple of placeholder slides already loaded. This gives you a starting point to edit rather than building from scratch.

How to Add a Background Image to Each Slide

Click on the slider on the canvas to open its settings in the left panel. In the Content tab, you will see a Slides section that lists all the current slides. Click on the first slide to expand its settings. Each slide has three sub-tabs: Background, Content, and Style. Click on Background first. Here you will find: – Color: Sets a solid background colour if you are not using an image – Image: Click this to choose your background image from the Media Library – Size: Choose Cover (most common — fills the entire slide area), Contain, or Auto – Ken Burns Effect: Toggle this on if you want a slow zoom animation on the background image for a cinematic feel – Background Overlay: Turn this on to add a semi-transparent colour layer over your image — very useful for making white text readable over bright photos Once your background image is set, the slide will immediately update on the canvas so you can see exactly how it looks.

How to Add Text and a Button to Your Slide

After setting the background image, click the Content sub-tab within that same slide’s settings. Here you can fill in: – Title: Your main headline for this slide (e.g. ‘Welcome to XYZ Salon’ or ‘Fast, Affordable Website Design’) – Description: A short supporting line of text — keep this to one or two sentences at most – Button Text: The label on your call-to-action button (e.g. ‘Book Now’, ‘Get a Free Quote’, ‘Learn More’) – Button Link: The URL the button should go to when clicked – Content Position: Where you want the text to sit on the slide — left, centre, or right – Vertical Position: Top, middle, or bottom of the slide A quick tip from experience: keep your slide headlines short and punchy. Visitors are on your site for two seconds before they decide to scroll. Long paragraphs on a slider get skipped entirely. One strong headline and a clear button is all you need.

How to Configure Slider Settings (Autoplay, Speed, Navigation)

Once you have your slides set up, click anywhere outside the individual slide settings to go back to the main Slides widget settings panel. In the Content tab you will see a Settings section at the bottom. This is where you control how the slider behaves. Key settings to pay attention to: – Autoplay: Toggle on if you want the slider to automatically advance through slides without the user doing anything. For most business sites, I leave this on. – Autoplay Speed: How long each slide stays visible before moving to the next (in milliseconds — 5000 = 5 seconds is a comfortable default) – Transition: Choose between Slide (horizontal sliding motion) and Fade. Fade often looks cleaner and more professional on simple business sites. – Transition Speed: How fast the animation between slides happens – Pause on Hover: Recommended to keep this on — it pauses the slider when a visitor hovers over it, giving them time to read the text – Infinite Loop: Keeps the slider cycling from the last slide back to the first – Show Arrows: Displays left/right navigation arrows on the sides of the slider – Show Dots: Displays small navigation dots below the slider so users can jump to a specific slide

How to Style Your Elementor Slider

Click the Style tab at the top of the widget settings panel to access the visual styling options. This is where you can make the slider match your brand instead of using the default look. You can control: – Slide height: Set a fixed height in pixels, or use VH (viewport height) units for a full-screen effect – Title typography: Font family, size, weight, and colour for your headline text – Description typography: Same controls for your description text – Button styles: Background colour, text colour, border radius, hover states – Navigation arrows: Size, colour, and whether they sit inside or outside the slider – Dots: Size and colour of the dot navigation below the slider For local business sites — salons, gyms, clinics, restaurants — I generally keep the styling simple. A clean font, readable text size, and a button colour that matches the brand is all you need. Avoid going overboard with animations and effects. Fast and clear beats fancy and slow every time.

3 Types of Sliders You Can Build with This Widget

The Elementor Slides widget is flexible enough to create three different slider types, depending on how you set it up: – Image-only slider: Use beautiful background images with no text overlay at all — great for photography portfolios or visual showcases. Simply leave the Title and Description fields empty. – Text-only slider: Skip the image and use a solid background colour instead. Then write your text content. Useful for highlight banners or testimonials. – Text and image slider: The most common setup for business sites. A background image on each slide with a headline, short description, and CTA button layered on top. This is what most of my clients need for their homepage hero section. All three of these can be created using the same Slides widget — you just configure the Background and Content tabs differently for each.

Best Practices for a Clean, High-Performing Slider

After building sliders for hundreds of local business websites across the USA, UK, and Australia, here are the guidelines I follow every single time: – Keep slides to 3 or fewer: Visitors rarely click past the second or third slide. More than that and you are just adding weight to the page. – Compress your images: Large unoptimised images are the number one reason sliders slow down a website. Use a tool like TinyPNG or ShortPixel to compress images before uploading. – Use an image overlay: A semi-transparent dark overlay over your slide background image makes white text far more readable on any photo. – Write short headlines: Aim for 5 to 8 words maximum on your slide title. It should be readable in under two seconds. – Always add a CTA button: Every slide should give the visitor somewhere to go. A button with a clear action (‘Book Now’, ‘Call Us’, ‘See Our Work’) converts much better than a slide with no next step. – Check mobile view: After building your slider, always preview the page on a mobile device or use Elementor’s responsive mode. Adjust font sizes and slide height for mobile separately using the responsive controls.

Benefits of Using an Elementor Slider with Text and Image

A well-built text and image slider on your homepage does more than just look good. Here is why it is worth taking the time to set it up properly: – Grabs attention immediately: A strong hero slider with a bold headline and image is the first thing visitors see. It communicates what your business does in seconds. – Guides visitors to take action: With a CTA button on each slide, you are actively directing visitors to the next step — whether that is booking an appointment, calling you, or browsing your services. – Mobile responsive by default: Elementor sliders automatically adjust to different screen sizes, so they look great on phones and tablets as well as desktop screens. – Fully customisable to your brand: You can match every colour, font, and layout to your existing branding without any coding skills. – Supports multiple messages: Instead of one static hero image, a slider lets you highlight two or three different services or offers in the same space — perfect for businesses that serve multiple customer types.

Frequently Asked Questions

Is the Elementor slider widget free or do I need Elementor Pro?

The Slides widget used to create a text and image slider is part of Elementor Pro — the paid version of the plugin. The free version of Elementor does not include this widget. If you want a slider with text overlay on images, you will need an active Elementor Pro licence.

How do I add text over an image in an Elementor slider?

In the Elementor Slides widget, your image goes into the Background tab of each slide, and your text (Title and Description) goes into the Content tab. The text is automatically layered on top of the background image. You can add a Background Overlay in the Background tab to make the text easier to read over busy photos.

How many slides should I have in my Elementor slider?

For most business websites, 2 to 3 slides is the sweet spot. Visitors rarely interact with slides beyond the third one, and adding more slides means more images to load, which can slow down your site. Keep it focused with your most important messages.

How do I make my Elementor slider full width?

To make your Elementor slider full width, make sure the section containing the slider is set to Full Width in the section layout settings. Then set the Content Width to Full Width inside the section settings as well. This removes the side padding and stretches the slider edge to edge.

Can I add a button to an Elementor slider slide?

Yes. Inside each slide’s Content tab in the Slides widget settings, there is a Button Text field and a Button Link field. Type your button label (e.g. ‘Book Now’) and add the URL you want the button to go to. You can style the button colour and font under the Style tab.

Why is my Elementor slider text hard to read over the image?

This is almost always because there is not enough contrast between the text and the background image. The fix is to enable the Background Overlay in the slide’s Background settings and add a semi-transparent dark or brand-colour overlay. This darkens the image slightly so white or light-coloured text becomes clearly readable.

How do I set my Elementor slider to autoplay?

In the Slides widget settings, scroll to the Settings section at the bottom of the Content tab. Toggle Autoplay to Yes, then set the Autoplay Speed in milliseconds — 5000 milliseconds (5 seconds) is a comfortable default for most websites. Also enable Pause on Hover so the slider pauses when a visitor is reading the slide.

Final Thoughts

And that is everything you need to create a professional Elementor slider with text and image on your WordPress site! Once you get the hang of the Background tab for your images and the Content tab for your text, the whole process is surprisingly quick. For most sites I build, the entire slider is done in under 30 minutes. If you want to see the full process in action — including how I set up all three slider types (image only, text only, and text with image) — make sure you watch the video tutorial linked on this page. It walks through every click in real time, which is much easier to follow than screenshots alone. If you have a question about your specific setup, drop it in the comments below — I read every one and do my best to help. And if you would rather have someone set this up for you properly, feel free to reach out to me directly through the contact page. I am always happy to help.