Table of contents

Create website footer with Divi

Create a professional website footer with the Divi Builder - 100% suitable for beginners

Create a professional footer for your WordPress website with the Divi Builder. This detailed tutorial shows you how to do it!

The good things come at the end. Where there is an end, there is always a beginning! And vice versa, where there is a beginning, there is always an end. Of course, this is true not only for life, but also for websites. Every successful website today has a header and an end, the so-called website footer. In between is the content. And it is the footer that we are dealing with today.

Better said, today we would like to show you how you can easily and quickly create a website footer in Divi with the Divi Builder.

Website Footer with Divi Example

You're probably wondering why we create the footer in Divi Builder and not in the Customizer? Good question. There is an even better answer. In contrast to the Customizer, you have much more design freedom (graphically and functionally) with the Divi Builder. What's more, you can dynamically add the footer as a global element to all your pages/posts. This means that when you have finished designing your page, the footer remains, while the page content is displayed as expected. You can also hide the footer for specific pages/posts, export it as a single element and import it into other installations, animate elements within the footer, etc. Your design options for your website footer here are much greater.

Why is a footer so important for your website?

A little theory to start with. A footer usually consists of two elements: the footer and the sub-footer.

Footer and sub footer of a website

You're probably wondering what goes into the perfect footer/sub-footer?  

There are no limits to what you can do. But there are a few elements that you will find again and again in most footers in this world.

For example, it is recommended to use the following elements for a professional website footer:

  • Call-to-action e.g. for a newsletter
  • Menu
  • Contact
  • Service area
  • Social Media Buttons
  • Payment providers you work with
  • Confidence-building logos, such as test marks, quality seals, etc.
  • etc.

Speaking of which, mandatory information also belongs in every proper footer:

  • Data protection
  • Imprint
  • AGB
  • Terms of payment
  • Revocation options

Enough with the theory around website footers. Now let's get started.

First Steps - Installing Divi

Before we start, Divi should already be installed and set up. We'll tell you exactly how to do this in our article about installing the Divi theme and in our instructions for configuring the Divi Customizer correctly.

Done already? Super.

Setting up the Website Footer in Divi Builder

Divi Builder Create Website Footer

Add global footer

First of all, we go to the "Divi" tab in the Dashboard and click on the tab called "Theme Builder".

Select Theme Builder

You will now see a tile called "Standard website template". Here you click on the menu item "Add global footer" and then on "Create global footer". This creates a footer from scratch. This is what it looks like when a new Global Footer has been added.

Global footer as website footer in Divi

Now just click on the pen.

Your website footer - the heart

You will now be taken to the Visual Builder. An empty section (blue frame) has already been created here. We use this as a footer. Later we will create a second section, which will then serve as a sub-footer. But first one step at a time.

First we change the section background colour of the website footer according to our wishes. Simply click on the cogwheel in the blue frame ("Section settings") and select the desired colour under Background by clicking on the pipette symbol.

Website Footer Design with Divi

