Amazing Free, Responsive Blog Layout For Divi Theme
Hey Divi Nations!
I’m super excited to see you all with another free, responsive blog layout giveaway. if you’re first time here, welcome to this blog where I share tricks and hacks about visual & web design stuff in general. and this is a response to the Facebook giveaway announcement where I share a lot of design resources and Divi stuff for free.
About this layout
This a fully customizable and responsive blog layout, ideal for day to day bloggers, or even for the people who just want to get started with blogging by using the Divi theme. and this layout was created by using the Elegant themes Divi article card extension and went through a bit of (a lot🙄) customization by using custom CSS. therefore it should work as nicely on mobile and desktop devices. feel free to explore the demo below, before you jump over to the installation guide.
Installation process – 101
in order to simplify the whole thing, I’ve got breakdown the installation process by following three parts. however, I’d like to advise you that before you install anything on your live site, create a full backup of your site and it’s always recommended to using a child theme. if you’re not sure what child theme is, check out the Divi’s child theme guide. so let’s get started.
The article card extension
First thing first. you need to install the Divi’s article card blog extension. download it from the given link below and just install it as you’d typically install a plugin in WordPress. once you install it just activate it. that’s it you’re good to go 😃 🎉
Creating a new page
In this step, all you have to do is to create a new blank page and once you created just enable the visual builder and just drag & drop the JSON file (link in the download section) in the portability window of the visual builder. once it’s done just save & exit. hola!! 🎈
Adding the custom Css
In this last step, all you have to do is to download the custom Css file (link in the download section) open it with any text editor, copy them all and paste it into your Divi themes options custom Css box, save & exit. that’s it, you can take your coffee now. ☕🥪
01. Installing the article card extension
Here in this example, I’ll show you how to install and activate the article card extension. (swipe from left to right)
02. Creating a new page
Here in this example, I’ll show you how to install the blog layout. just create a new page & enable the Divi builder. once you choose the file as shown in the image below just hit save and exit. (swipe from left to right)
03. Adding the custom Css
Here in this example, I’ll show you how to add the
Assets & Download
Here are all the files and assets that you need to get started with this whole thing, once you download the zip file just unzip it, then you’ll find following files (divi-100-article-card, Nazreen’s Free Divi Blog layout.json & Custom Style.css) follow the instruction accordingly as demonstrated above. Hola!! there you have it.
Frequently asked questions
01. Is this all compatible with the latest version of Divi & WordPress?
Yes, it is. I’ve tested all above-mentioned things with a fresh installation of WordPress (Version 5.0.2). and the latest Version of the Divi theme (Version 3.19). therefore it should work without any issues. but if you find some difficulties, feel free to let me know. I’d love to help you out.
02. Is it possible to customize the blog layout by using just the built-in options of Divi builder?
Absolutely. there’re tons of options you can tweak with. so feel free to customize it as you like.
03. Is this optimized for small screens such as mobile & tablets?
Yes, it is responsive. and will work nicely on all the major common screen sizes.
Thank you so much for your time & patient. I hope this will help you out to do something new and useful. I’ve spent a considered amount of time on making this guide simple and intuitive as possible. I’d love to hear from you about how do you feel the flow of information and the way it’s organized. have you experienced difficult to follow the instructions step by step? feel free to let me know. see you next time.