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

by | Feb 5, 2020 | Divi Tutorials, Free Divi Layouts, Freebies | 5 comments

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.

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.

More Article

5 Comments

  1. somesh

    Hi, Can you please let me know how to make social (fb/instagram/twitter) profile URLs dynamic respective to authors’ profiles in user section.

    Reply
    • Abdou

      Hi,
      2 ways:
      1. Add them as links in the bio of each author ( using HTML “a” tag ).
      2. Use a dedicated plugin for author boxes.

      Reply
  2. dryant

    Thank You very much Abdou!
    I thought was not posible get dynamic data in a person module!!
    Perfect!

    Reply
  3. Mamadou Ndiade

    Thank you very much, Abdou! You save me a lot of time. This tutorial is awesome.

    Reply

Submit a Comment

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

All Access Bundle

Get ALL current & future products for $69/year instead of $327/year

Save Now →

Download The Most Powerful WordPress Theme

Pin It on Pinterest

Share This