modules fixed in column container

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.

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.

Leave a comment

echo "";