5 Unique Divi Person Module Layouts for Free

by | Aug 15, 2019 | Divi tutorials | 11 comments

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.

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.

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

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

Image
Place an image here (my image is rounded)

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

Position text
Position text allignment: 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

CSS ID & Classes

CSS class: person_module_1

CSS class for layout 1

Place the following CSS in Divi > Theme Options > CSS

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.

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

None

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

None

Person module settings

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

Image
Place an image here.

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

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

CSS ID & Classes

CSS class: person_module_2

CSS class for layout 2

Add the folowing CSS to Divi > Theme Options > CSS

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.

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

None

Border

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

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

None

Person module settings

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

Image
Place an image here.

Spacing

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

CSS ID & Classes

CSS class: person_module_3

CSS class for layout 3

Add the folowing CSS to Divi > Theme Options > CSS

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.

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:

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

Image
Place an image here.

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

CSS ID & Classes

CSS class: person_module_4

CSS class for layout 4

Add the folowing CSS to Divi > Theme Options > CSS

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:

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

Image
Place an image here (my image is rounded)

Icon
Icon color: #ffffff

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

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

CSS ID & Classes

CSS class: person_module_5

CSS class for layout 5

Add the folowing CSS to Divi > Theme Options > CSS

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.

11 Comments

  1. Diseño web

    Thanks fot the Layouts Mark. Congratulations

    Reply
    • Mark

      Thank you Diseño

      Reply
  2. Terry Loving

    Thank you! I was attempting to create this myself and not getting it “just right”.

    Reply
  3. Shane

    Hi Mark

    Thanks for the person’s layout, very short and sweet.

    Reply
  4. Shahil

    Great Stuffs Mark! Thanks for this!

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

    Reply
    • Mark

      Thanks Shahil,

      Yes, i will make one of those as well soon

      Reply
  5. Dehn Merrill

    Wow! Nice work and great Tut. Thank you so much, I plan to use these in a few different ways!

    Reply
    • Mark

      Your welcome Dehn

      Reply
  6. John Fejsa

    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
  7. John Fejsa

    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
    • Mark

      Hi John,

      You still need to copy/paste the CSS from the tutorial above.

      Reply

Submit a Comment

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

close
Lifetime access to all Divi child themes and plugins
28 Shares
Share27
Tweet
Pin1
Buffer