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

Updated: October 24, 2019

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!