How to Create a Striking Author Info Display for Your WordPress Blog

When you’re in charge of a blog or an online magazine with more than one author, you have a set of worries that people with single-author outlets don’t have. You have to learn about author management and find ways to limit authors to their posts, for example. You should also know how to change the authors of posts, as it can come in handy when updating posts from authors that no longer write for you. Finally, it would help to consider how you attribute and display the authors’ information. And when it comes to creating striking author info displays for your WordPress blog, we have just the solution you need.

We have included the Author Info widget in our Qi Addons for Elementor plugin, an extensive collection of tremendously useful widgets you can use with Elementor. With it, you can easily display information about your articles’ authors. Keep in mind, however, that this is one of the widgets available only with the paid version of Qi Addons for Elementor.

Our Qi Blocks for Gutenberg plugin, a collection of blocks for the block editor, also has an Author Info solution. In this case, it’s available with the free version of the plugin.

This article will show you how to create an author info display for your website using the widget and the block from our Qi plugins.

Adding Author Info in Elementor

Before you start, you’ll need to have both Elementor and the Qi Addons for Elementor plugin installed and activated on your website. It’s as easy as navigating to Addons > Add New from your website’s dashboard, searching for the two plugins, and installing and activating them. Keep in mind, however, that you’ll need to get the premium version of the Qi Addons for Elementor plugin.

One quick note before we get started: you can watch a video of the Elementor part of our walkthrough.

Once everything’s installed, it’s time to start building the setting for our Author Info widget. This is what the work field we created beforehand looked like.

Quite a lot of preparation went into it, but here’s the short version of what we did. The settings for the whole section were Layout > Content Width > Full Width, and Advanced > Qode Essential Addons Grid > Make This Row in “Grid”> Yes.

Next, we created two columns and gave the one on the right Column Width of 76.5% in Layout > Layout. We then used the Blog List widget from the Qi Addons for Elementor plugin to display a single blog post for the illustrations. We used many settings as it’s a fairly complicated widget. You’re free to watch our video to get better acquainted with it.

With everything set up, the next step was to find our Author Info widget, drag it to the free column on the left, and start setting up the widget’s content.

Adding Content to the Author Info Widget

The General section of the Content option is where you can add all the author info you want to display. You can add a photo, the author’s title – or name, text where they can say a sentence or two about themselves, their email, signature, a link, and socials.

For starters, we added an image for our author, provided her name in the Title option, added some text that serves as a concise bio, and included her email.

Once you enable social icons, a new set of options will appear. They will let you add more socials, choose their title and icons, and include a link. A curious option – and the one we’ll be using – is to enable textual social icons, where icons for socials are replaced with text.

We’ve added four of these items, complete with textual social icons, and included a # sign in the link to serve as a placeholder.

That’s all the content we planned to add to this author’s info. You can experiment with signatures, social icons, and website links as much as you like.

Styling the Author Info Widget

The first set of Style options are the Content Style options. They serve to change the alignment of the widget’s content, as well as set the author info padding. Our choice was to set the content alignment to “Center” and set padding to “0” to counteract any padding that might be there by default.

The next batch of options, Style options, is where every element gets its styling options, including tags, colors, colors on hover, and typography. Depending on the elements you added, you’ll have to deal with different options here, but here are the ones we changed.

First, we set the title tag to H2. In Title Typography options, we transformed the text to uppercase. The next options we changed were the icon color, which we set to #000000, and the icon hover color, which we specified to #0000008c. We set the weight to 500 in the Icon Typography options and changed the email color to #228ccc and the email hover color to #228cccbf.

Next up are Spacing Style options – where you set the space around all the elements. Because we didn’t use a signature, that’s the only option we didn’t change. For the rest, we used these values, top to bottom: 27px, 7px, 21px, 22px, and 5px.

The remaining options are the background options, which can come in handy if you want to change the background color or add animation to the whole widget on hover. We opted not to do either, so our work creating the example was done.

Of course, you’re more than free to check out all the different options the widget provides you and come up with a design that’s uniquely yours. However, this demonstration should show you some things you can do and inspire you to use them to make something even more awesome.

Adding Author Info in the Gutenberg Editor

Now, let’s see what the process looks like when you use the Author Info block in the Gutenberg editor. The first thing we did was set up the field for work – we used our Blog List block to add an article, leaving space to the left where we can add the Author Info block.

When you add the Author Info block to the column, you’ll get a block with some dummy content. Then, in the Settings Sidebar on the right-hand side of the screen, you’ll see content where you can change the dummy content and add your own. So that’s where we started.

Adding Content to the Author Info Block

The block lets you choose between two layouts – the standard one we’ve used and the side image layout. You’ll also get the option to add your own image and set its size, choose the title, add some text underneath the image, and add an email address and a signature.

We added our image, set its size to Full Size, and changed the text and the email.

The block lets you enable social icons, textual social icons, and links underline on hover. We enabled the icons and the textual icons, adding four items to serve as links to the author’s socials.

Regarding content, we were done here and ready to move on to styling the block.

Styling the Content Info Block

The first tab that opens is the Style > General tab. That’s where you choose the horizontal alignment of the content, set the border radius, add padding, select background color and color on hover, image behavior on hover, and signature top margin. You also get to pick the icon colors, colors on hover, and typography, and set the social icons top margin as well as the single icon margin.

The alignment we chose for our image is Center. We set the icon hover color to #0000008c. In the Icon Typography options, we set the weight to 500. The top margin for the social icons we set was 22px. The single icon margin was 5px.

Under the Style > Title options, you can change the title tag, color, color on hover, typography, and top margin. We changed the font size to 36px under the typography options and transformed the title to uppercase. We set the top margin to 27px.

Under Style > Text, you can set the text tag, color, typography, and top margin. The only option we changed here was to set the top margin to 7px.

Finally, under Style > Email, you can set the color of the email, regular and on hover, typography options, and the top margin. We set the email color to #228ccc and its on hover color to #228cccbf. We chose DM Sans as the font family in the typography options and select the font size of 17px. Finally, we set the top margin to 21px.

And that’s all you need to do to create a striking author info display for your WordPress blog using the Gutenberg editor and our Qi Blocks for Gutenberg plugin.

Let’s Wrap It Up!

Author info displays can present valuable opportunities for writers to share information and links to socials and websites. With our Qi Addons for Elementor plugin and the Author Info widget, you can create beautiful author info displays in WordPress and populate them with all the information the authors would want. The Qi Blocks for Gutenberg plugin lets you do the same with the block editor, so go ahead and pick whichever editor you’re more comfortable with!