How to Create a Team Members Section in Divi Builder

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 our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to start a profitable blog with WordPress? OF COURSE!

Leave a Comment

Want to outrank big websites on Google?

Without backlinks, without high DR, without digital PR. Just content optimization.

Click to enlarge.

Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Got WordPress knowledge?
Why not turning it into profit? Click the button below to learn how.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.