All the new Divi feature updates that have happened over the last couple of months have undeniably expanded the range of possibilities you have when designing websites. For this tutorial, we’ve created 5 different ways to get creative with the Divi Person Module without using any additional CSS code. The main goal of this post is to inspire you before starting your next Divi project. The Person Module is often used to share more information about team members or share testimonials. With these 5 different examples, you’re ready to give your pages a design boost.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome on different screen sizes.

Desktop

5-ways-to-get-creative-with-divis-person-module 5 Ways to Get Creative with Divi’s Person Module

Mobile

5-ways-to-get-creative-with-divis-person-module-1 5 Ways to Get Creative with Divi’s Person Module

Recreate Example #1

5-ways-to-get-creative-with-divis-person-module 5 Ways to Get Creative with Divi’s Person Module

Add New Section

Let’s start creating the first example! Open a new or existing page and add a regular section.

5-ways-to-get-creative-with-divis-person-module-2 5 Ways to Get Creative with Divi’s Person Module

Add New Row

Column Structure

Without modifying the section settings, add a new row using the following column structure:

5-ways-to-get-creative-with-divis-person-module-3 5 Ways to Get Creative with Divi’s Person Module

Sizing

Open the row settings and make some changes to the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

5-ways-to-get-creative-with-divis-person-module-4 5 Ways to Get Creative with Divi’s Person Module

Spacing

Next, open the spacing settings and add some custom padding values.

  • Top Padding: 100px (Desktop), 80px (Tablet & Phone)
  • Bottom Padding: 100px (Desktop), 80px (Tablet & Phone)
  • Left Padding: 100px (Desktop), 30px (Tablet), 25px (Phone)
  • Right Padding: 100px (Desktop), 30px (Tablet), 25px (Phone)

5-ways-to-get-creative-with-divis-person-module-5 5 Ways to Get Creative with Divi’s Person Module

Add Image Module to Column 1

Upload Image

Time to start adding modules! Add an Image Module to the first column and upload a squared image of choice.

5-ways-to-get-creative-with-divis-person-module-6 5 Ways to Get Creative with Divi’s Person Module

Box Shadow

Continue by going to the design tab and applying a subtle box shadow.

5-ways-to-get-creative-with-divis-person-module-7 5 Ways to Get Creative with Divi’s Person Module

Filters

You can also play around with the filters settings to add an effect to your image.

  • Saturation: 40%
  • Contrast: 130%

5-ways-to-get-creative-with-divis-person-module-8 5 Ways to Get Creative with Divi’s Person Module

Add Person Module #1 to Column 2

Add Content

The next module we’ll need is a Person Module. Go ahead and add one to the second column and fill in the name and position fields.

5-ways-to-get-creative-with-divis-person-module-9 5 Ways to Get Creative with Divi’s Person Module

Gradient Background

Add a gradient background to this module.

  • Color 1: rgba(11,15,229,0.41)
  • Color 2: rgba(45,237,255,0.87)
  • Gradient Direction: 150deg

5-ways-to-get-creative-with-divis-person-module-10 5 Ways to Get Creative with Divi’s Person Module

Title Text Settings

Then, change the title text settings in the design tab.

  • Title Font: Baloo
  • Title Text Color: #ffffff
  • Title Text Size: 20px

5-ways-to-get-creative-with-divis-person-module-11 5 Ways to Get Creative with Divi’s Person Module

Body Text Settings

Modify the body text settings as well.

  • Body Font Weight: Light
  • Body Text Color: #ffffff

5-ways-to-get-creative-with-divis-person-module-12 5 Ways to Get Creative with Divi’s Person Module

Spacing

And add some custom margin and padding values in the spacing settings.

  • Left Margin: -4vw (Desktop & Tablet), 0vw (Phone)
  • Right Margin: 8vw (Desktop & Tablet), 0vw (Phone)
  • Top Padding: 25px
  • Bottom Padding: 25px
  • Left Padding: 20px

5-ways-to-get-creative-with-divis-person-module-13 5 Ways to Get Creative with Divi’s Person Module

Border

