We know the way necessary it’s to verify the whole thing is ready-made to suit the cellular enjoy. That can assist you convey the cellular enjoy to any other degree, we’ll display you find out how to create fastened cellular footer bars with Divi on this step by step submit.

This educational is a part of our ongoing Divi design initiative the place we attempt to put one thing additional on your design toolbox every week. This time round, we’ll use the Health Clinic Layout Pack and make the fastened cellular footer bars fit the structure pack’s taste. On the other hand, you’ll be capable to use this manner for any roughly design you’re running on and create your individual fastened cellular footer bar possible choices.

Let’s get to it!

Preview

Prior to we dive into the educational, let’s take a snappy take a look at the 3 examples we’ll recreate step-by-step. Those examples will simplest display up on cellular (and pill when you favor so).

fixed mobile footer bar

Recreate Instance #1

fixed mobile footer bar

Upload New Phase to Backside of Web page

Let’s get started recreating the primary fastened cellular footer bar! We propose making a web page for 3 of the layouts which can be integrated within the Health Clinic Layout Pack. One for each and every instance. Open whichever web page you need so as to add the primary footer bar to. Scroll all the way down to the tip of the web page and upload a brand new segment proper after the ultimate one.

fixed mobile footer bar

Spacing

Open the row settings and take away all customized best and backside padding within the spacing settings.

  • Most sensible Padding: 0px
  • Backside Padding: 0px

fixed mobile footer bar

Visibility

We’re hiding this segment on desktop as neatly. If you need the cellular footer bar to seem on cellular simplest, cross forward and conceal the segment on pill as neatly.

fixed mobile footer bar

Upload New Row

Column Construction

Proceed by means of including a brand new row to the segment the usage of the next column construction:

fixed mobile footer bar

Sizing

With out including any modules but, open the row settings and alter the sizing settings.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1
  • Equalize Column Heights: Sure

fixed mobile footer bar

Spacing

Take away all default best and backside padding of the row subsequent.

  • Most sensible Padding: 0px
  • Backside Padding: 0px

fixed mobile footer bar

Customized CSS

Finally, we’re including some customized CSS traces to the row. Those traces will assist flip the row into a set footer bar.

show: flex;
place:fastened;
backside: 0px;
z-index: 99;

fixed mobile footer bar

Upload Textual content Module to Column 1

Upload Content material

Time to start out including modules! The primary module we want is a Textual content Module in column 1. Upload some content material of selection.

fixed mobile footer bar

Background Colour

Pass to the background settings of the module and alter the background colour.

  • Background Colour: #5e89fb

fixed mobile footer bar

Textual content Settings

Alter the textual content settings as neatly.

  • Textual content Font: Paintings Sans
  • Textual content Font Weight: Mild
  • Textual content Colour: #ffffff
  • Textual content Dimension: 16px
  • Textual content Letter Spacing: -1px

fixed mobile footer bar

Spacing

Upload some customized padding values subsequent.

  • Most sensible Padding: 16px
  • Backside Padding: 16px
  • Left Padding: 15px
  • Proper Padding: 15px

fixed mobile footer bar

Border

And a few rounded corners too.

  • Most sensible Left: 10px
  • Most sensible Proper: 10px

fixed mobile footer bar

Field Shadow

Entire the module’s settings by means of including a refined field shadow.

  • Field Shadow Blur Power: 80px

fixed mobile footer bar

Upload Blurb Module to Column 2

Upload Content material

Upload a Blurb Module to the second one column and upload a name of selection.

fixed mobile footer bar

Choose Icon

Proceed by means of settling on an icon for the Blurb Module.

fixed mobile footer bar

Background Colour

Upload a background colour to the module as neatly.

  • Background Colour: #62de9d

fixed mobile footer bar

Icon Settings

Transfer directly to the design tab and alter the icon settings.

  • Icon Colour: #ffffff
  • Icon Placement: Left
  • Use Icon Font Dimension: Sure
  • Icon Font Dimension: 19px

fixed mobile footer bar

Name Textual content Settings

Proceed by means of editing the name textual content settings.

  • Name Font: Paintings Sans
  • Name Textual content Colour: #ffffff
  • Name Textual content Dimension: 16px
  • Name Letter Spacing: -1px

fixed mobile footer bar

Spacing

Upload some customized padding to the module as neatly.

  • Most sensible Padding: 20px
  • Backside Padding: 10px
  • Left Padding: 30px
  • Proper Padding: 30px

fixed mobile footer bar

Border

And upload ’10px’ to the highest left and best proper corners.

  • Most sensible Left: 10px
  • Most sensible Proper: 10px

fixed mobile footer bar

Field Shadow

Final however no longer least, upload a refined field shadow to the module.

  • Field Shadow Blur Power: 80px

fixed mobile footer bar

Recreate Instance #2

fixed mobile footer bar

Upload New Phase to Backside of Web page

Directly to the second one instance! Once more, open a web page of your selection, scroll all the way down to the tip of the web page and upload a brand new segment.

fixed mobile footer bar

Spacing

Open the segment settings and take away the default best and backside padding.

  • Most sensible Padding: 0px
  • Backside Padding: 0px

fixed mobile footer bar

Visibility

Cover the segment on desktop (and pill when you favor so).

fixed mobile footer bar

Upload New Row

Column Construction

Proceed by means of including a brand new row to the segment the usage of the next column construction:

fixed mobile footer bar

Sizing

With out including any modules, open the row settings and alter the sizing settings.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

fixed mobile footer bar

Spacing

Take away the default best and backside padding of the row as neatly.

  • Most sensible Padding: 0px
  • Backside Padding: 0px

fixed mobile footer bar

Customized CSS

Upload some customized css traces to the row subsequent. Those traces of CSS code will assist create the fastened cellular footer bar.

