How to Create Fixed Mobile Footer Bars with Divi

Posted on February 12, 2019 by in Divi Resources | 24 comments

How to Create Fixed Mobile Footer Bars with Divi

We know how important it is to make sure everything is customized to fit the mobile experience. To help you bring the mobile experience to another level, we’ll show you how to create fixed mobile footer bars with Divi in this step-by-step post.

This tutorial is part of our ongoing Divi design initiative where we try to put something extra in your design toolbox each and every week. This time around, we’ll use the Health Clinic Layout Pack and make the fixed mobile footer bars match the layout pack’s style. However, you’ll be able to use this approach for any kind of design you’re working on and create your own fixed mobile footer bar alternatives.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the three examples we’ll recreate step by step. These examples will only show up on mobile (and tablet if you prefer so).

fixed mobile footer bar

Recreate Example #1

fixed mobile footer bar

Add New Section to Bottom of Page

Let’s start recreating the first fixed mobile footer bar! We recommend creating a page for three of the layouts that are included in the Health Clinic Layout Pack. One for each example. Open whichever page you want to add the first footer bar to. Scroll down to the end of the page and add a new section right after the last one.

fixed mobile footer bar

Spacing

Open the row settings and remove all custom top and bottom padding in the spacing settings.

  • Top Padding: 0px
  • Bottom Padding: 0px

fixed mobile footer bar

Visibility

We’re hiding this section on desktop as well. If you want the mobile footer bar to appear on mobile only, go ahead and hide the section on tablet as well.

fixed mobile footer bar

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

fixed mobile footer bar

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

fixed mobile footer bar

Spacing

Remove all default top and bottom padding of the row next.

  • Top Padding: 0px
  • Bottom Padding: 0px

fixed mobile footer bar

Custom CSS

Lastly, we’re adding some custom CSS lines to the row. These lines will help turn the row into a fixed footer bar.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

fixed mobile footer bar

Add Text Module to Column 1

Add Content

Time to start adding modules! The first module we need is a Text Module in column 1. Add some content of choice.

fixed mobile footer bar

Background Color

Go to the background settings of the module and change the background color.

  • Background Color: #5e89fb

fixed mobile footer bar

Text Settings

Modify the text settings as well.

  • Text Font: Work Sans
  • Text Font Weight: Light
  • Text Color: #ffffff
  • Text Size: 16px
  • Text Letter Spacing: -1px

fixed mobile footer bar

Spacing

Add some custom padding values next.

  • Top Padding: 16px
  • Bottom Padding: 16px
  • Left Padding: 15px
  • Right Padding: 15px

fixed mobile footer bar

Border

And some rounded corners too.

  • Top Left: 10px
  • Top Right: 10px

fixed mobile footer bar

Box Shadow

Complete the module’s settings by adding a subtle box shadow.

  • Box Shadow Blur Strength: 80px

fixed mobile footer bar

Add Blurb Module to Column 2

Add Content

Add a Blurb Module to the second column and add a title of choice.

fixed mobile footer bar

Select Icon

Continue by selecting an icon for the Blurb Module.

fixed mobile footer bar

Background Color

Add a background color to the module as well.

  • Background Color: #62de9d

fixed mobile footer bar

Icon Settings

Move on to the design tab and change the icon settings.

  • Icon Color: #ffffff
  • Icon Placement: Left
  • Use Icon Font Size: Yes
  • Icon Font Size: 19px

fixed mobile footer bar

Title Text Settings

Continue by modifying the title text settings.

  • Title Font: Work Sans
  • Title Text Color: #ffffff
  • Title Text Size: 16px
  • Title Letter Spacing: -1px

fixed mobile footer bar

Spacing

Add some custom padding to the module as well.

  • Top Padding: 20px
  • Bottom Padding: 10px
  • Left Padding: 30px
  • Right Padding: 30px

fixed mobile footer bar

Border

And add ’10px’ to the top left and top right corners.

  • Top Left: 10px
  • Top Right: 10px

fixed mobile footer bar

Box Shadow

Last but not least, add a subtle box shadow to the module.

  • Box Shadow Blur Strength: 80px

fixed mobile footer bar

Recreate Example #2

fixed mobile footer bar

Add New Section to Bottom of Page

On to the second example! Again, open a page of your choice, scroll down to the end of the page and add a new section.

fixed mobile footer bar

Spacing

Open the section settings and remove the default top and bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

fixed mobile footer bar

Visibility

Hide the section on desktop (and tablet if you prefer so).

fixed mobile footer bar

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

fixed mobile footer bar

Sizing

Without adding any modules, open the row settings and change the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

fixed mobile footer bar

Spacing