We’re also adding a subtle left border to the module.

  • Left Border Width: 3px
  • Left Border Color: #ffffff

5-ways-to-get-creative-with-divis-person-module-14 5 Ways to Get Creative with Divi’s Person Module

Box Shadow

Along with a box shadow that’ll help you create depth on the page.

  • Box Shadow Blur Strength: 80px

5-ways-to-get-creative-with-divis-person-module-15 5 Ways to Get Creative with Divi’s Person Module

Add Person Module #2 to Column 2

Add Content

Add another Person Module right below the previous one. We’re using this module to show the social media profiles and the description.

5-ways-to-get-creative-with-divis-person-module-16 5 Ways to Get Creative with Divi’s Person Module

Icon Settings

Go to the design tab and change the icon color in the icon settings.

  • Icon Color: #50e8fe

5-ways-to-get-creative-with-divis-person-module-17 5 Ways to Get Creative with Divi’s Person Module

Spacing

Last but not least, open the spacing settings and add some custom padding values.

  • Top Padding: 30px
  • Left Padding: 30px (Desktop & Tablet), 0px (Phone)

5-ways-to-get-creative-with-divis-person-module-18 5 Ways to Get Creative with Divi’s Person Module

Recreate Example #2

5-ways-to-get-creative-with-divis-person-module-1 5 Ways to Get Creative with Divi’s Person Module

Add New Section

On to the next example! Add a new section to your page.

5-ways-to-get-creative-with-divis-person-module-19 5 Ways to Get Creative with Divi’s Person Module

Add New Row

Column Structure

Add a new row to this section using the following column structure.

5-ways-to-get-creative-with-divis-person-module-20 5 Ways to Get Creative with Divi’s Person Module

Column 2 Background Color

Without adding any modules yet, open the row settings and add a column 2 background color.

  • Column 2 Background Color: #f4f4f4

5-ways-to-get-creative-with-divis-person-module-21 5 Ways to Get Creative with Divi’s Person Module

Sizing

Then, go to the design tab and make some changes to the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

5-ways-to-get-creative-with-divis-person-module-22 5 Ways to Get Creative with Divi’s Person Module

Spacing

Add some custom padding values in the spacing settings as well.

  • Top Padding: 100px (Desktop), 80px (Tablet & Phone)
  • Bottom Padding: 100px (Desktop), 80px (Tablet & Phone)
  • Left Padding: 100px (Desktop), 30px (Tablet), 25px (Phone)
  • Right Padding: 100px (Desktop), 30px (Tablet), 25px (Phone)

5-ways-to-get-creative-with-divis-person-module-23 5 Ways to Get Creative with Divi’s Person Module

Add Image Module to Column 1

Upload Image

Time to start adding modules! The first module we’ll need is an Image Module in column 1. Upload an image of choice.

5-ways-to-get-creative-with-divis-person-module-24 5 Ways to Get Creative with Divi’s Person Module

Box Shadow

Then, add a box shadow to the image.

  • Box Shadow Blur Strength: 160px

5-ways-to-get-creative-with-divis-person-module-25 5 Ways to Get Creative with Divi’s Person Module

Filters

You can also play around with the filters settings.

  • Saturation: 40%
  • Contrast: 130%

5-ways-to-get-creative-with-divis-person-module-26 5 Ways to Get Creative with Divi’s Person Module

Add Person Module #1 to Column 2

Add Content

In the second column, the first module we’ll need is a Person Module. Fill in the name and position fields.

5-ways-to-get-creative-with-divis-person-module-27 5 Ways to Get Creative with Divi’s Person Module

Background Color

Go to the background settings and add a transparent background color.

  • Background Color: rgba(255,255,255,0.7)

5-ways-to-get-creative-with-divis-person-module-28 5 Ways to Get Creative with Divi’s Person Module

Text Settings

Then, change the text orientation in the text settings.

  • Text Orientation: Center

5-ways-to-get-creative-with-divis-person-module-29 5 Ways to Get Creative with Divi’s Person Module

Title Text Settings

