How to Install Elementor Team Widget

Xpro Team widget for Elementor is a FREE element that lets you add an interactive team grid to your website. The widget allows you to add some credibility to your website by showcasing your talented team with a short bio and social footprint. The widget comes with free 15 incredible layout options in which you can creatively show your team members. You can also choose from 55+ unique image masks to add an interactive touch to your website.

Xpro Team element for Elementor is a perfect widget to present your sharpest minds attractively. You can add a name, designation, short description, and social icons with links. The widget also allows you to design your team element the way you like. You can add borders, box shadows, background colors, and much more.

It’s a FREE easy-to-use widget to create exceptional team profiles on your WordPress website. The team widget offers full control over the style and hover options. Let’s see how you can fully utilize this amazing widget.

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 Xpro Team Widget for Elementor

Our Team widget allows you to add a fantastic ‘our team’ section on 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 in Xpro 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 57 masks preset or add your 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 great 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 widger 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 in case you want to add credibility and delightfully showcase your team members.

If you want to explore and add more attractive Elementor widgets then check 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.