How to Display Your Team in WordPress

When you enter the waters of online commerce and build an online business – or use digital tools to grow your business online – you can easily find yourself overwhelmed by the variety of tools you have at your disposal. If you stick to the fundamentals, however, you’ll find building and maintaining customer trust on your checklist. There’s more than one thing you can do to cross it out – adding testimonials to your websites might help, for example. But so can humanizing your business and displaying your team on your WordPress website is a great way to do that.

That’s why we included a team widget in our Qi Addons for Elementor plugin – to give you an easy way to show your clients or customers that you and your team are real people, just like them. The Qi Addons is a superb collection of Elementor widgets that makes an already great site editor even better by giving you an easy option to do something as extraordinary as setting up a team display.

On the other hand, if you prefer to use the Gutenberg editor to create pages on your website, then you should use our Qi Blocks for Gutenberg plugin. It has a team block, along with 47 other free blocks and 33 premium ones. This article will show you how to create a team display for your WordPress website using both plugins.

Displaying Your Team with Qi Addons for Elementor

We’ll use one of the examples from the addon’s page to demonstrate how to display your team in WordPress using the Qi Addons for Elementor plugin. We also made a video tutorial for it, so you can watch it if you prefer watching videos over reading articles.

To start, however, you need to ensure that you have the plugin installed. You should have Elementor installed, too, so your first step should be going to your website’s dashboard, navigating to Plugins > Add New, and finding, installing, and activating the two plugins.

With that out of the way, the next step is to prepare the field for adding the widget. Find a post or a page you’d like to edit and create a four-column section. Because of how the widget works, we’ll need to use it four times – once for each team member.

The section and the column settings will also need some tweaking to get the right results. We switched the content width to Full Width for the section in Layout > Layout. Then, in Advanced > Qode Essential Addons Grid, we chose yes for the “Make this row in ‘In Grid'” option and left the grid row behavior at default.

As for the columns, we’ve added some padding to them. We went to Advanced > Advanced and added 18px padding to the right on the leftmost column. The next one got 12px to the right and 6px to the left. The next one got 6px to the right and 12px to the left, and the final column got 18px of padding to the right.

Of course, you should remember that these settings might not produce the same results in every case. It will look different based on the theme you’re using, and you might need some additional adjustments to make it look just right. This is just how we did it.

Adding the Content to the Team Widget

When our working area is set up, the next step would be to add the first widget. We added it to the leftmost column, and we’ll set it up fully before duplicating it to fill out the remaining columns. This is our starting point.

Under the General style settings, you have the option to choose the layout of the widget and choose the different ways to display the info card. You can also select the name, role, image, image proportions and add links to social media or contact, complete with accompanying icons.

We kept the default info below the layout and filled out the name and position of our imaginary team member. We also added a photo and kept its original proportions because they fit well. As for the socials, we added another and set appropriate icons for Twitter, Pinterest, and Instagram.

With that, we added all the content we needed for the first widget. The next step is to style it.

Styling the Team Widget

The styling options provided by the widget are separated across several tabs. They will let you choose the overall style and spacing between elements, providing you with additional content styling options. We’ll start from the top and address the Style options first.

The general Style options are where you can adjust the name tag of the team member, but also the color and typography options for both the name and the role. The typography options in question include everything from font family and size to line height and letter spacing – so there are plenty of ways to customize the widget.

The first thing we did here was changing the name tag to H5 from the default H4. We didn’t change the name color or typography, but we changed both for the role. For the color, we used #c4c4c4. For the typography, we changed the size to 16px and the weight to 500.

The next set of options concerns the icons – their default color, the color they have on hover, and their size. We changed the default color to #1e1e1e, the on-hover color to #c4c4c4 – so that it matches the role – and the size to 15px.

The final options under general Style are image hover options and text color and typography, which only apply to specific widget layouts. Since ours isn’t one of those, we only changed image hover options to Zoom.

Our next stop is the Spacing Style options.

The spacing style, as its name says, lets you set the spacing between the various elements you have on your widget. It’s where you can set the margins for the name and the role, the space between the icons, the top margin for the content as a whole, and the bottom margin for text – which we don’t have as we haven’t chosen the layout that allows it.

From top to bottom, the values we entered are 10px, 5px, 25px, and 22px.

The Content Style options remain, which lets you choose the content alignment. We didn’t change anything there, and our first team widget was done.

Since this widget has all the settings we need, the best way to create the remaining four is to duplicate the original three times and then change the contents of the widgets. It’s as easy as right-clicking on the widget, choosing “duplicate,” and then dragging the resulting widget over to a free column. After the change of contents, this is what we got.

Of course, you can choose completely different settings to get animated content cards, borders between the widgets, and plenty of other exciting elements. The best way to use this short tutorial is as inspiration.

Displaying Your Team with Qi Blocks for Gutenberg

Now let’s see how you can create the same team display using the Team block from the Qi Blocks for Gutenberg plugin. After installing and activating the plugin, you need to set your working field – create one column for each team member you want to display. We made four before adding the block to the first one.

You’ll find the block settings in the Settings Sidebar on the right-hand side. The content settings open first by default, allowing you to choose the layout of the block’s contents, the name, role, and image of the team member, and an option for adding links to socials.

We populated the block with our content, adding Twitter, Pinterest, and Instagram as socials.

That’s all the content we’ll need for the first team info block so we can go ahead with styling it.

Styling the Team Block

The Style tab contains different styling options for general content, the name, the role, text, and socials. Let’s start with Style > Content, a set of options where you can set the behavior of the image on hover, set up the space between the icons, the top margin for the content, and the content alignment.

We’ve chosen Zoom as our image hover behavior. In addition, we set 25px for our space between icons and 22px for the top margin.

Under Style > Name, you can set the tag for the name and adjust its color. Under Typography, you’ll have access to a complete set of typography options, and you’ll also have the option to set the name’s bottom margin. We changed the tag to H5 and put the bottom margin to 5px.

For Style > Role, you get the same options for Name minus the tag. Here, we changed the name color to #c4c4c4, set the font size to 16px in the Typography options, the weight to 500, and the line height to 23px. We set the bottom margin to 10px.

We don’t have any text in our layout, so we could skip Style > Text. The options you’ll find there will let you choose color and typography.

Moving on to Style > Social, you’ll see a few color options for fill, stroke, and hover. You’ll also be able to adjust the icon size. We set our fill color to #1e1e1e and hover color to #c4c4c4.

Filling out the rest with the first team member block set is easy. Create copies of the first one and change its contents for each new team member, and you’ll soon have the entire display ready to go online on your website.

Let’s Wrap It Up!

You should never underestimate the power a simple team member gallery can have on the people who visit your website – whether they are customers or future team additions. You must focus on how you display your team in WordPress. As we’ve demonstrated, QI Addons for Elementor’s Team widget won’t drown you in options, but it won’t leave you wanting for more – it hits just the right spot to stay simple yet very useful.