How to create a Footer in Divi –

One of the great advantages that we have when we are creating a website with Divi or with a theme that allows us to add custom templates is the ability we have to add customizations to our design without the need to know code or modify the code of our theme itself. Yes. How can it be to create a footer in Divi

Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training

Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days

Divi is one of the themes that allow us to add this type of templates through the theme generator options, in this article we will see how we can create one of these custom templates to create a footer in WordPress.

What are custom templates in Divi?

A template is a custom design that we can add to our website, which means that any template we create for either an article, the products page or our store page will be applied globally throughout our website.

In this way, when creating a template for the footer, for example, it will replace the current design with the one we are designing for our website.

This is how we can have different custom designs for our website, either to or for .

Now let’s get to work, the first thing we need to do is create our custom template for the footer in Divi, for this we have to access Divi Theme Generator and click on the options indicated Edit global footer.

If you have not created a global footer added, you can click on the option that indicates Add Global Footer and create your new template.

Once we have clicked on the options to create a new template in Divi, the Divi constructor will begin to load where we will begin to create our new design.

Before continuing, let’s see the design that we will be applying to our Divi footer, remember that you can substitute the colors for your website so that you can customize your footer as you wish.

Once we are clear about what our footer design will look like in Divi, the first thing we need to add is the background color to the main section of our footer.

For this we will click on the configuration options of the main section that loads automatically in Divi and we will open the main configuration options of the section.

Within the configuration sections of our section we will add a background color by selecting background gradient and configuring the colors of our brand.

The background settings are:

• Gradient type: linear
• Gradient Direction: 48deg
• RepeatGradient: Nope
• GradientUnit: percentage
• Background image: Nope

Once we have our background configured, the next thing is to add our Row with 5 columns that will contain our widgets with the information of our footer.

Very well, we already have the first part of our footer created, now comes the next part which will be to add each of the modules that will have the information of our footer.

In this case, in our design we have established specific information that we will add, however, you can configure and add the information that you consider necessary in each of the columns of the Divi footer.

Within the first column in our design we will add our logo, you can select it dynamically with Divi or simply add an image module to add the logo, then you can see the two forms and select the one that best suits the design you want to add .

Adding the logo dynamically in the divi footer:

Adding logo by uploading an image to our website:

The following is where we will have the information of our Company, location and information, to add this information the most recommended is to add it directly from the WordPress widgets section, so we will do this section in two parts.

The first thing we will do is save all the changes to our template and exit to the main WordPress dashboard.

After saving the changes we will go to the menu appearance where we will create the main menus for “The company” and “Information”

If you have reached this point I am sure that you have managed to add widgets to your footer in Divi, the next thing is to access the Appearance section again but instead of going to the menu we will select Widgets.

Within the widgets we will use two main widgets:

• Navigation menu: this widget will allow us to add the menus that we have just created.
• Text: With this widget we can add the location information of our website easily and quickly.

Since we have configured our widgets we need to return to the Divi theme generator from the section of Divi Theme Generator and edit again the footer template we are creating.

Within the following columns of our footer we will add the Divi module called Sidebar, with this module we will be able to select each widget that we have configured and assign it to each section of the column that we want to display it.

The Divi module allows us to display the sidebars or widgets that we already have previously configured within the main options of the widgets in WordPress.

Once we have added our widgets within our Divi template we need to add the content of our last column, in this case we will be adding our icons, where we will configure the profiles of our networks, for this we will be using the module “Follow on social media” available in the Divi builder.

The only thing we will have to do is add which are the social networks in which we have a profile created and configure the links as well as the styles so that they adapt to our design, keep in mind that before we need to add the title of our column so that fit our design.

The title of the column “Follow us” we can add it with the text module available in Divi by configuring the following styles:

• Font text: Montserrat
• Text colour: #ffffff
• Text size: 18px
• Text Alignment: left

Check each step in the following image:

Once we have configured the settings of each widget in our footer with its content, the next thing is to add the copyright in the Divi footer

The copyright is the text that usually appears at the bottom of the page and which helps us to attribute the authorship of the content of our website, it is generally composed of the copyright symbol © and the date of creation as well as the current year where we are.

To add the copyright to our website, the first thing to do is to add a new row at the bottom of our widgets.

Once we have our new row added, let’s configure the separation space between them, for this you must access the configuration options of the new row and go to the separation designinside this set the margin and padding values ​​to 0px.

This will allow us to assign the correct space between each row and the main section, after adding these settings the next thing will be to add a text module where we can incorporate the information about the authorship of our website.

The design adjustments that we will add to the copyright text will be the following:

• Source text: Montserrat
• Color: #ffffff
• soft light text: Sure
• Ttext size: 14px;
• Text Alignment: centered

Once we save the changes we can review how our new footer is looking on our website.

As you can see we still need to add additional details so that our new footer is like our main design, we will add these additional details through which it will not allow us to give you these specific design details that we want to assign, don’t worry you can apply this code on your website so that the changes you want are applied as well.

To add these final styles you must access the section of Divi Theme Options General Custom CSS and paste the following CSS code that I share with you, with this code we can assign the style we want to all the titles of our widgets.

/* Add styling to widget titles*/ .et-l.et-l–footer .title { font-family: ‘Montserrat’, sans-serif; font-weight: 500; font-size: 18px; color: #ffffff; }

Finally if we want to have our footer in Divi the same as our design we will need to make some adjustments to the follow module in social media, which will allow us to add the correct style to the social network icons, to achieve this the first thing we have to do is to do is assign our main background color as the color of the network icons.

To achieve this we need to access the settings of the social networks module and in the design options assign the color of the main icons.

Once we have made this change, the next thing we need to do is access the section again. Divi Theme Options General Custom CSS and paste the following CSS code:

/* Change social media icon styles */ .et_pb_social_media_follow li a.icon { border-radius: 50px !important; background: #ffffff !important; }

Keep in mind always to save the changes made.

Once the changes are saved we can review the final result of our new footer

With this we can have our custom footer in Divi; however, we will be able to make some final adjustments to make our design much more precise, for this we will only have to adjust the separation of our main section a little.

If you want to make these adjustments, you just have to access the Divi Theme Generator and edit your custom footer template, then go into the main section settings and set the gap padding to 10px.

In this way we can have our new custom template for our footer in Divi of our website.

Divi is currently in charge of adjusting the elements that we add within the sections and rows that we add in our design, so these being on a mobile device or tablet are adjusted automatically.

However, if you want the elements to be centered for mobile devices you can add the following CSS code in the Divi custom CSS options that we have seen previously.

@media only screen and (max-width: 500px) { .et-l.et-l–footer { text-align: center; } .et-l.et-l–footer p { text-align: center; } }

This way we will have all the texts of our footer in Divi centered for mobile devices.

Conclusions:

Creating custom templates within Divi is something that can take a bit of work and effort, but this one is worth…