[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

5 Unique Divi Person Module Layouts for Free

Mark Hendriksen | August 15, 2019 | 13 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

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

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.

Person module layout 1

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

Divi person module layout 1

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

Person module transform settings

Advanced

CSS ID & Classes

CSS class: person_module_1

CSS class for layout 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.

Person module layout 2

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

Divi person module layout full width

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

CSS class for layout 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.

Person module layout 3

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

Divi person module layout 3

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

CSS class for layout 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.

Person module layout 4

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

Divi layout 4

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

CSS class for layout 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.

Person module layout 5

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.

Divi person module layout 5

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

CSS class for layout 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.

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

13 thoughts on “5 Unique Divi Person Module Layouts for Free”

  1. Great Stuffs Mark! Thanks for this!

    Will you please make some stunning blurb modules with CSS for “Services” like the above ones?

    Reply
  2. I downloaded the JSON file and uploaded it to Divi library without a problem; however, I am a bit lost with finding the imported CSS code. I would like to make some changes to it, like modifying colours and div sizes but I can’t find the code to modify it. I looked everywhere I could think but can’t find it and my Divi doesn’t seem to have DIVI > Theme Options > CSS tab; I don’t seem to have it. The page seems to work as expected so CSS must’ve imported somewhere but I have no idea where. You can see the page I am working on at http://info.flutracking.net/meet-the-team/. Thank you for your assistance.

    Reply
  3. I should rephrase my question. I can’t see any CSS from “5 Person Module Layouts.json” in Divi > Theme Options > General > Custom CSS and I don’t seem to have Divi > Theme Options > CSS. Any idea where to find CSS added by “5 Person Module Layouts.json”. Thank you.

    Reply

Leave a Comment

28 Shares
Share27
Pin1
Tweet