How to Create a Custom Author Archive Page in Elementor

Do you have a multi-author site and want to redesign it with Elementor? If yes, then it’s a great idea since Elementor allows anyone to be a web designer without needing to have CSS skills. Regarding the multi-author site, one of the elements you might want to redesign is the author’s archive page. In this article, we will show you how to create a custom author archive page in WordPress using Elementor.

Elementor — as you might have known — comes with a theme builder feature that allows you to create custom parts of your theme, including the author archive page. Two key widgets you can use to create a custom author archive page with Elementor are:

  • Author Box
  • Archive Posts

The Author Box widget will load the profile of the current author. It will load the information based on the filled author meta fields (such as name, profile picture, biography, and so on). While the Archive Posts widget will display the posts written by the associated author. You can see a live example of a custom author archive page on our website here.

Of course, in addition to the two widgets above you can also add other widgets to your liking to make your custom author archive page looks standout.

How to create a custom author archive page in WordPress using Elementor

Before we get started, make sure you have upgraded your Elementor to the pro version in case you haven’t done so since the theme builder feature is only available on Elementor Pro (read Elementor Free vs Elementor Pro).

By the way, if you are new to Elementor, you can read this guide to learn how to use Elementor.

Once you are ready, login to your WordPress dashboard and go to Templates -> Theme Builder. You will be redirected to the theme builder page of Elementor. Click the Archive tab on the left panel followed by Add New on the upper-right corner to create a new archive template.

Elementor offers tens of ready-to-use archive templates you can choose from. Simply select a template you like. If you want to create the archive template from scratch, you can simply close the templates library. In this example, we will create the archive template from scratch so we will close the templates library.

In this example, we will create a simple author archive page that consists of only two widgets. Again, you can add any element to your liking to make your custom author archive page more appealing.

Start by adding a new section by clicking the plus button on the canvas area.

Author Box widget

Add the Author Box widget by dragging it from the left panel to the canvas area.

Go to the left panel to customize the widget. On the Source option under the Author Info block, leave it to default. To disable/enable certain meta info (such as profile picture, display name, and biography), you can simply slide the toggles.

From this block, you can also set the layout as well as the alignment of the author info.

To style up the widget, you can go to to the Style tab. There are 3 settings blocks you can open:

  • Image

You can open this block to set the alignment of the profile image, the size, the gap between profile image and author’s bio, border-radius, and box-shadow.

  • Text

You can open this block to set the typography of the author name and bio. You can set things like the font size, font family, font style, and text color. You can also set the gap between the author name and author bio.

  • Button

If you enable the archive button, you can open this block to customize it. You can set things like the background color, button text color, border-radius, and padding.

Archive Posts widget

Add the Archive Posts widget by dragging it from the left panel to the canvas area. Once added, you can go to the left panel to customize the widget. On the Layout block under the Content tab, you can set the skin, the number of columns, image position, image size, image ratio, excerpt length, and so on.

You can open the Pagination block to set the pagination and the Advanced block to set a custom message if the archive contains no content.

To style up the Archive Posts widget, you can open the Style tab. There are 5 settings block you can open:

  • Layout

You can open this block to set the gap between rows and columns. You can also set the alignment of the content.

  • Image

You can open this block to customize the image of the posts. You can set the border radius and the space between the image and content. You can also apply a CSS filter if you want to. You can apply the CSS filter for both the normal state and hover state.

  • Content

You can open this block to set the typography of the post title, meta, excerpt, and read more. You can also set the spacing between each item.

  • Pagination

You can open this block to set the typography and text color of the pagination. You can use different typography settings and text on three different states: normal, hover, and active. You can also set the space between pagination numbers.

  • Nothing Found Message

You can open this block to set the typography and the text color of the message when the archive page in empty.

Once you are done editing the template, click the PUBLISH button on the bottom side on the left panel. You will then be prompted to set a display condition. Simply click the ADD CONDITION button.

On the dropdown menu, select Author Archive. If you want the custom author archive template to be applied to all authors on your site, you can set All on the second dropdown menu (the right one). Conversely, if you want the custom author archive template to be applied to a specific user, you can simply select your preferred author from the second dropdown menu.

You can add multiple display conditions in case you want the custom author archive template to be applied to two or more authors. Click the SAVE & CLOSE to apply the changes.

That’s it. You have successfully created the custom author archive page on your WordPress using Elementor.

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

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

Pin It on Pinterest

Share This

Share This

Share this post with your friends!