Skip to Main Content

How to create a team member scrolling carousel with Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

When creating your About page, you'll probably want to introduce your team members as well. In doing so, you allow visitors to interact with the people behind your business. If you are looking for a way to liven up your team members section on the scroll, this tutorial may be for you. We'll create an auto-scrolling team member's carousel that moves as your visitors scroll the page. 

Demonstration

Before we dive into the tutorial, let's take a look at the result on different screen sizes.

Scroll divi team member

Beginning of conception

Add a new section

Spacing

Start by adding a new regular section to the page you are working on. Open section settings and add custom padding on different screen sizes.

  • Upper padding: 200px (desk), 100px (tablet and phone)
  • Bottom padding: 200px (desk), 100px (tablet and phone)
Parameter configuration

overflows

To make sure that no horizontal scroll bar appears in our design, we will hide section overflows in the advanced tab.

  • Horizontal overflow: hidden
  • Vertical overflow: hidden
Overflow configuration

Add line # 1

Column structure

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

Choose divi layout

sizing

Without adding any modules yet, open the row settings, switch to the design tab and change the width and maximum width in the sizing settings.

  • Width: 90%
  • Max width: 1580px
Divi line parameter

Spacing

We also add custom upper and lower padding.

  • Upper padding: 100px
  • Bottom padding: 100px
Line spacing divi configuration

Add a text module to the column

Add H2 content

It's time to add modules, starting with a first text module. Enter the H2 content of your choice.

Meet the team

H2 text settings

Go to the module design tab and change the H2 text settings as follows:

  • Font title 2: Quicksand
  • Font title 2: semi-bold
  • Text color of item 2: # 000000
  • Header 2 Text size: 70px (desktop), 50px (tablet), 40px (phone)
Divi text spacing

Add a separation module to the column

Visibility

Then add a separation module. Make sure the “Show Separator” option is enabled.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

  • Show separator: Yes
Show divi separator

Line

Then make some changes to the line settings.

  • Line color: # edf000
  • Line style: solid
  • Line Position: Top
Divi spacing style

sizing

And complete the module parameters by modifying the dimensioning parameters accordingly:

  • Divider weight: 20px
  • Width: 11%
  • Alignment of the module: left
  • Height: 20px
Sizing divi line module

Add a line # 2

Column structure

To the next row! Use the following column structure:

Divi column configuration

sizing

Without adding more modules, open the line parameters and modify the sizing parameters as follows:

  • Use a custom gutter width: Yes
  • Gutter width: 2
  • Width: 100%
  • Max width: 100%
Gutter width configuration

Spacing

Then add left and right padding on the smaller screens only.

  • Left padding: 5% (tablet and phone only)
  • Right padding: 5% (tablet and phone only)
Line spacing style configuration

Column settings (5x)

Now, in the next three steps of this tutorial, we're going to make some changes to the columns. Apply the three steps to each of the columns in your row.

Divi parameter line configuration

Gradient background

First, add a gradient background to each column.

  • 1 color: rgba (255,255,255,0)
  • 2 color: rgba (0,0,0,0,84)
  • Gradient type: linear
  • Start Position: 25%
  • End Position: 86%
  • Place gradient on top of background image: Yes
Divi rear column configuration

Background picture

Then upload a background image of your choice. This background image represents each team member, so use a different image for each column.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

  • Background Image Size: Cover
  • Position of the background image: Center
Add divi column background image

Main Element

Complete the column settings by adding custom CSS to the main tablet element of each column. These lines of CSS code will help us place the columns one below the other on the tablet, instead of having two side by side.

width: 100%! important; margin: 50px 0px 50px 0px! important;
Code css divi column

Add a person module to the column

Add content

To share information about team members, we will use a Person module. Add the first Person module to column 1 and use whatever content you want.

Divi person name

Delete image

Then delete the image. We use the background image of the column instead.

Remove divi image

Background picture

We will then add an image overlay as the background image of the module. You can find the one we are using by downloading the folder at the start of this tutorial.

  • Background Image Size: Cover
  • Position of the background image: Center
Person module background configuration

Title text settings

Go to the module design tab and change the title text settings as follows:

  • Title level: H3
  • Title font: Quicksand
  • Title font weight: bold
  • Title text color: #ffffff
  • Title text size: 230%
Divi module title customization

Body text settings

Also change the body text settings.

  • Body Font: Open Sans
  • Body text color: #ffffff
  • Body line height: 2,2 em
Divi body customization

Position text settings

Then make some changes to the position text settings.

  • Font Position: Open Sans
  • Position text color: # edf000
Divi position

Spacing

And complete the module settings by adding custom padding values ​​to the spacing settings.

  • Upper padding: 70%
  • Lower padding: 10%
  • Left padding: 10%
  • Right padding: 10%
Divi person module spacing

Duplicate the Person module 4 times

Once you have completed the Person module, you can clone the entire module four times.

Place duplicates in the remaining columns

Place duplicate modules in the remaining four columns of the row. Make sure to edit the content as well.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Turn Row into an Auto Scroll Carousel

Change the size of line # 2

Now, to turn this row into an auto-scrolling team member carousel, we need to reopen the row settings and change the width and maximum width in the sizing settings.

  • Width: 180%
  • Maximum width: 220% (desk), 100% (tablet and phone)
Line divi modification spacing

Add horizontal movement of line # 2

Complete the line settings by adding horizontal movement to the scroll effect settings in the advanced tab and you're done!

  • Activate horizontal movement: Yes
  • Start offset:
    • Office: 2,5
    • Tablet and phone: 0
  • Average offset: 0 (at 40%)
  • End offset:
    • Office: -25 (at 62%)
    • Tablet and phone: 0
  • Trigger motion effect: middle of element
Divi scrolling animation configuration

Preview

Now that we've gone through all of the steps, let's take a final look at how it looks on different screen sizes.

Desk

Scroll divi team member

Latest Thoughts

In this tutorial, we've shown you how to get creative with Divi's built-in scroll effects. Specifically, we've recreated a beautiful, auto-scrolling team member carousel. As visitors scroll down the page, another part of the carousel appears.

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
0 shares
Share
tweet
Save