Change the title text settings as well.

  • Title Font: Abril Fatface
  • Title Text Color: #000000
  • Title Text Size: 40px

5-ways-to-get-creative-with-divis-person-module-30 5 Ways to Get Creative with Divi’s Person Module

Body Text Settings

Along with the body text settings.

  • Body Font Weight: Light
  • Body Text Color: #000000
  • Body Text Size: 15px

5-ways-to-get-creative-with-divis-person-module-31 5 Ways to Get Creative with Divi’s Person Module

Spacing

We’re creating an overlap by using some negative left margin in the spacing settings.

  • Left Margin: -21.64vw (Desktop), -46.1vw (Tablet), 0vw (Phone)
  • Top Padding: 30px
  • Bottom Padding: 30px

5-ways-to-get-creative-with-divis-person-module-32 5 Ways to Get Creative with Divi’s Person Module

Box Shadow

And we’re applying a subtle box shadow as well.

  • Box Shadow Blur Strength: 80px

5-ways-to-get-creative-with-divis-person-module-33 5 Ways to Get Creative with Divi’s Person Module

Add Person Module #2 to Column 2

Add Content

The second module we need in column 2 is another Person Module. Here, we’re adding the social media links and description.

5-ways-to-get-creative-with-divis-person-module-34 5 Ways to Get Creative with Divi’s Person Module

Icon Settings

Continue by going to the design tab and changing the icon color in the icon settings.

  • Icon Color: #000000

5-ways-to-get-creative-with-divis-person-module-35 5 Ways to Get Creative with Divi’s Person Module

Spacing

Add some custom margin and padding values as well.

  • Top Margin: 3vw
  • Top Padding: 30px
  • Bottom Padding: 30px
  • Left Padding: 30px
  • Right Padding: 30px

5-ways-to-get-creative-with-divis-person-module-36 5 Ways to Get Creative with Divi’s Person Module

Recreate Example #3

5-ways-to-get-creative-with-divis-person-module-2 5 Ways to Get Creative with Divi’s Person Module

Add New Section

On to the third example! Add a new section to your page.

5-ways-to-get-creative-with-divis-person-module-37 5 Ways to Get Creative with Divi’s Person Module

Add New Row

Column Structure

Then, add a new row to the section using the following column structure:

5-ways-to-get-creative-with-divis-person-module-38 5 Ways to Get Creative with Divi’s Person Module

Sizing

Open the row settings and change the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

5-ways-to-get-creative-with-divis-person-module-39 5 Ways to Get Creative with Divi’s Person Module

Spacing

Add some custom padding values as well.

  • Top Padding: 100px (Desktop), 80px (Tablet & Phone)
  • Bottom Padding: 100px (Desktop), 80px (Tablet & Phone)
  • Left Padding: 100px (Desktop), 30px (Tablet), 25px (Phone)
  • Right Padding: 100px (Desktop), 30px (Tablet), 25px (Phone)

5-ways-to-get-creative-with-divis-person-module-40 5 Ways to Get Creative with Divi’s Person Module

Add Person Module #1 to Column 1

Add Content

Time to start adding modules! Add the first Person Module to column 1 and fill in the name and position fields.

5-ways-to-get-creative-with-divis-person-module-41 5 Ways to Get Creative with Divi’s Person Module

Background Color

Then, add a background color to the module.

  • Background Color: #ffffff

5-ways-to-get-creative-with-divis-person-module-42 5 Ways to Get Creative with Divi’s Person Module

Title Text Settings

Modify the title text settings as well.

  • Title Font Weight: Ultra Bold
  • Title Text Color: #000000
  • Title Text Size: 40px
  • Title Letter Spacing: -4px

5-ways-to-get-creative-with-divis-person-module-43 5 Ways to Get Creative with Divi’s Person Module

Body Text Settings

Do the same for the body text settings.

  • Body Font Weight: Light
  • Body Text Color: #000000
  • Body Text Size: 15px

5-ways-to-get-creative-with-divis-person-module-44 5 Ways to Get Creative with Divi’s Person Module

Spacing

