#
Back to blog page

How to Create a Team Carousel in Divi (Step-by-Step)

by | Dec 3, 2023 | Divi

How to create a team carousel in Divi
Table of Contents

Creating a team carousel slider in Divi is not a tough task; what is tough is finding the best carousel module provider. There are many third-party team carousels, but none come close to DiviGear.

DiviGear provides the most advanced team carousel module that allows you to control everything within this module. You can create a visually appealing team carousel in a minute by following some simple steps.

Stick to this guide to find out the team carousel creation process to present your team members innovatively.

How To Create Team Carousel/Slider In Divi: Step-By-Step Guide

Creating a team carousel slider with DiviGear is easy if you follow the right guidelines. For your convenience, we’re going to show you the creation process in two categories, including: 

  • Installation
  • Content design
  1. DiviGear Carousel Module Installation

Installing the DiviGear carousel plugin is the same as installing all other WordPress plugins. You can get this plugin from DiviGear’s official website or from  Divi Marketplace (Elegant Themes) Here is the installation guide:

Step – 1: Download The File

Get the zip file from your preferred source like DiviGear or Divi Marketplace

Step – 2:  Go To WordPress Admin Page Or Dashboard

Head over to the WordPress admin page or dashboard and then click on “Plugins”

Step – 3: Upload And Activate The Plugin

Now follow the following path to install and activate the DiviGear carousel module:

Add New >  Upload Plugin > Choose File > Install Now > Activate Plugin

  • Get the zip file from your preferred source like DiviGear or Divi Marketplace
  • Head over to the WordPress admin page or dashboard and then click on “Plugins”
  • Now follow the following path to install and activate the DiviGear carousel module: Add New > Upload Plugin > Choose File > Install Now > Activate Plugin
  1. Team Carousel Design with DiviGear

 It’s time to create the carousel module using the DiviGear carousel module. We’ll guide you step-by-step on creating the team carousel design showcased below:

Step – 1: Section & Row Design

Open a new page or start designing a team carousel from scratch in your existing page by enabling the visual builder. Select “Regular” section and then insert a “Single Row”

Step – 2:  Select the module

Search or manually find out “Divi Carousel” and start designing your content

Step – 3:  Add Team Member From The Add New Item Section

Click on “Add New Item” and then take the help of its child items to design the first team member. Here are the child items we’ve used for our provided carousel design:

  1. Content Elements:

Main Content:

Include name, job title, and a short bio text of your team member in the “Title”, “Subtitle” and “Content” area

Image Settings:

Click on “Add Image” to add the member’s image 

Meta:

In the “Meta” section, toggle on the “Use Social Media” option and then add Facebook, Twitter, and Instagram account URLs. 

  1. Design Tab:

Social Media Style: 

Here you have to make changes only in the “Color” area, not in the “Background” area:

  • Alignment: Center align
  • Facebook Color: #4267b2
  • Twitter Color: #2ea3f2
  • Instagram Color: #b4038f

Spacing:

  • Image Padding: (Top & Bottom = 25px), (Left & Right = 25px)
  • Content Padding: (Bottom =  28px)

Note: Now add as many team members as you want by simply clicking on the  duplicate option of the child item. After that individually customize all of them by adding image, text, and social media links.

Step – 4: Make Changes In The Slider Settings

This setting option controls the display functionality of the team carousel. All the changes you have to make are included below:

  • Show Item Desktop: 3
  • Show Item Table: 2
  • Show Item Mobile: 1
  • Loop: Yes
  • Arrow Navigation:  Yes
  • Dot Navigation: Yes
  • Dot Alignment: Center align
  • Equal Height Item: Yes

Step – 5: Make Changes In The Design Tab Area

Once you’ve added your preferred team members and done your work on the “Content” tab, it’s time to work on the “Design” tab.

Image:

  • Image Alignment:  Center align
  • Image Max Width: 80%

Image Border:

  • Image Rounded Corners: 50% for all corners
  • Image Border Width: 4px
  • Image Border Styles: Solid
  • Image Border Color: #c6c6c6

Title Text:

  • Title Text Alignment: Center align

Subtitle Style:

  • Subtitle Text Alignment: Center align
  • Subtitle Text Color: #717171

Body Text:

  • Body Font: Nunito
  • Body Text Alignment: Center align
  • Subtitle Text Size: 16px
  • Body Text Color: #7f7f7f

Next & Previous Button:

  • Position: Middle & Outside the container (Desktop), Top (Tablet), Middle & Inside the container  (Mobile)  

Color Settings:

  • Arrow Color: #ffffff
  • Arrow Background Color: #12876f
  • Dots Color: #12876f
  • Dots Active Color: #1fe0ba

Custom Spacing:

  • Container:
  • Inner Wrapper Padding:   (Top & Bottom), 16px (Left & Right)
  • Carousel Item Padding: 12px (Left & Right)
  • Social Media Container Padding: 22px (Top)
  • Content:
  • Image Padding: 10px (Top & Bottom) and (Left & Right)
  • Subtitle Margin: 15px (Bottom)

Item Border:

  • Border Rounded Corners: 10px (For all corners)
  • Border Styles: Solid 
  • Border Width: 1px
  • Border Color: rgba(51,6,6,0.06)

That’s it. If you’ve followed the step by step instructions, you should be able to design the team carousel module we’ve designed. Now click on the “Save” button and see the output by exiting the visual builder.

What Is The Purpose Of DiviGear Team Carousel/Slider

The primary purpose of utilizing Divi Team Carousel/Slider is to showcase your team members or staff in a well-organized and dynamic manner. However, if you’re wondering why you should go for DiviGear team carousel, check out the section below:

  • DiviGear carousel module comes with advanced functionalities
  • Supreme customization facilities open a new world of design possibilities
  • You can use autoplay, lazy loading, and hash navigation options 
  • Use “Coverflow” from the “Advanced Slider Settings” to add a 3D effect
  • Possibility of using overlay option with a custom overlay icon
  • You can always use the “Advanced” option if you have coding knowledge

In short, you’ll get endless benefits and exceptional user experience by using the DiviGera Team Carousel module.

Final Thoughts

Get the DiviGear Team Carousel module and create an impressive team carousel slider by following the instructions. With its endless customization options, you can unlock the possibilities of designing an eye-catching team carousel.

The best part is you can download the provided carousel design and customize it according to your needs. You’ll find this design layout in the DiviGear team carousel layout section and download it for free. 

Try DiviGear Carousel today and witness the outcome, which will surely amaze you and your visitors.

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 *