5 Unique Divi Person Module Layouts for Free

In this tutorial, I have created 5 unique layouts for the Divi person module. You can manually make them with this tutorial or you can download the JSON files and import them to your website. I start with the manual method but if you want the files then go here.

You can find a demo of each person module right here.

Table of Content

• Person module #1
• Person module #2
• Person module #3
• Person module #4
• Person module #5
• Download and install the JSON file

Create person module #1

The first layout is a 3 column within each a person module in it. I have added a beautiful hover effect when you hover over the person module. The box will jump slightly when you hover over it.

Start with creating the following layout. The first row is just for my title and you can skip that.

For the section, I used a grey background color #f5f5f5. The row has the default settings. For the person module, I used the following settings:

Person module settings

Content

Text
Fill in a name, position, and the social links.

Image
Place an image here (my image is rounded)

Design

Title text (H4)
Font-size: 22px
Title text alignment: Center

Position text
Position text alignment: Center
Position text color: #044f91
Position text size: 16px

Spacing
Padding top: 35px
Padding bottom: 35px

Border
Rounded corners: 20px

Box shadow
Box shadow vertical poistion: 15px
Box shadow blur strenght: 30px
Box shadow spread strength: -15px
Shadow color: rgba(0,0,0,0.3)

Transform

Advanced

CSS ID & Classes

CSS class: person_module_1

Place the following CSS in Divi > Theme Options > CSS

/* ######  PERSON MODULE 1  ##### */

.person_module_1 .et_pb_team_member_image {
	padding-bottom: 10px;
}

@media (max-width: 980px) {
.person_module_1 .et_pb_team_member_image {
	margin: 0 auto;
}}

@media (min-width: 767px) and (max-width: 980px) {
.person_module_1 .et_pb_team_member_image {
	text-align: center;
}}

Create person module #2

This layout is a full-width 4-column layout and on hover, the name with the position will show up. You can also add social links if you like.

The first row is just for my title so you don’t need to create that one.

The section settings have the default settings. The row settings have the following settings (second row with the person modules in it).

Row settings

Design

Sizing
Use custom gutter width: Yes
Gutter width: 1
Equalize column heights: Yes

Person module settings

Content

Text
Fill in the name, position, and social links.

Image
Place an image here.

Design

Title text (H4)
Font weight: Ultra bold
Font-size: 30px
Title text color: #ffffff

Position text
Position text color: #ffffff
Position text size: 20px

Advanced

CSS ID & Classes

CSS class: person_module_2

Add the folowing CSS to Divi > Theme Options > CSS

/* ######  PERSON MODULE 2  ##### */

.person_module_2 .et_pb_team_member_image {
    max-width: 100%;
}

.person_module_2 .et_pb_team_member_description {
background: rgba(0,0,0,.75);
    color: #fff;
    padding: 47px 94px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.person_module_2:hover .et_pb_team_member_description {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}

.person_module_2 .et_pb_team_member_image {
	margin-bottom: 0px !important;
}
.person_module_2 {
	overflow: hidden !important;
}

Create person module #3

For this layout, I created a 3 column layout. When you hover over the person module it will expand with the title, position, and social links.

The first row is just for my title so you don’t need to create that one.

The section and the row (second one) have the default settings. The 3 columns in the row have the following settings:

Column row

Design

Border

Border styles
Top border width (hover): 4px
Border style: dotted

Left border width (hover): 4px
Border style: dotted

None

Person module settings

Content

Text
Fill in a name, position, and the social links.

Image
Place an image here.

Design

Spacing

Margin (hover)
Top: 25px
Left: 25px

Advanced

CSS ID & Classes

CSS class: person_module_3

Add the following CSS to Divi > Theme Options > CSS

/* ######  PERSON MODULE 3  ##### */

.person_module_3 .et_pb_team_member_description {
	background-color: #fff;
	padding: 20px 25px 10px 25px;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
	-webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.person_module_3:hover .et_pb_team_member_description {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}

.person_module_3 .et_pb_team_member_image {
	z-index: 999;
}

.person_module_3 .et_pb_team_member_image {
	margin-bottom: 0px;
}

@media (max-width: 767px) {
.person_module_3 .et_pb_team_member_image {
	max-width: 100%;		
}}

Create person module #4

For this layout, I used image saturation to make the images black and white when you hover over the image it gets its color back.

Start creating this layout, you can skip the first row that is only for my title.

The section and row have the default settings.

The person modules have the following settings:

Design

Text
Fill in a name, position, and the social links.

Image
Place an image here.

Content

Image
Image saturation: 0%
Image saturation hover: 100%

Title text (H4)
Title font-weight: bold
Title font style: Uppercase

Position text
Position font-weight: Bold
Position text color: #feca05
Position text size: 16px

Advanced

CSS ID & Classes

CSS class: person_module_4

Add the following CSS to Divi > Theme Options > CSS

/* ######  PERSON MODULE 4  ##### */

.person_module_4 .et_pb_team_member_description {
	border-left: 8px solid #feca05;
	padding: 0px 25px;
}

@media (max-width: 767px) {
.person_module_4 .et_pb_team_member_image {
	max-width: 100%;		
}}

To change the yellow left border color you can change the CSS color on line 4.

Create person module #5

For the last layout, I created a 3 column structure. On hover the person module gets an overlay with the title, position, and social links.

Start with creating a 3-column layout and place in each column the person module. the first row is just for my title and you can skip that one.

For the row and section, I used the default settings.

The person module will get the following settings:

Content

Text
Fill in a name, position, and the social links.

Image
Place an image here (my image is rounded)

Design

Icon
Icon color: #ffffff

Title text (H4)
Title text color: #ffffff
Font-size: 24px

Position text
Position text color: #ffffff
Position text size: 16px

Advanced

CSS ID & Classes

CSS class: person_module_5

Add the following CSS to Divi > Theme Options > CSS

/* ######  PERSON MODULE 5  ##### */

.person_module_5 .et_pb_team_member_description {
	position: absolute;
    top: 0px;
    height: 100%;
	width: 100%;
	padding: 35px;
	background-color: rgba(0, 0, 0, 0.50);
	opacity:0;
	-webkit-transition: all .3s ease-in-out !important;
	-moz-transition: all 0.3s ease-in-out!important;
	-ms-transition: all 0.3s ease-in-out!important;
	-o-transition: all 0.3s ease-in-out!important;
	transition: all 0.3s ease-in-out!important;
}

.person_module_5:hover .et_pb_team_member_description {
	opacity:1;
}

.person_module_5 .et_pb_team_member_image {
	margin-bottom: 0px;
}

@media (max-width: 980px) {
.person_module_5 .et_pb_team_member_image {
	max-width: 100%;		
}}

@media (min-width: 768px) and (max-width: 980px) {
.person_module_5 .et_pb_team_member_image {
	width: 100%;		
}}

Download and install the JSON file

You can download the JSON file with all of the person module layouts from the membership dashboard.

First, you need to log in here if you are not a member yet you need to create an account first (this is free).

From your dashboard go to free downloads and download the 5 free person module layouts.

Unpack the download folder.

To upload the layouts go to your website and go to Divi > Divi Library

Click on Import & Export and import the JSON file.

In Divi > Divi Library > 5 person module layouts you find all of the layouts. From here you can save each layout separately and import them into your page(s).

You still need to copy/paste the CSS code from each layout in Divi > Theme Options > CSS

And that is a wrap-up for this tutorial. Check out my tutorial on how to make 5 Divi portfolio layouts.