Remove the default top and bottom padding of the row as well.

  • Top Padding: 0px
  • Bottom Padding: 0px

fixed mobile footer bar

Custom CSS

Add some custom css lines to the row next. These lines of CSS code will help create the fixed mobile footer bar.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

fixed mobile footer bar

Add Blurb Module to Column 1

Add Content

Continue by adding a Blurb Module to the first column. Add a title of choice.

fixed mobile footer bar

Select Icon

Then, select an icon.

fixed mobile footer bar

Background Color

Add a background color to the module next.

  • Background Color: #62de9d

fixed mobile footer bar

Icon Settings

Move on to the design tab and change the icon settings of the module.

  • Icon Color: #ffffff
  • Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 25px

fixed mobile footer bar

Title Text Settings

Change around the title text settings as well.

  • Title Font: Work Sans
  • Title Text Alignment: Center
  • Title Text Color: #ffffff
  • Title Letter Spacing: -1px

fixed mobile footer bar

Spacing

And add some top and bottom padding to give the module some space to breathe.

  • Top Padding: 30px
  • Bottom Padding: 30px

fixed mobile footer bar

Border

We’re also adding ’15px’ to the top left border of the module.

  • Top Left: 15px

fixed mobile footer bar

Box Shadow

And we’ll complete the module with a subtle box shadow.

  • Box Shadow Blur Strength: 80px

fixed mobile footer bar

Clone Blurb Module Twice & Place Duplicates in Remaining Columns

Once you’re done modifying the first Blurb Module, you can go ahead and clone the module twice and place the duplicates in the two remaining columns.

fixed mobile footer bar

Change Background Color of Duplicate #1

Change the background color of the first duplicate.

  • Background Color: #3d3d3d

fixed mobile footer bar

Change Spacing Settings of Duplicate #1

Along with the spacing settings.

  • Top Margin: -20px
  • Top Padding: 50px
  • Bottom Padding: 30px

fixed mobile footer bar

Change Border of Duplicate #1

And the rounded corners as well.

fixed mobile footer bar

Change Background Color of Duplicate #2

Change the background color of the second duplicate in the third column too.

  • Background Color: #000000

fixed mobile footer bar

Change Border of Duplicate #2

Along with the rounded corners.

  • Top Right: 15px

fixed mobile footer bar

Recreate Example #3

fixed mobile footer bar

Add New Section to Bottom of Page

On to the next and last example! Open one of the pages, scroll down the page and add a new section.

fixed mobile footer bar

Top Divider

Open the section settings and add a top divider.

  • Divider Color: #62de9d
  • Divider Height: 110px

fixed mobile footer bar

Spacing

Remove all default top and bottom padding of the section as well.

  • Top Padding: 0px
  • Bottom Padding: 0px

fixed mobile footer bar

Box Shadow

Add a subtle box shadow to the section next.

  • Box Shadow Blur Strength: 80px

fixed mobile footer bar

Custom CSS

And include some custom CSS lines in the advanced tab. This will help turn the section into a fixed mobile footer bar.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

fixed mobile footer bar

Visibility

Lastly, disable the section on desktop (and tablet if you prefer so).

fixed mobile footer bar

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

fixed mobile footer bar

Sizing

Without adding any modules yet, open the row settings and change the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

fixed mobile footer bar

Spacing

Add some custom top and bottom padding next.

  • Top Padding: 30px
  • Bottom Padding: 20px

fixed mobile footer bar

Custom CSS

To make sure all three columns remain on the same height, we’re going to add a line of CSS code to the advanced tab of the row as well.

display: flex;

fixed mobile footer bar

Add Blurb Module to Column 1

Add Content

Now we can start adding modules! Add a Blurb Module to the first column and give it a title.

fixed mobile footer bar

Select Icon

Select an icon next.

fixed mobile footer bar

Icon Settings

Move on to the design tab and change the icon settings.

  • Icon Color: #ffffff
  • Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 25px

fixed mobile footer bar

Title Text Settings

Modify the title text settings as well.

  • Title Font: Work Sans
  • Title Text Orientation: Center
  • Title Letter Spacing: -1px

fixed mobile footer bar

Clone Blurb Module Twice & Place

Once you’re done modifying the Blurb Module in column 1, you can go ahead and clone the module twice. Place the duplicates in the two remaining columns.

fixed mobile footer bar

Change Icon Color of Duplicate #1

Don’t forget to change the icon color of the duplicate located in the second column.

  • Icon Color: #000000

fixed mobile footer bar

Preview

Now that we’ve gone through all the different steps, let’s take a final look at the outcome of all three examples we’ve handled above.

fixed mobile footer bar

Final Thoughts

