![\"Website](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Website-Footer-mit-Divi-Beispiel-1024x462.png\")
<\/figure>\n\n\n\nYou're probably wondering why we create the footer in the 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 & functionally) with the Divi Builder. What's more, you can add the footer dynamically as a global element to all your pages\/posts. This means that when you have finished designing your page, the footer will remain, while the page content will be displayed as expected. You can also hide the footer for certain 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<\/strong> here are significantly larger.<\/p>\n\n\n\n A bit of theory to start with. A footer usually consists of two elements Footer<\/strong> and the Sub-Footer<\/strong>.<\/p>\n\n\n\n You're probably wondering what belongs in the perfect footer\/sub-footer? <\/p>\n\n\n\n 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 the world.<\/p>\n\n\n\n For example, the following elements are recommended for a professional website footer<\/strong> to use:<\/p>\n\n\n\n By the way, mandatory information also belongs in every proper footer:<\/p>\n\n\n\n Enough theory about website footers. Let's get started.<\/p>\n\n\n\n Before we start, you should have Divi installed and set up. We will tell you exactly how to do this in our article about the installation of the Divi Theme<\/a> and in our guide to the correct configuration of the Divi Customizer<\/a>.<\/p>\n\n\n\n Already done? Super.<\/p>\n\n\n\n First of all, we go to the \"Divi\" tab in the dashboard and click on the tab called \"Theme Builder\".<\/p>\n\n\n\n You will now see a tile called \"Default website template\". Here you click on the menu item \"Add global footer\" and then on \"Create global footer\". This will create a footer from scratch. This is what it looks like when a new global footer has been added.<\/p>\n\n\n\n Now just click on the pen.<\/p>\n\n\n\n You will now be taken to the Visual Builder. An empty section (blue frame) has already been created here. We will use this as the footer. Later we will create a second section, which will then serve as a sub-footer. But first, one step at a time.<\/p>\n\n\n\n First, we change the section background color of the website footer according to our wishes. Simply click on the cogwheel in the blue frame (\"Section settings\") and select the desired color under Background by clicking on the pipette symbol.<\/p>\n\n\n\n In our case, an elegant dark gray (e.g. #3f3f3f).<\/p>\n\n\n\n Save. The window closes.<\/p>\n\n\n\n We can now adjust the columns by clicking on the row settings (cogwheel in the green frame).<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Then save the entire row with all columns. Close the window.<\/p>\n\n\n\n In our example, the first column 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 gray plus sign within the first column.<\/p>\n\n\n\n A window will open. Scroll all the way down and then click on \"Text\".<\/p>\n\n\n\n The contact details can be entered using the text editor under \"Content - Text\".<\/p>\n\n\n\n Here is a sample text that you are welcome to use and modify for your own purposes:<\/p>\n\n\n\n Contact us<\/p>\n\n\n\n Do you need help?<\/p>\n\n\n\n Please contact our support staff if you have any questions that are not answered here.<\/p>\n\n\n\n Office hours<\/p>\n\n\n\n Monday to Friday 9 a.m. to 8 p.m.<\/p>\n\n\n\n Saturday and Sunday 9 am to 6 pm<\/p>\n\n\n\n Phone number<\/p>\n\n\n\n 012345\/123456<\/p>\n\n\n\n Address<\/p>\n\n\n\n Frei & Freitag - Agency for all kinds of things<\/p>\n\n\n\n Musterstr. 22<\/p>\n\n\n\n 12345 Sample city<\/p>\n\n\n\n Germany<\/p>\n\n\n\n Then confirm. Done.<\/p>\n\n\n\n As far as the formatting of your texts is concerned, if everything is set correctly in the Customizer, the formatting from the Customizer should take effect. Headings can be marked as H1-H6 directly in the text editor.<\/p>\n\n\n\n As an alternative to the Customizer<\/strong> you can also use your own formatting under \"Design - Text\" or \"Design - Headings\".<\/p>\n\n\n\n We save everything and close the window.<\/p>\n\n\n\n And let's turn to the next column of your website footer. We would like to integrate two areas here. 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 gray plus sign.<\/p>\n\n\n\n Then save. The whole thing should now look like this.<\/p>\n\n\n\n In the settings of our text module, we assign a heading with the name \"Payment methods\" and confirm the process.<\/p>\n\n\n\n Now we click on the first cogwheel (Settings) in the first image module to add our icon.<\/p>\n\n\n\n We can upload our icon under the \"Image\" tab. Then save it.<\/p>\n\n\n\n We repeat this twice for the other two icons. Now all the icons are there, but not necessarily in the desired size. To make all icons the same size, we go back to the individual settings of our three image modules under \"Design - Set size\" and adjust the height. In our case 30px.<\/p>\n\n\n\n We also adjust the bottom margin under \"Design - Space\". Here we assign 10px under \"Outside distance (Margin) - Bottom\". Save. We do the same for the other two images. You can also simply select the module settings via the three dots of the module, then Copy module styles and paste the module styles into the next module via the three dots. First of all, we give the menu a new title bar with the label \"More\". To do this, we create a new text module directly below the three image modules and assign a heading. Save. Close window.<\/p>\n\n\n\n Then it's on to the actual menu. It can be said that the menu is controlled via WordPress. We will show you how to do this here in our short excursus.<\/p>\n\n\n\n The most convenient way is to create a new menu under \"Design - Menu\". You can find the tab in the WordPress menu. Simply click on \"Create a new menu\" and assign an easy-to-remember name for the menu. In our example, we'll call it 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 relevant pages for the menu. Save under \"Save menu\". Done.<\/p>\n\n\n\n Then we click on \"Design - Widgets\" in the WordPress menu. We open the tab \"Footer area #1\" and add a navigation menu (at the bottom) by clicking on the plus sign - \"Browse all\". Here we can assign 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.<\/p>\n\n\n\n Now let's jump back to the footer in our Divi Theme Builder.<\/p>\n\n\n\n We add a new module with the name Sidebar in the desired position under the title bar with the title \"More\" by clicking on the gray plus sign.<\/p>\n\n\n\n A new window will open.<\/p>\n\n\n\n We select our previously created widget with the name Footer area #1 from the drop-down list.<\/p>\n\n\n\n The menu is now displayed. The appearance can be controlled under \"Design - Body text\".<\/p>\n\n\n\n The vertical line next to the menu can be hidden under \"Design - Layout - Remove border separator\".<\/p>\n\n\n\n Save.<\/p>\n\n\n\n Close the window. Et voil\u00e0 and the second column is ready.<\/p>\n\n\n\n In the third column for the website footer, we dedicate ourselves to the integration of a contact form. We click on the gray plus sign in the third column and add a new text module. This serves as the heading for our contact form.<\/p>\n\n\n\n As in column 2, we now place a heading here, in this case \"Write to us\".<\/p>\n\n\n\n Then save.<\/p>\n\n\n\n Close window.<\/p>\n\n\n\n Now we add a new module (simply click on the gray plus sign) - the actual contact form module. Form fields can be added or customized via \"Content\" in the settings. For our example, it looks like this.<\/p>\n\n\n\n Click on the cogwheel symbol within the individual fields to open a new \"Field settings\" window. Here you can navigate to the \"Field options\" area. And under \"Type\", for example, add a checkbox*, as used for contact forms in the context of data protection. Then just confirm.<\/p>\n\n\n\n * Note on the subject of GDPR<\/strong>Even if this tutorial is of a more technical nature, it is also important to deal with the legal aspects of contact forms. Therefore, the General Data Protection Regulation (GDPR) applies to contact forms. Before publishing your contact form, please check whether it complies with the requirements of the GDPR.<\/p>\n\n\n\nWhy is a footer so important for your website?<\/h2>\n\n\n\n
![\"Footer](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Footer-und-Sub-Footer-einer-Website-1024x358.png\")
<\/figure>\n\n\n\n\n
\n
First steps - Installing Divi<\/h2>\n\n\n\n
Setting up the website footer in the Divi Builder<\/h2>\n\n\n\n
![\"Divi](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Divi-Builder-Website-Footer-erstellen-1024x501.png\")
<\/figure>\n\n\n\nAdd global footer<\/h3>\n\n\n\n
![\"Select](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Theme-Builder-auswaehlen.png\")
<\/figure>\n\n\n\n![\"Global](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Globale-Fusszeile-als-Website-Footer-in-Divi.png\")
<\/figure>\n\n\n\nYour website footer - the centerpiece<\/h3>\n\n\n\n
![\"Design](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Website-Footer-gestalten-mit-Divi-1024x104.png\")
<\/figure>\n\n\n\n![\"Background](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Hintergrundfarbe-deines-Website-Footers.png\")
<\/figure>\n\n\n\n![\"Columns](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Spalten-deines-Website-Footer.png\")
<\/figure>\n\n\n\n![\"Divi](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Divi-Builder-Zeile-fuer-Footer-Website.png\")
<\/figure>\n\n\n\nContact area in the website footer - almost always included<\/h4>\n\n\n\n
![\"New](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Neues-Modul-fuer-Website-Footer.png\")
<\/figure>\n\n\n\n![\"Text](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Text-Modul-Divi-Footer-Website.png\")
<\/figure>\n\n\n\n![\"Contact](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Kontaktangaben-in-Website-Footer.png\")
<\/figure>\n\n\n\n
\n\n\n\n
\n\n\n\n![\"Create](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Footer-Website-mit-Divi-erstellen.png\")
<\/figure>\n\n\n\n![\"Formatting](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Formatierungen-in-Divi-fuer-deinen-Footer.png\")
<\/figure>\n\n\n\nThe second column: Payment methods & menu<\/h4>\n\n\n\n
![\"Payment](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Zahlungsmethoden-in-Website-Footer-1024x105.png\")
<\/figure>\n\n\n\n![\"First](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Erste-Schritte-Website-Footer.png\")
<\/figure>\n\n\n\n![\"Website](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Beispiele-Website-Footer.png\")
<\/figure>\n\n\n\n![\"Edit](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Globale-Fusszeile-bearbeiten-Divi-Builder.png\")
<\/figure>\n\n\n\n
Now let's look at the menu that we want to add under the payment methods.<\/p>\n\n\n\n
\n\n\n\nExcursus: Creating a menu in WordPress and integrating it as a widget in the footer<\/h2>\n\n\n\n
![\"Create](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Menue-fuer-Website-Footer-erstellen-1024x350.png\")
<\/figure>\n\n\n\n![\"Menu](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Menue-fuer-Footerbereich-1024x310.png\")
<\/figure>\n\n\n\n
\n\n\n\nLast but not least - The contact form<\/h4>\n\n\n\n
![\"Contact](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Kontaktformular-deines-Website-Footer.png\")
<\/figure>\n\n\n\n![\"GDPR](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/DSGVO-Kontaktformular-Footer-beachten.png\")
<\/figure>\n\n\n\n
![\"Design](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Gestaltung-Buttons-fuer-Kontaktformular-Footer.png\")
<\/figure>\n\n\n\n![\"Customize](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Stil-anpassen-in-Divi.png\")
<\/figure>\n\n\n\n![\"Section](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Abschnitt-fuer-Website-Footer.png\")
<\/figure>\n\n\n\n![\"Copyright](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Copyright-Hinweis-im-Website-Footer.png\")
<\/figure>\n\n\n\n![\"Dynamic](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Dynamische-Inhalte-fuer-globalen-Footer-Website.png\")
<\/figure>\n\n\n\n![\"Divi](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Divi-Theme-Dynamische-Inhalte-Symbol.png\")
<\/figure>\n\n\n\n![\"Create](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Copyright-Hinweis-dynamisch-im-Divi-Builder-erstellen.png\")
<\/figure>\n\n\n\n![\"Prevent](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/Hamburger-Menue-in-Divi-verhindern.png\")
<\/figure>\n\n\n\n![\"CSS](\"https:\/\/wp-space.de\/wp-content\/uploads\/2022\/03\/CSS-Code-Hamburger-Menue-Divi-1024x257.png\")
<\/figure>\n\n\n\n