Continue by going to the spacing settings and add some custom margin and padding values.

  • Top Margin: 40px (Desktop), 0px (Tablet & Phone)
  • Top Padding: 30px
  • Bottom Padding: 30px
  • Left Padding: 30px
  • Right Padding: 30px

5-ways-to-get-creative-with-divis-person-module-45 5 Ways to Get Creative with Divi’s Person Module

Border

Add ’20px’ to the top left corner in the border settings as well.

5-ways-to-get-creative-with-divis-person-module-46 5 Ways to Get Creative with Divi’s Person Module

Box Shadow

And give the module a colorful box shadow.

  • Box Shadow Blur Strength: 140px
  • Shadow Color: rgba(31,15,255,0.66)

5-ways-to-get-creative-with-divis-person-module-47 5 Ways to Get Creative with Divi’s Person Module

Add Person Module #2 to Column 1

Add Content

On to the second person module in column 1! Use this module to display the social media links and description.

5-ways-to-get-creative-with-divis-person-module-48 5 Ways to Get Creative with Divi’s Person Module

Background Color

Then, go to the background settings and add a white background color.

  • Background Color: #ffffff

5-ways-to-get-creative-with-divis-person-module-49 5 Ways to Get Creative with Divi’s Person Module

Icon Settings

Change the icon color as well.

  • Icon Color: #000000

5-ways-to-get-creative-with-divis-person-module-50 5 Ways to Get Creative with Divi’s Person Module

Spacing

Continue by adding some custom spacing values in the spacing settings.

5-ways-to-get-creative-with-divis-person-module-51 5 Ways to Get Creative with Divi’s Person Module

Border

And add ’20px’ to the bottom left corner.

5-ways-to-get-creative-with-divis-person-module-52 5 Ways to Get Creative with Divi’s Person Module

Box Shadow

Last but not least, add the box shadow.

  • Box Shadow Vertical Position: 50px
  • Box Shadow Blur Strength: 140px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: rgba(2,219,219,0.26)

5-ways-to-get-creative-with-divis-person-module-53 5 Ways to Get Creative with Divi’s Person Module

Add Image Module to Column 2

Upload Image

The next module we’ll need is an image module. Go ahead and add one to the second column and upload an image of choice.

5-ways-to-get-creative-with-divis-person-module-54 5 Ways to Get Creative with Divi’s Person Module

Border

Give this module ’20px’ of rounded corners in the border settings.

5-ways-to-get-creative-with-divis-person-module-55 5 Ways to Get Creative with Divi’s Person Module

Box Shadow

And add a subtle box shadow.

5-ways-to-get-creative-with-divis-person-module-56 5 Ways to Get Creative with Divi’s Person Module

Filters

Again, feel free to play around with the filters settings to change the appearance of the image.

5-ways-to-get-creative-with-divis-person-module-57 5 Ways to Get Creative with Divi’s Person Module

Recreate Example #4

5-ways-to-get-creative-with-divis-person-module-3 5 Ways to Get Creative with Divi’s Person Module

Add New Section

On to the fourth example! Add a new section to your page.

5-ways-to-get-creative-with-divis-person-module-58 5 Ways to Get Creative with Divi’s Person Module

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

5-ways-to-get-creative-with-divis-person-module-59 5 Ways to Get Creative with Divi’s Person Module

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

5-ways-to-get-creative-with-divis-person-module-60 5 Ways to Get Creative with Divi’s Person Module

Spacing

Change the spacing settings as well.

  • Top Padding: 100px (Desktop), 80px (Tablet & Phone)
  • Bottom Padding: 100px (Desktop), 80px (Tablet & Phone)
  • Left Padding: 100px (Desktop), 30px (Tablet), 25px (Phone)
  • Right Padding: 100px (Desktop), 30px (Tablet), 25px (Phone)

5-ways-to-get-creative-with-divis-person-module-61 5 Ways to Get Creative with Divi’s Person Module

Add Person Module to Column 1

Add Content

Time to start adding modules! Add a Person Module to column 1 and fill in all the fields.

5-ways-to-get-creative-with-divis-person-module-62 5 Ways to Get Creative with Divi’s Person Module

