When showing multiple calls to action on your page, it can be helpful to create an interactive scrolling effect that unites different elements. One solution is to transform the modules into fixed elements while they are moving in their column container. In today's tutorial, we'll show you how to create a beautiful design that handles this technique. You will also be able to download the JSON file for free!
Let's go.
Preview
Before we dive into the tutorial, let's take a final look at how it worked with different screen sizes.
Let's start recreating!
Add a new section
Start by adding a new regular section to the page you are working on.
Spacing
Open the section settings and change the bottom and top margins for different screen sizes.
- Upholstery top: 7vw (desktop), 10vw (tablet), 15vw (phone)
- Upholstery at the bottom: 20vw (desktop), 7vw (tablet), 10vw (phone)
Add a new line
Column structure
Continue adding a new row using the following column structure:
sizing
Without adding any modules yet, open the row settings and let it occupy the entire width of the section. he is also Very important activate the 'Equalize Column Heights' option. By doing this, you will create empty space in the columns that will allow the stationary modules to move freely while scrolling the page.
- Use a custom gutter width: Yes
- Gutter width: 1
- Equalize column heights: Yes
- Width: 100%
- Maximum width: 100%
Column 2 Upper Padding
Then open the settings for the 2 column and add some top filler on the desktop.
- Upper padding: 20vw (desktop), 0vw (tablet and phone)
Column 3 Upper Padding
Also add a custom top fill value to the third column.
- Best padding: 40vw (desktop), 0vw (tablet and phone)
Column 4 Upper Padding
And complete the parameters of the line by also adding a higher fill value to the 4 column.
- Upper padding: 60vw (desktop), 0vw (tablet and phone)
Add CTA to the 1 column
Add content
It's time to start adding modules! The first module we need in column 1 is a CTA (Call to Action) module. Insert contents of your choice.
Link
Also add a link to the button. This will allow the button to display in the design.
- URL of the link of the button: #
Background color
Change the background color of the module afterwards.
- Background color: #ffffff
Text settings
Switch to the Design tab and change the general text settings.
- Alignment of the text: center
- Text color: dark
Title text settings
Also change the text settings of the title.
- Title Title Level: H3
- Text Title: Spectral
- Color text title: # 000000
- Text Title Size: 2vw (desktop), 4vw (tablet), 6vw (phone)
Body text settings
With the parameters of the body of the text.
- Body Font: Fira Sans
- Weight of the font: Light
- Body colored text: # 000000
- Body text size: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Body height: 1.8em
Button settings
Don't forget to style your CTA module button as well.
- Use custom styles for the button: Yes
- Button text size: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Button text color: #ffffff
- Button background color: #444eff
- Width of the button border: 0px
- Radius of the border of the button: 50vw
- Button Font: Fira Sans
- Upper padding: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Upholstery at the bottom: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Left padding: 3vw (desktop), 7vw (tablet), 13vw (phone)
- Upholstery on the right: 3vw (desktop), 7vw (tablet), 13vw (phone)
Spacing
Then go to the spacing settings and add custom inner and bottom margins.
- Top Padding: 8vw
- Bottom padding: 8vw
Border
Also add rounded angles to the module.
- Round corners: 1vw (all corners)
Shadow box
Finish the module design by adding a subtle box shadow.
- Shadow of the box Horizontal position: 10px
- Box Shadow Blur Force: 50px
- Shadow color: rgba (0,0,0,0,08)
CSS class
Now, for the sticky scroll effect to work, we're going to need to add a few lines of CSS code at the end of this tutorial. As a preparation, we'll add a CSS class to the CTA module.
- CSS class: sticky-cta
Add an image module to column 1
upload Image
Let's move on to the next and last mod that we need in column 1, which is an image mod. Upload a PNG image of your choice.
Alignment
Change the image alignment next.
- Image Alignment: Center
sizing
Make sure to force the full width on the module too.
- Force Fullwidth: Yes
Spacing
Complete the module settings by going to the spacing settings and adding custom spacing values ​​for different screen sizes.
- Upper margin: -5vw (tablet and phone)
- Bottom margin: -12vw (desktop), 5vw (tablet and phone)
- Left padding: 3vw (desktop), 10vw (tablet), 25vw (phone)
- Upholstery on the right: 3vw (desktop), 10vw (tablet), 25vw (phone)
Clone the two modules three times and place the remaining columns
Once you have completed both modules in the 1 column, you can duplicate them three times and place the duplicates in the remaining columns of the row.
Change Images
Make sure to change the image in each duplicate image module.
Change the contents of the CTA and the background colors of the buttons
Also change the contents CTA with button background colors.
- CTA Module #2: #89ffb4
- CTA Module #3: #ff89f1
- CTA Module #4: #ffd389
Add CSS class to image modules in columns 1, 2 and 3
Now, to make sure that the sticky effect works on images as well, we will need to add a CSS class to the image modules in columns 1, 2 and 3.
- CSS class: sticky-image
Add the 2 line
Column structure
It only remains to add the CSS code. To do this, add a new line.
Add a code module with CSS code
Add a code module to the line, insert the CSS code below and you're done!
<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>
Preview
Now that all the steps have been taken, let's take a final look at what happened with different screen sizes.
Latest Thoughts
In this article, we showed you how to keep modules fixed in their column container. Using this technique can generate stunning scrolling effects that allow you to highlight the different calls to action on your page. You could also download the JSON file for free! If you have any questions or suggestions, feel free to leave a comment in the comments section below.
