{"id":42385,"date":"2023-01-31T15:00:16","date_gmt":"2023-01-31T14:00:16","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=42385"},"modified":"2023-01-26T13:13:00","modified_gmt":"2023-01-26T12:13:00","slug":"how-to-display-team-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-display-team-in-wordpress\/","title":{"rendered":"How to Display Your Team in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]When you enter the waters of online commerce and build an online business \u2013 or use digital tools to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-grow-your-business-online\/\">grow your business online<\/a> \u2013 you can easily find yourself overwhelmed by the variety of tools you have at your disposal. If you stick to the fundamentals, however, you&#8217;ll find <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-build-and-maintain-customer-trust\/\">building and maintaining customer trust<\/a> on your checklist. There&#8217;s more than one thing you can do to cross it out \u2013 <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-testimonials-in-wordpress\/\">adding testimonials<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That&#8217;s why we included a <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/team\/\" target=\"_blank\" rel=\"noopener\">team widget<\/a> in our <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin \u2013 to give you an easy way to show your clients or customers that you and your team are real people, just like them. <strong>The Qi Addons is a superb collection of Elementor widgets that makes an already great site editor even better<\/strong> by giving you an easy option to do something as extraordinary as setting up a team display.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the other hand, if you prefer to use the Gutenberg editor to create pages on your website, then you should use our <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg<\/a> plugin. It has a <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/team\/\" target=\"_blank\" rel=\"noopener\">team block<\/a>, <strong>along with 47 other free blocks and 33 premium ones<\/strong>. This article will show you how to create a team display for your WordPress website using both plugins.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Displaying Your Team with Qi Addons for Elementor<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"534\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Team-Display.jpg\" class=\"attachment-full size-full\" alt=\"Team Display\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Team-Display.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Team-Display-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Team-Display-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Team-Display-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We&#8217;ll use one of the examples from the addon&#8217;s page to demonstrate how to display your team in WordPress using the <a href=\"https:\/\/wordpress.org\/plugins\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin. We also made a video tutorial for it, so you can watch it if you prefer watching videos over reading articles.[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" style=\"border: 1px solid #ebebeb;\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/RCLVNvw03Rg\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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&#8217;s dashboard, navigating to <em>Plugins &gt; Add New<\/em>, and finding, installing, and activating the two plugins.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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&#8217;d like to edit and create a four-column section. <strong>Because of how the widget works, we&#8217;ll need to use it four times \u2013 once for each team member.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <em>Layout &gt; Layout<\/em>. Then, in <em>Advanced &gt; Qode Essential Addons Grid<\/em>,<strong> we chose yes for the &#8220;Make this row in &#8216;In Grid'&#8221; option and left the grid row behavior at default.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the columns, we&#8217;ve added some padding to them. We went to <em>Advanced &gt; Advanced<\/em> and added 18px padding to the right on the leftmost column. <strong>The next one got 12px to the right and 6px to the left.<\/strong> The next one got 6px to the right and 12px to the left, and the final column got 18px of padding to the right.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"495\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Elementor-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Elementor-768x392.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Elementor-620x317.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, you should remember that these settings might not produce the same results in every case. <strong>It will look different based on the theme you&#8217;re using, and you might need some additional adjustments to make it look just right.<\/strong> This is just how we did it.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding the Content to the Team Widget<\/h3>\n<p>[\/vc_column_text][vc_column_text]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&#8217;ll set it up fully before duplicating it to fill out the remaining columns. This is our starting point.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Widget-Added.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Widget Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Widget-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Widget-Added-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Widget-Added-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Widget-Added-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We kept the default info below the layout and filled out the name and position of our imaginary team member. <strong>We also added a photo and kept its original proportions because they fit well.<\/strong> As for the socials, we added another and set appropriate icons for Twitter, Pinterest, and Instagram.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Item-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Item Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Item-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Item-Settings-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Item-Settings-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Item-Settings-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that, we added all the content we needed for the first widget. The next step is to style it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Team Widget<\/h3>\n<p>[\/vc_column_text][vc_column_text]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. <strong>We&#8217;ll start from the top and address the Style options first.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 \u2013 so there are plenty of ways to customize the widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The first thing we did here was changing the name tag to H5 from the default H4.<\/strong> We didn&#8217;t change the name color or typography, but we changed both for the role. <strong>For the color, we used #c4c4c4. For the typography, we changed the size to 16px and the weight to 500.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Style.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Style-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Style-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Style-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next set of options concerns the icons \u2013 their default color, the color they have on hover, and their size. <strong>We changed the default color to #1e1e1e, the on-hover color to #c4c4c4 \u2013 so that it matches the role \u2013 and the size to 15px.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The final options under general Style are image hover options and text color and typography, which only apply to specific widget layouts. <strong>Since ours isn&#8217;t one of those, we only changed image hover options to Zoom.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Styling.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Styling\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Styling.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Styling-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Styling-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Styling-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Our next stop is the Spacing Style options.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The spacing style, as its name says, lets you set the spacing between the various elements you have on your widget. It&#8217;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 \u2013 which we don&#8217;t have as we haven&#8217;t chosen the layout that allows it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>From top to bottom, the values we entered are 10px, 5px, 25px, and 22px.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Spacing-Style.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Spacing Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Spacing-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Spacing-Style-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Spacing-Style-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Spacing-Style-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Content Style options remain, which lets you choose the content alignment. We didn&#8217;t change anything there, and our first team widget was done.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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. <strong>It&#8217;s as easy as right-clicking on the widget, choosing &#8220;duplicate,&#8221; and then dragging the resulting widget over to a free column. After the change of contents, this is what we got.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"506\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Final.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Final-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Final-768x401.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Final-620x324.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Displaying Your Team with Qi Blocks for Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now let&#8217;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 \u2013 create one column for each team member you want to display. <strong>We made four before adding the block to the first one.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"476\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-4-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Block 4 Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-4-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-4-Columns-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-4-Columns-768x377.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-4-Columns-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You&#8217;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&#8217;s contents, the name, role, and image of the team member, and an option for adding links to socials.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We populated the block with our content, adding Twitter, Pinterest, and Instagram as socials.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"467\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Image-and-Social.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Block Image and Social\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Image-and-Social.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Image-and-Social-300x145.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Image-and-Social-768x370.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Image-and-Social-620x299.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That&#8217;s all the content we&#8217;ll need for the first team info block so we can go ahead with styling it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Team Block<\/h3>\n<p>[\/vc_column_text][vc_column_text]The Style tab contains different styling options for general content, the name, the role, text, and socials. Let&#8217;s start with <em>Style &gt; Content<\/em>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We&#8217;ve chosen Zoom as our image hover behavior. In addition, we set 25px for our space between icons and 22px for the top margin.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"382\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Styling.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Block Styling\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Styling.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Styling-300x118.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Styling-768x303.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Styling-620x244.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under <em>Style &gt; Name<\/em>, you can set the tag for the name and adjust its color. Under Typography, you&#8217;ll have access to a complete set of typography options, and you&#8217;ll also have the option to set the name&#8217;s bottom margin. <strong>We changed the tag to H5 and put the bottom margin to 5px.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For <em>Style &gt; Role<\/em>, you get the same options for <em>Name<\/em> minus the tag. <strong>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.<\/strong> We set the bottom margin to 10px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"407\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Styling-Options.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Block Styling Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Styling-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Styling-Options-300x126.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Styling-Options-768x323.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Styling-Options-620x260.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We don&#8217;t have any text in our layout, so we could skip<em> Style &gt; Text<\/em>. The options you&#8217;ll find there will let you choose color and typography.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Moving on to<em> Style &gt; Social<\/em>, you&#8217;ll see a few color options for fill, stroke, and hover. You&#8217;ll also be able to adjust the icon size. <strong>We set our fill color to #1e1e1e and hover color to #c4c4c4.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"411\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Final.jpg\" class=\"attachment-full size-full\" alt=\"Qi Team Block Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Final-300x127.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Final-768x326.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Team-Block-Final-620x263.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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&#8217;ll soon have the entire display ready to go online on your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let&#8217;s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]You should never underestimate the power a simple team member gallery can have on the people who visit your website \u2013 whether they are customers or future team additions. You must focus on how you display your team in WordPress. As we&#8217;ve demonstrated, QI Addons for Elementor&#8217;s Team widget won&#8217;t drown you in options, but it won&#8217;t leave you wanting for more \u2013 it hits just the right spot to stay simple yet very useful.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Wondering what&#8217;s the best way to display your team in WordPress? We&#8217;ll walk you through an easy method to set up a team display in no-time!<\/p>\n","protected":false},"author":9295,"featured_media":42412,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[108,342],"class_list":["post-42385","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-qi-addons","tag-qi-blocks"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/42385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=42385"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/42385\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/42412"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=42385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=42385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=42385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}