Icon Settings

Then, go to the icon settings and change the icon color.

  • Icon Color: #000000

5-ways-to-get-creative-with-divis-person-module-63 5 Ways to Get Creative with Divi’s Person Module

Text Settings

Change the text orientation in the text settings as well.

  • Text Orientation: Center

5-ways-to-get-creative-with-divis-person-module-64 5 Ways to Get Creative with Divi’s Person Module

Title Text Settings

Then, open the title text settings and make some changes.

  • Title Font Weight: Ultra Bold
  • Title Text Color: #000000
  • Title Text Size: 40px
  • Title Letter Spacing: -4px

5-ways-to-get-creative-with-divis-person-module-65 5 Ways to Get Creative with Divi’s Person Module

Body Text Settings

Modify the body text settings as well.

  • Body Font Weight: Light
  • Body Text Color: #000000
  • Body Text Size: 15px
  • Body Line Height: 2em

5-ways-to-get-creative-with-divis-person-module-66 5 Ways to Get Creative with Divi’s Person Module

Spacing

And create a shape using custom padding values in the spacing settings.

  • Top Padding: 280px (Desktop), 200px (Tablet), 50px (Phone)
  • Bottom Padding: 280px (Desktop), 200px (Tablet), 50px (Phone)
  • Left Padding: 200px (Desktop), 150px (Tablet), 20px (Phone)
  • Right Padding: 200px (Desktop), 150px (Tablet), 20px (Phone)

5-ways-to-get-creative-with-divis-person-module-67 5 Ways to Get Creative with Divi’s Person Module

Border

Create a circle by adding ‘700px’ to each one of the corners in the border settings and add a subtle border as well.

  • Border Width: 1px
  • Border Color: #333333

5-ways-to-get-creative-with-divis-person-module-68 5 Ways to Get Creative with Divi’s Person Module

Add Image Module to Column 2

Upload Image

Continue by adding an Image Module to the second column and upload a squared image of choice.

5-ways-to-get-creative-with-divis-person-module-69 5 Ways to Get Creative with Divi’s Person Module

Spacing

Modify the spacing settings of this module.

  • Top Margin: 7vw (Desktop), -15vw (Tablet), -5vw (Phone)
  • Left Margin: -5vw (Desktop), 0vw (Tablet & Phone)

5-ways-to-get-creative-with-divis-person-module-70 5 Ways to Get Creative with Divi’s Person Module

Border

Create a circle shape out of this image by adding ‘1000px’ to each one of the corners of the module.

5-ways-to-get-creative-with-divis-person-module-71 5 Ways to Get Creative with Divi’s Person Module

Box Shadow

Add a subtle box shadow as well.

  • Box Shadow Blur Strength: 160px
  • Box Shadow Spread Strength: -10px

5-ways-to-get-creative-with-divis-person-module-72 5 Ways to Get Creative with Divi’s Person Module

Filters

And finish the design by playing around with the filters settings of the image.

  • Saturation: 0%
  • Contrast: 130%

5-ways-to-get-creative-with-divis-person-module-73 5 Ways to Get Creative with Divi’s Person Module

Recreate Example #5

5-ways-to-get-creative-with-divis-person-module-4 5 Ways to Get Creative with Divi’s Person Module

Add New Section

On to the next and last example! Add a new section to your page.

5-ways-to-get-creative-with-divis-person-module-74 5 Ways to Get Creative with Divi’s Person Module

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

5-ways-to-get-creative-with-divis-person-module-75 5 Ways to Get Creative with Divi’s Person Module

Column 1 Gradient Background

Open the row settings and add a column 1 gradient background.

  • Color 1: #dddddd
  • Color 2: #ffffff
  • Column 1 Gradient Direction: 90deg
  • Column 1 Start Position: 40%
  • Column 1 End Position: 40%

5-ways-to-get-creative-with-divis-person-module-76 5 Ways to Get Creative with Divi’s Person Module

Sizing

Then, go to the sizing settings and make some changes.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

