Das Gute kommt zum Schluss. Wo ein Ende ist, ist immer auch ein Anfang! Und umgekehrt gilt, wo ein Anfang ist, ist immer auch ein Ende. Das gilt natürlich nicht nur für das ganze Leben, sondern auch für Webseiten. Jede erfolgreiche Website heutzutage hat einen Kopfbereich (Header) und ein Ende, den sogenannten Website Footer. Dazwischen befindet sich der Inhalt. Und mit dem Footer beschäftigen wir uns heute.
Besser gesagt, möchten wir Dir heute zeigen, wie Du bequem und schnell einen Website Footer in Divi mit dem Divi Builder erstellen kannst.
Du fragst Dich wahrscheinlich, warum wir den Footer im Divi Builder und nicht im Customizer erstellen? Gute Frage. Dazu gibt es eine noch bessere Antwort. Im Gegensatz zum Customizer hast Du mit dem Divi Builder viel mehr Gestaltungsfreiheit (grafisch & funktional). Was noch dazukommt, ist, dass Du die Fußzeile dynamisch als globales Element zu all deinen Seiten/Beiträgen hinzufügen kannst. Das heißt, wenn Du Deine Seite fertig gestaltet hast, bleibt die Fußzeile erhalten, während der Seiteninhalt wie erwartet angezeigt wird. Du kannst die Fußzeile auch für bestimmte Seiten/Beiträge ausblenden, sie als einzelnes Element exportieren und in andere Installationen importieren, Elemente innerhalb der Fußzeile animieren, etc. Deine Gestaltungsmöglichkeiten deines Website Footers hier sind deutlich größer.
Warum ist ein Footer so wichtig für Deine Website?
Ein bisschen Theorie zu Beginn. Ein Footer besteht in der Regel aus zwei Elementen dem Footer und dem Sub-Footer.
Du fragst dich bestimmt, was in den perfekten Footer/Sub-Footer reingehört?
Dir sind da keine Grenzen gesetzt. Aber es gibt ein paar Elemente, die Du in den meisten Fußzeilen auf dieser Welt immer wieder finden wirst.
Zum Beispiel empfiehlt es sich, folgende Elemente für einen professionellen Website Footer zu nutzen:
- Call-to-Action z.B. für einen Newsletter
- Menü
- Kontakt
- Servicebereich
- Social Media Buttons
- Zahlungsanbieter, mit denen Du zusammenarbeitest
- Vertrauensbildende Logos, wie z.B. Prüfzeichen, Gütesiegel, etc.
- etc.
Apropos, Pflichtangaben gehören ebenfalls in jeden ordentlichen Footer hinein:
- Datenschutz
- Impressum
- AGB
- Zahlungsbedingungen
- Widerrufsmöglichkeiten
Genug mit der Theorie rund um Website Footer. Jetzt geht‘s los.
Erste Schritte – Installation von Divi
Bevor wir anfangen, sollte Divi bei Dir schon installiert und fertig eingerichtet sein. Wie das genau geht, das erzählen wir Dir in unserem Beitrag rund um die Installation des Divi Themes und in unserer Anleitung zur korrekten Konfiguration des Divi Customizer.
Schon erledigt? Super.
Einrichtung des Website Footer im Divi Builder
Globale Fußzeile hinzufügen
Zuallererst gehen wir im Dashboard auf den Reiter „Divi“ und klicken auf den Tab mit dem Namen „Theme Builder“.
Du siehst jetzt eine Kachel namens „Standard-Website-Vorlage“. Hier klickst Du auf den Menüpunkt „Globale Fußzeile hinzufügen“ und dann auf „Globale Fußzeile erstellen“. Dadurch erstellen wir eine Fußzeile von Grund auf neu. So sieht das aus, wenn eine neue Globale Fußzeile hinzugefügt wurde.
Jetzt nur noch auf den Stift klicken.
Dein Website Footer – Das Herzstück
Du gelangst nun in den Visual Builder. Hier ist bereits ein leerer Abschnitt (blauer Rahmen) angelegt. Diese nutzen wir als Footer. Später erstellen wir noch einen zweiten Abschnitt, die dann als Sub-Footer dient. Doch zuerst einen Schritt nach dem anderen.
Als erstes ändern wir die Abschnitts-Hintergrundfarbe des Website Footers nach unseren Wünschen. Einfach auf das Zahnrädchen im blauen Rahmen („Abschnittseinstellungen“) klicken und unter Hintergrund mit Klick auf das Pipettensymbol die gewünschte Farbe anwählen.
In unserem Fall ein elegantes Dunkelgrau (z.B. #3f3f3f).
Speichern. Das Fenster schließt sich.
Mit Klick auf die Zeileneinstellungen (Zahnrädchen im grünen Rahmen) können wir nun die Spalten anpassen.
Wir teilen die Zeile in 3 gleichgroße Spalten. Dazu fügen wir unter Spaltenstruktur noch 2 weitere Spalten hinzu. Klicke hierzu auf das Pluszeichen.
Danach die ganze Zeile mit allen Spalten speichern. Fenster schließen.
Kontaktbereich im Website Footer – fast immer enthalten
Die erste Spalte wird in unserem Beispiel als Kontaktspalte, wo sich sämtliche Kontaktangaben und Öffnungszeiten befinden, dienen. Hier fügen wir über einen Klick auf das graue Pluszeichen innerhalb der ersten Spalte ein neues Textmodul hinzu.
Es öffnet sich ein Fenster. Ganz nach unten scrollen und dann auf „Text“ klicken.
Mithilfe des Texteditors unter „Inhalt – Text“ lassen sich die Kontaktangaben einpflegen.
Hier ein Beispieltext, den Du gerne für Deine Zwecke verwenden und abändern darfst:
Kontakt
Benötigen Sie Hilfe?
Wenden Sie sich an unsere Support-Mitarbeiter, wenn Sie Fragen haben, auf die Sie hier keine Antwort finden.
Bürozeiten
Montag bis Freitag 9 bis 20 Uhr
Samstag und Sonntag 9 bis 18 Uhr
Telefonnummer
012345/123456
Adresse
Frei & Freitag – Agentur für alles Mögliche
Musterstr. 22
12345 Musterstadt
Deutschland
Danach bestätigen. Fertig.
Was die Formatierung Deiner Texte angeht, so sollte, wenn alles im Customizer korrekt eingestellt ist, die Formatierung aus dem Customizer greifen. Überschriften können direkt im Texteditor als H1-H6 ausgezeichnet werden.
Als Alternative zum Customizer kannst Du auch Deine eigene Formatierung unter „Design – Text“ bzw. „Design – Überschriften“ verwenden.
Wir speichern alles ab und schließen das Fenster.
Die zweite Spalte: Zahlungsmethoden & Menü
Und wenden uns der nächsten Spalte deines Website Footer zu. Hier möchten wir gerne zwei Bereiche integrieren. Zum einen möchten wir gerne ein Menü einbauen und zum anderen einen Bereich mit Icons von unseren angebotenen Zahlungsmethoden. Beginnen wir mit den Zahlungsmethoden. Für unser Beispiel nutzen wir drei Zahlungsmethoden. PayPal, GiroPay und SEPA Lastschrift. Wir gehen nun in die zweite Spalte und fügen ein neues Textmodul und drei Bildmodule bei Klick auf das graue Pluszeichen hinzu.
Dann abspeichern. Das Ganze sollte nun so aussehen.
In den Einstellungen unseres Textmoduls vergeben wir eine Überschrift mit dem Namen „Zahlungsmethoden“ und bestätigen den Vorgang.
Nun klicken wir auf das erste Zahnrädchen (Einstellungen) im ersten Bildmodul, um unser Icon hinzuzufügen.
Unter dem Reiter „Bild“ können wir unser Icon hochladen. Danach abspeichern.
Das wiederholen wir noch zweimal für die anderen beiden Icons. Nun sind alle Icons drin, aber nicht unbedingt in der gewünschten Größe. Um alle Icons auf die gleiche Größe zu bringen, gehen wir wieder in die einzelnen Einstellungen unserer drei Bildmodule unter „Design – Größe einstellen“ und passen die Höhe an. In unserem Fall 30px.
Ebenso passen wir auch den unteren Rand unter „Design – Zwischenraum“ an. Hier vergeben wir 10px unter „Außenabstand (Margin) – Unten“. Abspeichern. Das Ganze machen wir ebenso für die anderen beiden Bilder. Du kannst die Einstellungen des Moduls auch einfach über die drei Pünktchen des Moduls, dann Modul Styles kopieren auswählen und beim nächsten Modul über die drei Pünktchen die Modul Styles einfügen.
Nun widmen wir uns dem Menü, welches wir unter den Zahlungsmethoden einfügen möchten.
Zuallererst geben wir dem Menü eine neue Titelzeile mit der Beschriftung „Mehr“. Dafür erstellen wir ein neues Textmodul direkt unter den drei Bildmodulen und vergeben eine Überschrift. Speichern. Fenster schließen.
Danach geht es an das eigentliche Menü. Dazu lässt sich sagen, dass das Menü über WordPress gesteuert wird. Wie das geht, zeigen wir Dir hier in unserem kleinen Exkurs.
Exkurs: Menü in WordPress erstellen und als Widget in Footer integrieren
Am bequemsten ist es, wenn Du ein neues Menü unter „Design – Menü“ erstellst. Du findest den Tab im WordPress Menü. Einfach auf „erstelle ein neues Menü“ klicken und einen leicht zu merkenden Namen für das Menü vergeben. Wir nennen es in unserem Beispiel Fußzeilen Menü. Danach ordnen wir das Menü noch einer Position in unserem Theme zu. Und Du ahnst es, natürlich gehört unser nigelnagelneues Menü ins Footermenü. Jetzt die entsprechenden Seiten für das Menü auswählen. Abspeichern unter „Menü speichern“. Fertig.
Danach klicken wir im WordPress Menü auf „Design – Widgets“. Wir öffnen den Tab „Footerbereich #1“ und fügen über einen Klick auf das Pluszeichen – „Alle durchsuchen“ ein Navigationsmenü (ganz unten) hinzu. Hier können wir einen Titel vergeben und unser vorher erstelltes Menü aus der Dropdownliste auswählen. Wir speichern das Ganze, indem wir auf den Button rechts oben „Aktualisieren“ klicken.
Jetzt springen wir zurück zur Fußzeile in unserem Divi Theme Builder.
Wir fügen an der gewünschten Stelle unter der Titelzeile mit dem Titel „Mehr“ ein neues Modul mit dem Namen Seitenleiste durch Klick auf das graue Pluszeichen hinzu.
Es öffnet sich ein neues Fenster.
Wir wählen in der Drop Down Liste unser zuvor erstelltes Widget mit dem Namen Footerbereich #1 aus.
Das Menü wird jetzt angezeigt. Unter „Design – Bodytext“ lässt sich das Aussehen steuern.
Die vertikale Linie neben dem Menü lässt sich unter „Design – Layout – Umrandungstrenner entfernen“ ausblenden.
Speichern.
Fenster schließen. Et voilà und fertig ist die zweite Spalte.
Last but not least – Das Kontaktformular
In der dritten Spalte für den Website Footer widmen wir uns der Einbindung eines Kontaktformulars. Wir klicken auf das graue Pluszeichen in der dritten Spalte und fügen ein neues Textmodul hinzu. Dieses dient als Überschrift für unser Kontaktformular.
Wie auch bereits in Spalte 2 platzieren wir hier nun eine Überschrift, hier „Schreib uns“.
Danach abspeichern.
Fenster schließen.
Jetzt fügen wir ein neues Modul (einfach auf das graue Pluszeichen klicken) hinzu – und zwar das eigentliche Kontaktformularmodul. Über „Inhalt“ in den Einstellungen lassen sich Formularfelder ergänzen bzw. anpassen. Für unser Beispiel sieht das so aus.
Bei Klick auf das Zahnrädchen Symbol innerhalb der einzelnen Felder öffnet sich ein neues Fenster „Feld Einstellungen“. Hier kannst Du den Bereich „Feld-Optionen“ ansteuern. Und unter „Typ“ zum Beispiel ein Kontrollkästchen*, wie sie für Kontaktformulare im Rahmen des Datenschutzes verwendet wird, einfügen. Danach nur noch bestätigen.
* Hinweis zum Thema DSGVO: Auch wenn dieses Tutorial eher technischer Natur ist, ist es wichtig sich auch mit den rechtlichen Aspekten von Kontaktformularen zu befassen. Daher gilt bei Kontaktformularen die Datenschutz Grundverordnung (DSGVO). Bitte prüfe daher vor Veröffentlichung Deines Kontaktformulars, ob die Erfordernisse der DSGVO eingehalten werden.
Hilfreiche Tipps findest Du z.B. unter https://www.datenschutz.org/kontaktformular/ oder bei Deinem Rechtsbeistand.
Zurück in den Einstellungen des Kontaktformulars unter „Inhalt – E-Mail-Adresse“ kannst Du Deine Emailadresse angeben, an welche Anfragen gesandt werden sollen.
Unter „Design – Felder“ hast Du ebenso die Möglichkeit Dein Kontaktformular individuell anzupassen. Für unser Beispiel setzen wir die Feld Schriftfarbe auf weiß. Da wir bereits vorab den Button – Stil im Customizer unter „Customizer – Buttons (Schaltfläche) – Style des Buttons (Schaltfläche) & Style des Buttons (Schaltfläche) beim Hover“ angepasst haben, entfällt das Styling für den Button. Du gelangst zum Customizer im WordPress Menü unter „Design – Customizer“.
Als Alternative: Falls Du lieber Deinen Button individuell gestalten möchtest, so kannst Du das im Divi – Theme Builder innerhalb deines Kontaktformularmoduls unter „Design – Button“.
Was wäre ein Website Footer ohne einen Sub-Footer
Pflichtangaben einer Fußzeile sind Pflicht
Natürlich möchten wir unserem Website Footer noch einen Sub-Footer gönnen. Hier integrieren wir notwendige Angaben (wie Impressum, Datenschutz, etc.) für unsere Seite.
Ein Tipp: Zum Thema Pflichtangaben für Webseiten hat die IHK Wiesbaden das Wichtigste in Kürze zusammengefasst. Hier gelangst Du zum Artikel.
Unser Sub-Footer Menü mit unseren Pflichtangaben binden wir diesmal nicht über ein Widget ein, sondern nutzen das Menümodul von Divi. Wir erstellen unser Menü vorab in WordPress unter „Design – Menüs“ (siehe Exkurs).
Danach wechseln wir zu unserem Theme-Builder in Divi. Damit wir dieses Menü hinzufügen können, öffnen wir die Einstellungen unserer Globalen Fußzeile, um einen Sub-Footer hinzuzufügen. Unser zuvor erstellter Footer öffnet sich. Mit Klick auf das blaue Pluszeichen erstellen wir direkt unter unserem bestehenden Menü einen neuen Abschnitt.
Wir vergeben hier die Einstellung „Regulär“, wählen bei „Neue Zeile“ ein einspaltiges Layout und fügen ein neues Modul mit dem Namen „Menü“ hinzu.
Danach wählen wir in der Drop Down Liste unter „Inhalt – Menü“ unser zuvor erstelltes Menü aus. Speichern. Fenster schließen.
Wir gehen wieder in die Abschnittseinstellungen, indem Du auf das Zahnrädchen im blauen Rahmen klickst.
Hier ändern wir die Hintergrundfarbe unter „Inhalt – Hintergrund“ auf ein dunkleres Grau, in unserem Fall (#212121).
Das Gleiche machen wir auch mit der Hintergrundfarbe des Menüs, zu finden in den Einstellungen des Menümoduls (Klick auf das Zahnrädchensymbol im grauen Rahmen) unter „Inhalt – Hintergrund“. Auch wieder #212121.
Unter „Design – Layout“ setzen wir das Menü zentriert und vergeben unter „Design – Zwischenraum“ einen unteren Außenabstand von 15px. Speichern und schließen.
Der Copyright – Hinweis darf in der Fußzeile auch nicht fehlen
Was noch zum Sub-Footer gehört, ist der Copyright-Hinweis. Um nicht jedes Jahr das Jahr im Copyright-Hinweis anzupassen, gibt es in Divi eine großartige Funktion, die das Ganze für Dich übernimmt – dynamische Inhalte. Und das möchten wir Dir hier zeigen.
Unter das Menü mit den Pflichtangaben fügen wir nun ein neues Textmodul ein. Wir klicken auf das folgende Symbol mit dem Namen „Dynamischen Inhalt verwenden“.
So sieht das Symbol für die Einbindung von dynamischen Inhalten aus.
Es öffnet sich ein neues Menü. Hier klicken wir auf „Aktuelles Datum“.
In das Feld „Vorher“ geben wir folgenden Text ein:
„© Copyright “
In das Feld „Nachher“ diesen Text:
„- Urheberrechtshinweis“
Wobei Urheberrechtshinweis für Deinen eigenen individuellen Hinweis steht. Für einen sauberen Hinweis empfehlen wir Dir den genauen Wortlaut mit Deinem Rechtsbeistand abzuklären. Das Datumsformat ändern wir auf Brauch. Dies sollte eigentlich „Custom“ und wurde nicht korrekt übersetzt. Unter „Benutzerdefiniertes Datumsformat“ tragen wir den Buchstaben „Y“ ein. Das ist die Abkürzung für das aktuelle Jahr.
Danach sieht das Ganze so aus.
© Copyright 2022 – Urheberrechtshinweis
Falls die Leerzeichen nicht korrekt angezeigt werden, so kannst Du diese in den Feldern „Vorher“ und „Nachher“ anpassen.
Wir richten den Text unter „Design – Text – Textausrichtung“ zentriert aus.
Mhm. Das wars.
Leider nein. Wir haben bislang nur auf der Desktopversion gearbeitet. Wichtig ist auch, dass unser Website Footer in der Tablet und in der mobilen Ansicht schick aussieht. Dafür wechseln wir nun in die Tablet Ansicht. Das geht am besten bei Klick auf das Tablet Zeichen im grauen Menü unten links.
Dabei wirst Du wahrscheinlich feststellen, dass Dein Menü mit den Pflichtangaben als Hamburger Menü dargestellt wird.
Wie lässt sich das lösen? Durch ein einfaches Code Schnipsel kannst Du diese Darstellung im Website Footer verändern.
Als erstes empfehlen wir eine ID für Dein Menümodul unter „Erweitert – CSS-ID & Klassen“ zu vergeben. Die ID haben wir hier beispielhaft „nohamburger“ genannt. Gerne kannst Du aber auch Deine eigene ID in Kleinbuchstaben, ohne # und ohne Leerzeichen vergeben. Abspeichern. Fenster schließen.
Dann gehst Du aus dem Builder heraus und öffnest die Divi Einstellungen unter „Divi – Theme-Optionen“.
Hier wählst Du den Reiter „Allgemeines – Allgemein“ aus und scrollst ganz nach unten, wo Du ein Eingabefeld mit dem Namen „Eigene CSS“ findest.
Hier kannst Du folgenden Code eingeben:
@media (max-width: 980px) {
#nohamburger.et_pb_menu .et_mobile_nav_menu {
display: none;
}
#nohamburger.et_pb_menu .et_pb_menu__menu {
display: block;
}
}
Gerne kannst Du #nohamburger durch Deine eigene ID austauschen, die Du im vorherigen Schritt verwendet hast.
Danach checkst Du als letzten Schritt noch die mobile Ansicht deines Website Footer.
Falls Dir die Schrift in der mobilen Ansicht zu groß erscheint, so kannst Du gerne in den einzelnen Modulen die Schriftgröße anpassen. Achte aber darauf, dass Du Dich in der korrekten Ansicht innerhalb der jeweiligen Einstellungen befindest. Das findest Du heraus, wenn Du mit der Maus auf das Telefon Icon klickst.
Puhh, Du hast es geschafft. Und Du solltest jetzt Deinen eigenen Website Footer bewundern können.
Fazit zum individuellen Website Footer
Wie Du siehst, ist es ein wenig Aufwand, einen individuellen Website Footer mit Divi zu erstellen.
Aufwand, der sich aus meiner Sicht lohnt. Dadurch, dass Du alles in den Website Footer packen kannst, was für Deine Nutzer wichtig ist, hast Du die Möglichkeit mehr aus Deiner Website herauszuholen.
Wenn Du mehr erfahren willst, oder Fragen hast, dann lass doch gerne einen Kommentar da. Wir würden uns freuen von Dir zu hören.
