#
Back to blog page

How to Create a Team Carousel in Divi : Step-by-Step Guide

by | Dec 3, 2023 | Divi

How to create a team carousel in Divi
Table of Contents

Divi includes a built-in Group Carousel module for creating team carousels, but it requires a lot of manual setup and offers limited layout options.

A third-party Divi Carousel module by DiviGear makes it easier with simpler controls, more layouts, and better results with minimal effort.

In this guide, we will cover both options so you can pick the one that fits your workflow. Starting with the DiviGear Carousel Module, then covering Divi’s built-in Group Carousel module.

Our Created Team Carousel’s Preview

To show you how to create a team carousel in Divi, we have created the following team carousel demo.

We will show you how you can create something similar to this using Divi’s default and the third party module.

Required Setup

Once these requirements are met, let’s start creating the Team Carousel.

Method 1: Creating Team Carousel using DiviGear Carousel Module

DiviGear gives you two ways to create a team carousel in Divi, including:

  • Option 1: Use DiviGear’s pre-designed section layouts
  • Option 2: Build from scratch

Option 1: Creating Team Member Carousel Using Pre-Designed Layouts

DiviGear offers 60+ pre-designed section layouts with 10 specifically made for team member carousels. You can download any layout and import it directly into the Divi Visual Builder. 

Let’s see how you can do this:

  • Download your preferred layout.
  • Open the page/post in Divi where you want to add the carousel.
  • Click Add a New Section > Add From Library > Import.
  • Choose the downloaded file from your computer and check Import Presets.
  • Again, click the Import Layout Section.
  • Select the imported layout from the library and click Use This Section.
  • Once imported you can update it with your own content and styling using the Content, Design, and Advanced tabs.

Note: You can also import the layout from your WordPress dashboard. Go to Divi > Divi Library > Import & Export > Import tab. Select the downloaded file, check Import Presets, and click Import Divi Builder Layout.

Option 2: Create a Team Carousel in Divi from Scratch

Now we will show you how to build the same team carousel layout from scratch using the DiviGear Carousel Module, so that you understand how to create a custom one.

Step 1: Insert the Divi Carousel Module by DiviGear

  • Open the page/post in the Divi Visual Builder.
  • Choose a column layout from the Row Inserter.
  • Then click on the module inserter (black + icon) and search for the Divi Carousel module.

By default, the modules appear with 5 carousel items that you can keep and edit or delete.

Step 2: Add Team Member Details (Content)

Now add your each team member’s details (name, designation, photo, and social media links). Here is how to do it:

  • Select a Carousel item from the visual builder.
  • Go to the Content tab in the settings panel.
  • Click on MainContent and do the following:
    • Title: Enter the team member’s name.
    • Subtitle: Enter their designation.
  • Now click on Image Settings and upload the team member’s photo.
  • Click on Meta and enable Use Social Media. And then do the following:
    • Add the team member’s social media profile URLs.
    • Select whether the social media URLs open in a new tab when clicked.

Step 3: Style the Team Member

Select the first Carousel item > Design tab and do the following:

  • Open Title Style:
    • Text Alignment: Center
    • Text Size: 20px
  • Open Subtitle style:
    • Subtitle Text Alignment: Center
    • Subtitle Text Color: #7F7F7F
    • Text Size: 16px
  • Open Social Media Style:
    • Alignment: Center
  • Open Spacing:
    • Image Padding: 25px (Top, Bottom, Left, Right)
    • Content Padding: 18px (Bottom)
  • Open Box Shadow:
    • Choose the 2nd preset.
    • Horizontal Position: 6 px
    • Vertical Position: 1 px
    • Blur Strength: 24px
    • Shadow Color: #000000 (default)
    • Opacity: 5%
  • Now delete other default carousel items and duplicate the first carousel item.
  • Now edit each team member to change their name, photo and other information.

Note: When you duplicate a carousel item, the styling carries over automatically. 

Step 4: Configure the Carousel Settings

Now it’s time to configure the DiviGear carousel module settings to define how the carousel functions. 

To do that:

  • Open Layers and select the Divi Carousel Module > Content tab > Slider Settings and set:
    • Show on Desktop: 3
    • Show on Tablet: 2
    • Show on Mobile: 1
  • Enable Loop, Arrow Navigation, and Dot Navigation.
  • Set Dot Alignment to Center.
  • Set Item Spacing (between carousel items) to 55.

Step 5: Style the Entire Carousel

After configuring the carousel settings, it’s time to style the entire carousel.

  • Select the Entire Divi Carousel Module from Layers.
  • Go to Settings Panel > Design tab and apply the following:
  • Image
    • Image Alignment: Center
  • Image Border
    • Border Radius: 8 px (all corners)
  • Next and Previous Button
    • Position: Media & Outside the container
  • Color Settings
    • Arrow Color: #FFFFFF
    • Arrow Background Color: #494949
  • Custom Spacing > Inner Wrapper Padding
    • Bottom: 35px
    • Left & Right: 21 px

