We’ve expanded our Five collection with 21 fresh person module designs for Divi. Make your team page shine with these modern, mobile-friendly layouts.

Whether you’re showcasing company leadership, highlighting star employees, or introducing the whole crew, these modules have you covered. Subtle animations and clean typography create a professional look that’s sure to impress site visitors.

Divi Den Pro subscribers can access the new modules now via the layout finder. As always, we’ve optimized each element for fast loading and responsive performance across devices.

With this addition, our Divi library now contains a whopping 3090 items. Watch for more layouts dropping soon.

Design Features

– Minimalist style with ample whitespace
– Animated content overlays
– Custom branded colour schemes
– Modern font pairings
– Hover triggered transitions
– Masonry and grid-based layouts

Included Content

Modules include:
– Team member name and title
– Brief bio or description
– Social media profile links
– Department or specialty
– Years of experience
– Standout skills and achievements

Where to Use

The person modules are perfect for:
– Meet the team pages
– About us sections
– Employee spotlights
– Consultant and freelancer bios
– Speaker lineups for event sites
– Testimonials paired with photos
– Author boxes on blogs

Interactive Elements

Engage users as they browse with:
– Animated photo filters
– Title and description fades
– Read more toggles
– Gradient overlay effects
– Social icon pop-outs
– Hover-triggered zoom

View All Divi Person Modules

FPerson V1
FPerson V2
FPerson V3
FPerson V4
FPerson V5
FPerson V6
FPerson V7
FPerson V8
FPerson V9
FPerson V10
FPerson V11
FPerson V12
FPerson V13
FPerson V14
FPerson V15
FPerson V16
FPerson V17
FPerson V18
FPerson V19
FPerson V20
FPerson V21

Getting Started

– Access with your Divi Den Pro subscription
– One-click import via Divi layout finder
– Full documentation and how-to videos
– Expert support if you need a hand
– Free lifetime updates

New to Divi Den Pro? Sign up to access these blurbs and our complete Divi collection.

Welcome to our latest update, designed to enhance your blog’s visual appeal and functionality. We’re introducing 9 modern Divi blog layouts, 6 Divi person modules, and 2 blurbs as part of our exclusive Barbra Collection. These thoughtfully designed elements work in harmony with your existing Divi setup, so you can create a blog that distinguishes itself from the competition.

The addition of these 17 new sections expands your toolkit for crafting a unique and captivating blog. The Barbra Collection strikes a balance between aesthetics and practicality to present your content in the most effective manner possible.

With these new items, the pro library now has a total of 3090 items available for you to use.

Modern Divi blog layouts by Divi Den Pro

9 Modern Divi Blog Layouts | Barbra Collection

The modern Divi blog layouts in the Barbra Collection has a clean, contemporary design that prioritizes your content. By artfully combining text and images, these layouts capture your readers’ attention and maintain their interest in your blog posts.

Each layout incorporates specific sections for showcasing blog entries, highlighting author profiles, and strategically placing call-to-action elements. These components collaborate to create an immersive reading experience that motivates visitors to go deeper into your content. With intuitive navigation and a focus on user experience, the Barbra Collection layouts make your blog is both visually appealing and user-friendly.

Explore the new blog sections:

BBlog V6 – Barbra Blog

BBlog V7 – Barbra Blog

BBlog V8 – Barbra Blog

BBlog V9 – Barbra Blog

BBlog V10 – Barbra Blog

BBlog V11 – Barbra Blog

BBlog V12 – Barbra Blog

BBlog V13 – Barbra Blog

BBlog V14 – Barbra Blog

6 Divi Person Module Sections | Barbra Collection

Our new person module sections are perfect for featuring team members or individual profiles. They are designed to fit perfectly with the modern blog layouts.

BPerson V5 – Barbra Person

BPerson V6 – Barbra Person

BPerson V7 – Barbra Person

BPerson V8 – Barbra Person

BPerson V9 – Barbra Person

BPerson V10 – Barbra Person

2 Divi Blurb Module Sections | Barbra Collection

These sections are perfect for highlighting key information or calls to action, designed to complement the overall modern aesthetic of your site.

BBlurbs V16 – Barbra Blurbs

BBlurbs V17 – Barbra Blurbs

That’s all for this update. See you soon for more!

If you don’t have Divi Den Pro yet, start your free trial today.

All Layouts and modules are available for download in the Divi Den Pro Layout Library right now – Enjoy! 

Demos for the 8 new homepage layouts

Dietitian Homepage Layout

Factory Homepage Layout

Flooring Homepage Layout

Movers Homepage Layout

