Fullscreen footers are interesting design parts. The fullscreen aspect of the design provides the entire attention to the footer. The tricky section, though, is making the footer fullscreen on different visual display unit sizes. It is going to get even trickier whilst you consider that many purchasers will view your web site at different zoom levels. Fortunately, it’s easy to make a fullscreen Divi footer using the Divi settings. In this article, we’ll see one of the best ways to make a small footer adapt to grow to be a fullscreen Divi footer irrespective of the visual display unit dimension or zoom degree.

Preview

Proper right here’s how our fullscreen Divi footer will look when we’re finished. I’ve integrated a header in my examples.

Fullscreen Divi Footer on Desktop

Proper right here’s our fullscreen Divi footer at the not unusual visual display unit dimension for a desktop.

Fullscreen Divi Footer on Phone

This shows how our footer will look on a phone.

Download a Divi Footer Template

First, you’ll need a footer template that’s shorter than the visual display unit. We can make larger it to fit the available space, irrespective of the shopper’s visual display unit dimension or zoom degree. For this educational, we want a template with one section. You’ll use a footer with a few sections, on the other hand you’ll want to switch all the rows into one section. We can make one section fullscreen.

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

You’ll to find additional footer templates throughout the Elegant Subjects blog. Merely search for “unfastened footer”. Whilst you’ve downloaded your footer template, unzip the document. You’ll upload the unzipped JSON document to the Divi Theme Builder.

Upload Your Fullscreen Divi Footer Template

Next, upload your JSON document to the Divi Theme Builder. Move to Divi > Theme Builder throughout the WordPress dashboard. Select Portability and click on at the Import tab throughout the modal that opens. Click on on Make a choice Report and navigate to the JSON document to your computer and select it.

After all, click on on Import Divi Theme Builder Templates. Sit up for the upload to complete and save the changes. You’ll edit the footer within the Theme Builder or on the front end.

Since this footer template is bigger than the visual display unit, I’ll delete the principle row to create a modified fashion of this footer. The only goal that is to have a footer that’s smaller than the visual display unit. Hover over the row you wish to have to delete and click on at the garbage can icon.

We’ve now a temporary footer template that doesn’t fill the visual display unit. This case shows our footer throughout the Divi Theme Builder. You’ll see that the bottom of the visual display unit is blank. Now, let’s turn this proper right into a fullscreen Divi footer.

Fullscreen Divi Footer Settings

Hover over the section’s settings and click on at the apparatus icon.

Select the Design tab. Scroll the entire method right down to Sizing and enter 100vh into the Min Best field. This allows the background to fill the visual display unit for any visual display unit dimension. I’ll give an explanation for this throughout the next section.

• Min Best: 100vh

You’ll see the background has already stuffed the visual display unit. On the other hand, the footer parts don’t appear to be targeted. This is at 100% visual display unit dimension.

The content material subject matter being off-center is a lot more evident if I zoom out. This is at 75% visual display unit dimension. The background however fills the visual display unit one of the best ways we want it to, on the other hand the content material subject matter isn’t targeted.

While however throughout the section’s Design tab, scroll the entire method right down to Spacing and add 15vh to the Perfect Padding. This gives enough padding to the easiest to heart the content material subject matter on any visual display unit dimension or zoom degree. Your padding amount would possibly vary depending on a few parts that we’ll speak about next.

• Padding Perfect: 15vh

Now, even at 75%, we have now a fullscreen Divi footer that amenities the footer parts.

Adjusting Your Fullscreen Divi Footer

That’s the only adjustments you’ll need: 100vh to the min-height and then add vh units to the easiest padding throughout the section. Depending on the footer’s content material subject matter best, it’s possible you’ll want to tweak the padding to heart your fullscreen Divi footer content material subject matter. You’ll moreover wish to consider whether or not or no longer or not you’re using a sticky menu. You’ll moreover add padding between the modules if sought after.

In regards to the Settings

Why 100vh? The vh size is a viewport unit. V stands for viewport. H stands for best. 100vh tells the viewport to turn at entire best. The viewport incorporates the entire visual display unit. This incorporates the space underneath the header menu if we use a sticky menu. To allow for the menu’s space, add padding to the easiest until the content material subject matter is concentrated.

The viewport moreover incorporates the take care of bar on a cell tool in browsers akin to Chrome and Safari. The ones scroll out of one of the best ways, on the other hand needless to say they can be visible.

Results

Proper right here’s how our fullscreen Divi footer seems to be like on a desktop and smartphone. I’ve left my sticky header in place for my examples.

Fullscreen Divi Footer on Desktop

Proper right here’s our Divi footer at the not unusual visual display unit dimension for a desktop. The background is fullscreen at any zoom degree and visual display unit dimension, and the content material subject matter remains targeted.

Fullscreen Divi Footer on Phone

This shows the footer on a phone. As long as the footer is smaller than the phone’s visual display unit, it’s going to conform to the visual display unit to create a fullscreen Divi footer. In several words, it’s going to make larger to fit, on the other hand it’s going to not cut back in dimension.

Completing Concepts

That’s our take a look at construction a fullscreen Divi footer. Any footer that’s shorter than the visual display unit can also be made fullscreen irrespective of the visual display unit dimension or zoom degree. The Min Best and Padding throughout the section will have to be the only adjustments you want. Depending on the content material subject matter of your footer, and the scale of your header, it’s possible you’ll want to make adjustments to the padding to heart the content material subject matter as it should be.

We wish to concentrate from you. Have you ever ever used this technique to create a fullscreen Divi footer to your web site? Let us know about your revel in throughout the comments below.

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

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more