Add an Author Box to Divi Posts Without a Plugin + FREE Download

By Abdou

February 5, 2020

If you write blog posts yourself or have a blogging team, it is essential to have an author box under each post. The author box is a great way to make a personal connection with your readers. It will also help you make a great exposure for yourself, team, brand and business.

People like to do business with familiar faces and this simple box will help you a lot to do more business and connections.

What is The Author Box?

It is a simple box that contains the article author’s photo, name, bio and maybe some social media links. There are a lot of ways to add an author box to your WordPress website, you can use a theme that supports that out of the box, you can install a free plugin or if you are a developer, you can modify your theme’s files to add it.

Divi theme itself does not add an author box under blog posts but using its awesome dynamic content feature and the theme builder, you will be able to create this box without modifying any files or installing any plugins.

But first, you will need to have a blog post template created using the theme builder. If you don’t have one, we will build a simple one below.

Build a Divi Blog Posts Template

Let’s build a simple blog post template using the theme builder. This template will be used for all of our blog posts and it will contain our author box.

You can download a beautiful blog post template for FREE below 😉

To get started, follow these steps: If you don’t wanna read, watch this screencast.

1. Go to your WordPress admin dashboard -> Divi -> Theme Builder.

Divi theme builder

2. Click on “Add New Template”.

3. From the pop-up, locate “Posts” and check the “All Posts”.

All Posts

4. Then, click the blue “Create Template” button.

5. Click on “Add Custom Body”.

Add Custom Body

6. Click “Build Custom Body”.

Build Custom Body

Now, you will be taken to Divi Visual Builder where we will build the blog post layout. When Divi Builder opens, it gives you 3 options:

  1. Build From Scratch.
  2. Choose a Premade Layout.
  3. Clone Existing Page.

Select the first option since we will build it from scratch.

Blog Post Modules

Any blog post must contain some essential elements, there are 3 modules that we usually need, these modules are the Post Title, Post Content module, and the Comments module.

The Post Title module displays the post title, post categories, post tags, author name, post publish date, comments count and the post’s featured image.

The Post Content module will display the post content.

The Comments module will display the comments on this post if comments are enabled.

Build The Author Box

After adding the main element of the blog post, let’s now build our author box.

There are a lot of ways to do that, I’ll choose the simplest way here, I’ll use Divi’s built-in Person module.

1- Add the Person module to the layout. We will change 3 options to display our author details: the Name field, Body field, and the image.

2- When you move your mouse over any of these fields, the dynamic content icon will appear on the right.

Divi dynamic content

Click this icon to select the data you want to be used in this field.

3- For the Name, we will select Post Author.

4- For the Body, we will select Author Bio.

5- For the Image, you need to delete the placeholder image first by clicking the delete icon. After that, click the dynamic content icon and select Author Profile Picture.

Save the layout and you are almost done. All you need to do after that is to give the module some styling under the design tab to look better.

Download The Author Box Layout

Free Post Layout

If you don’t want to do anything yourself, don’t worry, you can download a beautiful FREE layout. It is clean and has the author box and a related posts section as well.

Import the Downloaded Layout

If you have downloaded the pre-made layout above and you want to import it, watch this screencast or follow the steps below:

1- Go to your admin dashboard -> Divi -> Theme Builder.

2- Click the import/export icon.

theme builder portability

3- The portability pop-up will open, click Import.

import divi layout

4- Choose the download file and click the blue “Import Divi Theme Builder Templates”.

5- After importing the template successfully, click the “Save Changes” button.

Congratulations! Now your posts look much better.

If you like this post and wat to see more like it, please, share it and leave a comment below.

Written By

Abdou

My name is Abdelfatah Aboelghit, a PHP developer from Egypt and my friends call me Abdou!
Here I write and develop products about Divi Theme.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

More Article

How to Add Custom Code to Divi Theme (CSS, Javascript & PHP)

How to Add Custom Code to Divi Theme (CSS, Javascript & PHP)

Divi theme is the most powerful WordPress theme in the world. It has tons of design options and provides hundreds of free layouts. You can design your website to be exactly as you like. Still, every now and then, you will need to add custom code to your WordPress...

Divi Child Theme Guide & FREE Download

Divi Child Theme Guide & FREE Download

Child theme! I’m sure you hear this a lot in the WordPress community especially, Divi community but what does it mean? Do you need a child theme? And why? In this post, I’ll explain everything you need to know about child themes and you can download a FREE blank Divi...

WooCommerce List View For Divi Theme

WooCommerce List View For Divi Theme

WooCommerce List View For Divi is a simple plugin to bring the classic blog list style into your store. The plugin changes the default WooCommerce grid view of Shop, Categories & Tags to a simple blog list style. The WC List View plugin comes with extra options to...

Pin It on Pinterest

Share This