How to Add an Author Box in the Single Post Template in Divi Builder

Each WordPress theme has a unique single post layout. In WordPress itself, the layout of the single post is controlled by a dedicated template file belongs to the theme you use. In most themes, the file is named single.php. If you use Divi theme or any theme with Divi Builder installed and activated, you can create a custom single post template to replace the default single post template of your theme thanks to the theme builder feature.

Creating a custom single post template using Divi Builder, you can add any element to your liking. From standard elements like post meta, comment box, to author box. Speaking of author box, Divi Builder provides no specific module dedicated to adding an author box. To achieve it, you can use either the Blurb module or the Person module. These two modules combine the image content and text content and they support dynamic content. To add an author box, you can set the image content to display the author profile picture and the text content to display the author name. Here is how.

How to Add an Author Box in the Single Post Template in Divi Builder

If you are new to Divi Builder and haven’t created a custom single post template before, you can read our previous article to learn how. In this article, we will go straight to adding the Blurb module.

Start by adding a new section and select a column structure according to your design concept. Add the Blurb module.

The settings panel will appear right after you select the Blurb module. You can make the settings to the module via this panel. The Blurb module itself allows you to display three elements related to the author: profile picture, name, and bio.

Setting the profile picture

To set the author profile picture, you can open the Image & Icon block under the Content tab on the settings panel. Hover your mouse over the image selector then click the trash icon and then click the database icon and select Author Profile Picture.

Setting the profile name and bio

To set the author name and bio, you can open the Text block under the Content tab. To set the author name, you can click the database icon on the Title field and select Post Author while to set the author box, you can click the database icon on the Body field and select Author Bio.

If you want to set the link of the author (link to author’s page), you can open the Link block. You can set the link of the author on the Title Link URL option. Click the database icon and select Author Page Link.

Customizing the author box

Once you are done making the basic settings on the Content tab, you can switch to the Design tab to customize the author box. There are 11 blocks you can open here. The following are some of the basic customization settings you can apply.

• Author profile picture placement

To set the placement of the author profile picture, you can open the Image/Icon block. Select the placement you wish from the Image/Icon Placement option.

From this block, you can also set the border radius, border style, border color, image shadow, and CSS filters.

• Typography and text color of the text content

Of course, you can also set the typography (font family, font style, font size, and so on) as well as the text color of the text content (author name and bio). To set the typography of the author’s name, you can open the Title Text block while to set the typography of the author’s bio you can open the Body Text block.

• Set the size of the author profile picture

To set the size of the author profile picture, you can open the Sizing block. To set the width, you can enter a value on the Image Width option. By default, the value is set to 100%. You can set it with an exact number with a pixel unit. For instance, if you want to set the width to 300 pixels, you can simply type 300px.

You can play around with other blocks to explore other customization options you can apply. Or, you can also read this article to learn more about how to use the Blurb module of Divi Builder. Just don’t forget to click the checklist icon on the settings panel to apply the changes you made. Once you are done editing the template, you can click the Save button on the bottom-right corner of the Divi Builder editor to save the changes and click X icon on the top-right corner to exit the Divi Builder editor.