0172 15 30 360 info@infostand24.de

9 Divi Child-Themen, die sich perfekt für persönliche Websites eignen

9 Divi Child-Themen, die sich perfekt für persönliche Websites eignen

Persönliche Websites sind auf der WordPress-Plattform sehr beliebt. Dies ist einer der vielen Gründe, warum Benutzer überhaupt zu WordPress gekommen sind – um ihre eigene Plattform aufzubauen und ihre Botschaft an die Welt zu bringen. Natürlich kann Divi dabei helfen. In diesem Artikel werfen wir einen Blick auf 10 Divi-Kinderthemen, die sich perfekt für persönliche Websites eignen.

Die untergeordneten Themen in dieser Liste bieten eine Vielzahl von Funktionen. Einige haben Portfolio-Elemente, andere E-Commerce-Elemente, aber diese untergeordneten Themen hängen nicht von diesen Funktionen ab, und viele persönliche Websites benötigen diese Funktionen ohnehin. Das einzige, was sie gemeinsam haben, ist eine Möglichkeit, sich auf Sie zu konzentrieren – Ihre Plattform durch Bloggen oder Ihre Arbeit zu erstellen. Alle funktionieren hervorragend für persönliche Websites. Sie sind in keiner bestimmten Reihenfolge.

1. MKO

MKO soll ein Reiseblog sein, funktioniert aber genauso gut für jede Art von persönlichem Bloggen. Es enthält einen Vollbild-Post-Schieberegler mit Überlagerung und ein Hamburger-Menü auf der rechten Seite. Das Scrollen zeigt einen zweispaltigen Abschnitt mit Text- und Hintergrundfarben, einen vierspaltigen Abschnitt mit Blog-Posts, Bildern und manchmal nichts, sodass der Parallaxenhintergrund in einem schönen Mosaikmuster durchscheint. Darauf folgt ein weiterer zweispaltiger Abschnitt wie der erste und eine Bildergalerie mit Hover-Effekten für Bilder und Maus. Layoutdesign, Farbe und Schriftarten werden hervorragend genutzt.

2. Vertikal

Vertical verfügt über einen Vollbild-Bildschieberegler, einen kleinen Abschnitt mit Links zu Info, Portfolio und Kontaktaufnahme, einen Info-Abschnitt mit Bildern und Text, einen Abschnitt mit Links zu verschiedenen Galerien, einen Infobereich mit zweispaltigem Text und eine Drei -Spalten-Blog-Bereich und eine angepasste Fußzeile mit Hintergrundbild, Text und Kontaktschaltfläche. Die verschiedenen Abschnitte sind durch vollständige Abschnitte mit Bildern in Parallaxe und Beschriftungen getrennt, die den Namen des Abschnitts anzeigen. Der Blog enthält eine gestaltete Seitenleiste.

3. Fortsetzen

Lebenslauf ist ein einseitiges Design, das einen dunkelgrauen Hintergrund mit hellgrünen Markierungen verwendet, um Ihren Lebenslauf oder andere Informationen anzuzeigen. Es enthält einen kurzen Abschnitt mit einem vereinfachten Bildungsabschnitt und Foto, Qualifikationen, Klappentexte mit Interessenlisten, eine vertikale Zeitleiste, ein Balkendiagramm für jede Fertigkeit und ein Kontaktformular. Auf der gesamten Homepage befinden sich mehrere persönliche Zitate mit gestalteten Abschnitts-Trennzeichen.

4. Träumer

Dreamer hat ein feminines Design, das klar und elegant ist. Zu den Funktionen gehören sanfte Farben, Blöcke für Links zu Seiten, ein schmales Anmeldeformular, eine gestaltete Seitenleiste und gestaltete Module. Es enthält eine Info-Seite, eine Galerie, ein Blog und eine Kontaktseite. Jede der Seiten verwendet einen Header in voller Breite, der dem Styling folgt. Das Blog verwendet ein zweispaltiges Layout mit einer gestalteten Seitenleiste. Die Akzente tragen zur Eleganz bei.

5. Sarasota Blog

