Native Divi 5 ModuleFree

Divi Team Member

Introduce team members with photos, bios, and social links.

Why use the Divi Team Member module?

A team page is four or five cards that have to stay identical: the same photo crop, the same spacing under every name, the same row of social icons whether a person has two links or six. Built out of image and text modules, it drifts the moment one bio runs a line longer than the rest.

Team Member is one module for one person. Photo, name, job title, bio and up to nine social links are fields, and the card decides how they sit. Put a row of them in a grid and every card matches.

The card beside this is the live module.

Design Lead

Product team

Photo, name, job title and bio are all fields on one module, so a row of these cannot drift out of line.

What you get out of it

One module per personPhoto, name, job title and bio in a single card, so a row of them stays aligned no matter how long one bio runs.Nine social links, built inWebsite, email, Facebook, X, Instagram, LinkedIn, GitHub, Behance and Dribbble. Fill in the ones that apply and only those render.The photo is a design surfaceWidth, height, alignment, its own border and radius, and nineteen hover animations to pick from.Content on hoverHide the bio until someone hovers the card, with four reveal animations and a speed you set.Overlay and lightboxA colour overlay with an icon on hover, and an option to open the photograph full size in a lightbox.Free, and native on Divi 5It ships in Divi Torque Lite on WordPress.org and in Divi Torque Pro, and Divi 4 layouts convert across.

Everything the Divi Team Member module does

Every option below ships in the free plugin, and in Divi Torque Pro.

Photo with its own alt textName, job title and short bioNine social link fieldsOnly the links you fill in renderShow content on hoverFour content reveal animationsHover speed, 0 to 1000msSocial row in the card or over the photoNineteen photo hover animationsPhoto width, height and alignmentPhoto border, radius and colourAbsolute photo placement in four cornersPhoto X and Y offsetsHover overlay with its own colour and speedOverlay icon, colour, size and opacityOpen the photo in a lightboxContent alignment, padding and backgroundCard border and box shadowSocial icon colour, background, size and radiusSeparate typography for name, job title and bioCustom CSS hooks for five parts of the card

See the Divi Team Member in action

Every card below is the live module, not a picture of one. Hover any of them. This first row is the default: everything visible, links in the card.

Design Lead

Product team

The bio is its own field with its own typography, so it can run longer on one card without moving the others.

Front-end Developer

Engineering

Only the social links you fill in render, so this card shows three and the one beside it shows two.

Support Engineer

Customer support

Photo height is a setting, which is what keeps three cards in a row cropping to the same shape.

Hide the content until hover

Four reveal animations, and a speed. Hover any of these four cards to see the difference.

Hover 1 · Slide Bottom

The content slides up from the bottom edge.

Studio Founder

Design agency

Hover animation one slides the content up from the bottom edge.

Hover 2 · Fade In

The content simply fades in over the photograph.

Marketing Lead

Membership site

Hover animation two fades the content in without moving it.

Hover 3 · Slide Up

The content moves up into place from below.

Content Editor

Publishing

Hover animation three moves the content up into place from below.

Hover 4 · Zoom In

The content scales up as it appears.

Account Manager

Client services

Hover animation four scales the content up as it appears.

What the photograph does on hover

Nineteen animations in the list. These are four of them, and they are set on the photo rather than the card.

Illustrator

Zoom In

The photograph scales up gently inside its own frame.

Copywriter

Pulse

A short pulse, which suits a card that is also a link.

Data Analyst

Flip

A flip on the vertical axis, and one of the louder options.

QA Engineer

Slide In Up

The photograph slides up into its frame from below.

Overlay, lightbox, and links over the photo

The social row can sit on the photograph instead of in the card, and the overlay has its own colour, icon and speed.

Creative Director

Overlay on hover

Hover the photograph and the overlay fades in with its icon on top.

Motion Designer

Links on the photo

Social Links Hover Position moves the row out of the card and onto the photograph.

Photographer

Lightbox

With the lightbox on, clicking the photograph opens it full size.

Where the text sits

Content alignment moves the name, the job title, the bio and the social row together.

Left

Content alignment

Left lines the card up with body copy above or below it.

Centre

Content alignment

Centre is the usual choice for a row of team cards on their own.

Right

Content alignment

Right pairs with a photo aligned the same way.

Building a team row takes a few minutes

Three steps, and none of them involve custom CSS.

1Add one cardDrop Team Member into a column. Fill in the photo, the name, the job title and the bio.2Add the linksNine fields, one per network. Fill in the ones that apply and the rest stay out of the markup.3Duplicate across the rowCopy the card into the other columns and swap the content. Every setting comes with it, so the row matches by construction.

Questions people ask first

Short answers, all of them checked against what the module actually does.

Is the Team Member module free?Yes. It ships in Divi Torque Lite on WordPress.org, and in Divi Torque Pro. Nothing on this page is behind the paid plugin.Can one module hold my whole team?No. It is one card per person. A team row is one module per member sitting in a Divi column, which is what keeps each card independently editable.Which social networks are supported?Nine: website, email, Facebook, X, Instagram, LinkedIn, GitHub, Behance and Dribbble. They are fixed fields, so there is no way to add a network that is not on that list.Can I hide the bio until someone hovers?Yes. Show Content on Hover does exactly that, with four reveal animations and a speed from 0 to 1000 milliseconds.Can the whole card link to a profile page?No. There is no link field for the card itself. The photo can open in a lightbox and the social icons are links, but the card as a whole is not clickable.Does it need Divi 5?It is a native Divi 5 module, built on the Divi 5 engine rather than shimmed from Divi 4. Layouts built with the Divi 4 version convert across.