So erstellen Sie ein Divi-Child-Theme

Veröffentlicht: 2024-06-28

Es stehen Ihnen Tausende (das ist richtig, Tausende!) WordPress-Themes zur Verfügung, aus denen Sie beim Erstellen einer Website auswählen können. Die meisten Webdesigner sind jedoch der Meinung, dass WordPress-Themes zwar ein guter Ausgangspunkt sind, sie sich jedoch mehr Anpassungsmöglichkeiten wünschen, und die Erstellung eines untergeordneten Themes ist eine großartige Möglichkeit, dies zu tun.

Untergeordnete Themen bauen auf übergeordneten Themen auf und ermöglichen Ihnen das Hinzufügen oder Entfernen Ihres eigenen Codes. Wenn Sie Ihre WordPress-Site wirklich anpassen möchten, ist die Verwendung von Child-Themes der beste Weg und Divi ist eine der besten Optionen.

Der Hauptgrund dafür, dass Kreative ein untergeordnetes Divi-Theme erstellen, besteht darin, dass bei der Aktualisierung des übergeordneten Themes nichts auf Ihrer Website kaputt geht. Das Erstellen eines untergeordneten Divi-Themes fungiert im Wesentlichen als Sicherheitsnetz, das immer da ist, um Ihre Website abzufangen, bevor sie kaputt geht! Aber ich übertreibe mich selbst, also fangen wir mit den Grundlagen an.

In diesem Artikel werde ich Folgendes behandeln:

  • Was ist Divi und welche Funktionen bietet es?
  • So erstellen Sie ein Divi-Child-Theme (+ ein kostenloser Download für Kinder!)
  • So testen Sie, ob Ihr Divi-Child-Theme funktioniert

Lass uns eintauchen.

Was ist Divi und welche Funktionen bietet es?

Divi ist ein WordPress-Theme von Elegant Themes, mit dem Sie Ihre Seiten von Grund auf mit verschiedenen Strukturelementen erstellen können. Das bedeutet, dass Sie dank des überlegenen visuellen Editors die volle Kontrolle über alles auf den von Ihnen erstellten Websites haben.

Es enthält außerdem Hunderte vorgefertigter Designs. Wenn Sie also keine Erfahrung mit der Erstellung und Anpassung von Designs haben, ist das kein Problem! Egal, ob Sie ein Anfänger sind, der Ihre erste Website anpassen möchte, oder ein erfahrener Entwickler, Divi bietet Ihnen die Werkzeuge, um Ihre Ideen zum Leben zu erwecken.

Entwickler erstellt ein Divi-Child-Theme

Divi verfügt über zwei Builder-Schnittstellen: Den visuellen Editor im Front-End von WordPress und den Back-End-Builder. Mit dem visuellen Editor wird das Erstellen von Websites für Kunden zehnmal einfacher, schneller und angenehmer, da Sie direkt auf der Seite Änderungen vornehmen und Ihre Änderungen live sehen können. Im Backend bearbeiten Sie die blockbasierte Darstellung im Beitrag. Sie können jedoch weiterhin neue Module hinzufügen und im Wesentlichen alles wie im visuellen Editor tun. Es ist auch einfach, je nach Wunsch zwischen den Editoren hin und her zu wechseln.

Divi verfügt außerdem über drei Hauptstrukturelemente, die Sie unverändert verwenden oder an Ihre genauen Spezifikationen anpassen können: Abschnitte, Reihen und Module.

Abschnitte: Dies sind die größten Bausteine ​​im Divi-Builder. Sie können sie sich als horizontale Stapelblöcke vorstellen, die Ihre Inhalte in visuell unterscheidbare Bereiche gruppieren können. Alles, was Sie erstellen, beginnt mit einem Abschnitt.

Zeilen: Zeilen sind die verschiedenen Spaltenlayouts, die in Abschnitten platziert werden können. Sie verfügen über verschiedene Einstellungen, auf die Sie durch Klicken auf das Einstellungssymbol oben links in der Zeile zugreifen können. Sie können verwendet werden, um die Vielfalt der mit dem Divi Builder erstellten Layouts erheblich zu erhöhen, da sie die Struktur erstellen, in der Ihre Module untergebracht sind.

Module: Module enthalten verschiedene Inhaltselemente wie Bilder, Inhalte, Schieberegler, Galerien, Kontaktformulare, CTAs, Blogs, Formulare, Testimonials usw. Es gibt über 40 Module, aus denen Sie auswählen und die Sie dann nach Ihren Wünschen anpassen können.

Nachdem Sie Divi nun etwas besser verstanden haben, wollen wir uns mit der Erstellung eines untergeordneten Themas befassen.

So erstellen Sie ein Divi-Child-Theme

Bevor Sie mit der Anpassung beginnen, sollten Sie sicherstellen, dass Divi installiert und aktiviert ist. Hierfür gibt es zwei Möglichkeiten:

Option 1: Verwenden Sie Flywheel + Divi für eine schnelle und einfache Installation.

