A sticky footer is an improbable strategy to display vital content material subject material on your visitors. The footer stays at the bottom of the show as they scroll in order that they always have easy get entry to to the content material subject material. This is ideal for contact wisdom, specific links, and additional. Fortunately, creating a sticky footer is easy with Divi. In this instructional, we’ll see one of the simplest ways to make one segment of your Divi footer sticky, and we’ll modify it another way for desktop and phone units.
Preview
Previous to we get started, let’s take a look at what we’ll assemble in this instructional.
Proper right here’s how our sticky Divi footer seems on a desktop.
Proper right here’s how our sticky Divi footer seems on a phone.
There are a number of advantages of the use of a sticky footer…
First, pages that don’t have enough content material subject material to fill the height of the show could have a floating footer by means of default. A sticky footer locks the footer at the bottom of the show, protective it from floating. This makes the internet web page look upper and no more distracting to readers.
Every other receive advantages is that it’s a great place to put calls to movement or wisdom that the patron can use at their fingertips. Contact wisdom, product sales commercials, banner commercials, and such a lot further can be located throughout the sticky footer. Phone numbers are in particular helpful for phones on account of you’ll be capable to cause them to clickable.
First, you’ll need a footer template to use with the Divi Theme Builder. You’ll be capable to assemble your own or get a free template from the Sublime Problems blog. Sublime Problems provides free header and footer templates that have compatibility a variety of the free structure packs available inside Divi. You’ll be capable to to find the footer templates by means of having a look the blog for “free footer” or “footer template”. Download your template and unzip the record.
For my examples, I’m the use of the free Header and Footer Template for Divi’s Estate Planning Layout Pack. I’m moreover the use of the landing internet web page from the Assets Planning structure pack for the internet web page content material subject material.
So as to add your footer template, transfer to Divi > Theme Builder throughout the WordPress dashboard. Click on at the Portability icon throughout the upper correct and choose Import all through the modal that opens. Next, click on on Choose Document and navigate on your JSON record on your laptop and choose it. In the end, click on at the button Import Divi Theme Builder Template at the bottom of the modal. Look forward to the template so as to add and save your settings.
You’ll be capable to edit the template from the Theme Builder on the backend or all through the Visual Builder on the front end.
I’m working on the front end so I can see the effects live to make sure it in reality works with the body of the internet web site. On the front end, choose Permit Visual Builder and scroll all of the approach all the way down to the footer, and choose Edit Footer Template.
We will make one segment of the footer sticky. This segment accommodates the deal with, phone, and e-mail wisdom. We’ll make it smaller while it’s throughout the sticky state and we’ll make different adjustments for the desktop and footer. Hover over the segment that we wish to make sticky and choose the settings icon.
Choose the Complicated tab and scroll all of the approach all the way down to Scroll Effects. This number one surroundings is Sticky Position. Click on on on the dropdown box and choose Keep on with Bottom. This will likely permit the sticky possible choices all over the segment.
Next, transfer to the Design tab and scroll all of the approach all the way down to Spacing. It will have to already have the padding for the Best and Bottom in place, but if it isn’t there, add 30px to every.
- Padding: 30px, Best and Bottom
Hover over the fields to turn quite a lot of possible choices. Click on on on the pin icon. This opens the sticky adjustments for this surroundings.
You’ll see a desktop icon and a pin icon. The desktop icon might be vigorous. Click on on on the pin icon to keep an eye on the padding for the sticky state of the segment. Add 0px for the Best and Bottom.
- Sticky Padding: 0px, Best and Bottom.
You’ll be capable to already see the segment is shorter than it was once. This will likely allow the segment to look smaller when it’s outdoor of its segment and then expand to its commonplace dimension when it locks into place throughout the footer. This is all we need to do for the desktop settings. Tablet will automatically follow the ones settings.
We’ll make some changes to the footer’s design for the Phone. Hover over the row and click on at the settings icon.
Next, we’ll make adjustments to two of the columns. Click on at the settings icon for the principle column.
Choose the Complicated tab and scroll all of the approach all the way down to Visibility. Beneath Disable On, check Phone. We will move away it enabled on a tablet on account of it in reality works the identical as a desktop. Click on on on the once more arrow throughout the upper left of the modal.
- Disable On: Phone
Next, click on on on the settings icon for the third column.
Transfer to the Complicated tab, scroll to Visibility, and disable it on Phone. Click on on on the green check at the bottom or click on at the return arrow on the most efficient.
- Disable On: Phone
Close the modal and save your changes.
Clickable Phone Amount
Given that phone style of this sticky footer will absolute best show the phone amount, I wish to make it clickable. This makes use of the phone amount staying on the show and creates a choice to movement. Click on on on the settings for the Text module that has the phone amount.
We’ll make the volume clickable for phones absolute best. Desktop and Tablet is probably not clickable. If you want to have it clickable on desktop, then skip clicking on the icon.
Choose the Phone icon. Choose the Text tab throughout the Body content material subject material editor and paste this HTML for a clickable phone amount:
(255) 252-6258
For my example, I’m the use of the volume that comprises the template. Simply exchange the volume with your own. Since clickable links automatically exchange to the default link color, I’ve moreover added some inline CSS to switch the color of the clickable link to black. Business the color by means of together with the determine or hex code.
You need to moreover exchange the determine from Phone to Click on directly to Title, or something identical.
In the end, close your settings and save your structure.
Results
Proper right here’s how our sticky Divi footer seems on a desktop and a phone.
Proper right here’s how our sticky Divi footer seems on a desktop.
Proper right here’s how our sticky Divi footer seems on a phone. The phone amount is clickable on this footer.
Completing Concepts
That’s our check out one of the simplest ways to make your Divi footer sticky the use of the Divi Builder’s sticky possible choices. The entire footer, or any a part of the footer, can be made sticky with a single click on on. The footer state possible choices allow the elements to look different while they’re sticky. This opens up numerous design possible choices for sticky footers.
We wish to pay attention from you. Have you ever ever used Divi’s sticky possible choices to make your Divi footer sticky? Let us know about your experience throughout the comments below.
The put up How to Make Your Footer Sticky with Divi appeared first on Elegant Themes Blog.
0 Comments