Mandatory Steps For Blog Layout To Work:-

Have tested the ‘JSON’ files on Divi Version ‘ 4.3.3 ’ and WordPress‘5.3.2’

Below is additional ‘ Help Guide ‘ to troubleshoot any issue you face during layout installation and everything is explained properly in the ‘ installation guide document ‘ available in the product Zip

Step 1:

Make sure you have imported Blog Posts / Media XML files under Tools -> Import -> WordPress Import

Step 2:

Have shared ‘ Installation Guidelines ‘ document and step 9 / 10 is mandatory ie applying CSS / JS code as mentioned below:

Installation Guide:

A. Copy CSS from file and “PASTE“ under Divi -> Theme Option -> General -> Custom CSS

Do remember to save it.

B. Add js Code -> Go To “Divi Theme Option” & Click on “Integration” Tab -> In Code Section -> Add JS Code In <>head<> Tag as shown in the screenshot

Do remember to save it.

Step 3:

You can start importing required layout ‘ JSON ‘ file either via page or library following ‘ installation guideline document ‘ below :

Here we are showing procedure to import ‘ Layout ’ via Page:

A. Add New Page -> Enable Divi Builder : Make sure you import it on ‘ New Page ‘ or else on importing it will reload ‘ Page ‘ and remove old data if any.
B. Click “ Arrow “ at the top ie Import / Export option as you can see in the screenshot below and import desired ‘ Page Layout ‘ JSON ie for example if you want “ Blog Grid V2 Page” import only “ Blog Grid V2 Page.json “.
Make sure you use ‘ Page JSON ‘ of the given version from the product Zip and not the Library JSON

C. Save it -> Publish Page To Get Result

It will add given version sections in ‘ Divi Builder ‘ as shown in the screenshot below:

In example have shared screenshot of ‘ Blog Grid V1 ‘.

Back-End Screenshot After Importing JSON Via Page:

D. Publish The Page & Check Front-End – > Will Look As Per Screenshot Below
In-case some of the ‘ posts’ image is not loading it is due to ‘ Previous Media Images ‘ present in media library that over-ride or rarely get corrupted, If that happens you may need set images manually under ‘ Posts -> All Posts ‘

Step 4:

How To Manage Post Displaying At Front-End In Your Layout?

You can Go To -> Posts -> All Posts : Delete Posts That Is Not Needed

FAQ: Frequently Asked Questions

Q1. After applying JSON it is still showing error and JSON is not importing properly?
Answer:

Kindly check you have installed any security plugins like ‘ WordFence’ or cache plugin like ‘ W3 Total Cache / WP-Rocket ‘

If any of the plugin is installed you need do as below:

A. Disable security plugin and try import ‘ JSON ‘ again and verify when import is completed it show ‘ Layout Sections ‘ in back-end like in screenshot

B. Clear all cache under ‘ plugin setting ‘ like for example ‘ W3 Total Cache ‘ and try importing ‘ JSON ‘ via page after disabling any cache plugin if any and if problem persist you may need clear cache from server side and try.

Q2. After importing ‘ Media XML ‘ HomePage is showing ‘Blog Posts’?

Answer:
It will show as per the setting in the menu structure and complete guidelines for same is below:

How To Set HomePage Under Menu Option & Set Menu Structure In Divi ?

If you see ‘Posts / Layouts’ appearing as ‘HomePage / Navigation’ that you don’t need , than you might need to do the required setting in the ‘Menu ‘ as per the steps mentioned below:

A. How To Set HomePage Under Menu Option :
Step 1:

Go To – > Appearance – Customize -> Homepage Setting

Step 2 :

Select Static Page -> Select Page That You Need Set As HomePage (like in example it is photo click) -> Publish – > Check Front-End For Changes

B. How to set Menu Structure?
Step1:

Go To Appearance -> Menu – >Select Menu Name (usually as ‘Main Menu ) – > Create Menu

Step2:

Select All Page You Need Add In Menu

Step3:

Under Menu setting Tick Mark 2 Check Boxes
-> Automatically add new top-level pages to this menu
-> Select Menu Option (Usually It Is ‘ Primary Menu ‘)

How To Change Read More Button Text & Manage CSS / Color In Blog ?