Sarasota Blog zeigt ein Bild in voller Breite über einem gestalteten Anmeldeformular an. Blog-Posts werden prominent mit einem einzigen Artikel, einem dreispaltigen Abschnitt für aktuelle Blog-Posts und einem zweispaltigen Abschnitt mit Post-Snippets unter bestimmten Kategorien vorgestellt. Das Menü enthält Links zu mehreren Blog-Kategorien. Die Seitenleisten sind ebenfalls passend gestaltet. Ich mag die braunen Farben mit tiefroten Reflexen. Es ist eine großartige Wahl, um zu bloggen oder Ihre Dienste zu präsentieren.

6. Engagieren

Engage wurde unter Berücksichtigung des Bloggens erstellt und zeigt eine Kopfzeile in voller Breite mit überlappendem Logo und Navigationsstruktur für Kategorien an. Ein E-Mail-Anmeldeformular mit einem gestalteten Abschnittstrennzeichen führt zu einem zweispaltigen Abschnitt in voller Breite und einem Abschnitt für Kategorien mit Bildern und Überlagerungen. In einem einspaltigen Blog-Bereich wird eine gestaltete Seitenleiste angezeigt. Das Kontaktformular und die benutzerdefinierte Fußzeile verbinden alles miteinander. Es nutzt Farbe, Bildplatzierung und Schriftarten sehr gut.

7. Astra

Astra konzentriert sich auf das Bloggen und bietet sogar zusätzliche Module und Widgets. Nach einem Header in voller Breite und einem schmalen Anmeldeformular folgt ein einspaltiger Blog-Bereich mit Seitenleiste und zusätzlichem Stil, damit sich die Blog-Beiträge von anderen abheben. Das Astra-Blog-Modul fügt den Blog-Posts Funktionen hinzu, darunter soziale Schaltflächen, eine gestaltete Kategorie, eine gestaltete Meta-Leiste und ein scharfes Blog-Layout. Die benutzerdefinierten Post-Widgets folgen dem gleichen Stil mit Bild, Meta und Titel. Eine integrierte Funktion für verwandte Beiträge setzt das Styling fort.

8. Omnia

Omnia ist ein Allzweck-Kinderthema mit hellen und dunklen Mustern. Es enthält viele diagonale und dreieckige Styling-Funktionen, Überlappungen, geteilte Bildschirme, CSS-Animation, CTA im oberen Menü, Ken Burns-Effekt sowie 15 gestaltete Module und Elemente. Erstellen Sie ganz einfach ein scharfes Blog mit Portfolio, um Ihre Arbeit oder alles, was Sie interessiert, zu präsentieren.

9. Polygon

Polygon ist ein Allzweckthema mit vielen eleganten Funktionen, darunter ein CTA im Menü, Header-Übergangseffekte, Partikelhintergrund mit Einstellungen, viele gestaltete Module mit Hover-Effekten und 10 benutzerdefinierte Seiten, darunter drei verschiedene Homepages. Der Blog sieht fantastisch aus mit seinem Schatteneffekt, dem großen Bild mit Schwebeanimation und dem klaren Design.

Abschließende Gedanken

Unabhängig davon, welche Anforderungen Sie für die Erstellung persönlicher Websites haben, hat Divi ein untergeordnetes Thema, das Ihren Anforderungen entspricht. Unabhängig davon, ob Sie sich auf Ihre Artikel, Ihre Arbeit, ein Thema, das Sie interessiert, oder speziell auf Sie konzentrieren müssen, mindestens eines dieser 10 Divi-Kinderthemen hat mit Sicherheit das, was Sie brauchen.

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.css in 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!

 

Wichtig: Falls Du Deine Website bereits fertiggestellt hast ohne ein Child Theme zu verwenden und jetzt doch nachträglich auf ein Child Theme wechseln willst, schau Dir vorher unsere Anmerkungen unter Child Theme nachträglich erstellen an.

 

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.

Child-Theme Download

 

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“.

 

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

 

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

Bitte beachten: Vorher solltest Du trotzdem wie immer sicherheitshalber ein WordPress Backup laufen lassen, so dass Du im Falle eines Falles den ursprünglichen Zustand wiederherstellen kannst. Die folgenden Tipps beruhen auf einigen Tests von uns. Wir können aber nicht 100% sicher sagen, dass die folgenden Aussagen immer Bestand haben werden.

 

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.

 

  1. 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.css in dem Child Theme Ordner übertragen (Achtung: ggf. muss Du dann noch bei einigen Anweisungen !important ergänzen, siehe hier).

 

  1. 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.css zu sammeln.

 

  1. 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.

 

  1. 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.css im 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.