How to create a cool footer with DIVI

The little details are what make a website something really cool. In this tutorial we are going to see how to make footers that are out of the ordinary and make our page something beautiful and different from what we usually have in the Footer.

Let's see how to make footers like the following:

To achieve this result we will use the DIVI templateIf you don't have it, I'll give you a discount coupon from 20% for the annual license or 10% for lifetime license.

If you want to try it for free, you have it available in the free premium area so you can try it.

If you are not subscribed to the Premium Zone you can give sign up for €10/month here

Here is the video tutorial:

Steps to follow:

Make the footer transparent

The first thing we are going to do is make the default footer transparent, to do this we go to the theme customizer —> Footer —> Bottom Bar —> Background Color and set the transparent color with the following command: rgba(0,0,0,0 ,XNUMX)

Depending on the color that we later put on the background, we will have to change the color of the text and the color of the social icon so that it looks good.

Create a new footer

We are going to create the new footer design from a page or post helping us with the Divi visual constructor and then we will save it as an element that we can reuse in all those places that we need.

To do this we create a page —> use Divi's visual builder —> use visual builder.

He will ask us how we want to start and we say build from scratch

It will ask us how many rows we want to add and we select 1

Now it will ask us the module that we want to select, here it is not necessary to use any.

It seems that we have not done much but now we have two elements that we can modify, the section and the row.

row settings

In the row settings we have to fill in the following fields in the Design tab —> Separation:

Custom Margin: 0px Top, 0px Bottom

Custom Padding (Desktop): 80px Top, 80px Bottom

Custom Padding (Tablet): 100px Top, 100px Bottom

Section Settings:

In the section settings we have to fill in the following fields in the Design tab —> Separation:

Custom Margin: base -55px

custom padding 0px Top, 0px Bottom

Now inside the section configuration we are going to dividers —> Basis

Divider style: We add the design that we like, in the previous image you can see the one that I have added.

Divider Color:: We choose the color we want

Divider Height: 120px(Desktop), 150px(Tablet), 150px(Smartphone)

Divider Horizontal Repeat: 0.9(Desktop), 0.5(Tablet),0.5(Smartphone)

Splitter Flip: Vertical

And now we have it almost almost ready but a little CSS code is missing so that the text is in front of the background.

To do this we go to the Advanced tab —> Custom CSS —> Main element and add:

z-index:0;

If you have come this far you have a beautiful footer that you can use at will.

To be able to reuse it, we only need to export it, for this we go over the options of the section and click Save Section to Library

Remember that if you do not have the DIVI template here you have a discount coupon from the 20% for the annual license or 10% for lifetime license.

If you want to try it for free, you have it available in the free premium area so you can try it.

If you are not subscribed to the Premium Zone you can give sign up for €10/month here

I hope you liked it 😉