How to Create a Custom Single Post Layout in WordPress with Divi Builder

Divi Builder (the default page builder of Divi theme) comes with a theme builder feature that allows you to create a custom single post layout. Since Divi Builder can now be installed on any WordPress theme — other than themes developed by Elegant Themes — you can create a custom single post layout with Divi Builder no matter the WordPress theme you use.

The most exciting thing about this best page builder for WordPress is that you will get an amazing Divi Discount through which you can save considerable bucks and enjoy the design freedom as well. Don’t miss this fantastic opportunity of buying the premium Page Builder + WordPress Theme at a concession price.

There are two ways to create a custom single post layout in WordPress with Divi Builder. You can create a custom single post layout whether from a premade template or from scratch.

Creating a Custom Single Post Layout in WordPress with Divi Builder

Divi Builder allows you to create a custom single post using its visual editor where everything is drag and drop. No need to touch any single line of HTML or CSS. You can create a custom single post layout whether for the entire website or certain posts/pages based on certain criteria such as by tag or category. When creating a custom single post layout, you can use the following modules:

• Post Title: To display the post title
• Blurb: To display the post meta (post author, date, comment count, and so on)
• Post Content: To display the post content (article and image)
• Post Navigation: To add post navigation (previous and next post)
• Comments: (To display the comment box)

In addition to the modules above, you can also add any module you want. For instance, you can use the Email Optin module to add an email subscription form.

How to Create a Custom Single Post Layout from a Premade Template

Although you can create a custom single post layout from a premade template, Divi Builder offers no premade templates on the template library. However, on one of its official blog posts, Elegant Themes (the developer of Divi Builder) provides a premade template you can download.

After downloading the template file above — which available in a ZIP format — unzip until you get the JSON file. This is (the JSON file) the file you need.

Next, login to your WordPress dashboard and go to Divi -> Theme Builder. Click the two-arrow icon on the right side.

On the appearing window, go to the Import tab and click NO FILE SELECTED to select the JSON file you have just downloaded. Click the Import Divi Theme Builder Templates button.

A new template should be available on the theme builder. Until here, you have successfully created a custom single post layout. You can click the Save Changes button to apply it to the entire website.

If there are some parts you want to edit, you can click the pencil icon to edit the template.

You will be directed to the Divi Builder editor after clicking the pencil icon above. On the Divi Builder editor, you can edit the elements you want to edit. Be it the sections, rows or modules. To view the structure of the single post layout, you can enable the Wireframe View feature.

To edit an element, you can hover the element you want to edit and click the gear icon to open the settings window. Or, if you are on the Wireframe View mode, you can simply click the gear icon on the element you want to edit.

You can customize an element via the settings window. There are three tabs you will find on the settings window: Content, Design, Advanced.

• Content tab: To edit the content (image, text, icon)
• Design tab: To customize the element such as typography, color, margins, paddings, animation effects, and so on.
• Advanced tab: To add custom CSS and enable/disable an element on a certain device.

Once you are done editing the template, click the Save button on the bottom-right corner to save the changes and click the X icon on the top-right corner to exit Divi Builder editor.

Make sure to click the Save Changes button on the theme builder page to apply the changes.

How to Create a Custom Single Post Layout from Scratch

If you have your own design concept of the single post layout for your website, then creating a single post layout from scratch is a great idea. Of course, it takes longer. But you can create a completely unique single post layout. You can create whether a sidebar-less single post layout or with a sidebar. In this post, we will demonstrate how to create a simple single post layout as follows:

It takes the following elements to create a single post layout like the one above.

• Section 1: To place the post title, post meta, featured image
• Section 2: To place the post content, post navigation
• Section 3: To place the comment box.

To get started, go to Divi -> Theme Builder. If you want to create a global single post layout (site-wide), click Add Global Body on the existing template block and select Build Global Body.

On the next appearing dialog, since you want to create the single post layout from scratch, simply click the Start Building option.

If you want to create a single post layout for a certain post, post under a certain category or post under a certain tag, add a new template block and select the post, tag, or category you want to apply the single post layout to and click the Create Template button. Click Add Custom Body and select Build Custom Body.

# Section 1

By default, Divi Builder provides a section. You can use this section as the first section. Select a row structure you like. In this example, we use a single-column row structure.

Your section might have a divider style by default. If you want to remove it, open the section settings panel and go to the Design tab. You can remove the divider on the Dividers block.

Now add the Post Title module. This module contains three components: the post title itself, post meta, and featured image. We will use this module to display the post title and post meta. While for the featured image, we will use the Image module. We use the Post Title module since this module displays the post meta in a horizontal mode (in-line). You can also use the Blurb module to display the post meta.

On the settings window, open the Elements block under the Content tab and disable the Show Featured Image option. You can also disable other elements you don’t want to display on the post meta.

To style the module, you can go to the Design tab. From this tab, you can set the text alignment, title text size, title text color, title font, meta text size, meta text color, meta font, paddings, margins, and soon. Just don’t forget to click the green checklist button to apply the changes you made.

Add another module (Image module). On the Image block under the Content tab, click the trash icon to delete the image. Then click the database icon and select Featured Image.

To set the image size, go to the Design tab on the module settings window. You can change the image size (width and height) on the Sizing block. Again, don’t forget to click the green checklist button before closing the settings window.

# Section 2

We will use this section to place the post content. Add a section by clicking the blue plus icon and select Regular. Since we want to create a sidebar-less single post layout, we select the single-column row structure.

Add the Post Content module to the column. To customize the Post Content, you can go to the Design tab on the settings window. To customize the text body (font style, font family, text color, text size, alignment, and so on), you can open the Text block. From this block, you can also set the link color, bullet, and numbering.

To customize the heading text, you can open the Heading Text block. To set the margins and paddings, you can open the Spacing block. You can play around with the settings window to customize the post content style. Just make sure to click the green checklist button before you close the settings window to apply the changes you made.

Once done customizing the Post Content module, add the Post Navigation module. By default, this module displays the post title as the navigation label (anchor text). You can use a different text (such “next post” and “previous post”) by typing your preferred text on the available fields on the Text block under the Content tab.

Go to the Design tab on the settings window to style up this module.

# Section 3

We will use this section to place the comment box. Add a new section by clicking the blue plus icon and select Regular. Select a single-column row structure and add the Comments module.

There are three elements you can display on the comment box: avatars of the commenters, reply button, and comment count. You can disable one of the elements from the Elements block under the Content tab.

Again, you can go to the Design tab to style up the Comments module. You can set things like the fields background color, fields, text color, fields focus color, fields font, fields font style, the typography of the meta, style of the submit button, and so on. Just play around until you get satisfied with the look of the comment box and click the green checklist button to apply the changes.

Once you are done, click the Save button on the bottom-right corner to save all of the changes you made and click the X icon to exit the Divi Builder editor.

Don’t forget to click the Save Changes on the theme builder page to apply the custom single post layout you have just created.

You might be wondering, why does Divi Builder have no module to add social share buttons?

If you want to add social share buttons to the single post layout of your website, you can install the Monarch plugin. You don’t need to spend extra money to get this plugin. The subscription license of Elegant Themes allows you to download all products developed by Elegant Themes, including Monarch.

The Bottom Line

The theme builder feature of Divi Builder allows you to create a custom theme part on your WordPress site, including the single post layout. You can create a custom single post layout using the visual editor of Divi Builder without having to deal with HTML or CSS.

You have a full freedom over the single post style you want to create. Whether a sidebar-less single post layout or with a layout. You can add any module you want and apply any styling option you like. If you want to create a custom single post layout for a certain post type, you can also do so.