As web designers, we surely want our site to have a selling point; uniqueness and stunning design. One thing that we can do is customize the avatar. Many people in the WordPress community assume that customizing the avatar is not the most important thing. But we have another perspective on that. Not only as a representative of who you are, but avatar also can build trust and engagement with your users.
This article will show you how to set the avatar border-radius on the post info widget in Elementor. With Elementor setting the avatar border-radius is very easy.
How to Set Avatar Border Radius on the Post Info Widget in Elementor
Before we start the tutorial, we will inform you that we will use the Elementor Custom CSS feature to set the avatar border-radius. The Elementor Custom CSS is only accessible on Elementor Pro. So, ensure that you’ve already upgraded to the pro version.
Alright, let’s get started!
First, open your Elementor editor, afterward select the Post Info widget from the widget panel, then drag and drop it into the canvas area. By default, the post info displayed four items (Author, Date, Time, and Comments).
Next, we want to activate the avatar. On the Meta Data block, click Author, then navigate to the Avatar option. Please enable the avatar by switching the toggle to YES.
Once you enable the avatar, you can edit and style up your post info widget.
Well, it’s time to set a border-radius avatar by adding the simple snippet into Custom CSS. On the Post Info widget settings, go to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then paste it into the Custom CSS field.
selector .elementor-avatar
{
border: 2px solid brown; border-radius: 15px 50px 30px
}
The Code Explanation:
The code above selects the avatar element using the .elementor-avatar
You can also change the border style, color, and border-radius values by editing the CSS snippet above.
As you can see from the image above, we edited the CSS snippet.
- Border style: solid -> dashed
- Border color: brown -> white
- The third border-radius value (the bottom-right corner): 30px ->25px
The Bottom Line
This article shows how easily you can set the border-radius avatar on the post info widget in Elementor by adding a simple CSS snippet into the Custom CSS. As we mentioned at the beginning of this article, your avatar can build trust and engagement with your users. So, feel free to play around with the CSS snippet above and make your avatar stunning.
