How to Create a Sticky Footer Bar with Divi’s Sticky Options | Elegant Themes Blog

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:

sticky footer bar

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.