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!

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

Share This