Elementor Team Member Widget: How to Introduce Your Team
Although a lot of business websites don’t have it, the page representing your team, or “Meet the Team” page, is very important. It helps the visitors connect with your service or product on an advanced level, as they get to connect the product with the people behind it. The Meet the Team or Team page, whatever you call it, is basically a subpage of your About Us page. Together, the two pages show the visitors how your team functions and works in cohesion to create the product or service you’re offering.
The Team page should ideally include:
- Picture or, more commonly, avatar of the team member
- First and last name
- Position in the team
- Social and contact links
The Elementor Team Member widget from the famous Qi Addons is an excellent solution if you’re looking for a reliable widget. You can display as many of your team members as you like, be it five or fifty, or even more. You can very easily adjust the style, pick the fonts, colors, social icons. Furthermore, this Elementor team member widget offers a range of available layouts, which you can check out on the widget demo page. We will show you how to use it to display your team step by step, and if you prefer, there’s also a video tutorial:
The Elementor Team Member widget is one of the free Qi Addons. In addition to this one, Qi Addons for Elementor has over 100 other useful and amazing widgets (both free and premium) so if you’re on the lookout for addons that can really do wonders for your website, we can’t recommend this collection strongly enough. Combined with the Qi Theme, it’s really something else.
To access this widget, you need to install Qi Addons for Elementor. Simply do it as you would when installing any other plugin: Plugins > Add New. Install it and activate it and that’s it. You will now find it on the widget list on every page of your website.
Like we said, Qi Addons has over 100 widgets and many of them are free. This means that when you install Qi, you get not only the Team Member widget but also all other free widgets. An excellent thing to note here is that, within the very plugin, you can easily deactivate the widgets you don’t want to use, and therefore spare your website from unnecessary burden.
Find Qi Addons for Elementor in your Dashboard once you install the plugin, and go to Widgets. Here you’ll find the list of all widgets you got and here you can simply deactivate the ones you don’t need. Again, there are many useful ones there, so take a look and see if there’s anything else that might contribute to making your website better and more functional. Of course, you can always reactivate the widgets, when needed.
You will add this widget to a page like you would with any other. Find it among the elements and just drag it to the page.
It’s important to note that when you add one Team widget, it represents one person on your team. That’s why the first thing to do is to add to your page a row with as many columns as you have team members, since there’s going to be one widget (team member) per column.
Tip: Don’t create widgets for all members right away. Instead, add the first one, style it and then copy it (all the styling options will be copied too) and simply change the information (name, links, etc).
As soon as you go to the Elementor Team Member widget options you will see that they are divided into three tabs. The first two are specific for this widget, and the last one is the standard Elementor widget so we won’t be covering it here.
The first one is the Content tab. Here you will be adding all the content like first and last name, picture, position and social links. Here you will also pick the layout. All other styling options are in the next tab.
This is a very intuitive widget so there’s no need to explain everything to the smallest detail – you’ll see it’s very easy to work with. Of course, every change you make is instantly visible in the screen to the right.
As for the layouts, they are pretty self-explanatory. To get inspired and see some examples of the widget at work, go to the widget’s demo page. Of course, you can play around with the widget, experiment and test until you reach the desired result.
There are no limitations for the number of social networks you want to display. For each one, you get to pick the icon and add a link.
All layouts have the same content options. Only Info on Hover Insert has an additional option, which is Text. You can use it to provide an additional short bio or other relevant info to be displayed when the visitor hovers over with the mouse.
We’ve added our first team member and this is what the widget likes when the content is added. Let’s move on to styling options.
The styling elements of the widget are located in the second tab. The styling is divided into three segments. Again, everything is very intuitive and easy to use, and offers a rich range of possibilities.
The Style segment lets you adjust the color and the typography of the textual content (first and last name, position, short bio). Here you can also add a different hover for the picture. The available options here depend on the type of layout you’ve chosen.
In only a couple of minutes we have adjusted the content to our needs. The image below shows the hover state – the social icons are in a different color and the cursor is on the red one, so the widget is displaying the other color we’ve set in the options.
The Spacing Style options are very important because you’ll often need to fine-tune the spacing between the widget’s elements. The good news is that almost all spacings can be set in this widget, and very simply too.
The final stylization segment is about the alignment. Here you have three standard alignment options, like anywhere else in WordPress – left, right and centered.
After you’ve added and styled one team member display, all you need to do is copy it as many times as you have team members. That way you’ll make sure all widget elements (all team members) are the same. Of course, if you want to make them different or to combine different styles, you can do that, too. Simpy change the info, and that’s it!
In this example all team members have the same styling and look the same, except we decided to play around a bit and made one of them bigger. Like we said in the beginning, this is achieved by setting the columns in the row.
Let’s wrap it up!
As we saw, thanks to the extraordinary Elementor Team Member widget from the Qi Addons for Elementor collection, one of the best team plugins for WordPress, creating a modern, stylish and engaging display of your staff or team is easier than ever. The Team page or section will help you establish a closer relationship with your audience and can greatly help in converting them into clients or customers.
The widget is developed following the highest performance and design standards, so by using it you’re making sure your pages give off a very professional, modern and reliable vibe. And because of the rich widget options, the possibilities are virtually endless!
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
