Do you have a webpage that has just a little bit of content and your footer then ends up in the middle of the page? Not only does that ruin the flow of your website, but I also find it aggravating, to say the least. With Divi’s Theme Builder, there is a simple solution and it also gives you the ability to custom design your footer, which I love.

Let’s get started

Step 1: Open the Divi Theme Builder and select “Add Global Footer”.

Step 2: Select Build Global Footer.

Step 3: Once the Template Layout Editor opens, select “Build From Scratch”.

Step 4: When building a fixed footer, you can have up to three (3) columns. Add the number of columns you wish.

Step 5: In order for the fixed row to sit in the correct place, you will need to add a height, as well as padding to the top and bottom to the Row Settings. An example:

• Height: 85 px
• Padding: 0px top and 0px bottom

Step 6: Select your background color.

Step 7: Next set the Size and Spacing you desire. An example (this all depends on the number of columns you’ve selected and your design:

• Gutter Width: 2
• Width 100%
• Max Width 100%
• Padding: Top 0px, Bottom 0px, Left 2%, Right 2%

Custom CSS – a must

In order for the fixed footer to work and match the height of the parent section and the space at the bottom of the page properly contained the row, you will need to add the following CSS to the row’s main element under the Advanced tab:

For the Desktop

height: inherit !important;
display: flex;
align-items: center;

For the Phone

height: inherit !important;
display: block;

Step 8: Now we will set the fixed positing. Under the Advanced tab in Row Settings, on the drop-down menu for Position select “Fixed” and for the Location select the middlebox at the bottom.

Click save and your footer will now “float” to the bottom no matter how much content you have on a page.