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).
Recreate Example #1
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.
Spacing
Open the row settings and remove all custom top and bottom padding in the spacing settings.
- Top Padding: 0px
- Bottom Padding: 0px
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.
Add New Row
Column Structure
Continue by adding a new row to the section using the following column structure:
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
Spacing
Remove all default top and bottom padding of the row next.
- Top Padding: 0px
- Bottom Padding: 0px
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;
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.
Background Color
Go to the background settings of the module and change the background color.
- Background Color: #5e89fb
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
Spacing
Add some custom padding values next.
- Top Padding: 16px
- Bottom Padding: 16px
- Left Padding: 15px
- Right Padding: 15px
Border
And some rounded corners too.
- Top Left: 10px
- Top Right: 10px
Box Shadow
Complete the module’s settings by adding a subtle box shadow.
- Box Shadow Blur Strength: 80px
Add Blurb Module to Column 2
Add Content
Add a Blurb Module to the second column and add a title of choice.
Select Icon
Continue by selecting an icon for the Blurb Module.
Background Color
Add a background color to the module as well.
- Background Color: #62de9d
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
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
Spacing
Add some custom padding to the module as well.
- Top Padding: 20px
- Bottom Padding: 10px
- Left Padding: 30px
- Right Padding: 30px
Border
And add ’10px’ to the top left and top right corners.
- Top Left: 10px
- Top Right: 10px
Box Shadow
Last but not least, add a subtle box shadow to the module.
- Box Shadow Blur Strength: 80px
Recreate Example #2
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.
Spacing
Open the section settings and remove the default top and bottom padding.
- Top Padding: 0px
- Bottom Padding: 0px
Visibility
Hide the section on desktop (and tablet if you prefer so).
Add New Row
Column Structure
Continue by adding a new row to the section using the following column structure:
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
Spacing
Remove the default top and bottom padding of the row as well.
- Top Padding: 0px
- Bottom Padding: 0px
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;
Add Blurb Module to Column 1
Add Content
Continue by adding a Blurb Module to the first column. Add a title of choice.
Select Icon
Then, select an icon.
Background Color
Add a background color to the module next.
- Background Color: #62de9d
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
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
Spacing
And add some top and bottom padding to give the module some space to breathe.
- Top Padding: 30px
- Bottom Padding: 30px
Border
We’re also adding ’15px’ to the top left border of the module.
- Top Left: 15px
Box Shadow
And we’ll complete the module with a subtle box shadow.
- Box Shadow Blur Strength: 80px
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.
Change Background Color of Duplicate #1
Change the background color of the first duplicate.
- Background Color: #3d3d3d
Change Spacing Settings of Duplicate #1
Along with the spacing settings.
- Top Margin: -20px
- Top Padding: 50px
- Bottom Padding: 30px
Change Border of Duplicate #1
And the rounded corners as well.
Change Background Color of Duplicate #2
Change the background color of the second duplicate in the third column too.
- Background Color: #000000
Change Border of Duplicate #2
Along with the rounded corners.
- Top Right: 15px
Recreate Example #3
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.
Top Divider
Open the section settings and add a top divider.
- Divider Color: #62de9d
- Divider Height: 110px
Spacing
Remove all default top and bottom padding of the section as well.
- Top Padding: 0px
- Bottom Padding: 0px
Box Shadow
Add a subtle box shadow to the section next.
- Box Shadow Blur Strength: 80px
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;
Visibility
Lastly, disable the section on desktop (and tablet if you prefer so).
Add New Row
Column Structure
Continue by adding a new row to the section using the following column structure:
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
Spacing
Add some custom top and bottom padding next.
- Top Padding: 30px
- Bottom Padding: 20px
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;
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.
Select Icon
Select an icon next.
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
Title Text Settings
Modify the title text settings as well.
- Title Font: Work Sans
- Title Text Orientation: Center
- Title Letter Spacing: -1px
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.
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
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.
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!
Nice!
Why you dont let us dowloud json this block????
Agreed.
Practical application helps you learn the method way better than just grabbing a download.
Also agree and sure would save a ton of time… please make json files available for this and ALL future tutorials.
Wow this is brilliant!
Very interesting post when mobile phones are the must usefull internet.
Congratulations
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
Great article! Thank you kindly för sharing +1
Wouldn’t this be something you use per site, not per page?
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!
Kuvukiland bro :V
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 UsInsert 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)
I will definitely give this tutorial a shot on my next divi project.
Thanks eleganthemes for the new updates on divi
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.
Thanks Luke!
I really appreciate your new and different post. thanks for sharing this.
I really appreciate your new and different post. thanks for sharing this article.
nice post!! original topic, usefull as well.
well done.
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.
Nice!
Is there a way to force this on ALL pages?
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
Great article and I love this on my mobile site. Only one query… left-hand column (example #1) sits slightly above the bottom of page despite me following all settings in the article – anyone have any ideas?
Is it possible to minimize or close the bar with CSS?
Using alternative #2 and afraid that some visitors will be annoyed with the contact bar.