A tutorial showing how to add a blog to any page on your website using the blog module with the Divi Visual Builder for the Divi WordPress theme.

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. In this tutorial today, I’m going to show you how to work with the “BlogModule in the Divi Theme.
I’ve got the Divi Visual Builder loaded up, and I’m going to go ahead and add my module. Just click here on this gray plus (+) sign, and search and select “Blog.”

AddABlog

This is automatically going to pull my blog in here, so I can see in real time how it’s gonna look on the front end.
So I have two options here, the full-width option is what you see where the content and the images stretch all the way across the page, (not something I would necessarily want to see if I came onto a blog page, I’d like to see a little more content, little fewer photos)

AddABlog2So I’ve also got this grid:

AddABlog3

Which puts it into more of a masonry format. I really like this one because then I don’t have to worry about even or odd numbers of posts messing up the page, they all kind of fit together. If one is longer than the other, shorter than the other, it doesn’t really break the layout and it still looks really professional and clean.

I can change the number of posts I want to display in “Post Number.” If I want to knock that down to just four, you can see it’s only going to show these four post entries.

AddABlog4

I bump it back up to 10, you can see it puts it back where it was.

AddABlog5

The “Include Categories” feature, this allows me to pick and choose which categories I want to display on this page. Say I was making a page for a specific category in my blog, so I don’t want to show all of my blog posts I just want to show posts from that particular category on this page, this is where I would enable this option.

Right now, on this website, I only have one category called “Pics and Words,” if I had more you would see more options there.

So, the “Meta Date Format,” now this we discussed in the Divi Theme Options a few tutorials back, and I’ll go ahead and post the link to the WordPress page which kind of explains what you want to put in here. You can manipulate how it displays the date. You’ll see right now I have an abbreviated month, day, and year, if I want to change that, say I want to add the th to say 11 instead of just 11, so if I put a capital S in this space, that pops up 11th, 5th.

AddABlog7

If it was a one, it would be you know, 1st, 2nd, 3rd, that kind of thing. That capital S puts in that little suffix for the numbers. Again, I’ll post the link.

You can see that the “Show Featured Image” is pretty self-explanatory if I turn that off, none of my posts are going to have featured images on this page. (Which I actually kind of like that. It streamlines the page a bit. If I just wanted to show text and stuff, I just one quick way to get people there without spending a lot of time loading images from the website.)

AddABlog8

Now, this feature, to be honest, I’m not sure why it’s included.I don’t know of an instance where I would “Show All Content.”

AddABlog9
I guess maybe if it was on a forward page and I had three or four articles in there and I just wanted them all to be on one page that would be time for this setting.  The purpose of a blog page like this, is so you can give people an excerpt, they can click on it go to the actual page, so giving them all the content at once is not a feature I would put in it, but I’m sure that there’s probably a place for it if you come into it.

Show Author,” as you can see here, it says by “Jimi Blevins,” if I turn this “Show Author” off, then when it pops back up we just have the date and the category.

AddABlog10

Since I only have one category, maybe I don’t even want to show that. I’m going to switch it to just show the author and the date. I can also have it “Show Comment Count,” since it’s the testing website, we don’t have any comments on it, but if you wanted to show off your posts that have hundreds of comments on it where you turn that the page nation.

AddABlog11

If I had more blog posts, I’d be able to show you what “Show Pagination” does. It essentially it places the links down at the bottom of the page so that if I had more posts after this there would be a link here saying, “Older Entries.” In fact, let’s do this, I’m going to knock this post number down to, let’s say, 4. I’m only showing these four post entries now, yeah here it is, this “Older Entries.

AddABlog12

Now, if I had a picture for that if I had a few more posts in there and probably lay out a little bit better but that’s what the Pagination is. I’m sure you’ve seen that on some blogging websites. You can view older entries, newer ones.

Now, the “Offset Number,” I believe this is the feature here is. Let’s say I don’t want to show my latest couple posts, I want to show everything after my first couple posts, so I might put this “Offset Number”  to 2.

AddABlog13

What that’s going to do is, it’s not going to show those first couple posts, it’s going to show everything like the third post on. Which is a great feature if I’ve got a page that’s really like showcasing my newest post and I want people to go to that page instead of being able to access here.

Next, the “Featured Image Overlay,” is a feature that I really like.
Right now, if I mouse over the pictures, I just get the link cursor hand:

AddABlog14

But if I turn this on, it creates a nice little animation. It’s a little more enticing for people to visit.

AddABlog15

I can also change the color of the icon. I can change the icon,
I want to say more interested forward movement, so I’m going to change it to this forward arrow here:

AddABlog16

Now when I mouse over, I got the arrow pointing telling people yeah, go forth to read this article.

AddABlog17

Text Color,” this is if my background was light or dark, I could specify whether I wanted my text to be light or dark. One thing I really like about Divi is, it seems to be able to grasp what the background color is. So even if I haven’t set this to what I would think would be the proper setting, it kind of automatically puts it in there for me. Just another great feature that Divi’s got built-in.

AddABlog18

So, let’s go over the “Design” options.

AddABlog19

We’ve got this grid tile background color, so if I come in and change this, you can see that it changes the color of the text. This is exactly what I was just talking about, you notice it automatically changes this to a lighter text, it’s a little more readable.

AddABlog20

Again, just one of those things that are built into Divi that I really like.
I’ll clear that out because I don’t really want that.

I’ve got a “Drop Shadow” feature that I can put on the boxes, show a little bit of drop shadow.

AddABlog21

I can change my “Header Font,” and this will be kind of the title of the articles. I can make it bold, italic.

I can change the “Header Font Size.”

I can change the color, the letter spacing, and then I can also change any of the options on the Meta Text as well if
I want to change the color of that.

AddABlog22

So I’ve got a lot of options to play around with to really make this pop and make it look great and professional.

Just one more thing I really like about this Divi Visual Builder is, again as I’m going through and selecting my different options I see exactly what’s going on. I know how it’s going to work on the final product, you know the existing website without having to go back and forth, save, test, save, test.

So I really like this new Visual Builder. It’s a great, time-saving feature and I hope you enjoy walking through these blog settings with me.

Once again, my name is Jimi Blevins and thank you so much for watching.