Fullscreen footers are attention-grabbing design components. The fullscreen side of the design provides all the consideration to the footer. The difficult phase, regardless that, is making the footer fullscreen on other display screen sizes. It will get even trickier whilst you imagine that many customers will view your site at other zoom ranges. Thankfully, it’s simple to make a fullscreen Divi footer the use of the Divi settings. On this article, we’ll see the best way to make a small footer adapt to turn out to be a fullscreen Divi footer without reference to the display screen dimension or zoom degree.

Preview

Right here’s how our fullscreen Divi footer will glance after we’re completed. I’ve incorporated a header in my examples.

Fullscreen Divi Footer on Desktop

Right here’s our fullscreen Divi footer on the common display screen dimension for a desktop.

Fullscreen Divi Footer on Telephone

This displays how our footer will glance on a telephone.

Obtain a Divi Footer Template

First, you’ll desire a footer template that’s shorter than the display screen. We will be able to extend it to suit the to be had area, regardless of the person’s display screen dimension or zoom degree. For this instructional, we would like a template with one segment. You’ll use a footer with a couple of sections, however you’ll wish to transfer the entire rows into one segment. We will be able to make one segment fullscreen.

You’ll create the template from scratch or alter an present template. I can use the footer from the FREE Header and Footer Template for Divi’s Marina Layout Pack. This footer is already better than the display screen, so I can alter it for our instance.

You’ll in finding extra footer templates within the Chic Subject matters weblog. Simply seek for “unfastened footer”. While you’ve downloaded your footer template, unzip the record. You’ll add the unzipped JSON record to the Divi Theme Builder.

Add Your Fullscreen Divi Footer Template

Subsequent, add your JSON record to the Divi Theme Builder. Move to Divi > Theme Builder within the WordPress dashboard. Make a selection Portability and click on the Import tab within the modal that opens. Click on Make a choice Report and navigate to the JSON record for your laptop and choose it.

In any case, click on Import Divi Theme Builder Templates. Stay up for the add to finish and save the adjustments. You’ll edit the footer inside the Theme Builder or at the entrance finish.

Since this footer template is greater than the display screen, I’ll delete the primary row to create a changed model of this footer. The one purpose this is to have a footer that’s smaller than the display screen. Hover over the row you need to delete and click on the rubbish can icon.

We have now a brief footer template that doesn’t fill the display screen. This situation displays our footer within the Divi Theme Builder. You’ll see that the ground of the display screen is clean. Now, let’s flip this right into a fullscreen Divi footer.

Fullscreen Divi Footer Settings

Hover over the segment’s settings and click on the tools icon.

Make a selection the Design tab. Scroll all the way down to Sizing and input 100vh into the Min Top box. This permits the background to fill the display screen for any display screen dimension. I’ll provide an explanation for this within the subsequent segment.

• Min Top: 100vh

You’ll see the background has already stuffed the display screen. On the other hand, the footer components aren’t targeted. That is at 100% display screen dimension.

The content material being off-center is much more obvious if I zoom out. That is at 75% display screen dimension. The background nonetheless fills the display screen the best way we would like it to, however the content material isn’t targeted.

Whilst nonetheless within the segment’s Design tab, scroll all the way down to Spacing and upload 15vh to the Most sensible Padding. This provides sufficient padding to the highest to middle the content material on any display screen dimension or zoom degree. Your padding quantity might range relying on a couple of components that we’ll talk about subsequent.

• Padding Most sensible: 15vh

Now, even at 75%, we’ve a fullscreen Divi footer that facilities the footer components.

Adjusting Your Fullscreen Divi Footer

That’s the one changes you’ll want: 100vh to the min-height after which upload vh devices to the highest padding within the segment. Relying at the footer’s content material peak, you could wish to tweak the padding to middle your fullscreen Divi footer content material. You’ll additionally wish to imagine whether or not or no longer you’re the use of a sticky menu. You’ll additionally upload padding between the modules if wanted.

In regards to the Settings

Why 100vh? The vh size is a viewport unit. V stands for viewport. H stands for peak. 100vh tells the viewport to show at complete peak. The viewport contains all the display screen. This contains the distance underneath the header menu if we use a sticky menu. To permit for the menu’s area, upload padding to the highest till the content material is targeted.

The viewport additionally contains the deal with bar on a cellular tool in browsers reminiscent of Chrome and Safari. Those scroll out of the best way, however take into account that they are able to be visual.

Effects

Right here’s how our fullscreen Divi footer seems on a desktop and smartphone. I’ve left my sticky header in position for my examples.

Fullscreen Divi Footer on Desktop

Right here’s our Divi footer on the common display screen dimension for a desktop. The background is fullscreen at any zoom degree and display screen dimension, and the content material stays targeted.

Fullscreen Divi Footer on Telephone

This displays the footer on a telephone. So long as the footer is smaller than the telephone’s display screen, it’s going to adapt to the display screen to create a fullscreen Divi footer. In different phrases, it’s going to extend to suit, however it’s going to no longer scale back in dimension.

Finishing Ideas

That’s our take a look at development a fullscreen Divi footer. Any footer that’s shorter than the display screen will also be made fullscreen without reference to the display screen dimension or zoom degree. The Min Top and Padding within the segment must be the one changes you want. Relying at the content material of your footer, and the dimensions of your header, you could wish to make changes to the padding to middle the content material accurately.

We wish to listen from you. Have you ever used this way to create a fullscreen Divi footer to your site? Tell us about your enjoy within the feedback under.

The put up How to Build a Fullscreen Footer with Divi gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more