Option 2: Die manuelle Methode (befolgen Sie diese beiden Schritte)

Schritt 1: Melden Sie sich hier an und laden Sie Divi herunter. Sobald Sie ein Konto erstellt und sich angemeldet haben, werden Sie zum Mitgliederbereich weitergeleitet. Gehen Sie auf die linke Seite und finden Sie die Registerkarte „Downloads“. Suchen Sie Divi und klicken Sie auf „Herunterladen“. Dadurch wird ein Download von Divi in ​​einer ZIP-Datei an Ihren Download-Ordner gesendet.

Schritt 2: Es ist Zeit, sich bei Ihrer WordPress-Site anzumelden. Gehen Sie zu „Darstellung“ > „Themen“. Klicken Sie auf der rechten Seite auf „Neu hinzufügen“ oder „Neues Thema hinzufügen“. Klicken Sie oben links auf die Schaltfläche „Theme hochladen“. Wählen Sie die Datei und suchen Sie die Divi-Zip-Datei. Hinweis: Bewahren Sie es in einer ZIP-Datei auf (nicht entpacken). Klicken Sie auf Installieren. Nachdem die Installation abgeschlossen ist, klicken Sie auf „Aktivieren“ und schon ist es auf Ihrer Website installiert und aktiviert! ?

Jetzt können Sie ein Divi-Child-Theme erstellen! Es gibt im Wesentlichen drei Möglichkeiten, ein untergeordnetes Divi-Theme zu erstellen: Laden Sie ein kostenloses untergeordnetes Thema herunter, verwenden Sie ein Plugin oder programmieren Sie es manuell.

Option 1: Laden Sie eine kostenlose Divi Child Theme-Datei herunter

Eine der schnellsten (und einfachsten!) Möglichkeiten, ein untergeordnetes Thema zu erstellen, besteht darin, dieses kostenlose untergeordnete Divi-Thema herunterzuladen. Es verfügt über alles, was Sie für den Einstieg benötigen, sowie über Platz, den Sie nach Ihren Wünschen anpassen können! Laden Sie unten Ihr kostenloses Divi-Kinderthema herunter.

Sobald es heruntergeladen ist, installieren Sie Divi, aktivieren Sie es und schon kann es losgehen! So einfach ist das. Wenn Sie eine andere Möglichkeit zum Erstellen eines untergeordneten Divi-Themes bevorzugen, können Sie jederzeit ein Plugin ausprobieren.

Option 2: Erstellen Sie ein Divi-Child-Theme mithilfe eines Plugins

Es stehen eine Reihe von Plugins zur Verfügung, die Ihnen bei der Erstellung eines Divi-Child-Themes helfen. Hier sind einige meiner persönlichen Favoriten:

  • Divi-Kinder
  • Konfigurator für untergeordnete Themen
  • Kinderthema-Ersteller von Orbisius
Zwei Hände halten Kabel mit Steckern an den Enden

Divi-Kinder

Divi Children ist ein kostenloses Plugin, das speziell für Benutzer von Divi entwickelt wurde. Es nimmt Ihnen automatisch die harte Arbeit ab, sodass Sie sich ganz auf die kreative Seite konzentrieren können! Jedes von Divi Children erstellte untergeordnete Thema verfügt über zahlreiche Anpassungsfunktionen über den WP Customizer. Erfahren Sie hier, wie Sie dieses Plugin installieren.

Konfigurator für untergeordnete Themen

Dieses Plugin wurde für WordPress-Benutzer entwickelt, die Stylesheets für untergeordnete Themes direkt anpassen möchten. Mit diesem Plugin können Sie ganz einfach genau die CSS-Attribute identifizieren und überschreiben, die Sie anpassen möchten. Der Analysator scannt das gerenderte Design und konfiguriert Ihr untergeordnetes Design automatisch. Erfahren Sie hier mehr über dieses Plugin und wie Sie es installieren.

Kinderthema-Ersteller von Orbisius

Mit diesem Plugin können Sie schnell untergeordnete Themes aus jedem Theme erstellen, das Sie derzeit auf Ihrer Site installiert haben. Mit diesem Plugin können Sie eine unbegrenzte Anzahl untergeordneter Themen aus Ihrem übergeordneten Thema erstellen, sodass die Optionen endlos sind. Es verfügt über zwei Editoren und Sie können Ausschnitte aus einem Thema auswählen und in ein anderes einfügen. Sprechen Sie über Individualisierung! Erfahren Sie hier mehr über die Installation dieses Plugins.

Wenn ein Plugin nicht das Richtige für Sie ist, besteht schließlich immer die Möglichkeit, manuell ein Divi-Child-Theme zu erstellen!

Option 3: Erstellen Sie manuell ein Divi-Child-Theme

Wenn Sie ein WordPress-Entwickler sind oder einfach nur eine gute Herausforderung lieben, ist dies eine großartige Möglichkeit für Sie, ein Divi-Child-Theme zu erstellen.

