Introduce the author of the posts in the nice author bio box using the Avatar(called “Author box” in the Selection pack) widget. This allows readers to learn more about the authors and contact them personally through social media or other available means of communication. Associate your site content with an actual person to increase the interest and engagement of your visitors.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content tab
On the Content tab of the Avatar widget, you can manage the basic settings of the author block such as source, configure the layout display and set up each layout elements.
Layout
Source
Select which type of source you want to use for the author box:
- Posts – an option to display the author of the current post/page. It has additional “List users” setting where you can select one of the existing users as the author of the current post. To display all the necessary information in this block, go to the Users settings of the WordPress dashboard and add the necessary users and fill in the appropriate fields.
- Custom – an option allows you to create a custom author block with the necessary information about the person.
Alignment
Manage elements alignment of the block layout for different devices.
Layout list
Add layout elements and order them according to your needs.
To add a new bio box element, click “Add Item” and select one of the available item types: Profile Picture, Name, Biography, Posts, Buttons.
Profile Picture
The section is available when Custom is selected in the Source.
- Author photo – select a photo of the author from the media library.
- Image Size – select the image dimension from the list which you want to apply for the photo.
Name
- Name/Name type – enter the author name (for Custom source) or select name type (for User Profile source).
- Before text – enter the text to be displayed before the Name.
- After text – enter the text to be displayed after the Name.
- HTML Tag – select one of the available tags from the list for the text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
- Link – enter the URL link for the Name and Photo
Biography
- Before text – enter the text to be displayed before the Biography.
- After text – enter the text to be displayed after the Biography.
Posts
- Before text – enter the text to be displayed before the number of posts.
- After text – enter the text to be displayed after the number of posts.
Buttons
- Alignment – manage button alignment of the block for different devices.
- Buttons list – a section for adding and managing buttons for the current block. It could be as the links to social networks, email or website link.
Style tab
On the Avatar widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Profile Picture
- Profile Picture Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- CSS filter – the option allows you to add various CSS filters for the photo as Blur, Brightness, Contrast, Saturation, Hue.
Name/Biography/Posts
- Name/Biography/Posts Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Buttons
Buttons Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
NORMAL/HOVER
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The settings in the advanced tab of the Couponer widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
Hosting for Elementor websites
Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.