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.VIEW DEMO
Create person module #1
The first layout is a 3 column with in each a person module in it. I have added a nice shadow effect and on hover the box will jump up a little.
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
Text
Fill in a name, position and the social links.
Image
Place an image here (my image is rounded)
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 to.
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
None
Person module settings
Text
Fill in a name, position and the social links.
Image
Place an image here.
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 hove 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
None
Person module settings
Text
Fill in a name, position and the social links.
Image
Place an image here.
Add the folowing 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 an image saturation to make the images black and white when you hover over on the image it get his 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:
Text
Fill in a name, position and the social links.
Image
Place an image here.
Add the folowing 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:
Text
Fill in a name, position and the social links.
Image
Place an image here (my image is rounded)
Add the folowing 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 login 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 how to make 5 Divi portfolio layouts.