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

There are lots of ways to make the homepage of your website look more attractive. One of which is by adding a full-width slider. There are probably some plugins to create a slider in WordPress. 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.

Note: The Slides widget is only available on Elementor Pro. Find the differences between Elementor Free and Elementor Pro.

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.

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

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

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.

  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.


Leave a Comment

Haven’t used Elementor Pro yet?