5-ways-to-get-creative-with-divis-person-module-77 5 Ways to Get Creative with Divi’s Person Module

Spacing

Add some custom padding values to the row as well.

  • Top Padding: 100px (Desktop), 80px (Tablet & Phone)
  • Bottom Padding: 100px (Desktop), 80px (Tablet & Phone)
  • Left Padding: 100px (Desktop), 30px (Tablet), 25px (Phone)
  • Right Padding: 100px (Desktop), 30px (Tablet), 25px (Phone)

5-ways-to-get-creative-with-divis-person-module-78 5 Ways to Get Creative with Divi’s Person Module

Add Person Module to Column 1

Add Content

Time to start adding modules! Add a Person Module to column 1 and fill in all the fields.

5-ways-to-get-creative-with-divis-person-module-79 5 Ways to Get Creative with Divi’s Person Module

Icon Settings

Then, change the icon color in the icon settings.

  • Icon Color: #000000

5-ways-to-get-creative-with-divis-person-module-80 5 Ways to Get Creative with Divi’s Person Module

Text Settings

Change the text orientation in the text settings as well.

  • Text Orientation: Right

5-ways-to-get-creative-with-divis-person-module-81 5 Ways to Get Creative with Divi’s Person Module

Title Text Settings

Next, make some changes to the title text settings.

  • Title Font: Chenla
  • Title Text Color: #000000
  • Title Text Size: 50px
  • Title Letter Spacing: -1px

5-ways-to-get-creative-with-divis-person-module-82 5 Ways to Get Creative with Divi’s Person Module

Body Text Settings

Do the same for the body text settings.

  • Body Font Weight: Light
  • Body Text Color: #000000
  • Body Text Size: 15px
  • Body Line Height: 2em

5-ways-to-get-creative-with-divis-person-module-83 5 Ways to Get Creative with Divi’s Person Module

Spacing

Continue by adding some custom padding values to the spacing settings of the module.

  • Top Padding: 200px (Desktop), 100px (Tablet & Phone)
  • Bottom Padding: 200px (Desktop), 100px (Tablet & Phone)
  • Left Padding: 500px (Desktop), 250px (Tablet), 50px (Phone)
  • Right Padding: 200px (Desktop), 100px (Tablet), 50px (Phone)

5-ways-to-get-creative-with-divis-person-module-84 5 Ways to Get Creative with Divi’s Person Module

Border

Lastly, add a border to the module.

5-ways-to-get-creative-with-divis-person-module-85 5 Ways to Get Creative with Divi’s Person Module

Add Image Module to Column 2

Upload Image

The next module we’ll need is an Image Module in column 2. Go ahead and upload a squared image of choice.

5-ways-to-get-creative-with-divis-person-module-86 5 Ways to Get Creative with Divi’s Person Module

Spacing

Then, make some changes to the spacing settings of this module.

  • Top Margin: 7vw (Desktop), -2vw (Tablet & Phone)
  • Left Margin: -10vw (Desktop), 0vw (Tablet & Phone)

5-ways-to-get-creative-with-divis-person-module-87 5 Ways to Get Creative with Divi’s Person Module

Box Shadow

Give the Image Module a box shadow as well.

  • Box Shadow Blur Strength: 160px
  • Box Shadow Spread Strength: -10px

5-ways-to-get-creative-with-divis-person-module-88 5 Ways to Get Creative with Divi’s Person Module

Filters

And to top it off, play around with the filters settings.

  • Saturation: 50%
  • Contrast: 130%

5-ways-to-get-creative-with-divis-person-module-89 5 Ways to Get Creative with Divi’s Person Module

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome on different screen sizes.

Desktop

5-ways-to-get-creative-with-divis-person-module 5 Ways to Get Creative with Divi’s Person Module

Mobile

5-ways-to-get-creative-with-divis-person-module-1 5 Ways to Get Creative with Divi’s Person Module

Final Thoughts

In this post, we’ve shown you 5 different ways to get creative with the Divi Person Module. You can use these examples for any website you’re building and create your own alternative versions by tweaking the settings of each design element. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

SEO News and More

SEO News and More

Share This