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.
2. Click on “Add New Template”.
3. From the pop-up, locate “Posts” and check the “All Posts”.
4. Then, click the blue “Create Template” button.
5. Click on “Add Custom Body”.
6. Click “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:
- Build From Scratch.
- Choose a Premade Layout.
- 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.
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
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.
3- The portability pop-up will open, click Import.
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.
Hi, Can you please let me know how to make social (fb/instagram/twitter) profile URLs dynamic respective to authors’ profiles in user section.
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.
Great tutorial! I applied the same method to my main blog.
Thank You very much Abdou!
I thought was not posible get dynamic data in a person module!!
Perfect!
Thank you very much, Abdou! You save me a lot of time. This tutorial is awesome.