Now our Team carousel is ready, and it fully matches the team carousel layout we imported earlier.

Method 2: Creating a Team Carousel Using Divi’s Group Carousel Module

Now, we are going to build the same team carousel using Divi’s built-in carousel module. 

Step 1: Insert the Divi Group Carousel Module

  • Open the page/post in Divi Visual Builder.
  • Click Row inserter and choose a column layout.
  • Click the Plus icon (Module Inserter) and select Group Carousel module.

Step 2: Configure the Group Carousel Module

Now it’s time to configure the Group Carousel module to define how many carousel items (team members) to show by default, and how many of them (team members) slide at a time while navigating.

  • Go to Settings Panel > Content tab
  • Click Carousel settings and set the following:
    • Slide To Show: 3
    • Slides To Scroll: 1

Step 3: Add & Style the Team Member Content

Now we are going to add the content to team members.

Adding & Styling Image:

  • Click the Plus Icon (Module Inserter) and search for the Image Module.
  • Select the Image Module > Settings Panel > Content tab > Image
  • Upload the Image of the team member.
  • Go to Design tab and do the following:
    • Alignment: Center
    • Border: 8px (all corners)

Adding & Styling Text (Name):

  • Click the Plus Icon (Module Inserter) within the image.
  • Search for the Text Module and insert it.
  • Go to Settings Panel > Content tab > Text > Body
  • Edit it with the team member name.
  • Go to Design tab > Text and do the following:
    • Text size: 20px
    • Text Alignment: Center

Adding & Styling Text (Designation):

  • Duplicate the existing text module for name
  • Go to Settings Panel > Content tab > Text > Body
  • Edit it with the designation of the team member.
  • Go to the Design tab > Set the text size to 16px

Inserting & Styling Social Media Follow Icon

  • Click the Plus icon (Module Inserter) within the designation text.
  • Search for the Social Media Follow module and insert it.
  • Go to Settings Panel > Content tab > Elements
  • Click + Add Social Network or Duplicate a current one
  • Click the edit icon (pencil) next to the Social network
  • Open Network > Set it to Linkedin
  • Add Social Profile URLs to every Network from Link > Account Link URL field

Now you have to duplicate the first Carousel item and change the Image, text, and social media urls for each member.

Step 4: Styling the Carousel Items

Set Carousel Item Spacing:

  • Open the Layers from the left sidebar.
  • Choose the Carousel Items (Carousel Slide).
  • Go to Settings Panel > Design tab
  • Open Spacing and set:
    • Padding: 21px (left, right) 
    • Padding: 35px (bottom)

Adding Box Shadow to Carousel Items:

  • Select the Carousel items (Carousel Slides) from the Layers
  • Go to Settings Panel > Design tab
  • Open Box Shadow and do the following:
  • Choose the 2nd preset.
  • Horizontal Position: 6 px
  • Vertical Position: 1 px
  • Blur Strength: 24px
  • Shadow Color: #000000 (default)
  • Opacity: 5%

Add Text Spacing (Designation Text):

  • Select the Text module used for Designation from Layers
  • Go to Settings Panel > Design tab
  • Click the Spacing settings and set the Top Margin to -20px.

Style Social Media Follow Icon:

  • Open Layers and select Social Media Follow modules
  • Go to Settings Panel > Design tab
  • Click the Icon Settings and do the following:
    • Enable Use Custom Icon Size
    • Set the Icon Font Size to 12px
  • Click the Spacing settings and do the following:
    • Margin: -20px 

Style Arrow Navigation:

  • Select the Group Carousel Module from Layers
  • Go to Settings Panel > Design tab
  • Click to open the Arrow Settings and do the following:
    • Arrow Color: #FFFFFF
    • Arrow Position: Outside
    • BackGround: #494949

That’s it. We have again created the same Team Carousel in Divi using the Divi’s built-in Group Carousel Module. 

You can follow the same steps with your own content and styling to create one for your site.

Final Thought: Which Method Should You Apply?

Both methods get the job done, but they serve different needs.

If you want a quick result, go with the DiviGear Carousel Module. The pre-designed layouts save setup time, and the module gives you cleaner controls and more layout options from the start. 

It is a better fit for most users, especially if you want a polished team section without spending too much time on configuration.

If you prefer to stick with Divi’s built-in tools and avoid an additional plugin, the Group Carousel module works. It takes more manual effort, but it gets the job done with the right setup.

Either way, you now have a clear path to building a professional team member carousel in Divi. Pick the method that fits your workflow and start building.

Team DiviGear

At DiviGear, we are more than just a team – we are a collective of Dev Experts, Word Artists, Design Virtuosos, and Marketing Maestros, all united by our profound expertise in Divi and WordPress. Our mission is to provide you with accurate, insightful, and in-depth content aimed at enriching your understanding of Divi, WordPress, and the art of web design.

0 Comments

Submit a Comment

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

0