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

Updated: May 26, 2021

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 editor, click the plus button to create a new section.

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 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 change the Columns Gap to No Gap.

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

Until here, you have successfully set the slides to full-width as well as fit the screen. To make sure the slides fit the screen on any device, make sure to set the height value on both tablet and smartphone.

You can play around with the left panel to customize your slides. There are many other options you can set to, including the animation effect.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

4 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

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.