Search
Close this search box.

How to Create a Full-Width Slider on WordPress with Elementor

With Elementor, you can effortlessly create a slider to your WordPress site. You can also customize the slider to make it looks the way you want. For instance, you can set the slider to full-width.

Elementor comes with a Slides widget which you can use to create a slider on your WordPress site. The Slides widget of Elementor comes with several options. You can, for instance, set the background overlay and add text or button to the slide.

If you add a new slider in Elementor, the slides are set to box width by default. You can change them to full width.

How to Create a Full-Width Slider in Elementor

To start creating a full-width slider on your Elementor-powered WordPress site, create a new page or post and edit it with Elementor. On the Elementor canvas area, click the plus button to create a new section or container.

Add new slides by dragging the Slides widget from the left panel to the canvas.

By default, this widget brings 3 slides. You can remove a slide by clicking the “x” button. Or, if you want to add a new slide, you can simply click the ADD ITEM button.

To customize the content (like adding an image background or change the default text), you can click each slide to open the available options.

As mentioned, the slides are set to box width by default. To set them to full-width, you can activate the section/section that hosts the slides. To do so, click the section handler or click the section name on the Navigator.

Once the section is active, go the Layout tab on the left panel and set the Content Width to Full Width under the Layout section. Also make sure the width value is set to 100 vw.

Next, go to the Advanced tab and set the padding to 0 px on all sides.

If you want to make the slide fit the screen height, you can activate the Slides widget (by clicking it on the Navigator) and set the height unit to VH. Set the value to 100.

The Bottom Line

Elementor has a native widget called Slides which you can use to create a slider. So, if you want to add a slider on your Elementor-powered WordPress website, you don’t need to install an extra plugin. The widget offers several options to control the slider behavior. More importantly, you have plenty design options you can apply to your slider.

This page may contain affiliate links, which help support our project.ย Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to turn your WordPress knowledge into revenue?ย OF COURSE!

5 thoughts on “How to Create a Full-Width Slider on WordPress with Elementor”

  1. This is nice, but how do I keep the text portion boxed? If I want the text left aligned and not full-width, but want the background full width.

    Reply
  2. This does not work. All the recommendations do is make the slides appear full screen in Elementor. When viewing the slideshow in Brave/Chrome the passing re-appears and even inline css is overridden.
    The following code is written into style.css

    @media screen and (min-width: 922px)
    .swiper-slide {
    padding: 30px 40px 30px 40px!important;
    }

    And this overrides inline css too — even with !important — quite how I have no idea but I guess the widget uses javascript to overwrite any css.

    Reply

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey ๐Ÿ‘‹๐Ÿป
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how ๐Ÿ‘‰๐Ÿป
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.