This tutorial will show you how to add and customize a post slider using the Divi Visual Builder for WordPress. The post slider can display your post content on any web page in a great looking slider.

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!

Text Version Of This Divi Tutorial

 

Hello, this is Jimi Blevins.

Today I’m going to show you how to: “Add A Post Slider To Your Webpage Using The Divi Visual Builder.

Let’s go ahead and “Add” (+) in your “Post Slider,” by clicking on the gray plus (+) sign and searching “Post Slider.” After you select it, all the elements will pop up. It will automatically populate with every blog post that you have.

HowToAddPostSlider

When the options first come up, you will have the option to specify how many posts you would like shown with “Posts Number.”

Then, you’ve got “Include Categories,” and I’m going with “Featured Image.” These are just posts that have a featured image to them.

HowToAddPostSlider3

The “Show Arrows” option, if I mouse over the picture you’ll see there are these arrows that pop up, and I can turn that on and off.

HowToAddPostSlider4Show Controlsturns on and off the dots at the bottom of the image. The “Show Read More Button“, I can turn that on and off as well.
I can also customize the “Button Text” for this too if I want.

HowToAddPostSlider5

Content Displayallows me to show just an excerpt of the content or the entire content itself. If I put it on “Show Content,” it just makes the picture huge and puts all of the content on it. If I really want to show off my pictures and my text that’s a great way to do it, but, I think I’ll go back to just using the excerpt.

HowToAddPostSlider7

The “Automatic Excerpt Length” is here:

HowToAddPostSlider8

I can knock that down, or say I just want 200 words, it will automatically show me what that looks like with 200 words on it.

The “Show Post Metais all this information above the post, the date, the author, what category it’s in, so I can turn that on and off if I wanted to.

If you turn off the “Show Featured Image” option, it will pop up a default “Background Color” which is going to be the color of your theme. You can turn that on and off if you want.

HowToAddPostSlider9If you want as well, you do have the option to do “Parallax Effect,” and “Image Placement.” We can put the image to the “Left,” to the “Right,” just to kind of show off our content a little bit more.

HowToAddPostSlider10

There are a lot of great options for the slider.

So, we’ve got a “Use Text Overlay” option, and this is if I want to make the text stand out just a little bit more by darkening the background.  I can also change the “Background Overlay Color.”

You’ll notice that if I turn the “Background Overlay” on and off, the picture gets a little bit brighter and I can play around with that if I want.

HowToAddPostSlider12

Say I don’t want to “Use Text Overlay,” so I can change it, and adjust the transparency with the slider on the right.
You can see I can really fade the picture out so the text is a lot easier to read.

HowToAddPostSlider15

There’s a “Remove Inner Shadow” option, with the color I’ve shown it doesn’t really show that much, but this is so you can turn this on and off.

I can also change the “Background Image Position.” I think the default is just “Center Center,” but I can change that around anyway that I want to.
I can also make it “Fit” inside the dimensions here, or I can make it fill up with “Actual Size” in the “Background Image Size” option.

HowToAddPostSlider18

So, jumping into the “Design” elements here, I can mess with pretty much anything that you see on the screen.

HowToAddPostSlider19

I can change the “Top Padding,” and that’s going to be the area up here above, for the “Bottom Padding,” it is the area below.

HowToAddPostSlider20

I can “Hide The Content,” or “Hide Call To Action,” or “Hide The Image” on a mobile device.
I can do a “Text Overlay Border-Radius,” and I can also customize the color of the arrows in “Arrows Custom Color.”

HowToAddPostSlider21

Just to show you what that looks like, I’m going to make a pink color. You can see where the buttons are pink and now the arrows are pink as well.

HowToAddPostSlider22

 

I can change the “Header Font,” and I can also adjust the “Header Font Size.” Maybe I’ve got a bunch of long titles and I want them to fit in one line, I can make that a little bit smaller. Then, of course, I also have the same options with the “Body Font,” to make that bigger or smaller if I want to. I can change the “Body Text Color.HowToAddPostSlider23

Then the “Meta Font,this is what I turned off and the other options, which is the author, the date, all that. I can change the “Meta Font Size” and “Meta Font Color” as well with that. This is where I can also “Use Custom Styles for Button“, which is this “Read My Post” button right here:

HowToAddPostSlider24

You can play around with that of course.

So a lot of great ways to really customize this and make it look good on your website. I am really happy with this module, and I plan on using it quite a bit in my in my future websites as well.

So, that covers everything with the “Post Slider,” once again my name is Jimi Blevins, and thank you so much for watching!

Let's Get Started!

Enter your email address below to begin setting up your account.

You've completed the first step!

Connect With Us For More Epic Tutorials And Blog Posts

Connect With Us For More Epic Tutorials And Blog Posts

Accompany us on our journey of creation, design, and inspiration worldwide. 

Connection Successful... Welcome To The Wonderful World Of Mozaic Technology!