How to Add Free Author Box to your Elementor Website

Do you want to add an author box to your Elementor website?

With the collaborative nature of online content on the rise, identifying the contributors behind the curtain is crucial for developing trust and familiarity with your audience.

Including author information adds credibility and builds a community because readers know little about their writing styles.

People often look for ways to connect to the real people behind the content they consume. This makes it necessary for you to furnish author profiles easily, recognizing the importance of your audience in the content creation process. 

Not only does that help make this interactive, but it also gives some insight into the perspectives and expertise contributing to what is being presented.

Let us learn how to add an author box widget to your Elementor website. By the end of this guide, you will be empowered with the knowledge to enhance your site’s authenticity and foster a more personalized connection with your audience, giving you a sense of control and confidence in your online presence.

What is Elementor Author Box Widget?

The author box widget makes creating beautiful author information sections on your site easy. 

This widget lets you easily add important information about your content creators, fostering a sense of community and offering readers more insight into the people creating the content they enjoy. 

It also comes with a range of customizable elements, such as the Author Name, Author Bio, Profile Picture, and Social Media Links, giving website owners the freedom to design their author information sections as they see fit.

This is especially useful for blogs, news sites, and other places with multiple authors. The Author Box widget has many customization options that allow you to make the author information stand out yet blend with your site design.

This mobile-friendly widget supports a responsive design, displaying the author box in any size and device. By introducing the author, it enhances your site’s performance and boosts user engagement.

Things You’ll Need for Adding Author Box in Elementor

In order to add an author box in WordPress website, you will require several essential tools and resources to begin:-

Elementor

Elemeblock editorntor is a popular plugin for WordPress that simplifies the website creation and customization process, enabling even those without coding skills to use it.

It features an intuitive interface and drag-and-drop capability, making adding and organizing text, images, and widgets easy. 

Elementor is an excellent choice for newcomers due to its user-friendly nature.

Responsive Addons for Elementor

It’s crucial to have Responsive Addons for Elementor plugin as well in addition to Elementor. This free WordPress plugin offers 80+ Elementor widgets and more than 250 Elementor website templates, thereby expanding the functionalities of the Elementor page builder.

By installing the Responsive Addons For Elementor plugin, you can ensure that your website is completely responsive. It effectively adapts to all screen sizes, improving your website’s performance and user engagement.

How to Add Author Box in Elementor

[Note: To add an author box widget, your website must be built with the Elementor page builder].

Cyberchimps offers 250+ Elementor templates you can use to build your website instantly.

Enhance your website design capabilities by utilizing the Responsive Addons for the Elementor plugin. It offers various advanced and customizable widgets that seamlessly integrate with Elementor.

Follow the steps below to add a free author box widget to your website.

Step 1: Installing and Activating Responsive Addons for Elementor

Go to the WordPress dashboard, click on Plugin and then select Add New Plugin to install a new plugin.

Search for Responsive Addons for Elementor in the search bar.

Then click the Install Now button once the plugin appears.

After installation, click the Activate button to activate the plugin.

You’ve successfully installed the Responsive Addons for Elementor plugin to your WordPress Dashboard.

Step 2: Adding Responsive Addons for Elementor Author Box Widget

We will use a pre-designed Public Speakers WordPress Template to understand how to add a free author box widget.

You can explore an exciting variety of templates from the Responsive Plus collection of free WordPress themes and unleash your creativity with our diverse selection.

Go to the relevant page and then select Edit with Elementor.

Next, use the widget search bar to find and add the RAE Author Box.

Drag and drop the widget onto the page to integrate it into your design.

After placing the widget, you have successfully added it to your website. Now we can move forward with customizing it.

Step 3: Customizing Responsive Addons for Elementor Author Box Widget

Let’s customize the widget according to the website needs.

We will first look into the content section.

Content

Under the content tab you will see one option Author Info, let’s learn more about that.

Author Info

• Image Source: Choose whether to use the author’s current image or set a custom one.
• Profile Picture: Upload a custom profile picture for the author.
• Name: Enter the name of the author.
• HTML Tag: Select the HTML tag for the author’s name.
• Link: Add a custom link for when the author’s image is clicked.

• Biography: Provide the author’s biography here.
• Archive Button: Set a custom link for clicking the archive button.
• Archive Text: Customize the text for the archive button.
• Layout: Change the layout of the entire content here.
• Alignment: Adjust the content alignment within the container.

Step 4: Styling Responsive Addons for Elementor Author Box Widget

Now, let’s style our widget.

Image

Image Style Options

• Vertical Alignment: Choose whether to align the image at the top or in the middle.
• Image Size: Use the slider to adjust the size of the image.
• Gap: Customize the space between the author image and info.
• Border: Add a border around the image for emphasis.
• Border Radius: Adjust the roundness of the image container’s border.
• Box Shadow: Enhance the image container with a subtle box shadow effect.

Text

Text Style Options

There are same options for Name and Biography:

• Color: Allows you to choose the color for name and biography section.
• Typography: Will let you select the typography for name and biography section.
• Gap: You can add a bottom margin to create a spacy look.

Button

Button Style Options

• Text & Backgroun Color: Change text color and background color for the button when it is in normal or hover state.
• Typography: You can also add typography styles to the text.
• Border Width & Radius: Adjust the border width and border radius with the following two sliders.
• Padding: Add space within the button by adjusting the padding.

And with this, we have completed the customization and styling of the WordPress author box widget.

How To Use The Author Box Widgets?

Now that you know the customization and styling options available to you with the Elementor author box widget. Let’s understand how to utilize them to enhance the functionality of your website.

For the tutorial, I explained how I used the widget to integrate the author box feature into my dummy website. You can also follow the same steps or tweak settings according to your needs.

Customizing & styling the Author Box Widget?

Once you drag and drop the widget, it looks pretty basic with hardly any info.

To begin with, I started customizing its content, wherein I kept the source custom and added a dummy profile picture, name, and biography to add an author. However, I kept the HTML tag as default and did not add any link.

For the archive button, I just added a dummy link opening in a new window (while you are creating your own, make sure you put the link where users can find all content written by the author)

For the archive text, I kept it as the default. Moreover, for the layout and overall alignment, I maintained the default alignment to the left.

Next, I moved directly into author box styling. Here, I began by increasing the image size and the gap between the image and the content.

Next, I also enabled a visible border around the image and slightly adjusted the image radius. Further, I also added a box shadow.

For the text styling, I changed the color of both the author’s name and bio. Additionally, I also adjusted the typography of both, including font family, color, and weight.

For the button styling, I changed the button’s text color, background color, and typography as well. Further, I also adjusted the border width and radius.

Final Appearance of Icon Box Widget?

After all these edits, the widget looked like this:

FAQ 

Conclusion

By implemented the detailed instructions provided in this post, you can seamlessly add an author box into your Elementor website, improving its trustworthiness and building a deeper connection with your audience.

The author box element enables you to display the contributors to your website, offering valuable information about their skills and characteristics. This customization can greatly increase user interaction and promote confidence in your content.

• How to Add Elementor Logo Carousel To Your Website
• What is Elementor? Ultimate Guide for Beginners
• How to Add Price Box To Your Elementor Website
• How to Add Banner to Your Elementor Website

If you wish to include a logo carousel widget on your site, get the Responsive Addons for Elementor today! You might also want to install the Responsive theme, a versatile website theme that can streamline your website creation process.