This tutorial will show you how to add and customize a divider using the Divi Visual Builder for WordPress.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Transcript from the Divi Tutorial

________________________________________________________________________________________

Hello, this is Jimi Blevins and today I’ll be teaching you: “How To Use The Divider Module in the Divi Theme Builder.” 

First, let’s pick a color for our divider.

ScreenshotHowToAddADivider2

I’m not sure why this option is here,”Visibility”, but you do have to set the visibility if you want to show your divider. I imagine if you wanted to keep it hidden or just use it as an invisible divider to create space, that options there for you. 

This height actually determines the height of the element, it’s not going to set the height of the line itself so we’re just going to leave that at one.

ScreenshotHotToAddADivider3

Now let’s kick over here into the “Design” elements. Here we can change it from dotted, dash, double, to anything that we want to do with this. 

ScreenshotHowToAddADivider4

Again if our weight right now is one it’s not going to show up, so let’s make it a little bit thicker. You can see the difference there. The “Divider Position” this will be either at the top of the actual element or bottom, and you can also vertically center it. Of course, you can hide this on mobile devices if you don’t want them to actually see the divider.

ScreenshotHowToAddASlider5

It’s a pretty straightforward very simple module. I like using dividers in my content just to break things up, I think it makes a little bit easier to read and it’s also a great layout and element to add to a web page every now and again to kind of spice things up a little bit.

Once again, thank you so much for watching. My name is Jimi Blevins with Mozaic Technology.