Search

How to Create Team Member Section in Elementor

Behind a successful business, there is always a solid team. If you plan to create a website for your business with Elementor, you can easily add a team member section to a page. Be it the home page, the about page, or any page where you want to display your team members. Elementor itself has no specific widget dedicated to creating a team member section. You can use the combination of the Image widget, Heading widget, Text Editor widget, and Social Icons widget to create a team member section. Alternatively, you can use an add-on.

Three Elementor add-ons we suggest for creating a team member section are Essential Addons, Happy Addons, and JetElements. These add-ons, respectively, come with a widget dedicated to creating a team member section.

  • Essential Addons: The widget to create a team member section is called Team Member. The widget is available on both versions of Essential Addons (Free and Pro), but some setting options are only available on the pro version.
  • Happy Addons: The widget to create a team member section is also called Team Member. The widget is available on both versions of Happy Addons (Free and Pro), including all setting options. Happy Addons is the best option if you are looking for a free solution.
  • JetElements: It is a premium add-on for Elementor developed by Crocoblock. You can get JetElements for $24 per year. The Elementor widget offered by JetElements to create the team member section is also called Team Member.

In this article, we will show you how to create a team member section with Happy Addons.

How to Create Team Member Section in Elementor Using Happy Addons

Before we get started, make sure you have installed and activated the Happy Addons add-on. You can download the free version of Happy Addons on the WordPress plugin directory. Once you are ready, create a new page or template you want to add the team member section to and edit it with Elementor. New to Elementor? You can read our previous article to learn how to use Elementor. Add a new section by clicking the plus button on the canvas area. Select a column structure according to the team members you want to add. In this example, we use the three-column structure.

Drag the Team Member widget to one of the columns on the section you have just added above.

Next, go to the left panel to edit the content. You can edit the content under the Content tab. There are 3 blocks you can open to edit the content:

  • Information

This is the block you can open to edit the main content of the team member. You can add the photo of your team member, name, job title, and description. A little tip. If you want to display the photo of your team member in a rounded shape, you can upload a square photo instead of rectangle.

  • Social Profiles

You can open this block to add the social media accounts of your team members. You can simply open an existing social media profile (by clicking it) to edit it. To add a new one, you can click the ADD ITEM button. If you want to disable the social media profiles, you can disable the Show Profiles option.

  • Details Button

You can open this block if you want to enable the details link. Otherwise, you can ignore it.

Styling up the team member profile

Once you are done editing the content, you can switch to the Style tab to style up the team member profile. If you use the pro version Happy Addons, you can choose a preset to instantly get an eye-catching team member profile. If you use the free version of Happy Addons, you have to style up the team member profile yourself. There are 4 blocks you can open to style up the team member profile.

  • Photo

You can open this block to set the size of your team member’s photo (width and height), set the padding, border type, border width, and box shadow. For your information, by default, your photo contains a blue border. To remove it, you can set the border width to 0.

  • Name, Job Title & Bio

You can open this block to set the typography (font family, font style, font size, and so on) of your team member’s name, job title, and description (bio). You can also set the text color of these attributes.

  • Social Icons

You can open this block to set the size of the social media icons, padding, spacing, color, border radius, background color, and so on.

  • Details Button

If you enable the details link (button) on the Content tab, you can open this block to style it up. You can set things like button text typography, margin, padding, border radius, the color of the button text, background color of the button, and so on. You can use a different style for each state (normal and hover).

Once you are done with the team member profile on the first column, you can simply copy it to other columns and then replace the content (photo and text). This will save you a lot of time. You can also duplicate the section if you want to add more team members.

That’s it. You can publish your page/template once you are done editing it.

The bottom line

Elementor has no default widget to add a team member section. If you need to add one, Happy Addons is one of the add-ons you can consider. It comes with a widget dedicated specifically to add a team member section to a page or template. To streamline your workflow, Happy Addons even offer presets to allow you to instantly get an eye-catching team member profile. Or you can also use a premade team member section template.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?