Divi Child Theme erstellen

von | 01.11.2017 | 6 Kommentare

Du möchtest ein Divi Child Theme für deine WordPress Webseite erstellen? Dann bist du hier genau richtig. Schritt für Schritt begleite ich dich durch den Prozess. Wenn du keine Lust hast, das Child Theme selbst zu erstellen, dann kannst du auch unser kostenloses Divi Child Theme herunterladen. Weiter unten im Text findest du den Downloadlink.

Video Tutorial

Du musst dir das Video nicht ansehen, wenn du nicht möchtest. Alle Informationen findest du auch in diesem Beitrag.

Wozu ist ein Divi Child Theme gut?

Child Themes haben einen großen Vorteil. Sie machen es möglich, Änderungen vorzunehmen, ohne in den ursprünglichen Code des übergeordneten Themes einzugreifen. Solltet ihr kein Child Theme verwenden und Änderungen am Code vornehmen, so werden diese beim nächsten Update möglicherweise überschrieben. Oder noch schlimmer – ihr zerschießt euch die ganze Webseite. Um das zu umgehen, erstellen wir einen weiteren Satz Dateien, in den wir unsere Änderungen eintragen können, ohne in die ursprünglichen Dateien des übergeordneten Themes einzugreifen. Beim nächste Update werden nur die Daten des Eltern-Themes überschrieben und nicht die des Childs.

Anleitung: Divi Child Theme erstellen

Also, gehen wir ans Eingemachte. Wie erstelle ich nun ein Child Theme für Divi? Das Child Theme besteht auf zwei wesentlichen Dateien. Der functions.php und der style.css. Wir müssen beide Datei erstellen. Dafür benötigen wir nicht viel, nur einen Computer mit einem einfachen Textverarbeitungsprogramm. Alternativ kannst du auch unser kostenloses Divi Child Theme downloaden, damit du es direkt auf deiner WordPress Webseite installieren kannst.

Schritt 1: Ordner anlegen

Als erstes solltest du einen einen Ordner auf dem Desktop anlegen. In diesem Ordner werden die von dir erstellten Dateien für das Child Themes platziert. Du kannst den Ordnen imgrunde benennen wie du möchtest. Für unser Tutorials bennen wir ihn einfach mit der Bezeichnung „DiviChild„.

Schritt 2: functions.php erstellen

Im zweiten Schritt erstellen wir die functions.php Datei. Dazu öffnest du einfaches Textverarbeitungsprogramm auf deinem Computer. Wenn du mit einem Mac arbeitest, dann kannst du TextEdit verwenden. Windows Nutzer können auf den Notepad Texteditor zurückgreifen. Beide Programme sollten auf dem jeweiligen Betriebssytem bereits vorinstalliert sein.

In die Textdatei der functions.php ist folgender Code einzufügen:

Anschließend speicherst du die Datei unter dem Dateinamen functions.php im zuvor erstellten Ordner ab.

Schritt 3: style.css erstellen

Öffne jetzt ein weiteres Textdokument und füge den folgenden Code ein:

Die Datei ist unter dem Dateinamen style.css im zuvor erstellten Ordner zu speichern.

Schritt 4 (optional): Screenshot erstellen

Wer möchte, kann einen Screenshot mit den Maßen 880 x 660 px erstellen und dem Ordner beifügen. Der Screenshot erscheint dann als Thumbnail in der WordPress Theme-Übersicht. Der Inhalt des Ordners sollte nun wie folgt aussehen:

Divi Child Theme anlegen Ordner

Schritt 5: Divi Child Theme Installation

Du kannst das Child Theme jetzt zu deiner Webseite über den WordPress Theme Upload oder via FTP hinzufügen und aktivieren. Wenn du dich für Ersteres entscheidest, dann befolge einfach die nächsten Schritte.

Schritt 5.1: Divi Child Theme Upload

Da WordPress ausschließlich Themes als Zip Datei akzeptiert, müssen wir den Ordner vor dem Upload komprimieren. Mac Nutzer klicken mit der rechten Maustaste auf den Ordner und wählen „Ordner Name“ komprimieren aus. Mit Windows wird der Ordner ebenfalls über die rechte Maustaste komprimiert. Klicke hierfür auf den Ordner und wähle Senden an > Zip komprimierter Ordner.

Schritt 5.2: Login

Jetzt können wir uns auf unserer Website einloggen

Schritt 5.3: Divi Child Theme hinzufügen

Anschließend navigieren wir zu Design > Themes und klicken im oberen Bereich auf Hinzufügen

Divi Child Theme hinzufügen

Schritt 5.4: Divi Child Theme hochladen

Um das Child Theme hochzuladen, klickt ihr auf Theme hochladen und wählt den komprimierten Ordner von eurem Computer aus. Habt ihr alles richtig gemacht, wird der Jetzt installieren Button anwählbar. Klickt auf den Button!

Divi Child Theme hochladen

Schritt 5.5: Theme aktivieren

Hat alles geklappt, dann solltet ihr jetzt die unten abgebildete Meldung erhalten. Klicke jetzt auf Aktivieren um den Vorgang abzuschließen.

Divi Child Theme erstellen Erfolgsmeldung

Das war es auch schon. Die Installation ist jetzt abgeschlossen. Überprüfe am besten direkt ob deine WordPress Webseite funktioniert wie zuvor. Du kannst jetzt Änderungen vornehmen, ohne dass diese bei einem Update überschrieben werden. Übrigens haben wir zwei weitere Beiträge erstellt, die dich in diesem Zusammenhang interessieren könnten. Der eine ist ein Leitfaden zum richtigen Bearbeiten der functions.php und der andere, ein Tutorial zum Einbinden von CSS-Code mit Divi. Es ist wichtig die Grundlagen zu verstehen, damit der von dir eingebundene Code keine ungewollten Schäden an deiner Webseite verursacht.

Wenn dir der Artikel gefallen hat, dann freuen wir uns über ein Follow auf Twitter und Facebook. Mehr WordPress und Divi Video Tutorials findest du auf unserem Youtube Channel.

Noch Fragen? Verbesserungsvorschläge oder Anregungen für weitere Artikel? Dann nutz‘ die Kommentarfunktion unter diesem Beitrag!

Anzeige Divi Theme kaufen
Aktuelle Beiträge

6 Kommentare

  1. Sylvia

    Perfekt erklärt! Danke für die Unterstützung.

    Antworten
    • wplo

      Freut mich! Viel Erfolg beim gestalten deiner Website!

      Antworten
  2. Marvin

    Vielen Dank für das Tutorial. Es hat mir sehr weitergeholfen.

    Viele Grüße aus Münster

    Antworten
    • wplo

      Gern! Freut mich wenn es dir hilft!

      Antworten
  3. Woodoo

    Danke!!!

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

NEWSLETTER ABONNIEREN

Wöchentlich die neusten Beiträge und Tutorials ins E-Mail Postfach.

NEWSLETTER ABONNIEREN

Wir haben dir eine Newsletter Bestätigung zugesendet. Klicke hierfür auf den Bestätigungsbutton in der E-Mail