Just wanted to share a simple code snippet with you. 🙂
Please check the bottom of this post. The author box with my image, name and some other information. Do you want to add something like that to your blog too? It was super easy. Let’s find out how to add an Author box in divi.

Author Box

First, prepare an image of you and upload it to the WordPress site through the dashboard. Then copy the below HTML code and paste it into a code editor. Edit it to match with your information. Don’t forget to change the image link to yours.

<div class="author-wrapper">
    <div class="author-img">
        <img alt="sampath" src="https://divispark.com/wp-content/uploads/2Sam-M.png">
    </div><!--.author-img-->
    
    <div class="author-txt">
        <p style="padding-bottom: 0;"><i>Written By:</i></p>
        <h4>Sampath M.</h4>
        <p>WordPress Developer + Divi Lover</p>
        <div class="social-icons">
            <a href="https://smarthubmedia.com/" target="_blank" rel="noopener noreferrer">Portfolio</a>
            <a href="https://www.linkedin.com/in/wpadvisor/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            <a href="https://twitter.com/mnilankas" target="_blank" rel="noopener noreferrer">Twitter</a>
            <a href="https://www.facebook.com/mallawaarachchi" target="_blank" rel="noopener noreferrer">Facebook</a>
        </div><!--.social-icons-->
    </div><!--.author-text-->
    
</div><!--.author-wrapper-->

Once you have done with editing copy the HTML code and past it to add Author box in divi, Divi > Theme Options > Integration > ‘Add code to the bottom of your posts, before the comments’ area.

Next, add the below CSS code to Divi Theme Option’s Custom CSS area or WP Customizer Additional CSS area or to your child theme’s style.css file. (use any method you use to add custom css)

/*_____Author Box_____*/

.author-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #f7f7f7;
    max-width: 500px;
    padding: 10px;
    margin-top: 50px;
	border-radius: 5px;
}

.author-img {
    height: 100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.author-img img {
    width: 80px;
}

.author-txt {
    margin-left: 12px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.author-txt h4 {
    font-weight: 500;
    font-size: 23px;
    padding: 0;
}

.author-txt p {
    font-size: 14px;
}

.social-icons a {
    color: #333;
    font-size: 14px;
    margin-right: 14px;
}

.social-icons a:hover {
	border-bottom: 1px solid #666;
}

That’s all about adding author box in Divi. You can do changes to the CSS code to match with your website’s design.
Feel free to comment below if you need any help or advice. Regards. 🙂

Leave a Reply

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

Pin It on Pinterest

Share This