Select Page

Amazing Free, Responsive Blog Layout For Divi Theme

WELCOME

Welcome to this special free Divi blog layout giveaway

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 Css to your Divi theme options. if you’re using a Divi child theme then the second slide will help you to do so.  (swipe from left to right)

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.

Final Conclusion

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.

Pin It on Pinterest