Ein Entwickler, der nach neuen Tools sucht, die ihm bei seiner Website helfen.

Schritt 1: Erstellen Sie die style.CSS-Datei

Wie Sie wahrscheinlich wissen, dient die Datei style.css dazu, WordPress die Details Ihres Child-Themes mitzuteilen und kann zum Hinzufügen von benutzerdefiniertem CSS verwendet werden! Erstellen Sie dazu einen Ordner auf Ihrem Computer und geben Sie ihm einen Namen (etwas, das Sie wissen lässt, dass es sich um ein untergeordnetes Divi-Theme handelt). Erstellen Sie von dort aus eine Datei in diesem Ordner und nennen Sie sie style.css.

Hinweis: Stellen Sie sicher, dass Sie über ein Text- oder Code-Editor-Tool verfügen, da es sonst schwierig wird, diese Datei zu benennen!

Schritt 2: Fügen Sie Folgendes zur Datei style.css hinzu:

 /*
 Themenname: Divi Child Theme
 Theme-URI: https://www.elegantthemes.com/gallery/divi/
 Beschreibung: Kinderthema für Divi
 Autor: Ihr Name
 Autor-URI: https://getflywheel.com/
 Vorlage: Divi
 Version: 1.0.0
*/

Der Themenname, die Themen-URI, die Beschreibung, der Autor, die Autoren-URI und die Version können alle bearbeitet werden. Behalten Sie den Vorlagennamen bei! Für weitere Anpassungen (und um sicherzustellen, dass Ihr Divi-Child-Theme funktioniert), fügen Sie hier benutzerdefiniertes CSS hinzu.

Schritt 3: Erstellen Sie die Datei „functions.php“.

Erstellen Sie eine weitere Datei in dem Ordner, den Sie bereits erstellt haben, und nennen Sie sie „functions.php“.

Fügen Sie dann diesen Code zu Ihrer neuen Datei hinzu und fügen Sie unterhalb der letzten Zeile alle gewünschten benutzerdefinierten Funktionen hinzu:

 <?php
Funktion divi__child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );

Schritt 4: Erstellen Sie einen Screenshot

Dies ist ein wichtiger Schritt, damit auf Ihrer Website auf der WordPress-Themenseite kein leerer Bereich an der Stelle vorhanden ist, an der sich das Bild befinden sollte. Daher ist das Anfertigen eines kurzen Screenshots hier ein wichtiger Schritt! Sobald Sie Ihren Screenshot aufgenommen haben, stellen Sie sicher, dass die Abmessungen 880 x 660 Pixel betragen, dass es sich um eine PNG- oder JPEG-Datei handelt (beides funktioniert!) und dass der Name [screenshot.png] oder [screenshot.jpeg] lautet. Anschließend fügen Sie Ihr Screenshot-Bild zum Hauptordner hinzu.

Schritt 5: Komprimieren Sie den Ordner und laden Sie ihn hoch

Komprimieren Sie abschließend den Ordner in eine ZIP-Datei und laden Sie ihn auf WordPress hoch! Gehen Sie zu „Darstellung “ > „Themen“ > „Hochladen“ und klicken Sie dann auf „Aktivieren“.

Voila! Sie haben erfolgreich ein Divi-Child-Theme erstellt und sind bereit, es nach Ihren Wünschen anzupassen.

So testen Sie, ob Ihr Divi Child Theme funktioniert

Um zu testen, ob Ihr Child-Theme ordnungsgemäß funktioniert, fügen Sie etwas CSS in die style.css-Datei Ihres Child-Themes ein und speichern Sie Ihre Änderungen. Sie sollten diese Änderungen auf der Live-Site sehen und dann wissen, dass es funktioniert!

Hinweis: Möglicherweise müssen Sie Ihre Seite in einem privaten Browser öffnen, falls sie zwischengespeichert ist.

Denken Sie daran: Sie sollten niemals Änderungen an Ihrer Live-Site vornehmen, wenn nicht die Gefahr besteht, dass dabei etwas kaputt geht! Verwenden Sie Local, eine kostenlose lokale Entwicklungs-App, damit Sie auf das Debuggen lokaler Umgebungen verzichten und mehr Zeit damit verbringen können, schöne WordPress-Sites zu starten. Erfahren Sie hier mehr über Local.

Abschluss

Die Anpassung ist einer der besten Aspekte beim Erstellen von Websites mit WordPress. Themes sind zwar gute Ausgangspunkte, aber es ist schön, untergeordnete Themes wie Divi zur Verfügung zu haben.

Kostenloser Divi-Child-Theme-Download

Eine der schnellsten (und einfachsten!) Möglichkeiten, ein Child-Theme zu erstellen, besteht darin, dieses kostenlose Divi-Child-Theme herunterzuladen. Es verfügt über alles, was Sie für den Einstieg benötigen, und bietet außerdem Platz, den Sie nach Ihren Wünschen anpassen können! Laden Sie unten Ihr kostenloses Divi-Kinderthema herunter.