Divi 5 Footer erstellen: Schritt für Schritt zum globalen Website-Footer

Die wichtigsten Fragen und Antworten in Kürze zum Thema Footer erstellen:

Ein sauberer, gut strukturierter Divi 5 Footer macht Deine Website professioneller und sorgt für bessere Nutzerführung. Dieser Guide zeigt Dir, wie Du im Divi 5 Theme Builder einen individuellen Divi 5 Footer baust, Social-Icons stylst, Links richtig verlinkst und das Copyright-Jahr automatisch aktualisierst.

Warum ein eigener Divi 5 Footer wichtig ist

Der Footer, auch bekannt als Fußzeile, ist oft der unterschätzte Teil einer Website. Er bietet Platz für Kontaktinfos, Rechtliches, Social-Media-Links und eine nutzerfreudnliche Navigation Deiner Homepage. Ein maßgeschneiderter Divi 5 Footer:

• stärkt die Marke durch konsistente Farben
• macht Kontaktaufnahme einfacher
• verbessert die Nutzererfahrung auf Mobilgeräten

Wenn Du im Divi Theme Builder arbeitest, bekommst Du volle Kontrolle über den Divi 5 Footer. Du kannst globale Footer-Vorlagen anlegen und sie auf allen Seiten verwenden.

Vorbereitung: Divi Theme Builder öffnen und globalen Divi Footer anlegen

Öffne das WordPress-Backend, navigiere zu Divi und öffne den Divi Theme Builder. Dort legst Du einen globalen Footer an, damit die Änderungen überall übernommen werden. Das ist die Basis für jeden professionellen Divi Footer, um eine ansprechende Website zu gestalten.

Im Theme Builder legst Du zuerst eine neue globale Footer-Vorlage an und öffnest den Builder, um Sektionen, Zeilen und Module hinzuzufügen.

Website Logo und Hintergrund: Design-Grundlage für Deinen Divi 5 Footer

Beginne mit einer einspaltigen Zeile im nun geöffneten Divi Builder und füge ein Bildmodul für das Logo hinzu. Für eine scharfe Darstellung empfehle ich das SVG-Format. Als nächstes definierst Du den Hintergrund der Sektion – ein Verlauf wirkt oft moderner als eine durchgehende Farbe.

Wähle Deine globalen Divi-Farben als Divi 5 Variablen und erstelle einen sanften Verlauf. So bleibt der Divi 5 Footer farblich konsistent mit dem Rest der Seite.

Social-Icons sauber platzieren und stylen im Website Footer

Nutze das Social-Media-Follow-Modul für Facebook, X, Instagram, YouTube etc. Dank der neuen Flexbox-Option in Divi 5 kannst Du die Icons sauber in der Spalte rechts ausrichten.

Gehe dazu in das Design-Tab der Spalte und unter Layout.

Setze in der Spalte unter Design → Layout auf Flex und richte per Justify Content (Abstand dazwischen) die Icons rechtsbündig aus. So bleibt Dein Divi 5 Footer auf Desktop und Mobile konsistent.

Icons designen: Rahmen, Hover und Farben im Layout

Entferne die Hintergrundfarbe der Icons und füge stattdessen einen runden Rahmen (z. B. 1 px) hinzu. Für Hover-Effekte nutzt Du den Hover-Modus im Modul und setzt eine Akzentfarbe für Hintergrund und Icon-Farbe.

Achte darauf, nach dem Einstellen des Hover-Modus zurück in die normale Ansicht zu wechseln. Sonst überschreibst Du unbeabsichtigt die Standarddarstellung Deiner Social-Icons im Divi 5 Footer und die Einstellungen gelten nur im Hover-Modus der Webseite.

Mehrspaltige Divi Footer-Bereiche: Struktur mit Überschriften und Symbol-Listen

Füge eine vierspaltige Zeile hinzu und verwende Überschriftmodule (H3 oder H4) — keine H1/H2 im Footer, um Probleme mit der SEO-Logik zu vermeiden. Unter den Überschriften nutzt Du die neue Symbol-Liste von Divi 5.

Die Symbol-Liste spart Dir CSS-Arbeit. Du kannst Icons, Farben und Abstände der Listenpunkte direkt im Modul einstellen und die Stile kopieren, um Konsistenz im gesamten Divi 5 Footer zu gewährleisten.

Icons ausrichten und Inhalte duplizieren in der Fußzeile

Bei der Ausrichtung hilft die Ebenenansicht von Divi 5. Justiere Außenabstände (margin) von Icons nur um ein paar Pixel, damit alle Listeneinträge sauber in einer Linie stehen. Dupliziere einzelne Listeneinträge innerhalb des Moduls, nicht das ganze Symbol-Listen-Modul.

Das spart Zeit und verhindert ungewollte Duplikate im Divi Footer. Fülle jede Spalte mit Deinen Seitenlinks wie Leistungen, Über mich, Referenzen und passe die Link-Ziele an.

Kontakt-Links: Mailto und Telefon hinzufügen und anklickbar machen

Für E-Mail und Telefon solltest Du die Link-Felder korrekt setzen. Unter Inhalt – Link schreibst Du: mailto:Deine@Email.de und tel:+491234567890. So ist der Divi 5 Footer auf Desktop und Mobil wirklich nutzbar und Deine Kontaktdaten anklickbar.

Verwende passende Icons (Mail, Phone) in der Symbol-Liste und setze die Links. Auf dem Smartphone starten Mail-App oder Telefonanruf direkt beim Anklicken.

