Would you like your team members to be presented in the form of a carousel with Divi ?
When setting up your About page, you'll probably want to include your team members there as well. By doing so, you allow visiteurs to connect with the people behind your business.
If you're looking for a way to animate your team members' section on scroll, you'll love this tutorial.
We're going to recreate a beautiful auto-scrolling team member carousel that moves as your visiteurs scroll the page.
Let's go.
Preview
Before diving into the tutorial, let's take a quick look at the result on different screen sizes.
Desktop computer
Mobile version
Let's start designing with Divi
Read also: Divi: How to reveal content on hover over the section divider
Add a new section
Internal Mages
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.
- Padding (Top and Bottom): 200px (Desktop), 100px (Tablet and Phone)
Visibility
To ensure that no horizontal scrollbars appear in our design, we'll hide section overflows in the advanced tab.
- Horizontal Overflow: Hidden
- Vertical Overflow: Hidden
Add line #1
Structure of the column
Continue by adding a new row to the section using the following column structure:
Width
Without adding any modules yet, open the line settings, switch to the tab Design and change the width and max width in the sizing settings.
- Width: 90%
- Max Width: 1px
Spacing
We also add custom upper and lower padding.
- Padding (Top and Bottom): 100px
Add a Text module to the column
Add H2 size content
It's time to add modules, starting with a first Text module. Enter a contents H2 size of your choice.
H2 text settings
Switch to tab Design of the module and modify the H2 text parameters as follows:
- Font: Quicksand
- Font Weight: Semi Bold
- Text Color: #000000
- Text Size: 70px (Desktop), 50px (Tablet), 40px (Phone)
Add a "Divider" module to the column
Visibility
Then add a module Divider. Make sure the “Show Divider” option is enabled.
- Show Divider: YES
Line
Then make some changes to the line settings.
- Line Color: #edf000
- Style: Solid
- Line Position: Top
sizing
And complete the module parameters by modifying the sizing parameters accordingly:
- Divider Weight: 20px
- Width: 11%
- Alignment module: left
- Height: 20px
Add line 2
Structure of the column
Next row! Use the following column structure:
sizing
Without adding any modules yet, open the row settings and change the sizing settings as follows:
- Use Custom Gutter Width: Yes
- Gutter Width: 2
- Width: 100%
- Max Width: 100%
Spacing (Tablet and Phone only)
Next, add left and right padding only on small screen sizes.
- Padding (Left and Right): 5% (Tablet and Phone only)
Column settings (5x)
Now, in the next three steps of this tutorial, we'll make some changes to the columns. Apply the three steps to each of the columns in your row.
Background Gradient
First, add a gradient background to each column.
- Gradient Stops (25%): rgba(255,255,255,0)
- Gradient Stops (86%): rgba(0,0,0,0.84)
- Type: Linear
- Square Gradient Above Background Image : YES
background Image
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
- Background Image Position: Center
Added Custom CSS (Tablet Only)
Complete the column settings by adding custom CSS to the main element (For view Tablet only) of each column.
These lines of CSS code will help us place the columns one under 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 team member information, we will use a module Person.
Add the first Person module to column 1 and use the contents of your choice.
Delete image
Then delete the image. Instead, we use the column's background image.
background Image
Next, we'll add an image overlay as the module's background image.
- Background Image Size: Cover
- Background image position: center
Title text settings
Switch to tab Design module and change the title text settings as follows:
- Title Heading Level: H3
- Title Font: Quicksand
- Font Weight: Bold
- Title Text Color: #ffffff
- Title Text Size: 230%
Body text settings
Also change the body text settings.
- Body Font: Open Sans
- Text Color: #ffffff
- Line Height: 2,2 em
Team member post text settings
Next, make some changes to the text settings of the position held by the team member.
- Position Font: Open Without
- Position Text Color: #edf000
Spacing
And complete the module settings by adding custom padding values to the spacing settings.
- Padding: 70% (Top), 10% (Bottom, Left and Right)
Clone the “Person” module four times
Once you have completed the Person module, you can clone the entire module four times.
Place duplicates in remaining columns
Place duplicate modules in the remaining four columns of the row.
Also make sure to change the contents.
Turn a row into an auto-scrolling carousel
Change row size #2
Now, to turn this line into an auto-scrolling carousel, we'll need to reopen the line settings and change the width and max width in the sizing settings.
- Width: 180%
- Max Width: 220% (Desktop), 100% (Tablet and Phone)
Add horizontal movement to line 2
Complete line settings by adding horizontal movement to scroll effect settings in tab Advanced under option Scroll Effects and you're done!
- Enable Horizontal Motion: Yes
- Starting Offset:
- Desktop: 2,5
- Tablet & Phone: 0
- Mid Offset: 0 (to 40%)
- Ending Offset:
- Desktop: -25 (to 62%)
- Tablet & Phone: 0
- Motion Effect Trigger: 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.
Desktop computer
Download DIVI Now!!!
Mobile view
Download DIVI Now!!!
Conclusion
In this article, we've shown you how to get creative with the built-in scroll effects of Divi.
Specifically, we recreated a beautiful carousel featuring auto-scrolling team members. When the visiteurs scroll the page, another part of the carousel appears.
We hope this tutorial will inspire you for your next projects. Divi. If you have any concerns or suggestions, find us in the comments section to talk about it.
You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites.
Do not hesitate to also consult our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
