Installing Blogging Toolkit Layout Pack

Before installing this layout pack

  • Check if you met all of the hosting requirements settings under Divi > Support Center

Step 1: download 2 folders

  • Download the folder all-divi-blog-layouts-1-1.zip.
  • Download the folder divi-blog-layouts-supplementary-files-1-1.zip

Extract both zipped folders

all-divi-blog-layouts-1-1: This folder contains one JSON file with all layouts

divi-blog-layouts-supplementary-files-1-1:  This folder contains all layouts separated (so you can just import one layout instead of all of them).

Step 2: Importing the layouts into the Divi Library

Go to Divi > Divi Library. Click on the import/export options.

Click on Import/export button and switch to the import tab.

If you want to upload all layouts at once then choose the file all-divi-blog-layouts-1-1.json inside the folder all-divi-blog-layouts.

Note: It is possible that you can not upload all layouts at once due to the file size (depending on your upload file settings). In that case, just upload the layout from the divi-blog-layouts-supplementary-files-1-1 folder.

If you want to upload only one layout then go to the folder divi-blog-layouts-supplementary-files-1-1. Here you will find all the blog folder categories. inside each folder, you will find all the JSON files of each blog and post version.

Use the demo website (https://divilayoutpacks.divimarketplace.shop/blog-layouts/) for the blog’s reference. The categories and version numbers correspond with each other.

Step 3 Importing a blog page layout

Go to your blog page on the front end and enable the visual builder.

1) Click on load from library

2) Go to Your Saved Layouts

3) Check Blog Layouts

Choose a layout for your blog page

You can use the demo website to see how each layout looks like.

Step 4 Importing a post layout in the Theme Builder

For your posts, I recommend using the Theme Builder.

In your WordPress dashboard navigate to Divi > Theme Builder.

1) Click on Add New Template > Build New Template

2) Then assign this template to your posts

3) Click on Add Custom Body > Add From Library

From here go to Your Saved Layouts tab and choose a post layout version.

After you have imported a layout click on Save Changes.

How to

Change the height of the blog grid

By default, the blog gid in Divi does not have an equal height (see image below).

I am using CSS code to fix this so all grids have equal heights.

You might need to adjust this height depending on if your titles are longer or if you also enable excerpts.

This is easy to adjust, enable the visual builder and switch to wireframe view.

 

You will find 1 or 2 code modules depending on the layout. Find the CSS code for the blog this will always be sitting inside the blog section and likely just below the Blog module.

The other code module in this case is for the opt-in box.

Open that code module and under the End Colors you will see this:

Adjust the value 400px to increase or decrease the height of the blog grids.

Sidebar widgets

Unfortunately, I have not found a good solution to import all the widgets. When I find one I will add it but for now, you have to create the widgets manually.

Below you will find images of each sidebar and which modules I have used so you can easily build them.

Note: In the images below you will see that I have multiple sidebars, I use a plugin in the demo to create these. You can just place the widgets in the Sidebar at the top.

Sidebar 1

This sidebar is for:

  • Sidebar layout V1
  • Post layout V6

In the screenshot below the widgets that I have used.

Sidebar 2

This sidebar is for:

  • Sidebar layout V2

Make sure to place the title and widget inside a Group for Latest posts and categories.

Sidebar 3

This sidebar is for:

  • Sidebar layout V3
  • List layout V2
  • List layout V4
  • Post layout V2

Make sure to place the title and widget inside a Group for Latest posts and categories.

Sidebar 4

This sidebar is for:

  • Sidebar layout V4
  • Post layout V7

Make sure to place the title and widget inside a Group for Latest posts and categories.

Sidebar 5

This sidebar is for:

  • Sidebar layout V5

Sidebar 6

This sidebar is for:

  • Sidebar layout V6

Make sure to place the title and widget inside a Group for Latest posts and categories.

Sidebar 7

This sidebar is for:

  • Sidebar layout V7
  • Post slider V4

Sidebar 8

This sidebar is for:

  • Sidebar layout V8
  • List layout V6
  • List layout V8
  • Post slider V2

Colors

Open the code module (you need to switch to wireframe view).

I added descriptions for all the colors so it should be easy to find them.

Read more button color

Pagination colors

Widget colors

This is an example of the first sidebar but it works the same for the others.

Need Help?

Email: info@markhendriksen.com

Free Layout Packs

Join my free membership and get access to 17 free Divi layout packs.

Join Free Membership