In this post, we’ve handled three different fixed mobile footer bar designs that you can recreate step by step by following the tutorial. The mobile footer bars will follow visitors throughout their scrolling experience on the page. This tutorial is part of the ongoing Divi design initiative, where we try to put something extra into your design toolbox each and every week. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

24 Comments

  1. Nice!
    Why you dont let us dowloud json this block????

    • Agreed.

  2. Wow this is brilliant!

  3. Very interesting post when mobile phones are the must usefull internet.
    Congratulations

  4. Thanks. Very timely for me.
    Incidentally, I work my way through each of these tutorials and the process adds speed to my ability to access each feature in Divi

  5. Wouldn’t this be something you use per site, not per page?

  6. How can the coloumn doesn’t turned to single coloumn in Mobile?

    • Because of the custom CSS used. Make sure you put it in the right place though!

  7. Beautiful Design and great tutorial, thank you.

    How does the middle phone button work? currently I’m using a plugin (call now).
    When the button is tapped the phone screen of the phone opens and company phone number appears on screen ready for the end user to simply press the green call icon on their phone.

    How would we get this beautiful design to function for the phone button on mobile?

    It’s obvious that we’d add a link to email for the email get directions button?
    But what about the phone function button, or have I missed something?

    I love all of the tutorials, showing innovative ideas but they are not much use if we don’t know how to make them function relating to a phone or call us now button? are there any tutorials showing how to make a phone button switch to a phone screen displaying the number and function as such?

    Thank you once again for a fantastic tutorial and beautiful designs.

    • Thanks for this tutorial.
      Hello Liz, (google translate fr >> en – sorry)
      To make an automatic call by clicking on the button of such
      you must delete the title of the blurb module and replace it with html text in the text box of the module:
      Call Us
      Insert the telephone number in international format
      Have a good day

    • Did you try inserting “tel:123446789” into the module link?

    • Sorry Liz but my HTML text has beentaken into account by the browser 🙂
      Here is the code in Html you just have to you remove the comment syntax at the beginning and end of the sentence:
      And so here is the code:
      <!– Call Us –>
      I hope it will work 🙂
      (deepl translate fr >> en)

  8. I will definitely give this tutorial a shot on my next divi project.
    Thanks eleganthemes for the new updates on divi

  9. Thx Donjete, great tut. And an alternative way to Geno Quiroz‘ way, that he presentet on his divi-blog (he makes this happen via the ETs layout injection hook). However: 2 questions on this: 1. which settings have to be made to make an uneven columns structure to look good? For example if I want to use a 1/2, 1/4, 1/4? If I try it with your settings, all modules get stacked above each other. 2. If I put in different modules, lets say a Text-module and two Blurbs, the Text (with small font size) produces automatically something like a margin to the bottom, so that one sees parts of the site behind the bar. The three modules, if their Content is rather different, dont get the same height, and smaller ones align at the top of the bar, not on the bottom. How can we fix this? Thx in advance for pointing me and maybe other readers from the divi-community in the right direction for further customizations like these. Cheers, Michael

    • Already commented this somewhere else, but:

      Basically, all the magic happens in the custom CSS…

      display: flex;
      position:fixed;
      bottom: 0px;
      z-index: 99;

      Now make sure you put it in the ROW custom CSS, and not the SECTION as I did. The only bit that MUST be in the ROW I believe is the ‘display:flex;’ bit. As the last tutorial puts the rest of the cost in the ‘SECTION’. But the other two put it in the ROW.

  10. I really appreciate your new and different post. thanks for sharing this.

  11. I really appreciate your new and different post. thanks for sharing this article.

  12. nice post!! original topic, usefull as well.
    well done.

  13. Thanks!
    Nice solution.
    But why do I have this section sticky to the bottom? What if I want to have it visible only after scrolling to the very end of the page?
    Currently, it covers 1/4 of the screen and even a footer.
    Please advise.

    • Ok, so I admit that I made this error too when I was ploughing through the tutorial, quicker than I should have been. Basically all the magic happens in the custom CSS…

      display: flex;
      position:fixed;
      bottom: 0px;
      z-index: 99;

      Now make sure you put it in the ROW custom CSS, and not the SECTION as I did. The only bit that MUST be in the ROW I believe is the ‘display:flex;’ bit. As the last tutorial puts the rest of the cost in the ‘SECTION’. But the other two put it in the ROW.

  14. Nice!

    Is there a way to force this on ALL pages?

  15. Thanks for sharing this wonderful article.

    Is it possible to display this module in the entire site automatically instead of manually editing all posts / pages ?

    It would be great if we can customize and apply this module to may be:

    i. All Posts & Pages
    ii. Only Posts
    iii. Only Pages
    iv. Selected Post Categories

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

554,210 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest