Tag: Wordpress Author Box

Are you looking to create a customized Author Box on a WordPress website using Elementor Pro?
We offer you a step-by-step guide in which you will learn everything related to the Author Box widget and how to use it for your WordPress website. We will also study the importance of this widget for your website.

What is the Author Box Widget?

Author Box is a dynamic widget of Elementor Pro that you use to create an author profile. It gives information about the author/writer who contributed to the website by uploading/posting content.

This author box includes the following content:

• Author’s name
• Profile Picture
• Biography
• List of articles/posts written by them

All this information builds a mini-portfolio of the author on your website.

Importance of having an Author Box

Having an author box under any blog post positively impacts users. It allows them to search blogs they wrote and shows personalized elements such as sign-up forms, FAQs, and recent posts. Let’s understand more about the benefits of the Author Box widget in Elementor.

1. It brings the author credibility and builds the brand’s trustworthiness
2. It makes your website SEO-friendly as optimized author pages boost traffic
3. It allows content discovery that improves user engagement and reduces the bouncing rate
4. It will enable extending website reach by linking social media platforms
5. It develops professionalism for a website that is beneficial for the authority

These are the benefits of having an author box on your website. It helps both the author and the website to grow simultaneously. Author Box adds professionalism to your website, increasing user engagement and boosting site performance.

How do you add the Author Box Widget and what are its components?

WordPress Elementor provides an impeccable drag-and-drop feature to make your website more creative and interactive. This feature assists developers in quickly making changes and previewing them simultaneously in no time.

Through this tutorial blog, you will understand how to use an Author Box widget in WordPress using the premium version of Elementor and understand its different components. Let’s get started with adding the Author Box widget.

How to add an Author Box widget?

• In the Elementor search box, type “Author Box” and then enter.
• You will see a widget named the author box.
• Add the widget to the editing screen by drag-and-drop.
• You can use the author box widget for your page/post/website.

Different Components of Author Box

Once you add the Author Box to your content editor, you will see the components of this widget on the left-hand side of the page. These components will aid you in styling your widget according to the theme and page style. All these components are:

• Content: This section adds content related to the author’s name, image, biography, layout, alignment, etc.
• Style: In this section, you can style your author box by defining image size, gap, border radius, color, typography, etc.

These two are the components of the Author Box that you will see when you start editing your widget.

Step-by-step guide on Author Box Components

We have already studied the Author Box and its components. Now, we will learn how to style and customize this widget.

Content

You can easily edit the author’s or contributor’s details from this section. Let’s see:

Source

This option allows you to select where to take the author’s information. There are two options: current author and custom.

Current Author

From this option, you add the information of the editor/contributor who has edited/written the blog using the WordPress username. Here, you can insert the following information:

• 
  Profile Picture
• 
  Display Name
• 
  HTML Tag
• 
  Link To
• 
  Biography
• 
  Archive Button
• 
  Layout
• 
  Alignment

Custom Author

When you select a custom author, you benefit from adding all the information independently. Let’s understand how to do that:

• 
  Profile Picture: You can add the author’s picture from the media gallery or device
• 
  Name: You can enter the name of the author from here.
• 
  HTML Tag: You can choose an HTML tag from H1-H6, div, or span.
• 
  Link To: Use this feature to add a link to your author’s biography in this section.
• 
  Biograph: From here, you can add a bio text to describe the author.

• 
  Archive Button: From here, you can link the posts written by the author.
• 
  Layout:: You can decide the project’s design, such as below, above, and centre.
• 
  Alignment:: This section will help you to align your author box content from the right, left, and centre.

Style

In the style section, you will see three tabs to customize the image, author details, and button. Now, we will see how to style these options.

Image

Under the image option, you will find multiple options for styling the author’s image on your blog post or page.

• Vertical Align: This option helps you maintain your image’s vertical alignment. It has two options: top and middle.
• Image Size: You can adjust image size from here, ranging from 0 to 200 pixels.
• Gap: This option allows you to add the distance between the image and text.

• Border: From here, you can change the border settings. If you want to add a border, keep the toggle on. You can also adjust the image’s border color, width, and radius.

• Box Shadow: This option helps you add the shadow to the image to provide a more elevated look. When you hit the pencil icon, you will see multiple options, such as horizontal, vertical, blur, and more.

Text

It helps if you style your text in the Author Box. From here, you can quickly edit the text of the author’s name and biography.

Name

• Color: From this option, you can change the color of the author’s name.
• Typography: This option assists you in changing the typography of the author’s name, such as family, size, weight, line height, line spacing, and more.
• Gap: It helps you increase and decrease the gap between the author’s name and biography.

Biography

• Color: Like the name, you can change the color of the biography from this tab.
• Typography: It assists you in changing the biography’s typography, as you did in the name.
• Gap: With this option, you can add space after the author’s biography and the button element.

Button

In this section, you will get two different sections by which you can customize your button quickly.

Normal

Here is the list of options you will get under this option. You can customize the button text color, background color, typography, and more using these options.

• 
  Text Colour
• 
  Background Colour
• 
  Typography
• 
  Border Width
• 
  Border Radius
• 
  Padding

Hover

Under this option, you will get the settings to make your button more interactive by adding the following elements:

• 
  Colour
• 
  Background Colour
• 
  Transition Duration
• 
  Animation
• 
  Border Width
• 
  Border Radius
• 
  Padding

These options appear when you work on the Author Box widget in your WordPress site. You can use these alternatives to customize the Author Box according to the website’s theme.

We hope that you learned several things from this step-by-step tutorial. Studying this tutorial will help you gain expertise in the Author Box widget of the Elementor Pro page builder.