Find out how to Create Cell Sticky Footer Bars in Divi

by | Nov 16, 2021 | Etcetera | 0 comments

Sticky footer bars is normally a useful addition to any web site, specifically for cellular gadgets. A sticky footer bar remains mounted (or stuck) at the bottom of the show for the reason that particular person scrolls throughout the internet web page. Its position makes it further in the market to cellular consumers (specifically on phones) because of it’s so in the case of the thumb. That’s probably why designers continuously include navigation buttons inside sticky footer bars. It could boost the navigation UX on cellular.

In this instructional, we’re going to show you how one can create cellular sticky footer bars in Divi. The root of any sticky footer bar is the mounted position which is indubitably controlled with Divi’s built-in sticky position possible choices. We’ll show you how one can use the sticky position and the suite of Divi design apparatus to design 3 different sticky footer bar designs, every with 4 navigation buttons. This will artwork neatly for any company taking a look to enhance its web site’s UX on cellular.

Let’s get started!

Sneak Peek

Right here’s a quick take a look on the cellular sticky footer bar designs we’ll assemble in this instructional.

Download the Sticky Footer Bar Template and Layouts for FREE

To place your arms on the designs from this instructional, you’ll first need to download it the use of the button beneath. To succeed in get entry to to the download it is important to subscribe to our Divi Day-to-day email record by way of the use of the form beneath. As a brand spanking new subscriber, you’ll download a lot more Divi goodness and a free Divi Construction pack every Monday! If you’re already on the record, simply enter your email deal with beneath and click on on download. You’re going to no longer be “resubscribed” or download further emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:forward of { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:forward of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:forward of { border-top-color: transparent !essential; border-left-color: #ffffff !essential; }
@media easiest show and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:forward of { border-top-color: #ffffff !essential; border-left-color: transparent !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: transparent !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:forward of { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

Download For Free

Download For Unfastened

Join the Divi Publication and we will email you a replica of the ultimate Divi Landing Internet web page Construction Pack, plus plenty of selection glorious and free Divi property, pointers and techniques. Observe along and also you’ll be a Divi clutch in no time. When you’re already subscribed simply kind in your email deal with beneath and click on on download to get entry to the construction pack.

You’ve successfully subscribed. Please take a look at your email deal with to make sure your subscription and get get entry to to free weekly Divi construction packs!

See also  Information Monitoring: What Is It and What Are the Absolute best Equipment

Learn the way to Import the Unfastened Template and Layouts for your Divi Site

This download incorporates two knowledge. One can be used to import the footer template to the Theme Builder and the other can be used to import the individual section layouts of every footer to the Divi Library.

To import the sticky footer bar template for your non-public web site, unzip the download zip document to get entry to the JSON knowledge.

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

Then click on at the portability icon at the top right kind of the internet web page.

During the portability popup, choose the JSON document from the folder known as “divi-sticky-footer-bar-template”.

Then click on at the Import button.

divi mobile sticky footer bars

To import the 3 sticky footer bar section layouts for your Divi Library, navigate to the Divi Library.

Click on at the Import button.

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

Then click on at the import button.

divi mobile sticky footer bars

Once carried out, the section layouts can be available inside the Divi Builder.

Let’s get to the learning, we could?

Growing Cellular Sticky Footer Bars in Divi

Section 1: Creating a New Footer Template inside the Theme Builder

To kick problems off, navigate to the Theme Builder and click on directly to assemble a brand spanking new global footer inside the default web site template. (Then again, you’ll add a brand spanking new template for checking out purposes.)

divi mobile sticky footer bars

Deploy Phone View and Layers Modal

Once all the way through the footer construction editor, open the settings menu at the bottom of the internet web page.

Click on at the phone icon on the left side to open the phone view of the builder. This will have the same opinion visualize how the sticky footer will look on cellular as we design.

Then click on at the layers icon at the correct to open the layers modal. This will have the same opinion with deciding on elements each and every time they get too close together.

divi mobile sticky footer bars

Section 2: Growing the Sticky Footer Section and Row

Growing the Sticky Section

To create the sticky section, we will use the prevailing default commonplace section.

Open the settings for the section and, underneath the difficult tab make a choice the sticky position risk Persist with Bottom.

divi mobile sticky footer bars

Beneath the content material subject matter tab, add a background color to the section.

  • Background Color: #1a2545

divi mobile sticky footer bars

Beneath the design tab, exchange the padding as follows:

  • Padding: 0px top, 0px bottom

This will shorten the height of the footer bar section for cellular gadgets.

divi mobile sticky footer bars

Growing the Row

As quickly because the section is in place, add a one-column row to the section.

divi mobile sticky footer bars

Open the row settings and exchange the sizing and spacing possible choices underneath the design tab as follows:

  • Gutter Width: 1
  • Width: 94%
  • Padding: 6px top, 6px bottom

divi mobile sticky footer bars

So that you can make certain that the additional columns we’re going to add keep adjacent (received’t stack) on cellular, we need to add a short lived CSS snippet the use of the Flex property to stick problems aligned successfully.

Beneath the difficult tab, add the following custom designed CSS to the main section:

display:flex;
align-items:center;
justify-content:center;
flex-wrap:nowrap;

divi mobile sticky footer bars

Section 3: Growing the Footer Bar Buttons

To create the footer bar buttons, we’re going to make use of the blurb module. This allows us to create a button that resembles a cellular app (a small icon with a reputation underneath it) which is best for cellular navigation.

See also  Learn how to Prepare or Reorder WordPress Pages with Drag & Drop

During the column, add a brand spanking new blurb module.

divi mobile sticky footer bars

Substitute the blurb content material subject matter as follows:

  • Establish: Area
  • Body: leave empty
  • Use Icon: YES
  • Icon: space icon (see screenshot)

divi mobile sticky footer bars

Beneath the design tab, exchange the icon sorts as follows:

  • Icon Color: #fff
  • Icon Font Size: 24px

divi mobile sticky footer bars

Then exchange the Establish Text and Sizing possible choices as follows:

  • Establish Font: Montserrat
  • Establish Font Weight: Semi Bold
  • Establish Font Style: TT
  • Establish Text Alignment: Center
  • Establish Text Color: #fff
  • Establish Text Size: 10px
  • Max Width: 60px
  • Module Alignment: Center

divi mobile sticky footer bars

Continue as a way to upload the following padding and rounded corners to the blurb:

  • Padding: 5px (top, bottom, left, right kind)
  • Rounded Corners: 5px (top, bottom, left, right kind)

divi mobile sticky footer bars

As a way to upload a border around the blurb, we’re going to make use of a box-shadow, maximum usually because it doesn’t add to any extent further exact space to the design.

  • Box Shadow: see screenshot
  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 0px
  • Box Shadow Spread Power: 1px
  • Shadow Color: rgba(255,255,255,0.12)

divi mobile sticky footer bars

So that you can take out the default spacing between the blurb image and identify, add the following CSS snippets underneath the Difficult tab for the Blurb Image and Blurb Establish:

Blurb Image CSS

margin-bottom: 0px;

Blurb Establish CSS

padding-bottom: 0px;

Moreover, exchange the horizontal and vertical overflow possible choices to Visible. This will make certain that the module settings bar doesn’t get bring to a halt when improving all the way through the Divi Builder.

divi mobile sticky footer bars

Reproduction the Column to Add Additional Buttons

So that you can create the rest 3 buttons, we will reproduction the column (containing the blurb module) three times. This will create a whole of 4 columns every containing an equivalent buttons.

divi mobile sticky footer bars

As quickly because the columns (and buttons) are duplicated, you’ll go back to every of the blurb modules and exchange the Establish Text and Icon to regardless of you want.

divi mobile sticky footer bars

Section 4: Save It to the Divi Library

Now is a smart time to save some the section to the Divi Library so as to add the sticky footer anywhere you want later on.

To save it, click on at the Save to Library icon inside the section settings bar when hovering over the section. Then give the construction a name and save it to the library.

divi mobile sticky footer bars

That’s it! Let’s check out the result of our sticky footer bar on a live internet web page in cellular display.

End result

Section 5: Growing Cellular Sticky Footer Bar Design #2

divi mobile sticky footer bars

For an alternative design to this sticky footer bar, we will get just a bit creative with the section background and the blurb’s box-shadow to provide the affect that buttons prolong above the bar.

Substitute Section Settings

To take a look at this, open the section settings and exchange the background as follows:

Beneath the desktop tab…

  • Background Color: #1a2545

Beneath the sticky tab…

  • Background Color: transparent
  • Background Gradient Left Color: transparent
  • Background Gradient Correct Color: #1a2545
  • Get began Position: 50%
  • End Position: 0%
See also  15 Unfastened Android VPN Apps to Surf Anonymously

divi mobile sticky footer bars

Substitute Blurbs

Next, use the multiselect serve as to select all 4 blurb modules. Once they’re made up our minds on, open the settings for one amongst them and exchange the background color for all of them at once:

  • Background Color: #1a2545

divi mobile sticky footer bars

Beneath the design tab, exchange the sector shadow for the blurbs as follows:

  • Box Shadow Spread Power: 3px
  • Shadow Color: #1a2545

divi mobile sticky footer bars

To save some this sticky footer bar section construction, click on at the Save to Library icon inside the section settings bar when hovering over the section. Then give the construction a name and save it to the library.

divi mobile sticky footer bars

End result

Right here’s a peek at the final outcome.

Section 6: Growing Cellular Sticky Footer Bar Design #3

divi mobile sticky footer bars

For each and every different selection design to this sticky footer bar, we will get just a bit creative with the row by way of together with rounded corners to make the footer bar look further like a tab.

Substitute Section Settings

First, open the prevailing section settings and exchange the sticky background color to transparent.

  • Background Color (sticky): transparent

Make sure to delete the background gradient as neatly.

divi mobile sticky footer bars

Substitute Row Settings

Next, open the row settings and add the following background color:

  • Background Color: #1a2545

divi mobile sticky footer bars

Beneath the design tab, exchange the following:

  • Padding: 10px top
  • Rounded Corners: 20px top left, 20px top right kind

divi mobile sticky footer bars

To save some this sticky footer bar section construction, click on at the Save to Library icon inside the section settings bar when hovering over the section. Then give the construction a name and save it to the library.

divi mobile sticky footer bars

End result

That is the result.

Section 7: Disabling the Sticky Footer on Desktop

So that you can quilt the footer on desktop view so that it displays easiest on cellular, you’ll always exchange the visibility risk for the section. Simply make a choice Desktop underneath the Disable on risk.

divi mobile sticky footer bars

Final End result

Let’s take a final take a look on the cellular sticky footer bar designs.

Sticky Footer Bar #1

Sticky Footer Bar #2

Sticky Footer Bar #3

Final Concepts

Creating a sticky footer bar in Divi is relatively simple. I suggest, you’ll make a bit of (or row) stick with the bottom of the internet web page in a few clicks. After that, it’s up to you techniques you want to style the footer bar, and what content material subject matter you want to include. The footer bar designs in this instructional are intended for cellular and in addition are meant to be further functional and versatile so that you’ll get a in point of fact really feel for how one can design them on your own. So don’t be afraid to experiment with further creative designs!

For added, check out how to create a mobile contact bar with click-to-Call, email, SMS and direction links.

I sit up for taking note of from you inside the comments.

Cheers!

.inline-code{padding: 0px 4px; color: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!essential} 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);display:block;margin: 0 auto;}

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

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment