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).
Recreate Instance #1
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.
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
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.
Upload New Row
Column Construction
Proceed by means of including a brand new row to the segment the usage of the next column construction:
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
Spacing
Take away all default best and backside padding of the row subsequent.
- Most sensible Padding: 0px
- Backside Padding: 0px
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;
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.
Background Colour
Pass to the background settings of the module and alter the background colour.
- Background Colour: #5e89fb
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
Spacing
Upload some customized padding values subsequent.
- Most sensible Padding: 16px
- Backside Padding: 16px
- Left Padding: 15px
- Proper Padding: 15px
Border
And a few rounded corners too.
- Most sensible Left: 10px
- Most sensible Proper: 10px
Field Shadow
Entire the module’s settings by means of including a refined field shadow.
- Field Shadow Blur Power: 80px
Upload Blurb Module to Column 2
Upload Content material
Upload a Blurb Module to the second one column and upload a name of selection.
Choose Icon
Proceed by means of settling on an icon for the Blurb Module.
Background Colour
Upload a background colour to the module as neatly.
- Background Colour: #62de9d
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
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
Spacing
Upload some customized padding to the module as neatly.
- Most sensible Padding: 20px
- Backside Padding: 10px
- Left Padding: 30px
- Proper Padding: 30px
Border
And upload ’10px’ to the highest left and best proper corners.
- Most sensible Left: 10px
- Most sensible Proper: 10px
Field Shadow
Final however no longer least, upload a refined field shadow to the module.
- Field Shadow Blur Power: 80px
Recreate Instance #2
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.
Spacing
Open the segment settings and take away the default best and backside padding.
- Most sensible Padding: 0px
- Backside Padding: 0px
Visibility
Cover the segment on desktop (and pill when you favor so).
Upload New Row
Column Construction
Proceed by means of including a brand new row to the segment the usage of the next column construction:
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
Spacing
Take away the default best and backside padding of the row as neatly.
- Most sensible Padding: 0px
- Backside Padding: 0px
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;
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.
Choose Icon
Then, choose an icon.
Background Colour
Upload a background colour to the module subsequent.
- Background Colour: #62de9d
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
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
Spacing
And upload some best and backside padding to provide the module some area to respire.
- Most sensible Padding: 30px
- Backside Padding: 30px
Border
We’re additionally including ’15px’ to the highest left border of the module.
- Most sensible Left: 15px
Field Shadow
And we’ll whole the module with a refined field shadow.
- Field Shadow Blur Power: 80px
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.
Exchange Background Colour of Replica #1
Exchange the background colour of the primary reproduction.
- Background Colour: #3d3d3d
Exchange Spacing Settings of Replica #1
Along side the spacing settings.
- Most sensible Margin: -20px
- Most sensible Padding: 50px
- Backside Padding: 30px
Exchange Border of Replica #1
And the rounded corners as neatly.
Exchange Background Colour of Replica #2
Exchange the background colour of the second one reproduction within the 3rd column too.
- Background Colour: #000000
Exchange Border of Replica #2
Along side the rounded corners.
- Most sensible Proper: 15px
Recreate Instance #3
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.
Most sensible Divider
Open the segment settings and upload a best divider.
- Divider Colour: #62de9d
- Divider Top: 110px
Spacing
Take away all default best and backside padding of the segment as neatly.
- Most sensible Padding: 0px
- Backside Padding: 0px
Field Shadow
Upload a refined field shadow to the segment subsequent.
- Field Shadow Blur Power: 80px
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;
Visibility
Finally, disable the segment on desktop (and pill when you favor so).
Upload New Row
Column Construction
Proceed by means of including a brand new row to the segment the usage of the next column construction:
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
Spacing
Upload some customized best and backside padding subsequent.
- Most sensible Padding: 30px
- Backside Padding: 20px
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;
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.
Choose Icon
Choose an icon subsequent.
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
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
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.
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
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.
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