How to Install Elementor Team Widget

The Xpro Team widget for Elementor is a Free widget that helps you create an interactive team grid on your website. It adds credibility by featuring your team members with brief bios and links to their social profiles. With 15+ layout options and 55+ image masks, you can showcase your team creatively and make your website more engaging.

It is ideal for showcasing your team in a visually appealing way. You can add names, titles, short descriptions, and social media links. Plus, you can customize the look with borders, shadows, background colors, and more to fit your style.

Let’s make your team members section more creative. Are you ready to begin?

Let’s get started!

Requirement

You need to install and activate the free version of Xpro Elementor Addons. If you already have the plugin installed, just make sure the Team Widget is ‘Enabled’ from the Xpro Elementor Addons dashboard. , so you can find it in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab, find the Team widget, and then toggle the button ‘ON’ to enable it.

How to Use Team Widget in Elementor

Our Team widget allows you to add a fantastic ‘our team’ section to your website. The widget lets you add a team grid with social icons, image masking, borders, background colors, and much more. You can choose from 15+ layouts to set the perfect team section on your website. The simple-to-use widget allows you to create a stylish Team Grid in no time. See all demos of the team widget for Elementor.

Let’s see how you can fully utilize the potential of the Xpro Team widget for Elementor.

Step 1

Click on the Xpro Addons section available in the Elementor Editor.

Step 2

From the Xpro Addons section, simply drag’n’drop the Team widget on your desired page location.

This is the default view of our Xpro Elementor Team widget.

How to Add Content to Team Widget for Elementor

Start from the General Section in the Content Tab. Here, you can choose from 15+ layout styles for your team member display. You can upload a new image or choose an existing one from the Image option. Next, simply set the image resolution as per your requirement.

Now add the name of the team member, any link you want the grid box to take the user to, designation, and description of the team member. At last, you can set the alignment of the team widget.

Now move to the Social Section in the content tab to show or hide social icons for the team member. You can add Facebook, Instagram, and Twitter accounts using this option. Moreover, you have the option to add any custom link by clicking the ‘Add Item’ option.

You get the option to change the icon of the social channel, add a link, and do some inline styling of the social icon (we will do it in the styling option later).

Check out our Free Theme Builder for Elementor. You can customize default templates of your website as you like. It’s the best alternative of Elementor Pro.

By Xpro Elementor Addons

How to Add Mask to Images using Xpro Team Widget for Elementor

After adding your team member details, you can now style the widget as you like. For the demonstration purpose, we have created an Elementor team widget grid of 3 to make you easily understand the styling options offered by the widget. First, let’s see how you can put an image mask on the team widget.

Go to the Content Tab and click the Mask Image icon available in the General section.

Here, you can choose from 55+ pre-built masks or add your own custom image. You can also set the mask’s position, size, and repetition.

How to Style Xpro Team Widget for Elementor

Image Section

Now let’s style the Team widget to make it look more attractive on the website. You can design your team widget with the following options from the Image section:

• Set image height and width
• Apply CSS filters
• Apply transition on hover
• Add a border (5 options)
• Set border color
• Add a box-shadow
• Customize border-radius and margin

After customizing your Elementor team widget, the output will be something like this.

Content Section

The content section of the Team widget for Elementor offers a lot of customization options to design your team section the way you want. You can do the following customizations in the content section of the Xpro Elementor Team widget:

• Set background color (solid or gradient)
• Add a border (5 options) with color customization
• Customize border-radius and padding
• Add solid or gradient color to the Title, change typography, and more
• Customize color and typography of designation and description
• Set custom margins for title, designation, and description

Social Section

Xpro Elementor Team widget allows you to add social channels for each team member. It’s a good feature to let visitors directly reach out to your decision-makers, and it also improves the credibility of your company/agency. The social section can be customized using the following options:

• Set custom size for icons
• Customize background-size
• Set custom size for space between social icons
• Set icon and background color for normal and hover mode
• Add a border (5 options)
• Change border color for normal and hover mode

After customizing your Team widget for Elementor, your team member profile will look like this:

Now, let’s customize the three team members with the same design and check the incredible output.

Best Team Widget for Elementor

That is all from our Team Widget for Elementor. We hope now you have a better understanding of how to fully utilize our easy-to-use Team widget by Xpro and create the best suitable Team grids for your website. This widget is very helpful if you want to add credibility and delightfully showcase your team members.

If you want to explore and add more attractive Elementor widgets, then check out our complete list of free Elementor widgets and download our free Elementor addons now. Moreover, check our other promising widgets like Button for Elementor, Counter Widget for Elementor, Hotspot Widget for Elementor, and Elementor Pie chart widget. You will be surprised how easily you can customize Xpro Elementor Addons for your WordPress websites.