How to Create a Team Members Section in Divi Builder

Updated: December 31, 2020

Divi Builder comes with a module called Person. It’s a versatile enough module. Thanks to its ability to add dynamic content, you can use the module to add an author box to a custom single post template you created with Divi Builder. Another usage example, you can use the Person module to create a team members section, which we will cover shortly in this article. There are 5 elements you can add when creating a team members section using the Person module of Divi Builder.

  • Image
  • Name
  • Job title
  • Description
  • Social media profiles

Here is an example of the team members section created with the Person module.

You can definitely create a better team members section than the one above. It’s just an example.

How to create a team members section in Divi Builder using the Person module

Start by adding a new regular section by clicking the blue plus icon on the canvas area of the Divi Builder editor. Add a row and select a column structure according to the number of team members you want to add. We select the three-column structure in this example.

Add a new module by clicking the grey plus icon on the first column (leftmost). Since we want to add the Person module then select Person.

The Person module settings panel will appear right after you add the Person module. You can make the customization and styling process from this panel.

As we said earlier, there are 5 elements you can add to each team member profile:

Image

To add the image of your team member, you can open the Image block under the Content tab on the Person module settings panel. Simply click the image holder to select the image you want to use. Or, if you want to use a dynamic image instead (i.e. user profile picture), you can hover your mouse the image holder and click the trash icon then click the database icon to select a dynamic image type you want to use.

To style up the image, you can open the Image block under the Design tab. From this block, you can set the border radius, border style, apply CSS filters, and so on.

If you want it, you can use an animation effect where the image changes when a visitor hovers on it. Read our previous article to learn more.

Name, job title, description, and social media profiles

To add your team name, job title, description, and social media profiles, you can open the Text block under the Content tab on the Person module settings panel. Simply add the name on the Name field, the job position on the Position field, description on the Body field, and social media profiles on the available social media fields. If you want to add dynamic content, you can click the database icon on each field.

Once done adding the name, job description, and so on, you can go the Design tab style them up.

Styling up the social media icons

To style up the social media icons, you can open the Icon block on the Design tab. You can set the icon color from this block. If you want to use a custom icon size, simply enable the Use Icon Font Size option and set the size you want.

If you want to change the default alignment (left), you can open the Text block and select the alignment you want from the Text Alignment option. This setting will also set the alignment of other elements (except for the image), but since you can set custom stylings for other elements, you can set the alignment of the icons from here.

Styling up the name

To style up the name element, you can open the Title Text block on the Design tab. From this block, you can set the typography (font family, font style, font size, and so on) of the name, the text color, add text shadow, set the alignment, and so on.

Styling up job title

To style up the job title element, you can open the Position Text block on the Design tab. Same as the name element above, you can also set the typography, text color, and alignment of the job description element from this block.

Styling up the description

To style up the description element, you can open the Body block under the Design tab. You can also set the typography, text color, and alignment of the description element from this block. Especially for the description, you can also style up the link element, bullet, numbering, and blockquote. Simply click the tabs to style them up.

Copy the Person module on the first column

Once you are done styling up the Person module on the first column, you can copy it and paste it to other columns and then tailor the content (image, name, job position, description, and social media profiles). This will save you a lot of time rather than adding and styling up the Person module on each column from scratch.

To copy the Person module on the first column, click the three-dot icon on the module handle and select Copy Module then go to the second column. Right-click and select Paste Module. Do the same thing in the third column.

The bottom line

If you are looking to create a team members section on your Divi Builder-powered page, you can use the Person module. You can add elements such as the images of your members, their names, job position, a short intro about them, and their social media profiles. While the module is useful enough to create a team members section, it has some drawbacks. For instance, it offers no full control to customize social media icons. Also, there is no option to add an Instagram account. Also, you won’t be able to set the size of the image element.

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!