How To Create Divi Full Width Slider And Making It Responsive?

  • wpmaven.net

How To Add, Configure And Customize Divi Full Width Slider Module?

Divi is a powerful WordPress visual builder that allows you to place sliders into full width sections, making your sliders span the entire width of the browser. If you are wondering, Divi is one of the best alternatives to Oxygen Builder app.

Aside from that, Divi sliders also support parallax backgrounds and video backgrounds (which is uniquely one of its kind in the WordPress industry).

Here's a quick video on Divi Full Width Slider module.

Part 1: How To Add A Full Width Slider Module To WordPress?

After installing Divi Theme or Divi Builder plugin to WordPress, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Upon enabling this option, you will have access to all of Divi builder's modules (including pre-made demos and templates).

Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Create Full Width Element Using Divi Builder

To start building a full width slider using Divi Builder, you start by clicking on the gray plus button to add a new module to your WordPress page or post.

It is important to keep in mind that new modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. 

How To Insert Module In Divi Builder Plugin

You can easily find the full-width slider module within the list of modules and click it to add into your WordPress page. To make the search easier, you can also type the world "fullwidth slider" into the module search column.

Once the full width slider module is added, you will see the three tabs:

  • Content
  • Design
  • Advanced

Clicking on these taps will allow you to configure the modules based on the content, design or advanced options such as CSS and other customized coding.

Click here to try Divi right now. This is the best WordPress visual builder for beginners.

Part 2: How To Make Divi Full Width Slider Responsive?

By default, Divi full-width slider module is not responsive (“mobile-friendly”). Google has long been a strong advocate for websites to be mobile friendly, especially mobile-friendliness is one of the SEO ranking factors.

While developments are done to resolve this, what you will find below will be one simple trick to make your full width slider module responsive.

For the record, Divi is by far the most popular, powerful themes on the market and one of those visual builders that we truly use to build our clients' websites. If your thinking about starting a WordPress website design, we recommend you to give it a try. For a limited time, you can try Divi (demo) for free right here.

Step 1: Resize Or Crop The Images In The Sliders

To make Divi full width slider responsive, you need to resize or crop all of your imagesfor the slider. Having images of the same size is the most important step right here.

There are many free image resizing tools (such as Gimp) that you can use to resize the images and our favorite one is Canva. As a Canva Pro user, you can easily 1-click resize the image without needing to do any hard work.

Not sure what image size to use? Don't worry, we got you covered!

We have found that 1200 x 400 pixels works well for full-width slider photos, but you can any size that you are comfortable with.

Step 2: Add A Full Width Section And Slider Module

This is a two-step process. You start by adding a full-width section using Divi Builder, followed by adding a full-width slider module.

Here's how it looks like.

Add A Fullwidth Section Using Divi
How To Make A Full Width Slider Responsive Using Divi

Step 3: Customize The Module Layout

In order for your slider to scale correctly using Divi Builder, head over to the main slider settings which is found under Advanced Design Settings.

Set the top and bottom padding to a % (see screenshot below). We recommend to use around 20 - 25% for the slider to work best.

Building A FullWidth Slider Responsive With Divi

Step 4: Getting The Slides Module Ready

This step is rather straightforward. Add your slides and set your slider photos as the background image for each slide before pressing the save button.

Adding A Fullwidth Slider Module To WordPress
How To Make My Slider Responsive In Divi

Step 5: Adding CSS Style

This is the last step in creating a Divi full width slider that is responsive. Head to your slider module setting and search for the custom CSS class (Slider Module Settings > Custom CSS > CSS Class). 

Input in a unique identifier, such as "custom-slider". Press save.

Finally, add this CSS code into Divi Theme builder (Divi > Theme Options > General > Custom CSS field) to active the CSS custom class.

.custom-slider .et_pb_slides .et_pb_slider_container_inner {
display: block;
}

After the above is done, hit the save button and clear your cache. Now, you have not only created a Divi Full Width Slider, you had also successfully created a Divi Full Width Slider that is mobile responsive!

Summary: Creating A Full Width Slider Using Divi Builder

We noticed that there are many questions related to "how to build a full width slider using Divi" and "how to create a full width responsive slider using Divi". We hope that you find this WordPress tutorial on Divi useful and if you have any questions, tell us in the comment form below.

  • wpmaven.net

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related WordPress Tutorials

February 17, 2020
How To Improve WordPress Site Health Score?

Is the WordPress site health showing you an urgent error and rectifications required? This guide explains how to improve WordPress site health score.

Read More
February 16, 2020
5 Best Popup Plugins For WordPress To Build An Email List

Want to build an email list? Here are the top 5 and best popup plugins for WordPress websites. These are free and paid popup WordPress plugins for beginners.

Read More
February 15, 2020
How To Create Popup In Oxygen Builder?

If you are using Oxygen Builder, you might be wondering how to create popup in Oxygen Builder. This tutorial shows you exactly how to create a popup using Modal element.

Read More
February 14, 2020
Perfect Blog Post Template: 12 Steps To Create The Best Blog Post Layout

What is a perfect blog post template? WP Maven shares with you our custom blog post template that we use for our own website and company blog.

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram