When you run a multi-author blog or an online magazine, you have a number of concerns that people with single-author outlets don’t have. For example, you should learn author management and find ways to limit authors to their posts. You should also know how to change the authors of posts, as this can come in handy when updating posts from authors who no longer write for you. Finally, it’s helpful to think about how you cite and display authors’ information. When it comes to creating stunning author info screens for your WordPress blog, we have just the solution you need.
We’ve added the Author Information widget to our Qi Addons for Elementor, a comprehensive collection of extremely useful widgets you can use with Elementor. With it, you can easily view information about the authors of your articles. But keep in mind that this is one of the widgets only available in the paid version of Qi Addons for Elementor.
Our Qi Blocks plugin for Gutenberg, a collection of blocks for the block editor, also has an Author Info solution. In this case, it can be used 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 Information in Elementor
Before you begin, you must have the Qi Plugins for Elementor and Elementor plugin installed and activated on your website. as easy as navigating Plugins > Add New from your website’s control panel, searching for two plugins and installing and activating them. However, keep in mind that you will need to get the premium version of Qi Addons for Elementor.
A quick note before we start: You can watch the video of the Elementor episode of our review.
Once everything is installed, it’s time to start creating the setting for our Author Info widget. This is what our previously created workspace looked like.
There’s been quite a bit of preparation, but here’s a short version of what we did. The settings for the entire partition were: Layout > Content Width > Full WidthAnd Advanced > Qode Essential Addons Grid > Make This Line In Grid > Yes.
Next, we create two columns and give the right Column Width as 76.5%. 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 a lot of settings as it is a pretty complex widget. you are free watch our video to get to know him better.
After everything was set up, the next step was to find our Author Information widget, drag it to the empty column on the left, and start installing the widget’s contents.
Adding Content to the Author Info Widget
The General section of the content option is where you can add any author information you want to view. You can include a photo, the title or name of the author, a text where they can say a sentence or two about themselves, their email, signature, a link, and social media.
For starters, We added an image for our author, provided his name in the Title option, added some text that served as a concise biography, and added his email.
When you enable social icons, a new set of options will appear. They will let you add more social media, choose their title and icon, and add a link. An intriguing option that we will use is to enable textual social icons where social media icons are replaced with text.
We added four of these itemscomplete with textual social icons and the # sign added to the link to serve as a placeholder.
That’s all the content we plan to add to this author’s information. You can experiment with signatures, social icons and website links as many times as you want.
Shaping the Author Info Widget
The first set of Style options are the Content Style options. They serve to adjust the author information padding as well as changing the alignment of the widget’s content. Our choice was to set the content alignment to “Center” and by default set the padding to “0” to counter any padding that might be there.
The next set of options, Style options, is where each element gets its style options, including labels, colors, accent colors, and typography. Depending on what you add, you’ll have to tinker with different options here, but here’s what we’ve changed.
First, we set the title tag to H2. We’ve capitalized the text in the Header Typography options. The next options we changed were the icon color we set as #000000 and the icon hover color we set as #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 the Space Style options, where you set the space around all elements. This was the only option we didn’t change because we didn’t use signatures. For the rest we used the following values from top to bottom: 27px, 7px, 21px, 22px and 5px.
The remaining options are background options, which can come in handy if you want to change the background color or animate the entire widget on hover. We also chose not to, so our work creating the example is complete.
Of course, you are more than free to control all the different options the widget gives you and come up with a design that is uniquely yours. However, this show should show you some of the things you can do and inspire you to use them to make something even more awesome.
Adding Author Information to the Gutenberg Editor
Now let’s see what the process looks like when you use the Author Information block in the Gutenberg editor. The first thing we did was set up the workspace – we used our Blog List block to add an article and left a space on the left where we could add the Author Info block.
When you add the Author Information block to the column, you get a block with some fake content. Then, in the Settings Sidebar on the right side of the screen, you will see the content where you can replace the fake content and add your own. So this is where we start.
Adding Content to the Author Information Block
The block lets you choose between two layouts – the standard and side view layout we use. You’ll also have the option to add your own image and adjust its size, choose the title, add some text below the image, and add an email address and signature.
We added our image, set its size to Full Size, and changed the text and email.
The block allows you to enable social icons, textual social icons, and underlined links on hover. By enabling icons and textual icons, we added four elements to serve as links to the author’s social networks.
Regarding the content, we’re done here and ready to move on to shaping the block.
Shaping the Content Information Block
The first tab that opens, Style > General tab. This is where you choose the horizontal alignment of the content, set the border radius, add padding, select the background color and color on hover, the hover display behavior, and the signature top margin. You can also choose icon colors, hover colors, and typography, and set the single icon margin as well as the top margin for social icons.
The alignment we chose for our image is Center. We set the icon hover color to #0000008c. In 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 Style > Title options, you can change title tag, color, hover color, typography and top margin. Under the typography options, we changed the font size to 36px and capitalized the title. We set the top margin to 27px.
Under Style > Textyou can set text label, color, typography and top margin. The only option we changed here was to set the top margin to 7px.
Finally, under Style > EmailYou can set the color of the email, normal and hover typography options, and top margin. We set the email color to #228ccc and the hover color to #228cccbf. We chose DM Sans as the font family in the typography options and chose the font size as 17px. Finally, we set the top margin to 21px.
That’s all you need to do to create a stunning author signage for your WordPress blog using the Gutenberg editor and our Qi Blocks for Gutenberg plugin.
Let’s wrap it up!
Author information screens can offer authors valuable opportunities to share information and links to social networks and websites. With our Qi Plugins for Elementor plugin and Author Info widget, you can create beautiful author signage screens in WordPress and fill them with all the information writers could want. The Qi Blocks for Gutenberg plugin lets you do the same with the block editor, so go ahead and choose whichever editor you’re more comfortable with!