Logistics Homepage Layout

Kindergarten Homepage Layout

Massage Therapist Homepage Layout

Freddie Collection Homepage V8

Demos for the 7 custom Divi modules

Divi Header Slider – Module – My Heart Header – Freddie Collection

Divi Blurb Module – Blown Over Blurbs – Freddie Collection

Divi Conetent Module – By The Way Content – Freddie Collection

Divi FAQ Module – Desert Me FAQ – Freddie Collection

Divi Testimonail Module – Other Day Testimonial – Freddie Collection

Divi EMail Optin Module – Going To Look Email Optin – Freddie Collection

Divi Footer Module – Be Better Footer – Freddie Collection

Don’t have Divi Den Pro yet?

Get access to these modules and a thousand more with the Divi Den Pro plugin. Start with a free trial today.

Need a Divi Theme Builder? Check this out.

How to build trust with this interactive Team Page Layout

Trust… it’s a big word and a key challenge every website must pay close attention to. Without trust, your visitors will simply bounce. Worse yet, they may not contact you, may not subscribe to notifications or even buy from you. Trust is the key ingredient every website needs.

People want to see “whom” they are dealing with. Is it a person? Is it a company? Do they look legitimate?

To build trust, every website should have an “about page” or a “team page”. Kyra designed this incredible Divi Team Page that will engage your visitors and leave a lasting impression.

Here are 8 more techniques you can use to build trust. Look specifically at point 4 – “A strong about page”.

Question: How do you build trust with your website visitors?

Let us know in the comments.

Take a look at these 3 Divi Page Layouts in today’s update

Spectacular Divi Team Page Layout – Freddie Collection

Homepage Version 5 – Freddie Collection (check out the text hover & image switch effect)

Homepage Version 6 – Freddie Collection (see animated text and funky blurbs module)

Go big with these 14 Divi Modules – custom designed, coded and tested for desktop, mobile and tablet devices

We hope these new modules will make you say … I Want It All!

If you do, there is a soundtrack for you [see the video below]

Princes Of The Universe – Divi Header Module – Freddie Collection

Rain Must Fall – Divi Content Module – Freddie Collection

Scandal Content – Divi Content Module – Freddie Collection

Hot And Cold – Divi Blog Module – Freddie Collection

Dear Friends – Divi Footer Module – Freddie Collection

Fairy King – Divi Header Module – Freddie Collection

Nevermore – Divi Blurbs Module – Freddie Collection

Now I’m Here – Divi Blurbs Module – Freddie Collection

Close To Pleasure – Divi Testimonials Module – Freddie Collection

Tutti Frutti – Divi Content Module – Freddie Collection

Days Of Our Lives – Divi Footer Module – Freddie Collection

I Want It All – Divi Header Module – Freddie Collection

Lap of Gods – Divi Person Module – Freddie Collection

We Created – Divi Footer Module – Freddie Collection

Want access to the Freddie Collection?

The complete Freddie Collection (with 96 Divi Modules) is included with the Divi Den Pro Plugin and Layout Library – You can get started with a free trial today.

Queen – I Want It All (Official Video)

Download Free Person Module .ZIP file [183KB]  |   View demo moduleHere’s a stunning Divi Person module with a neat hover effect. This is how you can easily create it from scratch by just following the steps below.

Table Of Contents

• Creating the Section
• Inserting the modules
• Adding Custom CSS

Creating the Section

1.1. Section structure

Add a new standard section.

Standard Section

Insert two rows. The top one with two columns, and the other one with four, as shown on the screenshot:

Rows

1.2.Adding the CSS Class

Section Settings

Select Advanced tab, and inside the CSS class field, type: free_sigmund_person

Section Class

1.3 Rows Settings

Click the top row settings.

Select Design tab:

• Set Use Custom Width to – YES and make it 1175px
• Scroll to Spacing section and make bottom Custom padding 0px.
• Also, for the Column2 Padding, make the top one 0px as well.

Spacing Settings

Advanced tab:

• Inside the Column1 Main Element, add this CSS code:margin-bottom: 0 !important;
• Inside the Column2 Main Element, add the same CSS.

Click Save & Exit.

Click the bottom Row settings:

Select Design tab:

• Set Use Custom Width to – YES and make it 1175px
• Set Use Custom Gutter Width to – YES and make it 2
• Scroll to Spacing section. Make the padding: Top: 21px, Bottom: 27px, and 0px to sides.

Advanced tab

• Inside the Main Element box, add this: overflow: visible !important;
• Inside the Column2 Main Element, this: margin-bottom: 0 !important;

Click Save & Exit

