A sticky footer is an out of this world method to show necessary content material on your guests. The footer remains on the backside of the display screen as they scroll in order that they all the time have simple get admission to to the content material. That is supreme for touch knowledge, particular hyperlinks, and extra. Thankfully, making a sticky footer is simple with Divi. On this instructional, we’ll see find out how to make one segment of your Divi footer sticky, and we’ll regulate it otherwise for desktop and contact units.

Preview

Prior to we get began, let’s check out what we’ll construct on this instructional.

Desktop Sticky Divi Footer

Right here’s how our sticky Divi footer seems to be on a desktop.

Telephone Sticky Divi Footer

Right here’s how our sticky Divi footer seems to be on a telephone.

Why Use a Sticky Footer?

There are a number of benefits of the use of a sticky footer…

First, pages that don’t have sufficient content material to fill the peak of the display screen can have a floating footer through default. A sticky footer locks the footer on the backside of the display screen, protecting it from floating. This makes the web page glance higher and no more distracting to readers.

Every other benefit is that it’s a great spot to position calls to motion or knowledge that the consumer can use at their fingertips. Touch knowledge, gross sales advertisements, banner advertisements, and rather a lot extra will also be positioned within the sticky footer. Telephone numbers are particularly useful for telephones as a result of you’ll be able to lead them to clickable.

Obtain a Divi Footer

First, you’ll want a footer template to make use of with the Divi Theme Builder. You’ll be able to construct your personal or get a unfastened template from the Sublime Topics weblog. Sublime Topics supplies unfastened header and footer templates that fit lots of the unfastened structure packs to be had inside of Divi. You’ll be able to to find the footer templates through looking out the weblog for “unfastened footer” or “footer template”. Obtain your template and unzip the document.

For my examples, I’m the use of the unfastened Header and Footer Template for Divi’s Estate Planning Layout Pack. I’m additionally the use of the touchdown web page from the Property Making plans structure pack for the web page content material.

Add Your Divi Footer

To add your footer template, cross to Divi > Theme Builder within the WordPress dashboard. Click on the Portability icon within the higher proper and make a choice Import inside the modal that opens. Subsequent, click on Select Record and navigate on your JSON document to your laptop and make a choice it. In the end, click on the button Import Divi Theme Builder Template on the backside of the modal. Look ahead to the template to add and save your settings.

You’ll be able to edit the template from the Theme Builder at the backend or inside the Visible Builder at the entrance finish.

Making Your Divi Footer Sticky

I’m running at the entrance finish so I will see the effects reside to verify it really works with the frame of the site. At the entrance finish, make a choice Allow Visible Builder and scroll all the way down to the footer, and make a choice Edit Footer Template.

Sticky Divi Footer Phase Settings

We can make one segment of the footer sticky. This segment contains the deal with, telephone, and electronic mail knowledge. We’ll make it smaller whilst it’s within the sticky state and we’ll make other changes for the desktop and footer. Hover over the segment that we wish to make sticky and make a choice the settings icon.

Choose the Complicated tab and scroll all the way down to Scroll Results. This primary atmosphere is Sticky Place. Click on at the dropdown field and make a selection Stick with Backside. This may allow the sticky choices all over the segment.

Subsequent, cross to the Design tab and scroll all the way down to Spacing. It must have already got the padding for the Most sensible and Backside in position, but when it isn’t there, upload 30px to each and every.

• Padding: 30px, Most sensible and Backside

Hover over the fields to show a number of choices. Click on at the pin icon. This opens the sticky changes for this atmosphere.

You’ll see a desktop icon and a pin icon. The desktop icon will likely be lively. Click on at the pin icon to regulate the padding for the sticky state of the segment. Upload 0px for the Most sensible and Backside.

• Sticky Padding: 0px, Most sensible and Backside.

You’ll be able to already see the segment is shorter than it used to be. This may permit the segment to appear smaller when it’s out of doors of its segment after which develop to its commonplace dimension when it locks into position within the footer. That is all we wish to do for the desktop settings. Pill will robotically apply those settings.

Sticky Divi Footer Column Settings

We’ll make some adjustments to the footer’s design for the Telephone. Hover over the row and click on the settings icon.

Subsequent, we’ll make changes to 2 of the columns. Click on the settings icon for the primary column.

Choose the Complicated tab and scroll all the way down to Visibility. Beneath Disable On, test Telephone. We can go away it enabled on a pill as a result of it really works the similar as a desktop. Click on at the again arrow within the higher left of the modal.

• Disable On: Telephone

Subsequent, click on at the settings icon for the 3rd column.

Cross to the Complicated tab, scroll to Visibility, and disable it on Telephone. Click on at the inexperienced test on the backside or click on the go back arrow on the most sensible.

• Disable On: Telephone

Shut the modal and save your adjustments.

Clickable Telephone Quantity

Because the telephone model of this sticky footer will simplest display the telephone quantity, I wish to make it clickable. This uses the telephone quantity staying at the display screen and creates a decision to motion. Click on at the settings for the Textual content module that has the telephone quantity.

We’ll make the quantity clickable for telephones simplest. Desktop and Pill may not be clickable. If you wish to have it clickable on desktop, then skip clicking at the icon.

Choose the Telephone icon. Choose the Textual content tab within the Frame content material editor and paste this HTML for a clickable telephone quantity:

<a href="tel:2553526258" taste="colour: black;">(255) 252-6258</a>

For my instance, I’m the use of the quantity that incorporates the template. Merely exchange the quantity with your personal. Since clickable hyperlinks robotically exchange to the default hyperlink colour, I’ve additionally added some inline CSS to switch the colour of the clickable hyperlink to black. Trade the colour through including the identify or hex code.

You want to additionally exchange the identify from Telephone to Click on to Name, or one thing identical.

In the end, shut your settings and save your structure.

Effects

Right here’s how our sticky Divi footer seems to be on a desktop and a telephone.

Desktop Sticky Divi Footer

Right here’s how our sticky Divi footer seems to be on a desktop.

Telephone Divi Sticky Footer

Right here’s how our sticky Divi footer seems to be on a telephone. The telephone quantity is clickable in this footer.

Finishing Ideas

That’s our have a look at find out how to make your Divi footer sticky the use of the Divi Builder’s sticky choices. All of the footer, or any part of the footer, will also be made sticky with a unmarried click on. The footer state choices permit the weather to appear other whilst they’re sticky. This opens up numerous design choices for sticky footers.

We wish to listen from you. Have you ever used Divi’s sticky choices to make your Divi footer sticky? Tell us about your enjoy within the feedback underneath.

The submit How to Make Your Footer Sticky with Divi gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more