How to Import the Blog Post Layouts

As you are here, I assume you already know what this content is about. If you find this content on a search engine, please visit this page to get the context.

Click the links below to view the live demos of the layouts.

Before we get started, first thing first, you can download the JSON files of the blog post layouts by clicking the following button. Unzip the file once downloaded.

Please note that the layouts were created using Divi Theme Builder. Thus, you need to use Divi on your WordPress site to use the layouts. You can get Divi on its official website.

Here are the steps to import the blog post layouts to your website.

Shortcuts ⤵️

Before You Import the Layouts

The blog post layouts you want to import contain dynamic elements. You need these dynamic elements because the content you want to create is dynamic, not static.

For instance. Let’s say that today you want to create a listicle titled “10 Best Page Builder Plugins for WordPress” and plan to place 3 plugins on the top 3 spot. For each plugin item, you want to add the plugin logo, name, key features, and CTA button as shown below.

The elements are the same for other items on the top 3 spots.

On your editorial calendar, you have some content that you want to write with the precisely the same format.

Now imagine how complicated the process will be if you set those elements statically. You need to create a new layout for every single content you want to create.

By leveraging dynamic elements, you only need a single blog post layout for many blog posts with the same format.

To add these dynamic elements to your blog post layout, you need a help from a plugin called Secure Custom Fields (SCF).

In WordPress, custom elements like these are called custom fields.

Create Dedicated Post Categories Before Importing the Layouts

There are two blog post layouts in a ZIP file you have downloaded above. I designed these layouts specifically for two content types:

  • Listicle
  • Product review

Before you import the layouts, I strongly recommend you to create two dedicated post categories to accommodate the content types above.

Or you can also use tags instead of categories.

Importing the Blog Post Layouts

As I mentioned above, the blog post layouts contain dynamic elements which are created with SCF. So, before you start to import the layouts, first you need to install the plugin first.

Install Secure Custom Fields

To start installing the Secure Custom Fields plugin, go to Plugins -> Add New Plugin on your WordPress dashboard. Type “secure custom fields” on the search box and hit the Install Now button to install the plugin

Activate the plugin right away once installed by clicking the Activate button.

You should see a new item called SCF on the side panel after activating the plugin.

Import Custom Fields Groups

After successfully installing the Secure Custom Fields plugin, you need to create custom fields group to accommodate the data of the custom elements you want to create.

The plugin comes with an export/import feature to allow you to export a custom fields group from a certain website to another. And vice versa.

And for this instance, I have exported the custom fields group from my blog to ease your job. You can click the button below to download the file.

Unzip the file after downloading. You should see a JSON file inside the folder.

Next, go to SCF -> Tools on your WordPress dashboard.

Click the Choose File button on the right column and select the JSON file of the custom fields group.

Click the Import JSON button to start the importing process.

After importing, you will have two custom field groups named Review Link and Top Picks. The Review Link custom fields group consists of 3 custom fields. While the Top Picks custom fields group consists of 15 custom fields.

You can go to SCF -> Fields Groups to view them.

Once done importing the custom field groups, you should see two extra fields beneath the WordPress editor (Gutenberg).

Start Importing the Layouts

Again. Before importing the layout, make sure you have installed and activated the Divi theme on your website because you need its theme builder feature.

Listicle Layout

Go to Divi -> Theme Builder on your WordPress dashboard and click the Portability icon.

On the appearing dialog, click the Import tab. Click the NO FILE SELECTED button and select the JSON file you want to import. Untick all the options and end by clicking the Import Divi Theme Builder Templates button.

On the next dialog, keep the default option to use the existing header and footer on your website.

Wait a moment until the importing process is done. Once the layout is imported, click the pencil icon on the Custom Body to edit it.

You will be taken to the Divi Builder editor after clicking the icon above. Here, you can edit the layout. You can tweak the design per your taste.

Setting Up the Dynamic Elements

As you can see, there is a dedicated row on the layout consisting of three columns. There are 5 dynamic elements you need to set on each column:

  • Item icon
  • Item name
  • Key features of the item
  • Link on the CTA button
  • Overview link

💡 Don’t worry if the dynamic image doesn’t show up on the Divi Builder editor. It will show up on the front-end (your content). You can use a static image temporarily to tweak the design.

1. Item Icon

Click the gear icon on the Image module to edit it.

On the settings panel, you can remove the current image by clicking the trash can icon under the Content tab. Next, you can click the three-disc icon.

On the appearing list, scroll down to the Tops Picks section and select Item logo 1.

2. Item Name

Edit the Text module right beneath the Image module you have just edited above.

On the settings panel, you can remove the current content by clicking the trash can icon on the Text block under the Content tab. Next, you can click the three-disc icon.

On the appearing list, scroll down to the Tops Picks section and select Item name 1.

3. Key Features of the Item

Edit the third Text module on the column.

On the settings panel, remove the current content by clicking the trash can icon on the Text block under the Content tab. Next, you can click the three-disc icon.

On the appearing list, scroll down to the Tops Picks section and select Highlights 1.

4. Link and Text on the CTA Button

Unlike the first three modules above, the Button module contains two dynamic elements: button text and button link.

For the button text, you can pull it from the same element as the item name.

Click the Button module on the column to edit it.

On the settings panel, remove the current content by clicking the trash can icon on the Text block under the Content tab. Next, you can click the three-disc icon.

On the appearing list, scroll down to the Tops Picks section and select Item name 1.

Next, open the Link block on the settings panel and remove the existing link by clicking the trash can. Continue by clicking the three-disc icon.

On the appearing list, select Item link 1.

5. Overview Link

Overview link is designed as an on-page navigation link where when being clicked, it jumps to an item on your listicle. Take a look at the following GIF.

To edit the overview link, click the Button module right beneath the CTA button you have just edited above.

Open the Link block on the settings panel and remove the existing link and then click the three-disk icon.

On the appearing list, you can select Overview link 1.

You can repeat the steps above to edit the dynamic elements on the other two columns. To make it easy for you to identify each dynamic element, I have tailored the custom field names as follows:

  • Item logo 1: For the item logo on the first column
  • Item name 1: For the item name — and CTA button text — on the first column
  • Highlights 1: For key features/highlights of the item on the first column
  • Item link 1: For link on the CTA button on the first column
  • Overview link 1: For on-page navigation on the first column

  • Item logo 2: For the item logo on the second column
  • Item name 2: For the item name — and CTA button text — on the second column
  • Highlights 2: For key features/highlights of the item on the second column
  • Item link 2: For link on the CTA button on the second column
  • Overview link 2: For on-page navigation on the second column

  • Item logo 3: For the item logo on the third column
  • Item name 3: For the item name — and CTA button text — on the third column
  • Highlights 3: For key features/highlights of the item on the third column
  • Item link 3: For link on the CTA button on the third column
  • Overview link 3: For on-page navigation on the third column
Setting Up the Dynamic Elements on the Floating Banner

Apart from the hero section, the layout you have imported also has dynamic elements on the floating banner.

The banner itself will show up on scroll down and hides on scroll up — automatically.

There are only two dynamic elements on the floating banner:

  • Button text
  • Button link

Those elements are pulled from the same custom fields group as the elements on the hero section above (item name and item link).

To start editing the elements, edit the third column on the first row inside the third section. Rename the CSS class temporarily.

You can use the Layers feature to make it easy to find the column. Take a look at the following GIF.

Next, edit the first Button module on the banner.

On the settings panel, remove the existing text under the Text block and then click the three-disc icon.

On the appearing link, select Item name 1.

Next, open the Link block on the settings panel. Remove the existing link and click the three-disc icon.

Repeat the above steps to edit the dynamic elements on the other two buttons on the floating banner.

Once done, revert back the CSS class name of the column — which you renamed above.

Once done editing everything, you can click the Save button to apply all the changes. To exit the editor, you can click the X icon.

On the Divi Theme Builder screen, click the gear icon on the layout/template you have just edited. Select a category/tag you have prepared earlier above and click the Save button.

Click the Save Changes button to apply the change.

Product Review Layout

The steps to import the product review layout are no different as the listicle layout above.

First, you click the Portability icon and follow the steps on the appearing dialog. Once imported, you can click the pencil icon to edit the layout.

The product review layout has two dynamic elements, which are displayed on the floating banner. The elements are:

  • Reviewed item logo
  • Button text
  • Button link

To edit them, first, open the third column on the first row inside the second section. Go to the Advanced tab and open the CSS ID & Classes block and rename the CSS class name — temporarily.

Editing the Dynamic Logo of the Reviewed Item

First, edit the Blurb module.

On the settings panel, open the Image & Icon block under the Content tab. Remove the existing image by clicking the trash icon and then click the three-disc icon.

On the appearing list, select select Image on the Review Link section.

💡 Don’t worry if the dynamic image doesn’t show up on the Divi Builder editor. It will show up on the front-end (your content). You can use a static image temporarily to tweak the design.

Editing the Dynamic Button Text and Link

Edit the Button module on the floating banner.

On the settings panel, remove the existing button text by clicking the trash icon on the Text block under the Content tab. Then click the three-disc icon.

On the appearing list, select Link text on the Review Link section.

Move on to the Link block. Remove the existing link and then click the three-disc icon. On the appearing list, select Link on the Review Link section.

Done forget to revert the class name of the column back once you are done editing the dynamic elements.

Once done editing everything on the layout, you can click the Save button to apply the changes and then click the X icon to exit the editor.

On the Divi Theme Builder screen, click the gear icon on the layout you have just edited and select where you wanto assign it (category/tag you have prepared above).

End by clicking the Save button.

Click the Save Changes button on the top to apply the changes.

Using the Layouts

Listicle Layout

As I mentioned earlier, the listicle layout is designed specifically for listicle content type. On your listicle, you can place the top 3 affiliate products you recommend the most on the hero section (before the content) and on the floating banner.

To use this layout, first, write the content just like usual. Once done, select a category — or tag — you have prepared earlier above.

Add all the dynamic elements of the top 3 products to the custom fields group.

Adding Overview Link

To add the overview link, first, edit the heading block of the listicle item you want to add the overview link to.

On the Gutenberg settings panel, open the Advanced settings block and add an HTML anchor.

Paste the blog post URL to the overview link field, followed by the HTML anchor. Add the hashtag symbol (#) before adding the HTML anchor.

Product Review Layout

The product review layout is designed for — well — product review content. This layout has three dynamic elements as I have elaborated above.

To use this layout, first, write the review content just like usual.

Once done writing the content, select a category or tag just like the listicle above. Next, open the Review Link custom fields group to add the dynamic elements.

That’s it. Feel free to reach me out if you experience any issue in using the layouts.

Good luck!

This page may contain affiliate links, which help support the project. Read our affiliate disclosure.