Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

My friend and fellow web designer Ranesh Weerasingham encouraged me to address the Divi slider issue which has been a hot topic as of late.

And another fellow friend and web designer Tami Heaton recently encouraged a great discussion/debate on this topic on a couple of Facebook groups recently which had a lot of folks wondering what’s up with Divi.

so here is my 2 cents regarding the Divi Slider Module. In my opinion, it really is a great tool and has the potential to be visually stunning when used correctly. In fact I think it’s an awesome feature if used as intended and I have used it on several of my own projects and on my own site.

The issue some people are having is in the way it handles responsively in mobile devices.

Portions of the background images get cut off as the screen size shrinks and certain text and buttons are removed on smaller devices.

 

fullwidth-responsive 1080x400

 

This of course is intentional as the designers intended for the slider to shrink down proportionately for mobile devices

Now if you know a little CSS, you can easily override the default settings so that you can have full control like I did on own website.

 

fullwidth-responsive - quiroz2 1080x400

 

But lets say you don’t  want to spend a bunch of time playing with CSS. You just need a simple slider solution that is going to be easy to maintain.

That’s where Meta Slider comes in as a great free alternative.

Meta Slider

MetaSlider

 

It is a very easy to use WordPress slider plugin. You can create SEO optimised responsive slideshows with Nivo Slider, Flex Slider, Coin Slider and Responsive Slides.

You can create multiple slides with various dimensions to be placed just about any where on your site.

But enough about the cool things you can do. Let’s just get started using Meta Slider in our Divi theme.

 

Set Up Meta Slider

  • Download the plug-in here
  • Upload it to your WordPress site and install it.
  • Set up your first slider

1. Go to the Menu Slider option in your WordPress Admin

slider 1

2. Create your first slideshow by selecting the plus (+) sign

slider 2

3. Give it a unique name and then select the Add Slide Button. since I want the slider to stretch across the screen, I want to be sure to use images that are 1080 wide. You can choose what ever height you want but whatever height you intend to make the slider, make sure your images are the same dimensions. In this case I am going to use 1080×400.

slider 3

4. Once you have added your pics from the media library you can add a hyperlink where you want people to go when they click on the image. You can also rearrange the slides by dragging the image around. You can also play with the other slide settings like captions and SEO but for now lets just add urls for the hyperlinks.

slider 4

5. I want to use this in a Divi site that is set-up with a Box Layout and I am going to want it to stretch across the entire box so lets change the settings on the right. Lets use the Flex Slider template and change the width and height to 1080 x 400

slider 5

6. Now lets just adjust a few of the advanced settings just below that. I am going to make sure to check off the following: Stretch 100% wide, Center Align, Auto Play & Hover Pause

slider 6

7. Now hit save and you done with this part.

slider 7

 

Add The Slider To Your Divi Page

 

1. Go to the page you want to add this slider and create a new section.

slider 8

2. Open up the section module settings and give the section a unique CSS ID. I used meta-home-slider-container in my example.

slider 9

3. Now make it a one-column row and add a text module.

slider 91

4. Open up the text module and you will find a new button next to the standard Add Media button called Add Slider. Select it.

slider 92

5. You will be given the option to select which slideshow you want to use. In this case we only have one so select it and then select the Insert Slideshow button.

slider 93

 6. Now you can save everything up and update your page.

A Touch of Class To Make It Fullwidth

This last step is just adding a couple of lines of CSS to deal with the padding issues that come pre-designed by default in these Divi sections and modules.

1. Go to your Divi theme ePanel . Go to Appearance>Divi Theme Options

slider 95

2. Scroll down to the bottom of the page down to the Custom CSS panel where you will copy this CSS and paste it into that ePanel

#meta-home-slider-container {padding: 0px;}
#meta-home-slider-container .et_pb_row {width: 100%; margin: 0px; padding: 0px;}
#meta-home-slider-container .et_pb_text {margin-bottom: 0px;}

 3. It should look like this.

slider 96

Hit save and your all done.

 

Keep in mind this tutorial was intended for use in the Divi Box Layout template. But once you understand the basic theory, you should be able able to do this in any Divi theme layout.

You can check out my example over on my demo page here.

 

demo-800x600

 


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest