When you get into the waters of online commerce and start an online business or use digital tools to grow your business online, you can easily find yourself overwhelmed by the various tools at your disposal. However, if you stick to the basics, you’ll find building and maintaining customer trust on your checklist. There’s more than one thing you can do to top it off – for example, adding references to your websites can be helpful. But humanizing your business and displaying your team on your WordPress website is also a great way to do it.
That’s why we added a team widget to our Qi Addons for Elementor plugin – to give your clients or customers an easy way to show that you and your team are real people just like them. Qi Plugins is an excellent collection of Elementor widgets that make an already great site editor even better. by giving you an easy option to do something out of the ordinary like setting up a team screen.
On the other hand, if you prefer to use the Gutenberg editor to create pages on your website, you should use our Qi Blocks for Gutenberg plugin. It has a tool block, Along with 47 other free blocks and 33 premium blocks. This article will show you how to create a team screen for your WordPress website using both plugins.
Viewing Your Team with Qi Plugins for Elementor
We will use one of the examples on the plugin page to show you how to display your team in WordPress. Qi Plugins for Elementor Addition. We have also prepared a video tutorial for this, so you can watch if you prefer watching videos instead of reading articles.
But to get started, you need to make sure the plugin is installed. You must also have Elementor installed, so your first step should be to go to your website’s control panel and navigate to: Plugins > Add Newand finding, installing and activating the two plugins.
Other than that, the next step is to prepare the area for adding the widget. Find a post or page you want to edit and create a four-column section. Due to the way the widget works, we will need to use it four times, once for each team member.
Section and column settings also need some adjustment to get accurate results. We changed the content width for the section inside to Full Width. Layout > Layout. Later Advanced > Qode Essential Plugins Grid, We chose yes for the “Make this row ‘on the grid’” option and left the grid row behavior as default.
As for the columns, we added some padding to them. we went Advanced > Advanced and added 18px padding to the right of the leftmost column. The next one has 12 pixels on the right and 6 pixels on the left. The next column has 6 pixels to its right and 12 pixels to its left, and the last column has 18 pixels of padding to its right.
Of course, you should keep in mind that these settings may not give the same results in all cases. It will look different depending on the theme you are using and you may need some additional adjustments to make it look just right. This is how we did it.
Adding Content to the Team Widget
Once our workspace is set up, the next step will be to add the first widget. We’ve added it to the leftmost column and we’ll set it up exactly before duplicating to fill 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 different ways to display the information card. You can also choose the name, role, picture, picture proportions and add links to social media or contact with accompanying icons.
We kept the default information below the layout and filled in the name and location of our imaginary team member. We also added a photo and kept their original proportions as they fit well. As for social media, we’ve added another one and set appropriate icons for Twitter, Pinterest, and Instagram.
With this, we have added all the content we need for the first widget. The next step is to style it.
Shaping the Team Widget
The style options provided by the widget are divided into several tabs. It gives you additional content styling options by letting you choose the overall style and spacing between elements. We’ll start at the top and cover the Style options first.
General Style options is where you can set the team member’s nametag, as well as color and typography options for both the name and role. These typography options include everything from font family and size to line height and letter spacing; so there are many ways to customize the widget.
The first thing we did here was change the name tag from the default H4 to H5. We didn’t change the name color or the typography, but we changed both for the role. We used #c4c4c4 for the color. We changed the size to 16px and the weight to 500 for the typography.
The next set of options is about icons – their default color, the color they have when hovered, and their size. We changed the default color to #1e1e1e, hover color to #c4c4c4, and size to 15px to fit the role.
The final options under General Style are image hover options and text color and typography that only apply to certain widget layouts. Since ours isn’t one of them, we just changed the hover options to Zoom.
Our next stop is Space Style options.
Spacing style, as the name suggests, allows you to adjust the spacing between various elements in your widget. This is where you can set margins for name and role, space between icons, top margin for content as a whole, and bottom margin for text – we don’t have that because we didn’t choose it. permissive order.
The values we entered from top to bottom are 10px, 5px, 25px and 22px.
The Content Style options remain, allowing you to choose the content alignment. We didn’t change anything there and our first team widget was made.
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 and selecting “copy” and then dragging the resulting widget into an empty column. After the content change, this is what we have.
Of course, you can choose completely different settings for animated content cards, borders between widgets and many other exciting elements. The best way to use this short tutorial is to get inspired.
Viewing Your Team with Qi Blocks for Gutenberg
Now let’s see how you can create the same team image using the Team block in the Qi Blocks for Gutenberg plugin. After installing and activating the plugin, you need to set up your workspace – create a column for each team member you want to view. We did four before adding the block to the first.
You will find the blocking settings in the Settings Sidebar on the right. Content settings first open by default, allowing you to choose the layout of the block content, the team member’s name, role and image, and the option to add social media links.
We filled the block with our content, added Twitter, Pinterest and Instagram as social media.
That’s all the content we’ll need for the first set of info block so we can keep shaping it.
Shaping Tool Block
The Style tab contains different style options for general content, name, role, text, and social information. Let’s start with Style > ContentA set of options where you can adjust the behavior of the image on hover, adjust the spacing between icons, top margin for content, and content alignment.
We chose Zoom as our hover behavior. We also set 25px for our space between icons and 22px for the top margin.
Under Style > Name, you can set the label for the name and set its color. Under Typography, you will have access to full typography options and you will also have the option to set the bottom margin of the name. We changed the tag to H5 and put the bottom margin as 5px.
For Style > RoleYou get the same options for Name minus tag. Here we changed the name color to #c4c4c4, in the Typography options we set the font size to 16px, weight 500 and line height 23px. We set the bottom margin to 10px.
We don’t have any text in our layout so we can skip Style > Text. The options you’ll find there will let you choose color and typography.
continue Style > SocialYou will see several color options for fill, stroke, and hover. You will also be able to adjust the icon size. We set our fill color to #1e1e1e and our hover color to #c4c4c4.
It’s easy to fill in the rest with the first team member block set. Make copies of the first and change its contents for each new team member; soon you will have the whole screen 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 people visiting your website – whether they’re customers or future team additions. You should focus on how you showcase your team in WordPress. As we’ve shown, Elementor’s QI Plugins for the Team widget won’t drown you in options, but it won’t leave you wanting more either – it just hits the spot to stay simple yet very useful.