show: flex;
place:fastened;
backside: 0px;
z-index: 99;

fixed mobile footer bar

Upload Blurb Module to Column 1

Upload Content material

Proceed by means of including a Blurb Module to the primary column. Upload a name of selection.

fixed mobile footer bar

Choose Icon

Then, choose an icon.

fixed mobile footer bar

Background Colour

Upload a background colour to the module subsequent.

  • Background Colour: #62de9d

fixed mobile footer bar

Icon Settings

Transfer directly to the design tab and alter the icon settings of the module.

  • Icon Colour: #ffffff
  • Icon Placement: Most sensible
  • Use Icon Font Dimension: Sure
  • Icon Font Dimension: 25px

fixed mobile footer bar

Name Textual content Settings

Exchange across the name textual content settings as neatly.

  • Name Font: Paintings Sans
  • Name Textual content Alignment: Heart
  • Name Textual content Colour: #ffffff
  • Name Letter Spacing: -1px

fixed mobile footer bar

Spacing

And upload some best and backside padding to provide the module some area to respire.

  • Most sensible Padding: 30px
  • Backside Padding: 30px

fixed mobile footer bar

Border

We’re additionally including ’15px’ to the highest left border of the module.

  • Most sensible Left: 15px

fixed mobile footer bar

Field Shadow

And we’ll whole the module with a refined field shadow.

  • Field Shadow Blur Power: 80px

fixed mobile footer bar

Clone Blurb Module Two times & Position Duplicates in Closing Columns

When you’re performed editing the primary Blurb Module, you’ll be able to cross forward and clone the module two times and position the duplicates within the two closing columns.

fixed mobile footer bar

Exchange Background Colour of Replica #1

Exchange the background colour of the primary reproduction.

  • Background Colour: #3d3d3d

fixed mobile footer bar

Exchange Spacing Settings of Replica #1

Along side the spacing settings.

  • Most sensible Margin: -20px
  • Most sensible Padding: 50px
  • Backside Padding: 30px

fixed mobile footer bar

Exchange Border of Replica #1

And the rounded corners as neatly.

fixed mobile footer bar

Exchange Background Colour of Replica #2

Exchange the background colour of the second one reproduction within the 3rd column too.

  • Background Colour: #000000

fixed mobile footer bar

Exchange Border of Replica #2

Along side the rounded corners.

  • Most sensible Proper: 15px

fixed mobile footer bar

Recreate Instance #3

fixed mobile footer bar

Upload New Phase to Backside of Web page

Directly to the following and ultimate instance! Open some of the pages, scroll down the web page and upload a brand new segment.

fixed mobile footer bar

Most sensible Divider

Open the segment settings and upload a best divider.

  • Divider Colour: #62de9d
  • Divider Top: 110px

fixed mobile footer bar

Spacing

Take away all default best and backside padding of the segment as neatly.

  • Most sensible Padding: 0px
  • Backside Padding: 0px

fixed mobile footer bar

Field Shadow

Upload a refined field shadow to the segment subsequent.

  • Field Shadow Blur Power: 80px

fixed mobile footer bar

Customized CSS

And come with some customized CSS traces within the complicated tab. This may increasingly assist flip the segment into a set cellular footer bar.

place:fastened;
backside:0px;
width: 100%;
z-index: 99;

fixed mobile footer bar

Visibility

Finally, disable the segment on desktop (and pill when you favor so).

fixed mobile footer bar

Upload New Row

Column Construction

Proceed by means of including a brand new row to the segment the usage of the next column construction:

fixed mobile footer bar

Sizing

With out including any modules but, open the row settings and alter the sizing settings.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

fixed mobile footer bar

Spacing

Upload some customized best and backside padding subsequent.

  • Most sensible Padding: 30px
  • Backside Padding: 20px

fixed mobile footer bar

Customized CSS

To ensure all 3 columns stay at the identical peak, we’re going so as to add a line of CSS code to the complicated tab of the row as neatly.

show: flex;

fixed mobile footer bar

Upload Blurb Module to Column 1

Upload Content material

Now we will get started including modules! Upload a Blurb Module to the primary column and provides it a name.

fixed mobile footer bar

Choose Icon

Choose an icon subsequent.

fixed mobile footer bar

Icon Settings

Transfer directly to the design tab and alter the icon settings.

  • Icon Colour: #ffffff
  • Icon Placement: Most sensible
  • Use Icon Font Dimension: Sure
  • Icon Font Dimension: 25px

fixed mobile footer bar

Name Textual content Settings

Alter the name textual content settings as neatly.

  • Name Font: Paintings Sans
  • Name Textual content Orientation: Heart
  • Name Letter Spacing: -1px

fixed mobile footer bar

Clone Blurb Module Two times & Position

When you’re performed editing the Blurb Module in column 1, you’ll be able to cross forward and clone the module two times. Position the duplicates within the two closing columns.

fixed mobile footer bar

Exchange Icon Colour of Replica #1

Don’t fail to remember to modify the icon colour of the reproduction situated in the second one column.

  • Icon Colour: #000000

fixed mobile footer bar

Preview

Now that we’ve long gone thru all of the other steps, let’s take a last take a look at the result of all 3 examples we’ve treated above.

fixed mobile footer bar

Ultimate Ideas

On this submit, we’ve treated 3 other fastened cellular footer bar designs that you’ll be able to recreate step-by-step by means of following the educational. The cellular footer bars will apply guests during their scrolling enjoy at the web page. This educational is a part of the continuing Divi design initiative, the place we attempt to put one thing additional into your design toolbox every week. When you’ve got any questions or tips, be sure to depart a remark within the remark segment underneath!

The submit How to Create Fixed Mobile Footer Bars with Divi gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]