This article was originally published on this site


Throughout all the design trends, footers remain essential. People have gotten so used to them, which in turn makes them highly user-friendly. They help visitors organize their stay on your website and navigate to the precise page they’re looking for. With Divi, you can easily create any kind of footer in one single section.Now, if you’re looking to give your footer some extra dimension and interaction, you’re going to love this post. We’ll creatively combine a footer section with section dividers to create a footer scroll reveal.
Let’s get to it!
Preview
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
Desktop
footer scroll
Mobile
footer scroll
Download The Layout for FREE
To lay your hands on the free layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Create New Blank Page & Upload Layout of Choice
Add New Blank Page
The first thing you will need to do is create a new blank page.
footer scroll
Upload SaaS Company Layout Pack Landing Page
Switch over to the Visual Builder and upload the SaaS Company Layout Pack’s landing page. Although we’re using this specific layout, you can make the technique work on any kind of page you’re working on.
footer scroll
2. Add Z Index to Each Section & Remove Section Animations
Add Z Index to Hero Section
Continue by changing the z index of the hero section on the page.

  • Z Index: 3

footer scroll
Copy Z Index & Paste to All Other Sections on Page
Copy the z index and paste it to all the other sections on the page. Increasing the z index for each one of the sections is a crucial step to making the tutorial work. It’ll allow each one of the sections to appear on top of the footer section which we’ll add later on the post.
footer scroll
footer scroll
Remove Hero Section Animation
To make sure the footer remains hidden until the bottom of the page, we’re also going to remove all section animations. Open the hero section and remove the animation.

  • Animation Style: None

footer scroll
Extend Animation to All Sections on Page
Extend the animation styles to all sections throughout the page.
footer scroll
footer scroll
3. Modify Last Section on Page
Change Background Color
Move on to the last section on the page and change the background color.

  • Background Color: #f2f2f2

footer scroll
4. Add Regular Section #1 to Bottom of Page
Section Settings
Background Color
As you can notice in the preview of this post, the footer will appear below a section divider. We’ll dedicate a new section at the bottom of our page to this section divider. Open the section settings and use an entirely transparent background color. This will allow the footer to show through the section container, even though its position will be below it.

  • Background Color: rgba(0,0,0,0)

footer scroll
Top Divider
Move on to the design tab of the section and add a top divider of your choice.

  • Divider Style: Find in List
  • Divider Height: 250px (Desktop), 150px (Tablet), 100px (Phone)
  • Divider Horizontal Repeat: 2x

footer scroll
Z Index
This new section needs an increased z index as well.

  • Z Index: 3

footer scroll
5. Add Regular Section #2 to Bottom of Page
Section Settings
Background Color
Time to create the footer section! Add another new regular section to the bottom of the page and select a background color of your choice.

  • Background Color: #202332

footer scroll
Sizing
Go to the design tab and make sure the width is ‘100%’.

  • Width: 100%

footer scroll
Spacing
We’ll also need to increase the top padding of the section.

  • Top Padding: 500px

footer scroll
Z Index
The z index we’re assigning to this section is lower than that of the other sections on the page. This will help us hide the section until we’re at the bottom of the page.

  • Z Index: 2

footer scroll
Add New Row
Column Structure
Continue by adding a new row using the following column structure:
footer scroll
Sizing
Open the row settings and change the sizing settings accordingly:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

footer scroll
Column Spacing
Open the column 1 settings next and add some left padding.

  • Left Padding: 20px

footer scroll
footer scroll
Column Right Border
Add a right border to the column as well.

  • Right Border Width: 1px
  • Right Border Color: #515151

footer scroll
Copy Paste Column Styles
Apply the changes to all columns by either extending the styles or using the copy-paste option.
footer scroll
footer scroll
Add Image Module to Column 1
Upload Image
Time to start adding modules! Add a new Image Module to the first column and upload your logo.
footer scroll
Sizing
Move on to the design tab and change the width across different screen sizes.

  • Width: 35% (Desktop), 30% (Tablet), 25% (Phone)
  • Module Alignment: Left

footer scroll
Spacing
Add some bottom margin as well.

  • Show Space Below The Image: Yes
  • Bottom Margin: 50px

footer scroll
Add Text Module #1  to Column 2
Add Content
On to the second column! Add a first Text Module with some content of your choice.
footer scroll
Text Settings
Modify the text settings.

  • Text Font: Nunito Sans
  • Text Font Weight: Semi Bold
  • Text Color: #ffffff
  • Text Size: 19px

footer scroll
Spacing
And add some custom top and bottom margin across different screen sizes.

  • Top Margin: 15px (Desktop & Tablet), 10px (Phone)
  • Bottom Margin: 15px (Desktop & Tablet), 10px (Phone)

footer scroll
Add Text Module #2 to Column 2
Add Content
Add a second Text Module to the second column and enter some content of your choice.
footer scroll
Add Link
Add a link that matches the footer item.

  • Module Link URL: #

footer scroll
Text Settings
Modify the text settings next.

  • Text Font: Nunito Sans
  • Text Color: #dbdbdb
  • Text Size: 17px

footer scroll
Spacing
And add some custom top and bottom padding across different screen sizes.

  • Top Margin: 15px (Desktop & Tablet), 10px (Phone)
  • Bottom Margin: 15px (Desktop & Tablet), 10px (Phone)

footer scroll
Clone Text Module #2 as Many Times as Needed
Clone the second Text Module in column 2 as many times as needed.
footer scroll
Change Content
Make sure you change the content.
footer scroll
Change Links
Along with the links.

  • Module Link URL: #

footer scroll
Clone Modules in Column 2 & Place in Remaining Columns
Once you’ve completed the second column, you can clone both modules up to as many times as needed and place the duplicates in the two remaining columns of the row.
footer scroll
Change Content
Change the content of each duplicate.
footer scroll
Change Links
Along with the link.

  • Module Link URL: #

footer scroll
6. Make Section #2 Fixed to Bottom of Page
Add Custom CSS
Now, to create the scroll reveal, we’re going to make sure the footer section sticks to the bottom of our page by adding two lines of CSS code to the main element of the section.

position: fixed;
bottom: 0;

footer scroll
footer scroll
7. Add Bottom Margin to Section #1 to Create Reveal Effect
Add Bottom Margin Across Different Screen Sizes
We’ll also need some space at the bottom of our page that’ll allow the footer to show up. Open the section containing the section divider and add some bottom margin across different screen sizes and you’re done!

  • Bottom Margin: 400px (Desktop), 700px (Tablet), 800px (Phone)

footer scroll
footer scroll
Preview
Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.
Desktop
footer scroll
Mobile
footer scroll
Final Thoughts
In this post, we’ve shown you how to create beautiful footer scroll reveals below section dividers to create a unique effect. This is a great way to make any footer interactive and draw attention to the items that are listed in the footer. We hope this tutorial inspires you to create your own section divider footer reveals as well! If you have any questions or suggestions, make sure you leave a comment in the comment section below.
If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.