The Journal Blog Kit for Divi is a is a third-party layout by Divi Soup with features like a child theme. The layout itself is made with the Divi building and includes a slider, categories, and a blog feed with hover effects to create an elegant blog page. It also features a styled sidebar and a default custom blog post design that you add to your child theme. The new features are added to your child theme by importing them or with a simple copy and paste.
The blog kit includes three different blog and archive page layouts. You can change the layout between full-width, grid, or inline by pasting the included CSS into the theme options or the child theme CSS editor. The archive, category, tag, author, and search results pages follow the same layout as the blog page. It also includes Font Awesome integration.
The blog kit comes with all of the files and instructions on how to use it. In this article, I’ll install the Journal Blog Kit and see how easy it is to use and take a look at its features.
Installing the Journal Blog Kit for Divi
Unzip the downloaded file. Inside, you’ll find several files including JSON files for the blog page layout and customizer settings, a read me file, CSS, PHP, JS, and widget files (these are the types of files you’d find in a child theme).
I recommend following the instructions to see how to install the files since it will be done manually. Fortunately, the instructions are well written and the process is not difficult. You’ll need to use a child theme (even if it’s blank). The PHP file will be overwritten when the theme updates if you add it to the parent theme.
The Journal Blog Kit for Divi Documentation
A link to the documentation is provided in the download file. Clicking the file takes you to the blog kit support page where you’ll find a search feature, installation instructions, customization instructions, and a link for support. Customization instructions show how to change the colors, the number of columns in the layouts, and the excerpt length.
Click the installation instructions and follow the steps. This will include copying and pasting code into certain locations, uploading files via FTP, and importing files via a plugin. Each of the steps is detailed. It will take a few minutes to go through the steps.
The Journal Blog Kit for Divi Blog Page
The blog kit includes the blog page layout as a JSON file. This layout should be imported into the page itself rather than the Divi library. The page itself uses a post slider, six call to action modules, and a row with a blog and sidebar. This will display differently depending on the CSS you use. Let’s look at the features and layout of each layout.
The Journal Blog Kit for Divi Slider and Categories
The post slider places vertical dot navigation to the left and displays an excerpt to the right. The excerpt centers the text and has a lower opacity so the featured image of the slider shows through. It also includes a view post button. When it slides, the image fades in and the excerpt slides up from the bottom.
The call to action modules work as links to archive pages for specific categories. Hovering over the module changes the button’s color from a black background with white text to a white background with black text and adds a black border. I love the bold yellow. This is an interesting way to add category navigation to the page.
The colors come from importing the customizer styling. You don’t have to use it and you can change the colors easily. If you want to have access to your original customizer styling you’ll need to export it first.
The Journal Blog Kit for Divi Fullwidth Layout
Here’s the blog layout using the fullwidth CSS. The featured image zooms on hover. It adds a drop cap to the first word of the excerpt. The category and drop cap are styled in yellow. The read more button is styled to match the layout.
The Journal Blog Kit for Divi Grid Layout
The grid layout displays two posts in a single line under the categories. It includes the same styling as the full-width layout such as zoom on hover for the featured image, yellow category and drop cap, and button styling.
The Journal Blog Kit for Divi Inline Layout
The inline CSS shows the blog posts with the image to the left and the text to the right. It includes the styling and features of the other layouts. In this example, I took a screenshot at the bottom of the list to show the styled Older Entries button. This same button appears within all of the layouts.
The Journal Blog Kit for Divi Sidebar
If you import the widget settings it creates a sidebar with several styled widgets. The sidebar includes an about me section with a title, photo, and description, and sections for search, categories, archives, tags, and recent posts. Each section is styled to match the layout. I like the yellow lines on either side of the titles. Categories and archives are drop-down boxes. Tags are styled links.
The Journal Blog Kit for Divi Individual Post Layout
If you upload the post file via FTP to your theme’s files, the individual blog posts that are created with WordPress rather than the Divi builder are also styled and have lots of new features added to them. Features include the category, title, date, number of comments, and tags above the post. The post has a styled drop cap.
Following the post are a styled author box, post navigation, related posts, and a styled comment box. Comments are cascaded and include a styled icon to show that a reply is a response to another comment. The individual sections include the styled yellow lines with the titles.
The Journal Blog Kit for Divi Price
The Journal Blog Kit for Divi is £49.00. It includes all the files and instructions you need to use it.
- You can purchase the Journal Blog Kit from the developer’s website.
The Journal Blog Kit for Divi
The Journal Blog Kit for Divi adds a lot of styling features to your blog pages and posts. I like that it styles the blog posts without them having to have been built with the Divi builder. I’m also glad to see a kit that just focuses on the blog. Blogs don’t always get enough attention.
The files have to be installed manually, but I think this is a good exercise because it shows where certain types of files go and it gives you some information about how WordPress works. Adding the files is actually easier than it sounds. I had no trouble with adding any of the code.
I added CSS to the child theme file for one of the layouts, and then deleted that code and added the CSS to the theme options for the others. Both worked as expected. The CSS, JS, PHP, and all of the imported files worked perfectly on the first try. To go back to your original design or to a different design, simply change your child theme and remove the CSS.
It’s interesting to have child theme style features in a layout. I like this because it can be used with any child theme or layout. If you’re interested in adding some new blogging features to Divi, I highly recommend taking a look at the Journal Blog Kit.
We want to hear from you. Have you tried the Journal Blog Kit for Divi? Let us know what you think about it in the comments below.
Featured Image via M.Stasy / shutterstock.com