Der erste Schritt nach der Installation eines neuen WordPress Themes sollte immer das Anlegen eines dazu passenden Child Theme (dt. Kind Theme) sein. In diesem Fall geht es also um ein Divi Child Theme.
Was ist ein WordPress Child Theme?
Selbst bei so umfangreich anpassbaren Themes wie das Divi Theme gibt es doch viele Änderungen, die sich nur durch den direkten Eingriff in die Dateien eines Themes erreichen lassen. Typischerweise handelt es sich um die Dateien style.css und functions.php. Man kann die Anpassungen natürlich auch direkt in den Dateien des Divi Themes durchführen, hat dann aber das Problem, dass mit dem nächsten Update des Themes alle Dateien überschrieben werden und man dann alle Anpassungen verliert und wieder neu eintragen muss.
Dieses Problem lässt sich durch die Nutzung eines Divi Child Themes vermeiden. Ein Child (Kind) Theme verweist im Grunde auf das Eltern Theme und beinhaltet nur angepassten und ergänzende Dateien zum Eltern Theme. Damit bleiben auch bei einem Update des Eltern Themes alle Änderungen im Child Theme erhalten.
CSS-Sammelstelle für Divi
Ein weiterer Vorteil eines Child Themes liegt in der zentralen Sicherung aller CSS-Anpassungen. Leider kann zusätzlicher CSS-Code an vielen verschiedenen Stellen in WordPress eingefügt werden:
- in der
style.cssin einem Child Theme (unsere Empfehlung) - im Designmodifikator im Bereich "Zusätzliches CSS"
- in den Divi Theme-Optionen im Feld "Benutzerdefiniertes CSS"
- im Divi Builder kann auch zusätzlicher CSS-Code in den Einstellungen von Sektionen, Zeilen und Modulen erfolgen
- möglicherweise auch in den Einstellungen von weiteren Plugins
Falls Du den Code später ändern willst und Du eigenen CSS-Code nicht möglichst an einer Stelle gesammelt hast, dann kann die Suche danach schnell sehr mühsam werden! Außerdem wenn du den CSS-Code im Customizer oder den Divi Theme-Optionen speicherst, wird der Code in der Datenbank hinterlegt. Wir haben es schon erlebt, dass diese Einstellungen bei einem Update oder dem Hin- und Her -Wechseln zwischen zwei Themes versehentlich gelöscht wurden. Das kann Dir mit Deiner style.css im Child Theme Ordner nicht passieren!
Wie erstellt man ein Divi Child Theme?
Hier gibt es mehrere Wege zum Ziel:
- Download: Der einfachste Weg ist die Nutzung unseres vorbereiteten Divi-Child-Theme Ordners.
- Plugin: Der ebenfalls relativ einfache Weg ist die Nutzung eines Plugins.
- DIY: Etwas schwieriger aber sehr lehrreich ist das eigene Erstellen der nötigen Ordner und Dateien.
Gleichgültig für welchen Weg Du Dich entscheidest: Wie immer wenn Du etwas Grundsätzliches veränderst, gehört ein WordPress Backup zur guten Vorbereitung. Falls Du Dich für den DIY-Weg entscheidest, sollte auch das Grundlagenwissen wie du WordPress Dateien sicher bearbeiten kannst vorhanden sein.
Vorbereiteter Divi Child Theme Download
Die einfachste Lösung ist der von uns vorbereiteten Divi Child Theme Download.
Dazu gehst du folgendermaßen vor:
Schritt 1: Download der ZIP-Datei
Melde Dich einfach zu unserem Newsletter an und Du bekommst kostenfrei unsere Child-Theme-Vorlage per E-Mail zugeschickt:
Schritt 2: Installation des Divi Child Themes
Nach dem Download gehst du in deinem WordPress Backend auf "Design" > "Themes" und oben neben der Überschrift "Themes" klickst du auf den den Button "Installieren".
Dann gelangst du auf die "Themes installieren" Seite und findest oben dann den Button "Theme hochladen" auf den du klickst.
Du wählst den Button "Datei hochladen" und dann die zuvor heruntergeladene ZIP-Datei aus und lädst diese hoch.
Schritt 3: Aktivieren des Child Themes
Jetzt gehst du im WordPress Backend auf "Design" > "Themes" und wählst das Divi Child Theme aus und klickst dort auf "Aktivieren".
Aktives Divi Child Theme und deaktiviertes Divi Theme
Wir wollen das nochmal ganz deutlich machen, weil das bei manchen etwas Verwirrung auslöst. Wenn du alles richtig umgesetzt hast, ist am Ende das Divi Child Theme aktiv (1) und das eigentliche Divi Theme nicht aktiviert (2):
Wichtig: Auch wenn das Divi Theme (2) nicht aktiviert ist, darfst du es trotzdem nicht löschen. Denn das Child Theme (1) greift auf die Daten des eigentlichen Divi Themes zu und ist ohne das Divi Theme auch nicht funktionsfähig. Deshalb sollte das Divi Theme auch regelmäßig aktualisiert werden, auch wenn es nicht aktiv ist.
Wir empfehlen auch zumindest ein aktuelles WordPress Standardtheme wie z.B. das Twenty Twenty-Three Theme installiert zu lassen und regelmäßig zu aktualisieren. So kannst du im Notfall oder auch testweise auf das Standardtheme wechseln, um zu überprüfen, ob auftretende Probleme ggf. mit dem bisher aktiven Theme zu tun haben.
Jetzt sollte erstmal alles auf deiner Homepage wie vorher aussehen, nur dass du nun Anpassungen durchführen kannst, die bei einem Update nicht verloren gehen. Wir empfehlen, dass du dir anschließend auch die kurze Anleitung zum eigenhändigen Erstellen von Child Themes ansiehst, damit du weißt, wozu das gemacht wird und wo welche Datei für spätere Anpassungen liegt.
Divi Child Theme mit einem Plugin erstellen
Es gibt mehrere Plugins, die einem dabei helfen ein Child Theme zu erstellen. Unser derzeitiger Favorit ist das Child Theme Configurator Plugin, da dieses Plugin zusätzliche praktische Funktionen zur Bearbeitung eines Child Themes bietet. Alternative lässt sich auch der Child Theme Creator von Orbisius nutzen.
WordPress Child Theme selbst erstellen
Du kannst dir auch eigenständig ein Divi Child Theme erstellen. Damit lernst du das Verfahren grundsätzlich kennen und kannst das auch für andere Themes anwenden. Außerdem musst du für einige Anpassungen des Divi Themes sowieso per FTP auf deine Dateien im Child Theme Ordner zugreifen und dann hast du schon ein wenig Erfahrungen gesammelt. Es ist im Grunde relativ leicht ein Child Theme zu erstellen. Du musst nur einen Ordner und zwei Dateien erstellen und schon ist dein Child Theme fertig.
Schritt 1: Ordner erstellen
Du musst per FTP auf deinen Webspace zugreifen und in den WordPress Themes Ordner navigieren, den du unter ...
../wp-content/themes
findest.
Dort liegen alle bisher vorhandenen Themes in Ordnern, so dass auch ein "divi" Ordner für dein Divi Theme vorhanden sein sollte.
Dort erstellst du einen neuen Ordner für dein Child Theme, den du zwar nennen kannst wie du magst, aber wir empfehlen dir den Ordner nach dem eigentlichen Theme mit dem Zusatz "-child" zu benennen. Daher erstellst du nun den Ordner ...
"divi-child"
Schritt 2: style.css anlegen
In dem Ordner "divi-child" sind zwei Dateien anzulegen. Zunächst die Datei style.css in die Du folgenden Code einfügst:
/* Theme Name: Divi Child-Theme Theme URI: http://www.elegantthemes.com Description: Divi Child-Theme Author: Divi.world Author URI: https://divi.world Template: Divi Version: 1.0.0 */ /* =Ab hier kannst du deine CSS-Anpassungen eintragen ------------------------------------------------------- */
In dieser style.css kannst du später spezielle CSS Anpassungen für dein Divi Theme hinzufügen, wie Schriftgrößen, Farben, Abstände etc.
Schritt 3: functions.php anlegen
Dann benötigen wir noch die functions.php Datei, die folgenden Code enthalten soll:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Diese functions.php sorgt einerseits dafür, dass alle nötigen CSS-Dateien des Divi Themes geladen werden und am Ende kannst du später weiteren PHP-Code einfügen, um bestimmte Funktionen des Divi Themes zu beeinflussen.
Bemerkungen
Falls du noch andere Anleitungen zum Erstellen von Child Themes gefunden hast, wundere dich bitte nicht, dass dort die style.css und die functions.php etwas anders aussehen. Bis vor einiger Zeit stand fast kein Code in der functions.php und dafür gab es in der style.css immer die Zeile ...
@import url("../Divi/style.css");
Mittlerweile empfiehlt WordPress statt des CSS-Imports die WordPress style queue Funktion in der functions.php zu nutzen. Das ist der Code, den du in unserer Anleitung oben sehen kannst.
Als letzten Schritt aktivierst du dein neues Child Theme.
Weitere Informationen:
Weitere Informationen zu Child Themes findest du im
- WordPress Codex (engl.).
- im Elegant Themes Blog "Ultimate Guide to Creating a Child Theme for Divi" (engl.)
Divi Child Theme nachträglich erstellen
Manchmal ist es leider so, dass die Info zu dem Anlegen eines Child Themes einen zu spät erreicht oder Du es ggf. einfach vergessen hast. Die Website ist mit aktiviertem "normalen" Divi Theme schon fertig gestaltet ... was nun?
Wir empfehlen auch nachträglich noch auf ein Divi Child Theme zu wechseln und CSS-Änderungen am besten zentral in der style.css Datei des Child Themes zu sammeln. Wurden Änderungen an den original CSS-Dateien des Divi Themes vorgenommen, werden diese sowieso mit dem nächsten Theme Update überschrieben.
Hast Du stattdessen CSS-Einträge im Customizer, den Divi Builder Modulen oder den Divi Theme-Optionen vorgenommen, kann es zum einen später schwierig werden herauszufinden an welcher Stelle diese CSS-Änderungen gespeichert sind. Außerdem werden alle diese Eintragungen in der Datenbank gesichert. Wir haben es schon erlebt, dass bei einem unglücklichen Update oder einem testweisen Wechsel des Themes diese CSS-Änderungen in der Datenbank überschrieben wurden. Das kann im Child Theme Ordner nicht passieren.
Die Frage ist nun wie bekommst Du Deine bereits vorgenommenen CSS-Änderungen in Dein Child Theme übertragen? Das ist im Grunde gar nicht so schwer. Zunächst legst Du nach unserer Anleitung ein Divi Child Theme an. Anschließend geht es darum die CSS-Anpassungen in das Child Theme zu übertragen.
So bekommst Du Deine CSS-Anpassungen in Dein Child Theme übertragen
Bevor wir die folgenden Punkte betrachten, würde ich Dir wie bereits oben gesagt empfehlen auch wenn die Eintragungen an einigen Stellen offenbar in das Child Theme übernommen werden, trotzdem zu versuchen diese Anpassungen möglichst alle in der style.css des Child Themes zu sammeln.
- Hast Du die Anpassungen vorher in einer CSS-Datei im Theme Ordner gespeichert oder in einer der vorhandenen CSS-Dateien des Themes angepasst, musst Du diese nur in die
style.cssin dem Child Theme Ordner übertragen (Achtung: ggf. muss Du dann noch bei einigen Anweisungen!importantergänzen, siehe hier). - Hast Du Eintragungen im Designmodifikator unter "Zusätzliches CSS" hinterlegt, wurden diese bei unserem Test beim Wechsel auf ein Divi Child Theme übernommen. Trotzdem: wir empfehlen diese lieber in der
style.csszu sammeln. - Hast Du Einträge in den Divi Modulen unter "Erweitert" > "Benutzerdefiniertes CSS" getätigt, blieben diese bei unserem Test bei dem Wechsel auf ein Divi Child Theme auch erhalten.
- Bei unserem Test wurden nur Eintragungen beim Wechsel zu dem Divi Child Theme NICHT übernommen, die Du zusätzlich im Admin unter "Divi" > "Theme Optionen" unter "Eigene CSS" (letztes Einstellungsfeld auf der Seite) getätigt hast. Diese musst Du also kopieren und dann sowieso besser in der
style.cssim Child Theme Ordner hinterlegen. Wenn du es unbedingt willst, kannst Du die Eintragung auch im Child Theme wieder an dieser Stelle vornehmen.
Du siehst, es sollte normalerweise nicht sonderlich schlimm sein auch später auf ein Child Theme zu wechseln.
Hallo Nils,
danke für Deine Infos und den Crosscheck.
Elegant Theme Support: gesagt, getan…und hier die Antwort vom Support: „After one of the recent Divi updates, the Shop module has now been called Woo Products and it is located with the other Woo Modules“.
Ich habe es mit dem „Woo Product „ausprobiert und kann noch ergänzen, daß ein Produkt existent und veröffentlicht sein sollte, um das Ergebnis zu sehen. Es hat also (zum Glück) keine Abhängigkeit von Verwendung eines Child-Themes. Wieder was gelernt 🙂
Danke nochmal für Deine Hilfe.
VG, Silke
Sehr gerne Silke und Danke für die Weitergabe der Info!
Dann sollte Elegant Themes das aber auch dringend in ihrer Dokumentation erläutern. Ich hatte mir extra sowohl den Eintrag für das Shop Modul als auch den Eintrag für die Woo Module durchgelesen und da stand von dieser Änderung kein Wort … *seufz*!
Hallo Nils,
ich versuche gerade das „Shop“-Modul zu verwenden. Bei meiner Seite wird es aber gar nicht erst zur Auswahl angezeigt/eingeblendet!? Ich frage mich nun, ob es hier vielleicht eine Besonderheit gibt wegen Verwendung des Child-Themes? Ich verwende außerdem die deutsche Spracheinstellung. So wie ich es recherchiert habe müßte es aber mit „Shop“ in jedem Fall erscheinen. Alle Versionen (Word-Press und Divi sind aktuell).
Dankeschön für alle Hinweise.
VG, Silke
Hallo Silke,
meine erste Vermutung wäre: Hast du denn das WooCommerce Shop Plugin bereits installiert? Das ist die Voraussetzung für den Einsatz des Shop Moduls im Divi Builder, da sonst die ganze Shop Verwaltung in WordPress fehlt. Ohne die gibt es ja keine Daten, die das Modul anzeigen könnte.
Hallo Nils,
ja, das Plugin ist installiert (und auch ein Beispiel-Produkt eingerichtet).
Dein Verweis führt auf ein Download-Bereich der WooCommerce Seite. Ich habe das PlugIn aber normal (via WordPress/PlugIn/Installieren) installiert.
Ich gehe davon aus, das Ergebnis ist das gleiche !?
Habe das Plugin auch nochmal deaktiviert/aktiviert.
Wo ist nur mein (Denk-)Fehler ?
Hallo Silke,
das Plugin direkt aus dem WordPress Repository zu installieren ist vollkommen in Ordnung.
Ich habe mich gerade in unsere Divi Testwebsite eingeloggt auf der sowohl Divi Version 4.17.3 als auch WooCommerce Version 6.4.1 als aktuelle Versionen installiert sind. Auch ich kann im Visual Builder überraschenderweise kein Shop Modul finden. Allerdings stehen mir diverse der Woo Module zur Verfügung. Ist das bei dir auch der Fall? Aber soweit ich weiß haben die Woo Module das Shop Modul nicht abgelöst.
Ich hätte dir normalerweise als nächstes geraten sämtliche anderen Plugins zu deaktivieren, um zu sehen, ob es dann auftaucht. Aber da ich in meiner Testinstallation auch nur die beiden Plugins aktiviert hatte, scheint das was generelles zu sein.
Ich würde einfach mal direkt den Elegant Themes Support anschreiben und nachfragen.
PS: Ich hatte einmal mit einem ähnlichen Problem allerdings ohne das Divi Theme zu tun, da lag es daran, dass keinerlei Produkte eingerichtet waren, so wurde halt auch nichts angezeigt, aber ich denke nicht, dass das in deinem Fall der Kern deines Problems ist, da ich in meiner Installation auch zwei Testprodukte eingerichtet habe.
Hallo,
ich habe das Child-Theme mit eurer Datei eingesetzt, vielen Dank für diesen Artikel! Nun habe ich jedoch die single.php angepasst, wie bekomme ich diese Änderung in das Child Theme? Soll ich einfach die single.php in den Child Ordner kopieren? Oder geht das dann anders?
Dankeschön!
Hallo Micha,
der klassische Weg wäre eine Kopie der single.php im Child Theme Ordner zu erstellen.
Allerdings würde ich bei den aktuellen Möglichkeiten klar dazu raten über die Divi Theme Builder Funktionen ein Template für die jeweiligen Seiten mit den von dir gewünschten Änderungen anzulegen. Genau dafür ist der Theme Builder gedacht und bei der Kopie der single.php im Child Theme Ordner, besteht immer das Risiko, dass Elegant Themes den Code der originalen single.php anpasst und dass dann das Überschreiben mit der angepasste alte Version im Child Theme Ordner zu Problemen führen kann.
Hallo Nils,
ich bin neu hier, habe auch schon einige Kommentare gelesen, verstehe noch nicht so genau wie ich darin richtig navigiere.
Ich möchte ein Child-Thema nachträglich auf meiner Website installieren.Meine Theme Optionen habe ich auch schon exportiert, zur Sicherung.
Leider klappt das mit dem Laden des Child-Thema Zips nicht so richtig. Mir wird folgendes angezeigt.
„Installiere Theme aus hochgeladener Datei: Divi-Child-Theme.zip
Entpacken des Pakets …
Das Theme wird installiert …
Dieses Theme braucht ein Eltern-Theme. Überprüfung, ob es installiert ist …
Das Eltern-Theme konnte nicht gefunden werden. Du musst das Eltern-Theme installieren, Divi, bevor du dieses Child-Theme benutzen kannst.
Das Theme wurde erfolgreich installiert.“
Kannst du mir sagen was ich tun muss?
Hallo Petra,
das bedeutet, dass du das Divi Theme selbst installiert sein muss, bevor du das Divi Child Theme verwenden kannst. Ein Anleitung wie du das Divi Theme installierst findest du hier Divi Theme installieren. Erst nach der Installation des Divi Themes, kannst du das Divi Child Theme aktivieren und darfst danach das Divi Theme trotzdem nicht löschen.
Das ist deshalb Voraussetzung, weil ein Child Theme erstmal nur auf die Dateien des „Eltern“ Themes verweist. Im Child Theme Ordner werden nur Ergänzungen oder Erweiterungen zum „Eltern“ Theme gespeichert, die bei einer Aktualisierung der Dateien im Eltern Theme Ordner nicht automatisch gelöscht werden.
Wenn das „Eltern“ Theme (in diesem Fall das Divi Theme) nicht installiert ist, geht der Verweis des Child Themes auf das Eltern Theme ins Leere.
Hallo Nils,
Ich habe ein Problem mit der Style.css.
ich habe das Child nach eurer Anleitung angelegt. zusätzlich habe ich mit WP Staging eine Staging Seite eingerichtet zum Testen.
Ich möchte zum einen mein Footermenü (angelegt über Menü) und zum anderen die untere Footerleiste zentrieren.
Code ist:
/* Divi: untere Footerleiste zentrieren*/
#footer-info, #footer-info a {
float: none;
text-align: center;
}
/* Divi: Footermenü zentrieren */
.bottom-nav {
float: none!important;
text-align: center!important;
}
Das funktioniert auch, aber:
In der Testseite einwandfrei mit nur dem Eintrag in der Style.css des Child Themes. Kein Eintrag unter zusätliches CSS bzw. Divi/eigenes CSS nötig.
In der eigentlichen Seite aber nicht über die Style.css. Dort funktioniert es nur wenn ich es unter zusätliches CSS bzw. Divi/eigenes CSS speichere.
Egal was ich in der Style.css eintrage es reagiert nicht.
Woran kann es liegen dass der Code aus der Style.css nicht angenommen wird?
Danke & Gruß,
Jörg
PS: in der vorher gestellten Anfrage war ein Fehler den ich hier korrigiert habe
Hi Jörg,
dein Kommentar ist mir leider irgendwie durchgerutscht und ich habe den erst jetzt freigeschaltet. Ich vermute du hast das Problem bereits lösen können?
Ansonsten wäre erstmal ggf. über Testeinträge zu klären, ob die Einbindung der Child-Theme style.css überhaupt richtig funktioniert, wenn sich die Einträge dort nicht auswirken. Es ist dann immer gut, man schaut mit den Developer Tools in den Code, um zu prüfen, ob der Code der Anpassung überhaupt auftaucht. Gleichzeitig lässt sich dann meist auch entdecken, dass wenn er auftaucht, dieser aber ggf. durch spezifischeres CSS sozusagen übertrumpft also überschrieben wird.
Was auch zu berücksichtigen ist: Wenn du über den Theme Builder deinen Footer selbst gestaltest, greifen diese CSS-Anweisungen nicht. Aber dann kannst du deine Gestaltungswünsche auch direkt im Theme Builder umsetzen.