When showing multiple calls to action on your page, it can be helpful to create an modules fixed in column container. One solution is to turn the modules into fixed elements while they are moving in their column container. In today’s tutorial, we’ll show you how to create modules fixed in column container.
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.
- Padding at the top: 7vw (desktop), 10vw (tablet), 15vw (phone)
- Bottom padding: 20vw (desktop), 7vw (tablet), 10vw (phone)
Add a new row
Column structure
Continue by adding a new row using the column structure:
Sizing
Without adding any modules yet, open the row settings and let it occupy the entire width of the section. It is also very important to 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 custom gutter width: Yes
- Gutter width: 1
- Equalize Column Heights: Yes
- Width: 100%
- Maximum width: 100%
Column 2 Top Padding
Then open the settings in column 2 and add some top padding on the desktop.
- Top padding: 20vw (desktop), 0vw (tablet and phone)
Column 3 Top Padding
Also add a custom top padding value to the third column.
- Best padding: 40vw (desktop), 0vw (tablet and phone)
Column 4 Top Padding
And complete the row parameters by also adding a larger padding value to column 4.
- Top padding: 60vw (desktop), 0vw (tablet and phone)
Add CTA to column 1
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 content of your choice.
Link
Also add a link to the button. This will allow the button to display in the design.
- Button link URL: #
Background color
Then change the background color of the module.
- Background color: #ffffff
Text settings
Switch to the Design tab and change the general text settings.
- Text alignment: center
- Text color: dark
Title text settings
Change the title text settings as well.
- 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
- Font Weight: Light
- Text Body Color: # 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 button: Yes
- Button text size: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Button Text Color: #ffffff
- Button background color: # 444eff
- Button border width: 0px
- Button border radius: 50vw
- Button Font: Fira Sans
- Top padding: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Bottom padding: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Left padding: 3vw (desktop), 7vw (tablet), 13vw (phone)
- Right padding: 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
Frontier
Also add rounded corners to the module.
- Rounded corners: 1vw (all corners)
Shadow box
Finish off 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 module we need in column 1, which is an image module. Upload a PNG image of your choice.
Alignment
Change the image alignment next.
- Image Alignment: Center
Sizing
Make sure to force full width on the module as well.
- Force Fullwidth: Yes
Spacing
Complete the module settings by going to the spacing settings and adding custom spacing values for different screen sizes.
- Top margin: -5vw (tablet and phone)
- Bottom margin: -12vw (desktop), 5vw (tablet and phone)
- Left padding: 3vw (desktop), 10vw (tablet), 25vw (phone)
- Right padding: 3vw (desktop), 10vw (tablet), 25vw (phone)
Clone both modules three times and place the remaining columns
Once you have completed the two modules in column 1, 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 CTA content and button background colors
Also change the CTA content with the background colors of the button.
- 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 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 row 2
Column structure
All that remains is to add the CSS code. To do this, add a new line.
Read more: How to add an information accordion to a woocommerce product with Divi
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>
Overview
Now that all the steps have been taken, let’s take a final look at what happened with different screen sizes.
Final thoughts
In this article, we showed you how to keep modules fixed in their column container. Using this technique can generate stunning scrolling effects allowing you to highlight the different calls to action on your page.
For website maintenance service contact us.