If you’re looking for a way to add a CTA that follows your visitors while they’re navigating through your website, you might consider going for a sticky footer bar. A sticky footer bar is used at the bottom of your browser and you can include any call to action of your choice, whether it’s a button or contact information. As soon as visitors scroll to the footer area of your page, the footer bar and footer design will merge while changing the styles of your sticky footer bar. This beautiful aesthetic might help you increase conversion rates on your pages! You’ll be able to download the template JSON file for free as well.
Let’s get to it.
Download The Global Footer Template for FREE
To lay your hands on the free global footer template, 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.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
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 Footer Template
Go to Divi Theme Builder & Add New Global or Custom Footer
Start by going to the Divi Theme Builder in the backend of your WordPress website. There, add a new global or custom footer.
Start Building From Scratch
Start building the footer template from scratch.
2. Build Footer Design
Section Settings
Once inside the template editor, you’ll notice a section. Open that section and apply a black background color.
Continue by adding a new row using the following column structure:
Background Color
Without adding modules yet, open the row settings and change the background color.
And to make sure we can create overlaps later on the tutorial, we’ll set the row overflows to visible.
Column 1 & 3 Visibility
To prevent too many footer bar items from showing up on smaller screen sizes, we’ll hide the first and last column in our row on both tablet and phone.
Add Blurb Module to Column 1
Add Content
Time to add modules, starting with a Blurb Module in column 1. Add some content of your choice.
Select Icon
Select an icon next.
Icon Settings
Move on to the module’s design tab and style the icon accordingly:
Text Settings
Next, change the text settings.
Make some changes to the title text settings too.
Body Text Settings
Modify the body text settings as well.
And complete the module settings by removing the icon animation in the animation settings.
Clone Blurb Module & Place Duplicate in Column 3
Once you’ve completed the first Blurb Module in column 1, clone it once and place the duplicate in column 3.
Change Content & Icon
Change the content and icon for the duplicate.
Add Blurb Module to Column 2
Select Icon
Next, add a new Blurb Module to column 2. Leave the content box empty and select an icon of your choice.
Background Color
Add a background color next.
Icon Settings
Move on to the module’s design tab and change the icon settings accordingly:
And remove the default animation in the animation settings.
Add Text Module to Column 2
Add Content
The next and last module we need in this row is a Text Module in column 2. Add some content of your choice.
Text Settings
Move on to the module’s design tab and change the text settings as follows:
Continue by adding a new row using the following column structure:
Add some top and bottom margin next.
Add Image Module to Column 1
Upload Image
Add an Image Module to column 1 and upload your logo or any kind of image of your choice.
Move on to the module’s design tab and change the sizing settings as follows:
Add Text Module to Column 2
Add H3 Content
Next, add a Text Module to column 2 with some H3 content of your choice.
H3 Text Settings
Change the module’s H3 text settings as follows:
Clone Text Module 3x & Spread Across Column 3 & 4
Once you’ve completed this Text Module, you can clone three times and spread the duplicates across the two remaining columns of the row.
Change Content
Make sure you change the content in each duplicate Text Module.
Add Text Module to Column 2
Add Content
Add another Text Module right below the previous Text Module in column 2 and add some linked content of your choice.
Text Settings
Move on to the module’s design tab and change the text settings as follows:
Link Text Settings
Change the link text color too.
Clone Text Module As Needed
Once you’ve completed the Text Module, clone it up to as many times as you want.
Change Content
Make sure you change the content and links in each duplicate module.
Add Text Module to Column 3
Add Content
Then, add another Text Module to column 3. Add some linked content of your choice.
Text Settings
Move on to the module’s design tab and change the text settings as follows:
Link Text Settings
Modify the link text color too.
Clone Text Module as Needed
Clone this module as many times as you need.
Change Content
And, of course, change the content and links as needed.
Add Text Module to Column 4
Add Content
In column 4, We’ll add another Text Module below the first Text Module. Add some content of your choice.
Text Settings
Move on to the module’s design tab and change the text settings as follows:
Add Social Media Follow to Column 4
Add Social Networks of Choice
Then, add a Social Media Follow Module to the end of the column. Add the social networks of your choice.
Remove Each Social Network’s Background Color Individually
Remove the background color of each social network individually.
Go back to the regular module settings, go to the spacing settings and add some custom margin values.
Continue by adding a new row using the following column structure:
Without adding modules yet, open the row settings, move on to the design tab and change the sizing settings as follows:
Add Text Module to Column 1
Add Content
Then, add a Text Module to column 1. Insert some content of your choice.
Text Settings
Move on to the module’s design tab and change the text settings as follows:
Link Text Settings
Modify the link text color too.
Clone Text Module Twice & Place Duplicates in Remaining Columns
Once you’ve completed the module in column 1, you can clone it twice and place the duplicates in the two remaining columns of the row.
Change Text Alignments
Change the text alignments for each duplicate Text Module accordingly:
Change Content
And change the content in both duplicate modules as well.
3. Apply Sticky Effects to Footer Bar
Open Row #1 & Apply Sticky Settings
Now that our design foundation is in place, it’s time to apply the sticky effect. Open the first row in the section, go to the advanced tab and apply the following sticky settings:
Row Sticky Styles
Now that we’ve turned our row sticky, we can apply sticky styles to the row and all its child elements. Start by adding a sticky background color to row #1.
Apply Sticky Styles to Blurb Modules in Column 1 & 3
Icon Settings
Next, open the Blurb Modules in columns 1 and 3 and add a sticky circle color.
Title Text Settings
Add a sticky title text color too.
Apply Sticky Styles to Blurb Module in Column 2
Background Color
Then, open the Blurb Module in column 2 and apply a sticky background color.
4. Save All Template & Theme Builder Changes
Once you’ve completed the sticky steps, make sure you save your template and theme builder changes before viewing the outcome on your website!
In this post, we’ve shown you how to get creative with Divi’s sticky options. More specifically, we’ve shown you how to build a sticky footer bar that merges with the main footer area once people scroll down the page they’re on. You were able to download the template JSON file for free as well! If you have any questions or suggestions, feel free to 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.
This content was originally published here.