Impressum, Datenschutz und Copyright: rechtssicher und gepflegt in WordPress

Füge in einer neuen Zeile Impressum und Datenschutzerklärung als Links ein. Style die Links so, dass sie gut lesbar sind, z. B. weiße Linkfarbe, und öffne sie optional in einem neuen Tab.

Verwende für das Copyright-Symbol entweder das Zeichen © oder nur Copyright. Im Divi 5 Footer dupliziertst und platzierst Du das Copyright-Textmodul rechtsbündig per Flex-Einstellung, während Du den Footer anpasst. Ändere den Text Copyright im rechten Textmodul in Impressum und Datenschutzerklärung und verlinke den Text mit Deinen Seiten.

Jahreszahl des Footers automatisch aktualisieren

Damit Du das Copyright-Jahr nicht jedes Jahr manuell ändern musst, nutzt Du einen kleinen Shortcode in Deinem Child-Theme. Das ist sauber, update-sicher und zuverlässig.

Füge im Footer-Text © Copyright 2026 ein. Der Shortcode 2026 wird durch den PHP-Shortcode in der functions.php Deines Divi 5 Child Themes ersetzt.

// COPYRIGHT JAHR ALS SHORTCODE
function bh_year_shortcode() {
  $year = date('Y');
  return $year;
}
add_shortcode('year', 'bh_year_shortcode');

Füge diesen Code in die functions.php Deines Child-Themes. Danach wird 2026 automatisch durch das aktuelle Jahr ersetzt und Dein Divi 5 Footer bleibt aktuell.

Wie Du ein Child-Theme für Divi erstellst, erfährst Du in diesem Video:

Mobile Optimierung für den Divi 5 Footer

Kontrolliere alle Breakpoints: Tablet und Smartphone. Passe Bildgrößen pro Breakpoint an, insbesondere das Logo. Flexbox sorgt dafür, dass Spalten auf kleineren Bildschirmen besser umbrechen.

Stelle im Bildmodul die prozentuale Größe für mobile Ansichten ein. Prüfe im Theme Builder für jede Breakpoint-Ansicht, ob Abstände und Schriftgrößen stimmig sind.

Globale Fußzeiel: Praktische Tipps aus Erfahrungen

• Backup machen: Bevor Du functions.php änderst, Backup anlegen.
• Child-Theme nutzen: Änderungen am Child-Theme sind update-sicher.
• Stile wiederverwenden: Kopiere Stile in Divi, um Zeit zu sparen.
• Accessibility: Linktexte klar benennen, Kontrast prüfen.

Wenn Du diese Punkte beachtest, ist Dein Divi Footer sauber, mobiloptimiert und wartungsarm, was die Benutzerfreundlichkeit erhöht.

Fehler, die Du in Divi vermeiden solltest

Keine H1/H2 im Footer einsetzen, Hover-Einstellungen nicht im Hover-Modus vergessen zurückzusetzen und nie direkt am Parent-Theme arbeiten. Diese Fehler führen schnell zu Styling-Problemen oder zu verlorenen Anpassungen bei Updates.

Nutze stattdessen immer ein Child-Theme, kontrolliere Desktop und Mobil separat und speichere alle Änderungen im Theme Divi, um einen konsistenten Footer zu gewährleisten.

Checkliste: Dein schneller Produktions-Workflow für den Divi 5 Footer

1. Divi Theme Builder öffnen und globalen Footer anlegen.
2. Logo hochladen und Hintergrundverlauf einstellen.
3. Social-Icons hinzufügen, Rahmen und Hover setzen.
4. Vier Spalten mit Überschriften und Symbol-Listen befüllen.
5. Kontaktlinks mit mailto: und tel: setzen.
6. Impressum und Datenschutz verlinken.
7. © Copyright 2026 im Footer ergänzen und Shortcode in functions.php einfügen.
8. Breakpoints prüfen und Mobil-Layout anpassen.
9. Speichern, testen, Backup machen.
10. Hier findest Du Divi Flexbox Footer zum Download

Diese Checkliste hilft Dir, den kompletten Prozess für den Divi Footer strukturiert und zügig durchzuarbeiten, einschließlich der AGB zuarbeiten.

Footer im Divi Theme: Zusammenfassung

Ein gut durchdachter Divi 5 Footer erhöht die Professionalität Deiner Website und verbessert die Nutzerführung. Mit dem Divi Theme Builder gestaltest Du einen individuellen, mobiloptimierten Divi 5 Footer, der Social-Icons, Kontaktlinks, rechtliche Links und ein automatisch aktualisiertes Copyright-Jahr enthält.

Arbeite mit globalen Farben, kopiere Stile für Konsistenz und teste auf allen Breakpoints. So sparst Du Zeit und hältst die Seite wartbar.

Bonus: die wichtigste Divi 5 Footer Code-Notiz

// COPYRIGHT JAHR ALS SHORTCODE
function bh_year_shortcode() {
  $year = date('Y');
  return $year;
}
add_shortcode('year', 'bh_year_shortcode');

Füge diesen Code in die functions.php Deines Divi 5 Child Themes ein und schreibe © Copyright 2026 in das Textmodul des Footers. Fertig.

Wie Du einen globalen Header im Divi 5 Theme Builder erstellst, erfährst Du hier: Divi 5 Header erstellen: Ein schicker Website-Header mit Glas-Effekt und Button in 10 Minuten