When creating your About page, you'll probably also want to introduce your team members there. By doing so, you allow the visiteurs interact with the people behind your business. If you're looking for a way to animate your team members' section on scroll, you might find this tutorial helpful. We're going to create an auto-scrolling team member carousel that moves when your visiteurs scroll the page.
Demonstration
Before we dive into the tutorial, let's take a look at the result on different screen sizes.
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)
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
Add line # 1
Column structure
Continue adding a new line to the section using the following column structure:
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
Spacing
We also add custom upper and lower padding.
- Upper padding: 100px
- Bottom padding: 100px
Add a text module to the column
Add H2 content
It's time to add modules, starting with a first text module. Enter it contents H2 of your choice.
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)
Add a separation module to the column
Visibility
Then add a separation module. Make sure the “Show Separator” option is enabled.
- Show separator: Yes
Line
Then make some changes to the line settings.
- Line color: # edf000
- Line style: solid
- Line Position: Top
sizing
And complete the module parameters by modifying the dimensioning parameters accordingly:
- Divider weight: 20px
- Width: 11%
- Alignment of the module: left
- Height: 20px
Add a line # 2
Column structure
To the next row! Use the following column structure:
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%
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)
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.
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
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.
- Background Image Size: Cover
- Position of the background image: Center
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;
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 the contents of your choice.
Delete image
Then delete the image. We use the background image of the column instead.
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
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%
Body text settings
Also change the body text settings.
- Body Font: Open Sans
- Body text color: #ffffff
- Body line height: 2,2 em
Position text settings
Then make some changes to the position text settings.
- Font Position: Open Sans
- Position text color: # edf000
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%
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 also change the contents.
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)
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
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.
Office
Latest Thoughts
In this tutorial, we've shown you how to get creative with the built-in scroll effects of Divi. Specifically, we recreated a beautiful auto-scrolling team member carousel. When the visiteurs scroll the page, another part of the carousel appears.
