Sticky footer bars is usually a helpful addition to any website online, particularly for cellular gadgets. A sticky footer bar stays mounted (or caught) on the backside of the display screen because the consumer scrolls throughout the web page. Its place makes it extra available to cellular customers (particularly on telephones) as a result of it’s so on the subject of the thumb. That’s most probably why designers incessantly come with navigation buttons inside of sticky footer bars. It might probably spice up the navigation UX on cellular.

On this educational, we’re going to display you the right way to create cellular sticky footer bars in Divi. The basis of any sticky footer bar is the mounted place which is definitely managed with Divi’s integrated sticky place choices. We’ll display you the right way to use the sticky place and the suite of Divi design gear to design 3 other sticky footer bar designs, every with 4 navigation buttons. This will likely paintings neatly for any corporate having a look to beef up its website’s UX on cellular.

Let’s get began!

Sneak Peek

Here’s a fast have a look at the cellular sticky footer bar designs we’ll construct on this educational.

Obtain the Sticky Footer Bar Template and Layouts for FREE

To put your palms at the designs from this educational, you’re going to first want to obtain it the usage of the button under. To realize get right of entry to to the obtain it is very important subscribe to our Divi Day-to-day electronic mail listing through the usage of the shape under. As a brand new subscriber, you’re going to obtain much more Divi goodness and a unfastened Divi Structure pack each and every Monday! When you’re already at the listing, merely input your electronic mail deal with under and click on obtain. You are going to now not be “resubscribed” or obtain further emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:sooner than { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:sooner than { border-top-color: clear !vital; border-left-color: #ffffff !vital; }
@media handiest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:sooner than { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}

See also  The Divi Summer Sale Starts Now!

Obtain For Loose

Sign up for the Divi Publication and we can electronic mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus heaps of alternative superb and unfastened Divi sources, guidelines and methods. Observe alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely sort on your electronic mail deal with under and click on obtain to get right of entry to the format pack.

DOWNLOAD

You might have effectively subscribed. Please take a look at your electronic mail deal with to verify your subscription and get get right of entry to to unfastened weekly Divi format packs!

Learn how to Import the Loose Template and Layouts on your Divi Website online

This obtain incorporates two information. One can be utilized to import the footer template to the Theme Builder and the opposite can be utilized to import the person part layouts of every footer to the Divi Library.

To import the sticky footer bar template on your personal website online, unzip the obtain zip report to get right of entry to the JSON information.

Then cross to the WordPress Dashboard and navigate to Divi > Theme Builder.

Then click on the portability icon on the height proper of the web page.

Throughout the portability popup, make a choice the JSON report from the folder referred to as “divi-sticky-footer-bar-template”.

Then click on the Import button.

To import the three sticky footer bar part layouts on your Divi Library, navigate to the Divi Library.

Click on the Import button.

Within the portability popup, make a selection the import tab and make a choice the JSON report (“divi-sticky-footer-bar-section-layouts.json”) from the folder you downloaded (and unzipped).

Then click on the import button.

As soon as finished, the part layouts will likely be to be had within the Divi Builder.

Let’s get to the academic, we could?

Developing Cell Sticky Footer Bars in Divi

Phase 1: Making a New Footer Template within the Theme Builder

To kick issues off, navigate to the Theme Builder and click on to construct a brand new international footer within the default website online template. (However, you’ll upload a brand new template for checking out functions.)

Deploy Telephone View and Layers Modal

As soon as within the footer format editor, open the settings menu on the backside of the web page.

Click on the telephone icon at the left facet to open the telephone view of the builder. This will likely assist visualize how the sticky footer will glance on cellular as we design.

Then click on the layers icon at the proper to open the layers modal. This will likely assist with settling on components on every occasion they get too shut in combination.

Phase 2: Developing the Sticky Footer Segment and Row

Developing the Sticky Segment

To create the sticky part, we will be able to use the present default common part.

Open the settings for the part and, beneath the complicated tab make a selection the sticky place choice Keep on with Backside.

Beneath the content material tab, upload a background shade to the part.

• Background Colour: #1a2545

Beneath the design tab, replace the padding as follows:

• Padding: 0px height, 0px backside

This will likely shorten the peak of the footer bar part for cellular gadgets.

Developing the Row

As soon as the part is in position, upload a one-column row to the part.

Open the row settings and replace the sizing and spacing choices beneath the design tab as follows:

• Gutter Width: 1
• Width: 94%
• Padding: 6px height, 6px backside

With a view to be sure that the extra columns we’re going to upload stay adjoining (received’t stack) on cellular, we want to upload a brief CSS snippet the usage of the Flex assets to stay issues aligned effectively.

Beneath the complicated tab, upload the next customized CSS to the primary component:

show:flex;
align-items:heart;
justify-content:heart;
flex-wrap:nowrap;

Phase 3: Developing the Footer Bar Buttons

To create the footer bar buttons, we’re going to use the blurb module. This permits us to create a button that resembles a cellular app (a small icon with a identify beneath it) which is absolute best for cellular navigation.

Throughout the column, upload a brand new blurb module.

Replace the blurb content material as follows:

• Name: House
• Frame: go away empty
• Use Icon: YES
• Icon: house icon (see screenshot)

Beneath the design tab, replace the icon kinds as follows:

• Icon Colour: #fff
• Icon Font Dimension: 24px

Then replace the Name Textual content and Sizing choices as follows:

• Name Font: Montserrat
• Name Font Weight: Semi Daring
• Name Font Taste: TT
• Name Textual content Alignment: Heart
• Name Textual content Colour: #fff
• Name Textual content Dimension: 10px
• Max Width: 60px
• Module Alignment: Heart

Proceed so as to add the next padding and rounded corners to the blurb:

• Padding: 5px (height, backside, left, proper)
• Rounded Corners: 5px (height, backside, left, proper)

So as to add a border across the blurb, we’re going to use a box-shadow, most commonly as it doesn’t upload any further precise area to the design.

• Field Shadow: see screenshot
• Field Shadow Horizontal Place: 0px
• Field Shadow Vertical Place: 0px
• Field Shadow Unfold Energy: 1px
• Shadow Colour: rgba(255,255,255,0.12)

With a view to take out the default spacing between the blurb symbol and identify, upload the next CSS snippets beneath the Complex tab for the Blurb Symbol and Blurb Name:

Blurb Symbol CSS

margin-bottom: 0px;

Blurb Name CSS

padding-bottom: 0px;

Additionally, replace the horizontal and vertical overflow choices to Visual. This will likely be sure that the module settings bar doesn’t get bring to an end when enhancing within the Divi Builder.

Replica the Column to Upload Extra Buttons

With a view to create the remainder 3 buttons, we will be able to replica the column (containing the blurb module) thrice. This will likely create a complete of four columns every containing an identical buttons.

As soon as the columns (and buttons) are duplicated, you’ll return to every of the blurb modules and replace the Name Textual content and Icon to no matter you need.

Phase 4: Save It to the Divi Library

Now is a great time to avoid wasting the part to the Divi Library so that you could upload the sticky footer anyplace you need in a while.

To reserve it, click on the Save to Library icon within the part settings bar when soaring over the part. Then give the format a reputation and put it aside to the library.

That’s it! Let’s take a look at the results of our sticky footer bar on a reside web page in cellular show.

End result

Phase 5: Developing Cell Sticky Footer Bar Design #2

For another design to this sticky footer bar, we will be able to get slightly inventive with the part background and the blurb’s box-shadow to present the affect that buttons lengthen above the bar.

Replace Segment Settings

To try this, open the part settings and replace the background as follows:

Beneath the desktop tab…

• Background Colour: #1a2545

Beneath the sticky tab…

• Background Colour: clear
• Background Gradient Left Colour: clear
• Background Gradient Proper Colour: #1a2545
• Get started Place: 50%
• Finish Place: 0%

Replace Blurbs

Subsequent, use the multiselect function to make a choice all 4 blurb modules. As soon as they’re decided on, open the settings for one in every of them and replace the background shade for they all without delay:

• Background Colour: #1a2545

Beneath the design tab, replace the field shadow for the blurbs as follows:

• Field Shadow Unfold Energy: 3px
• Shadow Colour: #1a2545

To avoid wasting this sticky footer bar part format, click on the Save to Library icon within the part settings bar when soaring over the part. Then give the format a reputation and put it aside to the library.

End result

Here’s a peek on the ultimate consequence.

Phase 6: Developing Cell Sticky Footer Bar Design #3

For every other choice design to this sticky footer bar, we will be able to get slightly inventive with the row through including rounded corners to make the footer bar glance extra like a tab.

Replace Segment Settings

First, open the present part settings and replace the sticky background shade to clear.

• Background Colour (sticky): clear

Be sure to delete the background gradient as neatly.

Replace Row Settings

Subsequent, open the row settings and upload the next background shade:

• Background Colour: #1a2545

Beneath the design tab, replace the next:

• Padding: 10px height
• Rounded Corners: 20px height left, 20px height proper

To avoid wasting this sticky footer bar part format, click on the Save to Library icon within the part settings bar when soaring over the part. Then give the format a reputation and put it aside to the library.

End result

Here’s the end result.

Phase 7: Disabling the Sticky Footer on Desktop

With a view to cover the footer on desktop view in order that it presentations handiest on cellular, you’ll all the time replace the visibility choice for the part. Merely make a selection Desktop beneath the Disable on choice.

Ultimate End result

Let’s take a last have a look at the cellular sticky footer bar designs.

Sticky Footer Bar #1

Sticky Footer Bar #2

Sticky Footer Bar #3

Ultimate Ideas

Making a sticky footer bar in Divi is somewhat easy. I imply, you’ll make a bit (or row) persist with the ground of the web page in a couple of clicks. After that, it’s as much as you ways you need to taste the footer bar, and what content material you need to incorporate. The footer bar designs on this educational are supposed for cellular and also are supposed to be extra purposeful and flexible so you’ll get a really feel for the right way to design them by yourself. So don’t be afraid to experiment with extra inventive designs!

For extra, take a look at how to create a mobile contact bar with click-to-Call, email, SMS and direction links.

I stay up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; shade: red; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!vital} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);show:block;margin: 0 auto;}

The put up How to Create Mobile Sticky Footer Bars in Divi seemed first on Elegant Themes Blog.

read more