Site icon Hip-Hop Website Design and Development

How to Create Mobile Sticky Footer Bars in Divi

Pixeldust WordPress Developer

Sticky footer bars can be a useful addition to any website, especially for mobile devices. A sticky footer bar remains fixed (or stuck) at the bottom of the screen as the user scrolls through the page. Its position makes it more accessible to mobile users (especially on phones) because it is so close to the thumb. That’s probably why designers often include navigation buttons inside sticky footer bars. It can boost the navigation UX on mobile.

In this tutorial, we are going to show you how to create mobile sticky footer bars in Divi. The foundation of any sticky footer bar is the fixed position which is easily controlled with Divi’s built-in sticky position options. We’ll show you how to use the sticky position and the suite of Divi design tools to design 3 different sticky footer bar designs, each with 4 navigation buttons. This will work well for any company looking to improve its site’s UX on mobile.

Let’s get started!

Sneak Peek

Here is a quick look at the mobile sticky footer bar designs we’ll build in this tutorial.

Download the Sticky Footer Bar Template and Layouts for FREE

To lay your hands on the designs from this tutorial, 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
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

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!

How to Import the Free Template and Layouts to your Divi Website

This download contains two files. One can be used to import the footer template to the Theme Builder and the other can be used to import the individual section layouts of each footer to the Divi Library.

To import the sticky footer bar template to your own website, unzip the download zip file to access the JSON files.

Then go to the WordPress Dashboard and navigate to Divi > Theme Builder.

Then click the portability icon at the top right of the page.

Inside the portability popup, choose the JSON file from the folder called “divi-sticky-footer-bar-template”.

Then click the Import button.

To import the 3 sticky footer bar section layouts to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the JSON file (“divi-sticky-footer-bar-section-layouts.json”) from the folder you downloaded (and unzipped).

Then click the import button.

Once done, the section layouts will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

Creating Mobile Sticky Footer Bars in Divi

Part 1: Creating a New Footer Template in the Theme Builder

To kick things off, navigate to the Theme Builder and click to build a new global footer in the default website template. (Alternatively, you can add a new template for testing purposes.)

Deploy Phone View and Layers Modal

Once inside the footer layout editor, open the settings menu at the bottom of the page.

Click the phone icon on the left side to open the phone view of the builder. This will help visualize how the sticky footer will look on mobile as we design.

Then click the layers icon on the right to open the layers modal. This will help with selecting elements whenever they get too close together.

Part 2: Creating the Sticky Footer Section and Row

Creating the Sticky Section

To create the sticky section, we can use the existing default regular section.

Open the settings for the section and, under the advanced tab select the sticky position option Stick to Bottom.

Under the content tab, add a background color to the section.

Under the design tab, update the padding as follows:

This will shorten the height of the footer bar section for mobile devices.

Creating the Row

Once the section is in place, add a one-column row to the section.

Open the row settings and update the sizing and spacing options under the design tab as follows:

In order to make sure the additional columns we are going to add remain adjacent (won’t stack) on mobile, we need to add a short CSS snippet using the Flex property to keep things aligned nicely.

Under the advanced tab, add the following custom CSS to the main element:

display:flex;
align-items:center;
justify-content:center;
flex-wrap:nowrap;

Part 3: Creating the Footer Bar Buttons

To create the footer bar buttons, we are going to use the blurb module. This allows us to create a button that resembles a mobile app (a small icon with a title under it) which is perfect for mobile navigation.

Inside the column, add a new blurb module.

Update the blurb content as follows:

Under the design tab, update the icon styles as follows:

Then update the Title Text and Sizing options as follows:

Continue to add the following padding and rounded corners to the blurb:

To add a border around the blurb, we are going to use a box-shadow, mostly because it doesn’t add any additional actual space to the design.

In order to take out the default spacing between the blurb image and title, add the following CSS snippets under the Advanced tab for the Blurb Image and Blurb Title:

Blurb Image CSS

margin-bottom: 0px;

Blurb Title CSS

padding-bottom: 0px;

Also, update the horizontal and vertical overflow options to Visible. This will make sure the module settings bar doesn’t get cut off when editing inside the Divi Builder.

Duplicate the Column to Add More Buttons

In order to create the remaining three buttons, we can duplicate the column (containing the blurb module) three times. This will create a total of 4 columns each containing identical buttons.

Once the columns (and buttons) are duplicated, you can go back to each of the blurb modules and update the Title Text and Icon to whatever you want.

Part 4: Save It to the Divi Library

Now is a good time to save the section to the Divi Library so that you can add the sticky footer anywhere you want later on.

To save it, click the Save to Library icon in the section settings bar when hovering over the section. Then give the layout a name and save it to the library.

That’s it! Let’s check out the result of our sticky footer bar on a live page in mobile display.

Result

Part 5: Creating Mobile Sticky Footer Bar Design #2

For an alternative design to this sticky footer bar, we can get a little creative with the section background and the blurb’s box-shadow to give the impression that buttons extend above the bar.

Update Section Settings

To do this, open the section settings and update the background as follows:

Under the desktop tab…

Under the sticky tab…

Update Blurbs

Next, use the multiselect feature to select all four blurb modules. Once they are selected, open the settings for one of them and update the background color for all of them at once:

Under the design tab, update the box shadow for the blurbs as follows:

To save this sticky footer bar section layout, click the Save to Library icon in the section settings bar when hovering over the section. Then give the layout a name and save it to the library.

Result

Here is a peek at the final result.

Part 6: Creating Mobile Sticky Footer Bar Design #3

For another alternative design to this sticky footer bar, we can get a little creative with the row by adding rounded corners to make the footer bar look more like a tab.

Update Section Settings

First, open the existing section settings and update the sticky background color to transparent.

Make sure to delete the background gradient as well.

Update Row Settings

Next, open the row settings and add the following background color:

Under the design tab, update the following:

To save this sticky footer bar section layout, click the Save to Library icon in the section settings bar when hovering over the section. Then give the layout a name and save it to the library.

Result

Here is the result.

Part 7: Disabling the Sticky Footer on Desktop

In order to hide the footer on desktop view so that it shows only on mobile, you can always update the visibility option for the section. Simply select Desktop under the Disable on option.

Final Result

Let’s take a final look at the mobile sticky footer bar designs.

Sticky Footer Bar #1

Sticky Footer Bar #2

Sticky Footer Bar #3

Final Thoughts

Creating a sticky footer bar in Divi is quite simple. I mean, you can make a section (or row) stick to the bottom of the page in a few clicks. After that, it’s up to you how you want to style the footer bar, and what content you want to include. The footer bar designs in this tutorial are intended for mobile and are also meant to be more functional and versatile so you can get a feel for how to design them on your own. So don’t be afraid to experiment with more creative designs!

For more, check out how to create a mobile contact bar with click-to-Call, email, SMS and direction links.

I look forward to hearing from you in the comments.

Cheers!

.inline-code{padding: 0px 4px; color: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!important} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);display:block;margin: 0 auto;}

The post How to Create Mobile Sticky Footer Bars in Divi appeared first on Elegant Themes Blog.