The Divi theme does not natively allow you to add an author's bio at the end of blog posts. If your blog has a variety of writers (or even if you're the only one), you may want to display a small bio at the end of each post. In this tutorial, I'll explain two ways to add an "author box" to your posts: with or without a plugin.
Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and the sponsored links are in pink.
Method 1: Add a bio at the end of your articles with Simple Author Box
Easily add an author bio with the "Simple Author Box" plugin
Simple Author Box is a freemium plugin whose free version is already more than enough to add a nice author box at the end of your articles.
The appearance of the author boxes can be configured from the general settings of the plugin. Many options are available.
From their profile, each user (administrator, editor, contributor, author...) will be able to easily add the social networks they use.
Here's how to do it:
1. Install and activate Simple Author Box
As usual, go to the Extensions > Add tab and enter Simple Author Box in the search field. Install it and activate it.
2. Make the plugin settings
You will see a new tab in the left sidebar of your administration screen: Simple Author. This is where you can start customising your author boxes.
- The SETTINGS tab: here you can decide whether or not to display the "author box", the email, the opening in a new tab, the icons etc.
- The APPEARANCE tab: here you can customise the margins, choose the appearance of the photo (round or square) and decide on the appearance of the social network icons.
- The COLORS tab: here, everything is customisable. You can change the colour of the "author box", the background of the icons, the links, the text etc...
- The TYPOGRAPHY tab: here you can define the typeface for titles, text etc. You can choose from the Google Fonts catalogue.
3. Adding social network icons to the authors' bio
The second part of setting up Simple Author Box is in your profile settings.
- On the Users > Your Profile tab, you can :
- Enter your bio. This is native to WordPress, so you don't need this plugin to enter your bio. But if you want your "author box" to have an impact, make sure you fill in this field.
- Add an illustration to your profile. This is automatic if you use Gravatar.
- If you are not using a Gravatar profile, Simple Author Box allows you to upload an image to illustrate your profile.
- Finally, you can add as many social icons as you need. Don't forget to fill in the URL of each of your profiles.
4. Check the result
Once you have made your settings and customisations, you will be able to see your bio at the end of each of your articles.
Symbols" type icons
Colored - Circle" icons
Colored - Square - Long shadow effect" type icons
5. Advantages and disadvantages of this method
This method is ideal if you maintain a multi-author blog. This way, each writer will be able to customise their profile via the Users > Your Profile tab.
If you are the only editor of your blog, is it really necessary to add such a plugin? Maybe because it's easy to use and the rendering is pretty good... If not, you have an alternative: coding your bio at the bottom of each article...
Method 2: Add a bio at the end of your articles without a plugin
The Simple Author Box plugin offers so many possibilities that I'm not sure you need or want to use the no plugin method. Here, you'll have to get your hands in the code and be creative in optimising the appearance of your author box using CSS... But why not?
This is what you will need to do:
1. Modifying the single.php in a child theme
For this method without plugin, you will need, first of all, to create a Divi child theme.
Next, you will need to :
- copy the single.php file from the parent theme and paste it into your child theme.
- edit this single.php file with a text editor such as SublimText (or Bracket)
- add - after line 142 of single.php - this piece of code:
Please note: all red links in the above code must be replaced with your own social network links.
Code to add to single.php - after line 142
2. Add CSS to improve the appearance of the author box
Finally, once the code is inserted in the right place in your single.php file you can improve the appearance with a little CSS. For my example, here is the CSS code I used:
.ad-author-box {
border: 2px solid;
padding: 30px 30px 60px 30px;
margin-top: 60px;
box-shadow: 5px 5px 0px 0px #e1e1e1 !important;
}
.ad-author-title {
margin-bottom: 20px;
}
.ad-author img{
float: left;
margin-right: 20px;
border-radius: 50%;
box-shadow: 3px 3px 0px 0px #e1e1e1 !important;
}
.ad-icon-author{
padding-top: 45px !important;
background-color: #ffffff;
padding-right: 20px !important;
}
This CSS code should be added to the Appearance > Customise > Additional CSS tab or to the Divi > Theme options > General tab (at the bottom of the page).
3. Check the result
Once you have modified the single.php and added the CSS, you should see an author biography at the end of each of your posts that looks like the screenshot above. If you are not happy with the design, you can easily change it using CSS.
4. Advantages and disadvantages of this method
This method is ideal if (and only if) you are the sole editor of your blog and you don't want to burden your site with an additional plugin. However, Simple Author Box does the job well... to be seen...
In conclusion...
You have seen that it is quite easy to add an author bio at the end of your articles. Is this really necessary? No... Is it interesting? Yes.
Indeed, putting the author forward can be interesting because it humanises the article. The Internet user sees that there is a real human behind a blog article, it creates interest, interaction ... and that's always good. Moreover, it will allow you to put yourself forward because not all Internet users take the trouble to visit your "About" page.
0 commentaires