Change Blog Layout for Divi Theme

Jan 15, 2020 | Divi Theme, WordPress Wednesday


Change your Divi Theme blog layout with the new Theme Builder tool. Inside of Divi you can create very cool layouts and here’s how it’s done! Kori Ashton walks you through this tutorial with a video step-by-step guide. Hope this helps you! Happy WordPressing!

Full Transcript

Hey y’all, my name is Kori Ashton. I’m super excited today to walk you through setting up a more dynamic layout for your Divi blog. If you’re frustrated at the default boring layout and you want something that may be in a grid effect or something that just shows more of your different blog articles on that category page, there is a way to do it. It’s a little bit of a process. I’m gonna walk you through it right now.

So you know if you follow my channel that I love the Divi theme and it is actually what I’ve built AskKori.com on, and this right now is the default layout on any of my category pages. Notice over here I have my different categories. When you click on here, you’re gonna see all the different videos that I have, tutorials that I have kind of in this singular line down the page.

Change your Divi Theme Blog Layout

divi-blog-layout

But, what if you wanna have a really nice layout, something a little bit more dynamic. Maybe a cool grid effect? There’s a really great tutorial, “How to Create a Category Page Template for your Blog Using the Divi Theme Builder.” So again, in October of 2019, Divi Theme launched a custom builder so that you can build out custom sections of the theme. Areas that you really didn’t have access to before are now fully accessible, fully customizable, in their drag-and-drop capabilities in the Divi Builder.

So this specific tutorial by Jason Champagne here, if you walk through it, check out the different layouts. Oh my goodness, just beautiful, beautiful layouts that allow you to quickly and easily create something very cool and dynamic like this.

This is what we wanna do and I’m gonna walk you through this tutorial step by step, teach you how to do it on this video, but I’ll also have the link to this tutorial in the description below so you can just go click on this and follow it step by step if you’d rather, or you can watch this video.

Installing The Free Layout

But the one thing you’ll need for sure is to come to this link anyway because you’re gonna wanna download for free this layout. They give us this layout totally for free. The example shown here. They give us the code needed, basically the little zip file that we need to grab it and go install it into your Divi Theme. So you’re gonna wanna follow that link, come here, enter in your email address and go from there.

There you go, click Download the Files and they’re downloading. You can read right here to import the template layout to your website you will need to go to the Divi Theme Builder, use the portability option to import the .json file to the Theme Builder, all right? So you can see over here they’re showing you which icon to go look at.

Let’s go in our Dashboard and go take a look. Take time out for a second. Before you get started on this, be absolutely certain that you have a backup in place and you know how to get to it in case anything goes wonky or weird right now, all right? But if you follow this step by step, it should work perfectly for you. So here we go.

Going into your Dashboard, you’re just gonna scroll down to the Divi area on your navigation and go into Theme Builder. Right over here on the right side you’ve got two arrows, one up, one down. That’s where we’re gonna go to look for the import, export option now that we’ve got that file downloaded. We’re gonna Import and as long as you opened up that file already, that little zipped file that you had there, you should have a nice little .json file that lives out here now. there we are, .json file.

Open and just like you see inside the tutorial here, you’re gonna have just these first two things checked in the options override and allow and let’s go ahead and go back to ours, override allow and then we’re gonna go ahead and import. So now that shows up right here, you see it says All Category Pages. It’s already been applied, we should be able to go back to the front side of our website.

Go to, any category page for that matter, ’cause it’s gonna affect all of your category pages, and we should see that beautiful layout. Here’s one of your most recent, here’s a few here, and look at these brilliantly laid out in this beautiful pattern, everything sitting here, and of course, it all links perfectly, it’s got a little Older Entries link there, if you wanna go to the older things, but everything’s living here.

You’ve got your title, you’ve got your featured image, you’ve got your categories, a little bit of an excerpt, and your Read More tag. Beautifully done, and I didn’t have to code one thing. There are a few other things that you can do to make this more dynamic or more specific if you like to do something a little bit more custom on here. Let’s go in and I’ll show you a few more things you can do.

You’re gonna go back to your Dashboard. We’re gonna go back to the Divi Builder, back down here, Divi, Theme Builder. We’re gonna go into this Custom Body area here just by clicking on the little pencil icon and open up some options. So we can come over here and check and see what this is. Clicking on the gear icon it’s gonna say Post Count Four, Read More is your button, of course, you can change that if you wanted to, ’cause notice this is a little slider that slides through, right here.

It just has four really cool little rotating through. It’s got the title and excerpt and a little Read More. If you don’t like that button color you can obviously go in here and make any changes that you want. You can go into the design, make any changes that you want so that you’re using all of your own colors if you like, matching things, and now that’ll match your theme.

If you don’t like the opacity, anything like that you just go into this little gear icon and you can go make changes to the design, the content that’s showing, you can lengthen the excerpt, if you’d like to, change the elements that show if you want, maybe you do want the arrows to show, you don’t want the arrows to show, that’s up to you, show the little dots at the bottom, or don’t show them, you’ve got all those options living right there for you to tinker and play with. On this particular part, over here, same concept, you can click on the little gear icon, make changes to things if you like.

Notice, here, though, this says Post for Current Page, if you wanted to, check that off and you can actually then select which categories could be up here at the top and highlighted for you. So maybe you just want a Beginner’s Guide. So all the things that we have just for beginners inside of that one particular blog category, you can check that and only those will ever list here. It’s completely up to you, you can say All Categories, you can go back and just click Post for Current Page, that’s fine as well, click Okay, and those will live there.

Same concept as you scroll down the page. This section, right here, you can do the same thing. You can just turn that off and get very, very, drilled down into specifically what you want to display here for this particular page. Click Okay, you’ll go down here to the three dots, click Save, Exiting out up here at the top right-hand corner, you’ll go ahead and click X, and you’ll wanna save all changes.

Remember, as well, that with this incredible Divi Theme Builder you can actually take one of these templates and only assign it to one different type of category or all of your category pages. Just check this out, look, when you hover over this column you’ll see, kind of a muted out, but you’ll see that gear icon, again. Click on that little gear icon and you can designate which categories, specific pages, whatever you wanna do here, you can specify where this template, where this layout is applied on your entire Divi Theme Website, pretty phenomenal, isn’t it? They just have gone above and beyond to give us access to do things in a really cool and effective way.

So, for now I’m gonna leave that layout applying to all of my category pages, ’cause I think it looks so much better. The other thing about this is that anytime you click Update for the Divi Theme, all of this customization stays in place. You don’t have to run a child theme right now, you don’t have to worry about your PHP files being overridden, nothing like that’s gonna happen because all of this lives inside of the Divi Theme. It’s all saved for you, it’s all being applied perfectly and so moving forward all your security updates are gonna be perfectly in place.

Do you guys see why I love the Divi Theme and why it’s literally the highest selling WordPress theme in the world right now? It’s so powerful, these authors are so generous. We’re so thankful to what Elegant Themes can do for us. If you’re interested in more about Divi, I’ve got a lot of other videos for you to watch. I’ll put the link to those, that whole playlist, in the description box below. I hope this helps y’all feel like this, click Like, subscribe to my channel, I will see y’all next WordPress Wednesday. Bye everyone!