In our case, an elegant dark grey (e.g. #3f3f3f).

Background colour of your website footer

Save. The window closes.

By clicking on the row settings (cogwheel in the green frame) we can now adjust the columns.

Columns of your website footer

We divide the row into 3 columns of equal size. To do this, we add 2 more columns under Column Structure. To do this, click on the plus sign.

Then save the whole row with all columns. Close window.

Divi Builder line for Footer Website

Contact area in the website footer - almost always included

The first column in our example will serve as the contact column, where all contact details and opening hours are located. Here we add a new text module by clicking on the grey plus sign within the first column.

New module for website footer

A window opens. Scroll all the way down and then click on "Text".

Text Module Divi Footer Website

The contact details can be entered using the text editor under "Content - Text".

Contact details in website footer

Here is a sample text that you are welcome to use and modify for your own purposes:


Contact

Do you need help?

Contact our support staff if you have questions that you cannot find the answer to here.

Office hours

Monday to Friday 9 a.m. to 8 p.m.

Saturday and Sunday 9 a.m. to 6 p.m.

Telephone number

012345/123456

Address

Frei & Freitag - Agency for all kinds of things

Sample street 22

12345 Sample city

Germany


Then confirm. Done.

As far as the formatting of your texts is concerned, if everything is set up correctly in the Customizer, the formatting from the Customizer should take effect. Headings can be marked as H1-H6 directly in the text editor.

Create Footer Website with Divi

As an alternative to the Customizer, you can also use your own formatting under "Design - Text" or "Design - Headings".

Formatting in Divi for your footer

We save everything and close the window.

The second column: Payment methods & menu

And we turn to the next column of your website footer. Here we would like to integrate two areas. Firstly, we would like to include a menu and secondly, an area with icons of the payment methods we offer. Let's start with the payment methods. For our example we use three payment methods. PayPal, GiroPay and SEPA direct debit. We now go to the second column and add a new text module and three image modules by clicking on the grey plus sign.

Payment methods in website footer

Then save. The whole thing should now look like this.

First Steps Website Footer

In the settings of our text module, we assign a heading with the name "Payment methods" and confirm the process.

Now we click on the first cog (settings) in the first image module to add our icon.

Under the tab "Image" we can upload our icon. Then save it.

Examples Website Footer

We repeat this twice for the other two icons. Now all the icons are in, but not necessarily in the desired size. To bring all icons to the same size, we go back to the individual settings of our three image modules under "Design - Adjust Size" and adjust the height. In our case 30px.

Edit Global Footer Divi Builder

We also adjust the lower margin under "Design - Spacing". Here we assign 10px under "Outer space (Margin) - Bottom". Save. We do the same for the other two images. You can also simply copy the settings of the module using the three dots of the module, then select Copy module styles and insert the module styles in the next module using the three dots.

Now we turn to the menu that we want to insert under the payment methods.

First of all, we give the menu a new title line with the caption "More". To do this, we create a new text module directly under the three image modules and assign a heading. Save. Close window.

Then it's time for the actual menu. It can be said that the menu is controlled via WordPress. We will show you how this works in our little excursus.


Excursus: Create a menu in WordPress and integrate it as a widget in the footer

The most convenient way is to create a new menu under "Design - Menu". You will find the tab in the WordPress menu. Simply click on "create a new menu" and give the menu an easy-to-remember name. In our example, we call it the footer menu. Then we assign the menu to a position in our theme. And you guessed it, of course our brand new menu belongs in the footer menu. Now select the appropriate pages for the menu. Save under "Save menu". That's it.

Create menu for website footer

Then we click on "Design - Widgets" in the WordPress menu. We open the tab "Footer area #1" and add a navigation menu (at the very bottom) by clicking on the plus sign - "Browse all". Here we can give it a title and select our previously created menu from the drop-down list. We save the whole thing by clicking on the "Update" button at the top right.

Menu for footer area

Now we jump back to the footer in our Divi Theme Builder.

We add a new module with the name Sidebar at the desired position under the title line with the title "More" by clicking on the grey plus sign.

A new window opens.

We select our previously created widget named Footer Area #1 from the drop down list.

The menu is now displayed. The appearance can be controlled under "Design - Bodytext".

The vertical line next to the menu can be hidden under "Design - Layout - Remove border separator".

Save.

Close the window. Et voilà and the second column is ready.

Last but not least - The contact form

In the third column for the website footer we dedicate ourselves to the integration of a contact form. We click on the grey plus sign in the third column and add a new text module. This serves as the heading for our contact form.

As in column 2, we now place a heading here, in this case "Write to us".

Then save.

Close window.

Now we add a new module (simply click on the grey plus sign) - the actual contact form module. Form fields can be added or adapted via "Content" in the settings. For our example, it looks like this.

Contact form of your website footer

Clicking on the gearwheel symbol within the individual fields opens a new window "Field settings". Here you can go to the "Field options" section. And under "Type", for example, insert a checkbox* as used for contact forms within the framework of data protection. Then just confirm.

Observe DSGVO contact form footer

* Note on the subject of the GDPR: Even though this tutorial is more of a technical nature, it is important to also deal with the legal aspects of contact forms. Therefore, the Data Protection Regulation (DSGVO) applies to contact forms. Therefore, before publishing your contact form, please check whether the requirements of the DSGVO are met.

You can find helpful tips at https://www.datenschutz.org/kontaktformular/ or from your legal advisor.

Back in the settings of the contact form under "Content - Email address" you can enter your email address to which enquiries should be sent.

Under "Design - Fields" you also have the option of customising your contact form. For our example, we set the field font colour to white. As we have already adjusted the button style in the Customizer under "Customizer - Buttons (Button) - Style of the button (Button) & Style of the button (Button) on hover", the styling for the button is not required. You can access the Customizer in the WordPress menu under "Design - Customizer".

Design buttons for contact form footer

Alternatively, if you prefer to customise your button, you can do so in the Divi Theme Builder within your contact form module under "Design - Button".

Customise style in Divi

What would a website footer be without a sub-footer?

Mandatory details of a footer are mandatory

Of course, we would like to add a sub-footer to our website footer. Here we integrate necessary information (such as imprint, data protection, etc.) for our site.

A tip: The IHK Wiesbaden has summarised the most important information on the topic of mandatory information for websites. You can access the article here.

This time we do not integrate our sub-footer menu with our mandatory information via a widget, but use the Divi menu module. We create our menu in advance in WordPress under "Design - Menus" (see excursus).

Then we switch to our theme builder in Divi. In order to add this menu, we open the settings of our Global Footer to add a Sub-Footer. Our previously created footer opens. By clicking on the blue plus sign, we create a new section directly under our existing menu.

Website Footer Section

Here we assign the setting "Regular", select a single-column layout for "New row" and add a new module with the name "Menu".

Then we select our previously created menu in the drop-down list under "Content - Menu". Save. Close window.

We go back to the section settings by clicking on the cogwheel in the blue frame.

Here we change the background colour under "Content - Background" to a darker grey, in our case (#212121).

We do the same with the background colour of the menu, which can be found in the settings of the menu module (click on the gearwheel symbol in the grey frame) under "Content - Background". Again #212121.

Under "Design - Layout" we set the menu centred and under "Design - Spacing" we assign a lower outer space of 15px. Save and close.

The copyright notice must also be included in the footer.

Copyright notice in the website footer

What else belongs to the sub-footer is the copyright notice. In order not to adjust the year in the copyright notice every year, there is a great function in Divi that takes care of the whole thing for you - dynamic content. And that's what we would like to show you here.

We now insert a new text module under the menu with the mandatory data. We click on the following symbol with the name "Use dynamic content".

Dynamic content for global footer website

This is what the icon for integrating dynamic content looks like.

Divi Theme Dynamic Content Icon

A new menu opens. Here we click on "Current date".

We enter the following text in the "Before" field:

" © Copyright "

In the "After" field, enter this text:

"- Copyright notice"

Where copyright notice stands for your own individual notice. For a clean reference, we recommend that you clarify the exact wording with your legal advisor. We change the date format to custom. This should actually be "Custom" and was not translated correctly. Under "Custom Date Format" we enter the letter "Y". This is the abbreviation for the current year.

Create copyright notice dynamically in Divi Builder

After that, the whole thing looks like this.

© Copyright 2022 - Copyright notice

If the spaces are not displayed correctly, you can adjust them in the "Before" and "After" fields.

We align the text centred under "Design - Text - Text alignment".

Mmm. That's it.

Unfortunately, no. We have only worked on the desktop version so far. It is also important that our website footer looks smart in tablet and mobile view. To achieve this, we now switch to the tablet view. The best way to do this is to click on the tablet symbol in the grey menu at the bottom left.

You will probably find that your menu with the mandatory information is displayed as a hamburger menu.

How can this be solved? With a simple code snippet you can change this display in the website footer.

First, we recommend assigning an ID for your menu module under "Advanced - CSS ID & Classes". We have named the ID "nohamburger" here as an example. You are also welcome to assign your own ID in lower case, without # and without spaces. Save. Close window.

Prevent Hamburger Menu in Divi

Then go out of the Builder and open the Divi settings under "Divi - Theme Options".

Here you select the tab "General - General" and scroll all the way down, where you will find an input field called "Own CSS".

CSS Code Hamburger Menu Divi

Here you can enter the following code:


@media (max-width: 980px) {

     #nohamburger.et_pb_menu .et_mobile_nav_menu {

          display: none;

     }

#nohamburger.et_pb_menu .et_pb_menu__menu {

          display: block;

     }

}


Feel free to replace #nohamburger with your own ID that you used in the previous step.

After that, the last step is to check the mobile view of your website footer.

If you find the font in the mobile view too large, you are welcome to adjust the font size in the individual modules. However, make sure that you are in the correct view within the respective settings. You can find this out by clicking on the phone icon with the mouse.

Phew, you've done it. And you should now be able to admire your own website footer.

Conclusion on the individual website footer

As you can see, it takes a little effort to create a custom website footer with Divi.

Effort that is worthwhile from my point of view. By putting everything that is important for your users in the website footer, you have the opportunity to get more out of your website.

If you want to learn more or have any questions, feel free to leave a comment. We would love to hear from you.

Share article:

Facebook
Twitter
LinkedIn
WhatsApp
Reddit
XING

About the guest author

Meriem Benois

What has developed over the years from curiosity and passion, Meriem Benois has made her profession. Since 2021, she has been a web designer with heart and soul, founder and head of the agency Raster & Pixel, which specialises in WordPress sites for coaches, trainers, consultants and service providers. She not only creates websites with the popular Divi theme but also offers support for Divi for her clients.

Similar articles

Write a comment

Your email address will not be published.