After unzipping the download file, you will see it contains the following:
- Blog page layout .JSON file
- Fullwidth, inline & grid .CSS files
- JS file
- Single.PHP file
- Customiser settings .JSON file
- Widget .WIE file
STEP 1 - Importing the page layout
Import the Blog page layout .JSON file into a new page (NOT THE LIBRARY) using the portability feature and save the page.
STEP 2 - Adding the CSS
Depending on which layout option you wish to use (fullwidth, inline or grid) open the .CSS file and copy the contents. Then paste into the stylesheet of your child theme, if you are using one, or Divi > Theme Options > Custom CSS
You will likely see some red crosses once you have added the CSS here (as shown in the image below). These are false positives, not actual errors and you can ignore them. It is due to this field not recognising the more recent CSS3 properties we use in our code.
STEP 3 - Adding the jQuery
Open the JS file and copy the entire contents and the paste into Divi > Theme Options > Integration > Add code to the <head> of your blog
The code already contains the enclosing tags required.
STEP 4 - Adding the single post template (optional)
If you wish to use the single post template included with the blog kit, you MUST be using a child theme. Simply upload the single.php file from the blog kit to the child theme folder of your site via FTP.
STEP 5 - Importing the customiser settings (optional)
For convenience, we have included a customiser settings file you can import. This will apply the fonts, buttons and styling used in the demo to your own site.
PLEASE NOTE: If you do choose to import the customiser settings, all your current customiser settings will be overwritten. So before importing, export your current settings in case you want to restore them.
Navigate to Divi > Theme Customiser then click on the up/down arrow in the top left corner.
When the portability box opens, click Import and select the customiser settings JSON file from the download package. The click Import Divi Customiser Settings.
STEP 6 - Importing the widget settings (optional)
If you wish to use the widgets as displayed in the demo, you will first need to install this plugin
Once installed and activated, navigate to Tools > Widget Importer & Exporter.
Under the Import Widgets section, click Browse and locate the widgets.wie file from the download package. Then click Import Widgets.
When you have finished, you can delete this plugin.
That's it. Your blog should now look like the demo. Don't forget, you can adjust the number of posts displayed on archive pages in Divi > Theme Options > General.
Blog kits are designed to use the button styling you set in the theme customiser, so if you have not used the included customiser settings JSON file, your buttons will use whatever settings you have applied.