2. Inserting the Modules

The top row should have two text modules.
For the first one, let’s add this text: Meet Our Team. Make sure that the text is a paragraph. (Optionally, you can change this if preferred).

Select Design tab.

• Make the font Roboto, medium, #6e6b7d. Font size should be 36px for the desktop and the Tablet , and for the mobile it should be 30px.
• Letter Spacing should be -0.1px and set Text Line Height to 120%
• Set Custom Left margin to -3px, for desktop only

Save the module. Now let’s move to other text module in this row.
Example text: Team of Professionals
Select Design tab:

• Make the font: Lato, Regular, #6e6b7d, 16px
• Letter spacing 0.3px, and the Text Line Height: 28px
• Set the Text Orientation – Right
• Set the Custom Right margin to 3px

Click Save & Exit.

Now the reason we’re here; Insert a Divi Person module in one of the four columns in your bottom row. Add only one for now, and after we make it look good, we are going to clone it to the remaining three columns.

Click the module settings:

Module settings

Persons Module Settings

Content tab

• Add a name, position and the person’s image.
• Set the Background to black

Design tab

• Make the title font Roboto, medium, #fff, text orientation – right, Font size should be 20px
• Letter spacing: 0.4px, Title Line Height: 30px
• Body Text: Lato, Regular, Right alignment, #fff, 16px.
• Body letter spacing: 0.4px, line height: 120%

Advanced tab

• Inside the Member Image box, add this CSS: margin-bottom: 0 !important;

Member Description:

• position: absolute;
• padding: 9px 19px 12px;
• bottom: 20px;
• right: 24px;
• overflow: hidden;

Title:

• padding-bottom: 0;

2.1 Clone the module

Now you can clone this module to empty column slots. Of course, update the content of each.

3. Adding Custom CSS

Copy this CSS code:

.free_sigmund_person .et_pb_team_member {
position: relative;
}
.free_sigmund_person .et_pb_team_member .et_pb_team_member_image {
max-width: 100% !important;
}
.free_sigmund_person .et_pb_team_member .et_pb_team_member_image img {
transition: 0.3s !important;
display: block !important;
width: 100% !important;
}

.free_sigmund_person .et_pb_team_member:hover .et_pb_team_member_image img {
opacity: 0.8;
}

.free_sigmund_person .et_pb_team_member .et_pb_team_member_description:before {
content: "";
display: block;
width: 1px;
height: 0;
background-color: #fff;
position: absolute;
right: 0;
top: 0;
transition: 0.3s;
transition-delay: 0.7s !important;
}

.free_sigmund_person .et_pb_team_member:hover .et_pb_team_member_description:before {
transition-delay: 0.3s !important;
height: 100%;
}

.free_sigmund_person .et_pb_team_member .et_pb_team_member_description .et_pb_member_position,
.free_sigmund_person .et_pb_team_member .et_pb_team_member_description h4 {
transition: 0.3s;

transform: translate(100%, 0);
opacity: 0;
}

.free_sigmund_person .et_pb_team_member .et_pb_team_member_description .et_pb_member_position {
transition-delay: 0.5s !important;
}

.free_sigmund_person .et_pb_team_member .et_pb_team_member_description h4 {
transition-delay: 0.3s !important;
}

.free_sigmund_person .et_pb_team_member:hover .et_pb_team_member_description .et_pb_member_position {
transition-delay: 0.7s !important;
transform: translate(0, 0);
opacity: 1;
}

.free_sigmund_person .et_pb_team_member:hover .et_pb_team_member_description h4 {
transition-delay: 0.5s !important;
transform: translate(0, 0);
opacity: 1;
}

/*Responsive*/

@media only screen and (max-width: 1390px) {
.free_sigmund_person .et_pb_row {
width: 90% !important;
}
}

@media only screen and (max-width: 980px) {
.free_sigmund_person .et_pb_row .et_pb_column_1_2:last-child {
margin-right: 0 !important;
}

.free_sigmund_person .et_pb_row .et_pb_column_1_2{
width: 49% !important;
margin-right: 2% !important;
}
}

@media only screen and (max-width: 480px) {
.free_sigmund_person .et_pb_row .et_pb_column_1_2 .et_pb_text {
text-align: left !important;
}

.free_sigmund_person .et_pb_row .et_pb_column_1_2 {
width: 100% !important;
margin-right: 0 !important;
}
.free_sigmund_person .et_pb_row .et_pb_column_1_4{
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 20px !important;
}
}

Go to Page settings:

Page Settings

And paste this CSS inside the Custom CSS box;

Custom CSS box

That’s it, all done!