Aktualisierungsdatum anzeigen

Nichts ist so alt wie die Zeitung von gestern. Das gilt nicht nur Printmedien, sondern auch für Websites: Um langfristig gute Platzierungen in den Suchmaschinen zu bekommen und eine relevante Quelle für Deine Leser zu bleiben, musst Du aktuelle Inhalte bieten.

Der Haken: Das Aktualisieren selbst ist kein Problem. Die meisten WordPress-Themes zeigen allerdings nicht an, dass der Artikel auf den neuesten Stand gebracht wurde. Wenn Du es dabei belässt, vertust Du eine große Chance.

Weshalb solltest Du Deine Seite aktualisieren?

Gründe, Deine Artikel zu aktualisieren, gibt es viele: Google liebt frischen Content und aktuelle Seiten. Eine nachträgliche Überarbeitung eines Textes ist deshalb durchaus positiv. Denn Google möchte den Nutzern möglichst aktuelle Ergebnisse liefern und keine veralteten Blogbeiträge.

Manchmal sind Inhalte auch so veraltet, dass sie schlichtweg falsch sind. Dann müssen sie natürlich auch auf den neuesten Stand gebracht werden. Auch, wenn Du feststellst, dass Du unbeabsichtigt eine falsche Information verwendet hast, sollte dies verbessert werden.

Und nicht zuletzt sind Korrekturen und Anpassungen immer ein Grund, einen Inhalt zu aktualisieren: Korrigierte Rechtschreibfehler oder eine Anpassung für einen neuen Stil im Blog sind nur zwei Beispiele.

Wie gibst Du die Aktualisierung am besten an?

Bei den meisten Themes erscheint unterhalb des Artikeltitels die Datumsangabe, wann der Artikel ursprünglich veröffentlicht wurde:

WordPress Artikel Datum anzeigen

Die beste Möglichkeit, solche Aktualisierungen anzugeben, besteht in einem doppelten Datum: Das Erstellungsdatum zeigt Seitenbesuchern an, wann die Ursprungsform des Artikel verfasst wurde. Das Änderungsdatum ist ein Hinweis darauf, dass der Inhalt noch immer aktuell ist.

Um gerade bei größeren Seiten nicht alles manuell eingeben zu müssen, empfiehlt sich zudem eine automatische Ausgabe des Änderungsdatums. Du kannst Dich dabei zwischen verschiedenen Varianten entscheiden: Einer vollautomatischen Ausgabe oder einem Shortcode, den zu manuell in den geänderten Inhalt einfügst.

Wichtig: Gleichgültig welche Variante Du wählst, als erstes solltest Du ein Child Theme erstellen und dies aktivieren.

Änderungsdatum automatisiert angeben

Dies ist die einfachste und zeitsparendste Methode. Dir stehen zwei Möglichkeiten zur Verfügung, dies umzusetzen: Das Datum vor dem Content ausgeben oder es in der Template-Datei einfügen.

Achtung: Denke daran, ein Backup der Dateien anzulegen, ehe Du etwas in ihnen änderst. Falls etwas schief läuft, kannst Du es so leicht rückgängig machen. Weitere Hinweise findest Du in unserem Artikel "WordPress Dateien sicher bearbeiten".

Automatisch vor dem Content anzeigen

Hier wird einfach vor dem eigentlichen Text ein kurzer Hinweis auf die Aktualisierung vorangestellt:

WordPress Artikel: Datum aktualisiert vor dem Inhalt anzeigen

Indem Du einen entsprechenden Code in die functions.php einfügst, läuft alles weitere vollautomatisch ab. Sofern eine Aktualisierung vorliegt, wird das Änderungsdatum über dem Artikel eingefügt. Innerhalb des Codes kannst Du auch angeben, dass die Änderung älter als z. B. 24 Stunden sein soll. So kannst Du nach der Veröffentlichung noch kleinere Anpassungen vornehmen, ohne dass dies als Update gewertet wird.

Dies ist der Code für Deine functions.php:

// Änderungsdatum einfügen
function wp_change_date($content) {
if (is_single() && get_post_type() == 'post') {
	$article_made = get_the_date('U');
	$article_updated = get_post_modified_time('U');

	// Nur anzeigen, wenn Aktualisierung nach mehr als drei Tagen erfolgte
	if (($article_updated - $article_made) > 259200)
	{
		$content = 'Artikel aktualisiert am ' . get_the_modified_date('d.m.Y') . $content;
	}
}
return $content;
}
add_filter('the_content', 'wp_change_date');

Folgende Variablen kannst du für Deine Zwecke anpassen:

Automatisch in der Template-Datei einfügen

Diese Möglichkeit ähnelt der vorherigen sehr. Der Unterschied besteht darin, dass Du die Stelle, an welcher das Datum eingefügt wird, frei in der Template-Datei auswählst. Das ist allerdings etwas anspruchsvoller und Du solltest Dich schon ein wenig mit den Template Dateien eines Themes auskennen. Dafür musst Du zwei Dateien Deiner WordPress-Installation ändern.

Füge dafür diesen Code in die functions.php Datei Deines Themes ein:

// Änderungsdatum einfügen
function wp_change_date()
{
$article_made = get_the_date('U');
$article_updated = get_post_modified_time('U');

// Nur anzeigen, wenn Aktualisierung nach mehr als drei Tagen erfolgte
if (($article_updated - $article_made) > 259200)
{
    echo 'Aktualisiert am ' . get_the_modified_date('d.m.Y');
}
}

Dann erstellst Du für das passende Template Deines Themes, in der Regel ist dies die single.php, eine Kopie in dem Child Theme Ordner und fügst Du nun an der gewünschten Stelle diese Zeile ein:

<?php echo wp_change_date(); ?>

Dadurch kannst Du kontrollieren, wo das Änderungsdatum erscheinen soll.

Änderungsdatum manuell per Shortcode eingeben

Wenn Du mehr Kontrolle darüber bewahren möchtest, in welchen Artikeln das Änderungsdatum ausgegeben wird, ist das Einfügen per Shortcode eine gute Alternative. Dafür fügst Du wieder einen entsprechenden Code in die functions.php ein:

// Änderungsdatum Shortcode
function wp_change_date()
{
$article_made = get_the_date('U');
$article_updated = get_post_modified_time('U');

// Nur anzeigen, wenn Aktualisierung nach mehr als drei Tagen erfolgte
if (($article_updated - $article_made) > 259200)
{
    $str = 'Aktualisiert am ' . get_the_modified_date('d.m.Y');
}
return $str;
}
add_shortcode( 'aenderungsdatum', 'wp_change_date' );

Anschließend kannst Du dem Shortcode [aenderungsdatum] das Datum genau dort einfügen, wo Du es möchtest. Allerdings setzt diese Option voraus, dass Du daran denkst den Shortcode zu nutzen, wenn Du einen Text aktualisierst.

Das Aktualisierungsdatum anstelle des Veröffentlichungsdatums anzeigen

Am professionellsten wirkt es meist, wenn die Anzeige des Aktualisierungsdatums genau an der Stelle stattfindet an der sonst das Veröffentlichungsdatum zu sehen ist:

WordPress Artikel Datum aktualisiert statt des Veröffentlichungsdatums anzeigen

Dafür füge folgenden Code in die functions.php Datei Deines Themes ein:

function wp_change_date( $the_date ) {
    if ( 'post' === get_post_type() ) {
        $the_time = get_post_time( 'His' );
        $the_modified = get_post_modified_time( 'His' );
 
        $last_modified =  sprintf( __( 'Aktualisiert am %s', 'Divi' ), esc_html( get_post_modified_time( 'd.m.Y' ) ) );
        $date = $the_modified !== $the_time ? $last_modified : get_post_time( 'd.m.Y' );
 
        return $date;
    }
}
add_action( 'get_the_date', 'wp_change_date' );
add_action( 'get_the_time', 'wp_change_date' );

Fazit: Änderungsdatum anzeigen lassen

Damit keiner Deiner Besucher denkt, dass die Informationen in Deinen Artikeln vielleicht mehrere Jahre alt und damit vermutlich falsch oder nicht mehr relevant sind, solltest Du unbedingt das Änderungsdatum Deiner Artikel anzeigen lassen.

404-Fehlerseiten selbst anpassen

Jeder Internet-Nutzer kennt sie: Die "Seite nicht gefunden" 404-Fehlerseiten. Wer einem fehlerhaften Link folgt, landet darauf. Was viele Website-Betreiber sich nicht bewusst machen: Die 404-Fehlerseite ist damit enorm wichtig, denn gerade hier brauchen Seitenbesucher umso mehr einen Anreiz, die Website nicht sofort komplett zu verlassen.

Eine 404-Fehlerseite als Chance

Trotzdem sind diese Fehlerseiten fast immer trocken und langweilig. Sie geben dem Besucher keine Hilfestellung. Stattdessen wird er mit dem Problem alleine gelassen, die gesuchten Inhalte nicht gefunden zu haben. Deine Seitenbesucher landen auf einer solchen Fehlerseite, wenn das Ziel einer URL nicht existiert. Das geschieht z. B. wenn Du Inhalte löschst, diese aber noch von einer anderen Stelle aus verlinkt sind.

Einige Probleme kannst du selbst beheben. Wie das möglich ist haben wir in unserem Artikel "404-Fehler: Probleme durch Umleitungen beheben" geschildert.

Aber egal, wie gut Du Deine Website planst, Du wirst nicht vollkommen verhindern können, dass manche Links zu Deiner Seite ins Leere führen. Denn auch, wenn andere Websites fehlerhaft zu Dir verlinken oder Deine Seitenbesucher sich schlichtweg vertippen, landen sie auf der bekannten 404-Seite. Eine angepasste Fehlerseite ist also auf jedem Fall sehr wichtig.

Die perfekte Fehlerseite

Das Wichtigste für Deine Seitenbesucher: Eine Lösung für ihr Dilemma. Egal, aus welchem Grund sie auf einer 404-Fehlerseite gelandet sind, willst Du sie schnellstmöglich dorthin führen, wo sie hinwollen. Eine gute Fehlerseite beinhaltet deshalb zwei sehr wichtige Punkte:

  1. Den deutlichen Hinweis, dass es sich um eine Fehlerseite handelt, und ...
  2. eine einfache und schnelle Lösung für das Problem.

Den Fehler nicht verstecken

Es sollte sofort erkennbar sein, dass es sich um eine Fehlerseite handelt. Wenn Deine Seitenbesucher erst zwischen allen Suchfeldern und Links Ausschau halten müssen, wo sie eigentlich sind, solltest Du das Design dringend überarbeiten.

Der Weg aus der Sackgasse

Du hast zwei Möglichkeiten, die Besucher aus dieser Sackgasse herauszuführen. Beide ergänzen sich dabei sehr gut: Eine funktionierende Suchfunktion und Links.

Mithilfe der Suchfunktion bietest Du den Besuchern direkt an, doch noch die Inhalte zu finden, die sie suchen. Falls sie nicht genau wissen, wonach sie suchen sollen oder auch die Suche ins Leere läuft, führst Du sie über Links zu Seiten, die ihnen hoffentlich weiterhelfen.

Passe Deine 404-Fehlerseite an

WordPress bietet Dir die Möglichkeit, Deine Fehlerseite individuell zu gestalten. Dafür hast Du, wie fast immer, die Wahl zwischen einer manuellen Anpassung oder der Verwendung eines entsprechenden Plugins.

Fehlerseiten mit 404page gestalten

Wenn Du Dich nicht am Quellcode versuchen möchtest, ist das Plugin 404page eine sehr gute Wahl. Es ermöglicht Dir nicht nur, individuelle 404-Fehlerseiten zu gestalten, sondern auch jede beliebte Seite als Fehlerseite festzulegen. Dazu erstellst Du wie gewohnt eine WordPress-Seite und definierst sie anschließend mithilfe des Plugins als 404-Seite.

Manuelles Anpassen

Zu einem vollständigen WordPress Theme gehört eine 404.php-Datei mit dem Template für eine entsprechende Fehlerseite. Diese sind allerdings meist sehr einfach gehalten.

Wenn Du eine eigene Fehlerseite gestalten willst, solltest Du zuerst ein Child Theme anlegen und in dieses eine Kopie der 404.php Theme Datei sichern (siehe WordPress Themes: Technische Grundlagen). Die Kopie lässt sich nun in Ruhe bearbeiten. Kommt es durch die Änderung zu Fehlern, bist Du durch das Child Theme auf der sicheren Seite.

Fazit 404-Fehlerseiten

Fehlerhafte Seitenaufrufe sind nicht zu 100% vermeidbar. Daher lohnt es sich zu prüfen, ob die angezeigte 404-Fehlerseite gut aufgebaut ist und falls nicht entsprechend nachzusteuern. Ein paar Inspirationen zur Gestaltung lassen sich auf Seiten wie Canva oder Creative Bloq finden.

Divi Theme & Page Builder Test 2020

Das Divi Theme ist etwas speziell. Die Entwickler Elegant Themes haben bereits bei der ersten Veröffentlichung des Multipurpose Themes im Jahr 2013 von Anfang an Page Builder Funktionen integriert. Seit fast einem halben Jahrzehnt wird das Divi Theme aktiv weiter entwickelt und mittlerweile erscheinen fast monatlich Updates, die nicht nur Fehlerbehebungen, sondern auch regelmäßig neuen Funktionen enthalten. Außerdem wird die bereits umfangreiche Bibliothek an Vorlagen für verschiedene Websitethemen zweimal wöchentlich um neue Sets erweitert wie z.B. Vorlagen für Autohändler, Restaurants, Coaches, Fitnessanbieter, etc.

Wir wollen dem Erfolg des Divi Themes auf den Grund gehen und auch prüfen welche Nachteile zu finden sind.

Divi 4.0: Theme Builder Update

Hinweis: Am 17.10.2019 hat Elegant Themes ein Update auf Divi 4.0 veröffentlicht. Die zentrale Neuerung sind die lange erwarteten Theme Builder Funktionen. Eine Überarbeitung dieses Testartikels steht noch aus. Grob gesagt, sind alle Hinweise auf die fehlenden Theme Builder Funktionen im Divi Theme nicht mehr gültig. Wir brauchen aber noch etwas Zeit, um den Text anzupassen.

Weitere Infos findest Du im Artikel zum Divi 4.0 Update auf Divi.world oder in unserem Vorstellungsvideo.

Für wen ist das Divi Theme eine geeignete Lösung?

Bei der Beurteilung eines Themes sollte auch die Zielgruppe mitbedacht werden. An wen richtet sich das Divi Theme eigentlich? Hier sind grob zwei Zielgruppen zu finden:

  1. Ambitionierte Anwender, die ihre Website selbst gestalten möchten, aber kein Know How oder Interesse an der Arbeit mit CSS- oder PHP-Code haben.
  2. Webdesigner, die gerne zügig mit Page Builder Funktionen arbeiten oder ihren Kunden entsprechende Funktionen zur späteren eigenen Bearbeitung bereit stellen möchten.

Während einige Webdesigner keine großen Freunde von Page Builder Funktionen sind und statt dessen die Elemente lieber individuell designen und direkt per CSS- und PHP-Code erstellen, gibt es auch einige, die gerne auf solche Funktionen zurückgreifen. Ein großer Pluspunkt des Divi Themes ist die Möglichkeit das Theme auf unbegrenzt vielen Domains einzusetzen. Die Lizenzbedingungen erlauben auch die Nutzung der Lizenz für Kundenprojekte.

Wie gut kennen wir das Divi Theme?

Wir arbeiten selbst seit Anfang 2016 mit dem Divi Theme. Nicht bei allen unseren Projekten, aber wir haben uns so intensiv mit dem Theme beschäftigt, dass wir ein eigenes Projekt gestartet haben, das sich ausschließlich dem Divi Theme widmet: Divi.world.

Auf diesem Weg konnten wir viel Erfahrungen mit dem Divi Theme sammeln, die Weiterentwicklung über einen längeren Zeitraum beobachten und auch den Support kennenlernen.

Hinweis: Die Links in diesem Artikel sind Affiliate-Links. D.h. falls Du eines der verlinkten Produkte kaufst, erhalten wie eine Provision. Das unterstützt uns wphelp.de am Leben zu erhalten. Selbstverständlich ändert das nichts an dem Kaufpreis für Dich.

Installation

Die Installation erfolgt genau wie bei vielen anderen Themes. Nach der Installation ist sofort auch die volle Page Builder Funktionalität vorhanden. Wer ein anderes Theme verwenden möchte, nutzt einfach das gesondert erhältliche Divi Page Builder Plugin. Mit diesem Plugin relativiert sich auch der sogenannte Lock-in-Effekt zumindest was das Theme betrifft.

Erster Eindruck

Auf den allerersten Blick wirkt das "nackte" Divi Theme nicht besonders spektakulär:

Divi Theme Standardansicht

Wer auf dieser Basis seine Website und seinen Blog aufbauen möchte, muss etwas Zeit investieren und sollte dringend einige Einstellungen verändern wie z.B.:

Die Einstellungen für das Divi Theme sind zum einen im Administrationsbereich in den "Theme-Optionen" zu finden und zum anderen im Designmodifikator. Auch wenn dort umfangreiche Veränderungsmöglichkeiten zu finden sind, bieten beliebte Page Builder Themes wie Astra, Ocean WP und das Page Builder Framework zum Teil bereits in den kostenfreien Versionen mehr Optionen. Das soll nicht bedeuten, dass das Divi Theme deutlich schlechter als andere Themes wäre, nur fehlen da und dort doch noch einige Einstellungsmöglichkeiten.

Wir greifen hier nur beispielhaft zwei aus unserer Sicht fehlende Einstellungen auf:

1. Die Blogübersicht: nur Liste

Die Seite auf der alle bisherigen Blogbeiträge aufgelistet werden, lässt sich über die Themeeinstellungen nur in einer Varianten darstellen: eine Liste mit erst dem Beitragsbild gefolgt von einem Textauszug.

Divi Theme Blogansicht Liste

Die fehlenden Einstellungen relativieren sich etwas, da mit dem Einsatz des Blog Modules im Divi Builder, deutlich mehr Optionen zur Verfügung stehen. Wer z.B. ein Gitter bzw. Masonery Layout für seinen Blog nutzen möchte, kann dies durch den Einsatz des Blog Moduls im Divi Builder erreichen, aber nicht direkt über die Themeeinstellungen.

Eine Option für die beliebte Darstellungsweise mit dem Beitragsbild links und daneben den Auszug existiert von Haus aus leider weder in den Theme Einstellungen noch im Blog Modul. Allerdings sollte sich hier in nicht allzu ferner Zukunft etwas tun. Dazu später mehr.

2. Der Website Titel: kein Text nur ein Logo

Wer den Titel seiner Website nicht in Form eines Bildes oder Logos hinterlegen möchte, sondern einfach als Text darstellen will, kommt mit den Divi Bordmitteln leider nicht ans Ziel.

Diese beiden Punkte sind in der Regel keine großen Probleme und lassen sich bei Bedarf durch den Einsatz von speziellen Plugins oder etwas CSS- oder PHP-Code aus dem Weg räumen. Aber hier zeigt sich, dass Elegant Themes in der letzten Zeit etwas zu viel Konzentration auf die Page Builder Funktionen gelegt und dabei den Aspekt der Theme Einstellungen etwas vernachlässigt hat.

Es gibt allerdings einen Lichtblick am Horizont ...

Die Zukunft: Theme Builder Funktionen

Elegant Theme stellt in sogenannten "Sneak Peaks" in ihrem Blog immer wieder neue Funktionen für das Divi Theme vor, die mit einem der kommenden Updates verfügbar werden. Bereits im Mitte Mai 2018 erschien ein entsprechender Artikel, in dem Theme Builder Funktionen angekündigt wurden.

Mit diesem Update soll es möglich sein Layouts nicht nur für einzelne Seiten oder Beiträge zu erstellen, sondern auch für wiederkehrende Elemente der Website wie z.B. der Header, Footer, Sidebar, etc. Damit ließe sich dann z.B. auch ein Header erstellen, der den Seitentitel in Textform enthält oder eine eigenes gestaltete Blogansicht.

Insgesamt werden die Theme Builder Funktionen, das Divi Theme nochmal deutlich aufwerten im Vergleich zu anderen Themes und Page Builder Plugins. Allerdings ist noch immer nicht bekannt mit welchem Update diese Funktionen verfügbar sein werden. Andere Page Builder wie z.B. Elementor besitzen in der Pro Version bereits Theme Builder Funktionen oder diese lassen sich wie beim Beaver Builder mit einem zusätzlichen nicht ganz günstigen Addon ergänzen.

Layouts, Layouts, Layouts: Hier glänzt das Divi Theme

Jetzt fragt sich vielleicht der ein oder andere wie er denn bei solchen - zwar nicht gravierenden - Einschränkungen mit Divi schnell an sein Ziel kommen kann.

Die Möglichkeiten sehr schnell zu einer ansehnlichen Website in modernem Design zu kommen, sind im Divi Builder zu finden. Dort lassen sich über 70 Layout Packs mit mehr als 533 einzelnen Layouts aus einer Bibliothek abrufen.

Divi Theme Layout Bibliothek

Du kannst diese Layout-Bibliothek auch vor dem Kauf in Ruhe auf der Elegant Themes Website durchstöbern und ansehen.

Jedes Pack ist auf eine bestimmte Art von Website ausgerichtet wie z.B. den Internetauftritt für ein Restaurant, Yoga Studio, Reisebüro, Blumenladen, Fitnessanbieter, eine Hochzeitsseite, ein Reiseblog oder eine Autovermietung, etc. Dabei enthält ein Pack stets 6-9 Layouts für einzelne Seiten, die typischerweise für die entsprechende Art des Internetauftritts benötigt werden.

Dazu gehören typischerweise die Startseite, eine Blogansicht, eine Landingpage, eine Über mich bzw. über uns Seite, eine Team Ansicht und thematisch passende Seiten wie im folgenden Beispiel des Yoga Studio Packs mit der "Classes" Seite (Übersicht der angebotenen Yogaklassen).

Divi Theme Layout Pack

Jedes Layout Pack ist in einem einheitlichen Design gestaltet. Ebenfalls sehr komfortabel: alle genutzten Bilder und graphischen Elemente werden mit importiert und können frei verwendet werden. Niemand muss sich dabei um Lizenzrechte sorgen, darum kümmert sich Elegant Themes. Für jedes der Packs steht eine Demoseite zur Verfügung auf der man sich ansehen kann, wie die Seiten aussehen werden.

Außerdem veröffentlicht Elegant Themes sehr häufig begleitende Artikel zu den Layout Packs, die erläutern wie bestimmte passende Funktionen zusätzlich in die Website integriert werden können. Für das Yoga Studio Pack wird beispielsweise gezeigt wie sich eine Mitgliederanmeldung und -verwaltung in die Seite integrieren lässt. Leider erscheinen diese Artikel stets nur in englischer Sprache.

Wer hier etwas findet, was seinem Geschmack entspricht, kann auf diesem Weg zumindest die Grundlage des eigene Internetauftrittes in sehr kurzer Zeit aufbauen. Man importiert einfach die Layouts für die benötigten Seiten. Anschließend müssen nur noch eigene Texte und ggf. Bilder eingefügt werden. Voilá ... der eigene Internetauftritt ist startbereit.

Es gibt zwar auch andere Multipurpose Themes und Page Builder Plugins, die ebenfalls Vorlagen anbieten, aber unseres Wissens ist dabei keines derart umfangreich und wird dabei noch so regelmäßig erweitert. Denn der Hersteller Elegant Themes veröffentlicht pro Woche zwei neue Layout Sets á 6 bis 9 Layouts, die dann sofort aus der Bibliothek abrufbar sind.

Während andere Page Builder Plugins oft auch vielfältige Vorlagen bieten, bestehen diese meist aus einzelnen individuellen Seiten und man findet keine Kombination von Vorlagen zu einem speziellen Thema bzw. in einem einheitlichen Design. Multipurpose Themes bieten wiederum häufig Vorlagen für ganze Websites mit allen nötigen Unterseiten an, dafür sind diese nur in sehr begrenzter Anzahl und Themenvielfalt verfügbar.

Es ist niemand an diese Divi Layout Packs gebunden. Es können auch Vorlagen aus den unterschiedlichsten Packs geladen und dann auch nur Teile der Layouts verwendet werden. Es gibt mittlerweile auch diverse Drittanbieter, die Layouts verkaufen und gelegentlich auch kostenfrei zur Verfügung stellen.

Zu guter Letzt kann jeder auch mit Hilfe des Divi Builders seine Seiten von Grund auf selbst gestalten.

Der Divi Builder

Lange Zeit war der Divi Builder "nur" ein Backend Builder. D.h. die Seitengestaltung entstand im Bauklötzchenprinzip in einer speziellen Editoransicht im Administrationsbereich:

Divi Builder Backend

Hierüber ist das Grundprinzip relativ gut zu verstehen. Alle darzustellenden Elemente (Module) werden in Sektionen (blau gekennzeichnet) und innerhalb dieser in Zeilen (türkis gekennzeichnet) eingeordnet. Die Zeilen können wiederum in bis zu 6 Spalten unterteilt werden. Die Sektionen als Ganzes sowie die Zeilen und natürlich auch die einzelnen Module lassen sich sehr leicht per Drag & Drop verschieben.

Es gibt mehr als 30 Arten an Modulen, die sich in dieses Layoutgitter einfügen lassen. Vom einfachen Text Modul über Preistabellen, Testemonials, Audio- und Videoeinbindungen bis hin zum Kontaktformular ist im Grunde alles was man in einer modernen Website erwarten kann dabei.

Seit der Version 3.0 von Divi ist der Visual Builder hinzugekommen. Damit lassen sich Seiten mit Hilfe der Maus in einem WYSIWYG Editor erstellen. In diesem wird die Seite mit Ihren Elementen weitgehend so dargestellt wie sie später auch den Besuchern erscheint. Beim Überfahren der Elemente mit der Maus erscheinen verschiedene Steuerelemente über die entweder per Drag & Drop umsortiert werden kann ...

Divi Visual Builder 1

... oder es lassen sich weitere Einstellungsdialoge aufrufen in denen die vielfältigen Optionen zur Darstellung der Elemente erscheinen:

Divi Visual Builder 2

Die Arbeit mit dem Divi Visual Builder

Der Divi Visual Builder steht den Page Buildern der Mitbewerber wie Beaver Builder oder Elementor funktionell in nichts nach. Leider lässt insbesondere bei sehr umfangreichen Seiten die Performance manchmal zu wünschen übrig.

Auch verhält sich der Visual Builder gelegentlich etwas hakelig. Oft lassen sich die Probleme durch ein Neuladen der Seite beheben. Ähnliche kleinere Probleme sind uns auch schon in Elementor und im Beaver Builder begegnet, allerdings weniger häufig als bei Divi.

Die Grundidee eines Page Builders ist ohne zu Programmieren in einem Drag & Drop Editor relativ einfach ansehnliche Seiten zusammenstellen zu können. Allerdings stößt jeder Page Builder irgendwann auf das Problem Vielfalt im Gegensatz zur einfachen Bedienung. Je mehr Einstellungsmöglichkeiten angeboten werden, desto weniger einfach und übersichtlich wird in der Regel die Bedienung.

Diese Herausforderung meistert Divi im Vergleich mit anderen Page Buildern durchschnittlich gut. Zwar hat Elegant Themes gerade in letzter Zeit immer wieder auch Funktionen hinzugefügt, die das Erreichen bestimmter Einstellungen erleichtern, aber aus persönlicher Erfahrung scheint der Aufbau der Einstellungen in Elementor oder Beaver Builder etwas übersichtlicher.

Layout Bibliothek

Die weiter oben schon erwähnte Layout Bibliothek bietet nicht nur den Zugang zu den Layout Packs, sondern auch zu selbst erstellen und abgespeicherten Layouts. So lassen sich wiederholt genutzte Layouts oder Teile eines Layouts sichern und an beliebiger Stelle wieder einfügen. Außerdem ist eine Funktion für den Export auf die Festplatte enthalten, so dass Layouts auch in die Bibliothek anderer Websites importiert werden können.

Wer also regelmäßig mit dem Divi Theme arbeitet, kann sich so problemlos einige Standards erstellen auf die er schnell immer wieder zugreifen kann.

Es lassen sich auch sogenannte globale Elemente definieren. Diese Elemente können an verschiedenen Stellen der Website eingesetzt werden. Sobald man Eigenschaften eines globalen Elementes ändert, werden diese Änderungen für alle Stellen an denen das Element eingefügt wurde übernommen. So braucht z.B. der Text für einen Aufruf zur Anmeldung an den Newsletter, der an mehreren Stellen auf der Website erscheint, nur einmal überarbeitet zu werden.

Kopieren und Einfügen

Layouts oder auch nur Teile eines Layouts lassen sich relativ leicht per Copy & Paste an neue weitere Positionen auch auf anderen Seiten übertragen.

In letzter Zeit hat Elegant Themes sich stark auf neue Funktionen ausgerichtet, die einem die Arbeit mit dem Visual Builder erleichtern, speziell wenn es um Änderungen geht, die nicht nur ein Element betreffen. So lassen sich Änderungen sehr leicht auf mehrere Elemente übertragen. Wird z.B. die Hintergrundfarbe eines Textmodules geändert, lässt sich diese Änderung umgehend wahlweise auf alle Module oder alle Textmodule in der Zeile oder der Sektion oder der Seite übernehmen.

Wer etwas intensiver mit Page Builder Plugins gearbeitet hat wird diese Funktionen zu schätzen wissen. Denn es gibt wenig nervigeres als für spätere Änderungen z.B. der Schriftart mühsam diese Einstellung bei jedem Textmodul einzeln vorzunehmen.

Leider existiert noch keine direkte Stilverwaltung, aber so etwas bietet bisher kaum ein Page Builder.

Custom Post Types

Mittlerweile lässt sich der Divi Builder nicht nur für Seiten oder Beiträge verwenden, sondern auch für jeden anderen Custom Post Type freischalten. Das ist zwar ein Fortschritt, aber richtig interessant werden die angekündigten Theme Builder Funktionen. Wenn sich damit nicht nur einzelne Custom Post Types gestalten lassen, sondern sozusagen dynamische Vorlagen, die auf jeden CPT übertragen werden können. Allerdings müssen wir hierauf noch etwas warten, während Beaver Builder solche Funktionen über ein weiteres kostenpflichtiges Addon, den Beaver Themer und Elementor direkt in seiner kostenpflichtigen Pro Version bereitstellen.

Geschwindigkeit & Codebasis

Wie viele der Page Builder produziert das Divi Theme auf den selbst gestalteten Seiten eine ordentliche Menge Code. Elegant Themes hat sich bereits mit einigen Funktionen auf die Verbesserung der Performance konzentriert. So besitzt Divi eine eingebaute Minifizierungsfunktion für CSS und erstellt statische CSS-Files.

Man muss sich darüber klar sein, dass das Theme bzw. der Page Builder nur einen Teil zur Gesamtperformance beiträgt. Der verwendete Server und ein gut konfiguriertes Caching sind ebenfalls wesentliche Elemente, die die Performance beeinflussen.

Insgesamt ist man mit einem ordentlichen Webhosting Anbieter bzw. Server und einem Caching Plugin (wir verwenden meist WP Rocket) gut ausgerüstet und erreicht mit dem Divi Theme und dem Divi Builder erstellten Seiten ausreichend gute Performance.

Dateiumfang eingebundener Bilder

An dieser Stelle können wir allerdings auch wieder einen seit längerem bestehenden Kritikpunkt aufführen: die Einbindung von Bildern im Divi Builder. Während die meisten anderen Page Builder beim Einbinden eines Bildes eine Auswahlmöglichkeit bieten, welche Thumbnailgröße eingebunden werden soll, verwendet der Divi Builder stets die Originalgröße eines Bildes aus der Mediathek. Hier z.B. der Beaver Builder:

Beaver Builder Auswahl Bildgröße

Benötigt man ggf. nur die 300x241 Pixel große Version des Bildes, lädt der Divi Builder die Datei des Originals und verkleinert das ggf. riesige Bild nur auf den gewünschten Ausschnitt. Möchte man also beispielsweise 6 kleinere Bilder auf einer mit dem Visual Builder erstellten Seite anzeigen, sollte man tunlichst die passende Größe hochladen oder die passende URL auf die kleinere Version hinterlegen. Was beides eher mühsam ist ohne die übliche Auswahlmöglichkeit unter "Anzeige-Einstellungen für Anhänge" in der Mediathek, die im Visual Builder bei der Auswahl aus der Mediathek nicht dargestellt wird.

Noch etwas tückischer ist die Handhabung im Backend Builder. Hier wird bei der Bildauswahl in der Mediathek die Optionale Auswahl an verschiedenen Thumpnailgrößen angezeigt, aber trotz Auswahl nicht berücksichtigt. Es wird stets das Bild in der Originalgröße eingebunden.

Das wäre nicht so problematisch, wenn Divi auf die seit WordPress Version 4.4 existierende scrset Funktionalität zugreifen würde, bei der dem Browser Informationen über verschiedene Bilddateien passend zur Bildschirmgröße übermittelt werden.

Uns war dies erst nicht aufgefallen, aber beim Erstellen einer Portfolioansicht eines Künstlers mit 16 seiner Bilder, wunderten wir uns zunächst, dass die Ladezeit so extrem lang war. Das lag daran, dass die Vorschaubilder zwar in einer Größe von etwa 200 x 200 Pixel angezeigt wurden, aber für diese Anzeige wurden die 16 Originaldateien mit jeweils etwas 2 MB und mit ca. 3000 x 3000 Pixel Größe geladen.

Warum Elegant Themes hier noch keine längst überfällige Verbesserung vorgenommen hat, ist uns ein Rätsel.

Updates, Fehler und Support

Da das Divi Theme in Version 1.0 bereits 2013 veröffentlicht wurde, könnte man auf die Idee kommen, dass das Theme mit über 5 Jahren auf dem Buckel ziemlich veraltet sein könnte. Das Gegenteil ist der Fall. Elegant Themes hat Divi die ganze Zeit über weiterentwickelt und mit regelmäßigen Updates versorgt.

Divi Theme Updates

Mittlerweile sind mehrere Updates pro Monat die Regel, von denen stets ein bis zwei nicht nur Fehlerkorrekturen enthalten, sondern ganz neue Funktionen zur Verfügung stellen. Ein derart aktive Entwicklertätigkeit ist uns von keinem anderem Theme oder Page Builder bekannt.

Allerdings hat diese hohe Updatedichte auch ihre Schattenseiten. Denn es sind schon mehrfach Updates veröffentlicht worden, die zu einigen Problemen bei den Nutzern geführt haben. Die Einführung der Version 3.0 mit dem Visual Builder lief beispielsweise zu Beginn etwas unrund. Elegant Themes hat zwar immer relativ rasch reagiert und nachgebessert, aber insgesamt würden wir einen etwas langsameren Entwicklungszyklus mit dafür weniger fehleranfälligen Updates bevorzugen. Bezeichnend ist die Einführung einer Funktion im Theme durch die man per Klick schnell auf die Vorversion wieder Downgraden kann.

Gutenberg Support

Das Divi Theme ist bereits auf das Erscheinen von WordPress 5.0 vorbereitet mit dem der Wechsel zum Gutenberg Editor vollzogen wird. Diese Integration ist nicht sonderlich spektakulär. Bisher wird nur ein Divi Builder Button eingeblendet mit dem der Editor aufgerufen werden kann und einige Seitenoptionen des Divi Themes finden sich in der Sidebar des Gutenberg Editors. Dafür sollte das Divi Theme auch mit WordPress 5.0 reibungslos funktionieren.

Bleibt abzuwarten, ob Elegant Themes weitere Gutenberg Integrationen einarbeitet.

Divi Theme und die deutsche Sprache

Es gibt eine deutsche Übersetzung für das Theme und die Theme-Einstellungen. Allerdings ist diese gerade bei den Einstellungen nicht überragend. So wird seit langer Zeit in den Einstellungen bei Optionen, die aktiviert sind, das Wort "Aktivieren" angezeigt und bei deaktivierten Optionen das Wort "Deaktivieren", so dass man eigentlich vermuten müsste, dass erst ein Klick auf das Wort nötig ist, um die Einstellung zu aktivieren bzw. deaktivieren. Dabei ist die Option bereits aktiv bzw. deaktiviert.

Aber man findet sich trotzdem in den Einstellungen zurecht. Leider war es das dann in Sachen deutscher Sprache auch schon. Support und auch die Dokumentation sind nur in Englisch verfügbar. Das ist einer der Gründe warum wir mit Divi.world eine deutschsprachige Seite mit Tipps und Tutorials erstellt haben.

Wer das Divi Theme intensiv nutzen möchte, sollte zumindest Grundkenntnisse in Englisch mitbringen oder auf jemanden mit entsprechenden Sprachkenntnissen zurückgreifen können.

Divi Support

Wir hatten über die Jahre mehrmals Kontakt zum Support aufgenommen und in der Regel wurde relativ zügig geantwortet. Die Qualität des Supports würden wir unserer Erfahrung nach zwischen ausreichend und gut einschätzen. Manchmal dauerte es etwas bis der Supportmitarbeiter das eigentliche Problem verstanden hatte. Hängen gelassen wurden wir nie.

Vor kurzem ist die Art des Supports umgestellt worden. Vorher gab es ein großes nur für Kunden zugängliches Supportforum in dem die Anfragen gestellt wurden. Dabei waren die meisten Anfragen und Antworten für alle anderen einsehbar. Das hatte den großen Vorteil, dass man für viele Problemstellungen schnell bereits vorhandene Lösungen finden konnte ohne den Support direkt zu bemühen.

Jetzt läuft der Support über einen Chat. Es lässt sich zwar auch noch eine Wissensdatenbank durchsuchen, die auch viele Antworten enthält. Aber so reichhaltig wie das Forum ist diese leider nicht. Die Antwortzeiten scheinen sich nach einigen Anfangsschwierigkeiten nicht groß verändert zu haben.

Verbreitung und Community

Hier kann das Divi Theme auftrumpfen. Auch wenn die Zahlen nicht direkt vergleichbar sind wurde das beliebteste Themeforest Theme Avada über 425.000 Mal verkauft, während Elegant Themes von über 500.000 Kunden spricht. Gerade im englischsprachigen Bereich finden sich sehr viele Blogs und Artikel, die sich mit dem Divi Theme beschäftigen.

Auf Facebook finden existieren auch mehrere englischsprachige Divi Gruppen wie z.B. Divi Theme Users von Elegant Themes und eine gleichnamige unabhängige Gruppe Divi Theme Users mit über 10.000 Mitgliedern. Es gibt sogar eine deutschsprachige Gruppe mit über 1.000 Mitgliedern: Divi Theme Deutsch.

Durch die hohe Verbreitung des Divi Themes gibt es eine ganze Reihe von Drittanbietern für Divi Plugins und Child Themes. Auch einige Webdesigner haben sich auf die Arbeit mit Divi spezialisiert.

Was passiert, wenn ich Divi deaktiviere?

Was die normalen Theme Funktionen betrifft, verhält sich Divi wie jedes Theme. D.h. bei einem Theme Wechsel werden die Inhalt nun durch die Vorgaben des neuen Themes dargestellt. Etwas schwieriger wird es, wenn es um die mit dem Divi Builder erstellten Seiten oder Beiträge geht.

Wer nur ein neues Theme verwenden möchte, kann das Divi Builder Plugin installieren. Dies übernimmt dann die Page Builder Funktionalität und die Inhalte der durch den Divi Builder erstellten Seiten und Beiträge werden weiterhin dargestellt wie gehabt und können auch genauso bearbeitet werden.

Wenn auch kein Divi Builder Plugin mehr genutzt werden soll wird es unschön. Ohne aktives Divi Theme oder Plugin bekommt man auf den mit vom Divi Builder erstellten Seiten nur eine Shortcode Wüste zu sehen:

Divi Theme abgeschaltet Shortcodes

Das ist der Lock-in-Effekt, den man bei allen Page Builder Plugins in Kauf nehmen muss. Da es keine Standards für Page Builder gibt, können die mit Hilfe des Plugins erstellten Seiten nicht einfach von anderen Page Buildern übernommen werden.

Dieses Problem betrifft allerdings nicht nur Divi, sondern alle Page Builder. Es gibt zwar einige Page Builder Plugins, die zumindest die Option bieten die Inhalte wie Text und Bilder einfach in ein Fließtext zu übertragen. Beaver Builder preist z.B. an, dass der Seitenaufbau nicht mittels Shortcodes realisiert wird, sondern durch Custom Fields. Aber der grafische Aufbau der Seiten ist bei einem Wechsel genauso dahin.

Wenn es sich um kleinere Projekte mit nur wenig Unterseiten handelt, ist der Aufwand diese in einem neuen Page Builder wieder neu einzurichten vielleicht noch überschaubar. Bei großen Projekten bei denen sehr viele Seiten über einen Page Builder erstellt wurden, wird ein späterer Wechsel zu einem Albtraum.

So sollte die Entscheidung einen Page Builder zu verwenden gut durchdacht sein und man sollte sich einigermaßen sicher sein, dass man den Page Builder mittel- bis langfristig verwenden will oder besser gesagt auch muss.

Diese Überlegung gilt allerdings für alle Page Builder und ist kein spezielles Divi Problem.

Preise, Bedingungen & Rabatt

Jetzt kommen wir zu einem Punkt, der das Divi Theme für viele sehr interessant macht: der Preis und die Nutzungsbedingungen. Das bedeutet nicht, dass das Divi Theme auf den ersten Blick besonders günstig ist. So gibt es auch keine kostenlose Version, die man vorher testen kann. Dafür aber eine 30-Tage Geld zurück Garantie.

Etwas ungewöhnlich: Das Divi Theme wird in Form einer Mitgliedschaft angeboten. Das liegt daran, dass das Geschäftsmodell von Elegant Themes seit seiner Gründung 2008 ein Theme-Club war. Gegen eine jährliche Gebühr können die Mitglieder jedes der von Elegant Themes erstellten Themes und Plugins nutzen. Das ist bis heute so, allerdings hat sich Elegant Themes seit dem Erscheinen des Divi Themes im Jahr 2013 nur noch auf die Weiterentwicklung des Divi und Extra Themes konzentriert. Man hat zwar immer noch Zugriff auf die alten Themes, aber wer will schon Themes verwenden, die seit 5 Jahren nicht weiter entwickelt werden.

Die Mitgliedschaft enthält allerdings auch den Zugriff auf einige aktuelle Plugins wie das Optin Plugin Bloom, oder das Social Sharing Plugin Monarch und das Extra Theme, das eine leicht modifizierte Version des Divi Themes ist, die mehr auf einen Magazin Stil ausgelegt ist.

Für Personen, die mehr als eine Website betreiben oder für Kunden arbeiten, sehr interessant: Mit der Mitgliedschaft darf man die Themes auf unbegrenzt vielen Websites verwenden. Außerdem kann man als Mitglied das Divi Theme auch auf Websites seiner Kunden installieren. Letzteres macht das Divi Theme für Webdesigner und Co. zu einem attraktiven Angebot.

Was kostet die Mitgliedschaft?

Es gibt zwei Varianten (Preise Stand Januar 2020):

  1. Der Yearly Access: Der Preis für die Mitgliedschaft liegt bei 80$ jährlich.
  2. Der Lifetime Access: Für einmalig 249$ erhält man eine lebenslange Mitgliedschaft.

Achtung: Für Käufe aus Deutschland muss Elegant Themes noch zusätzlich 19% MwSt. (engl. VAT) auf die Preise berechnen. Falls Du ein Geschäft betreibst und eine Ust.-Id. besitzt, kannst Du die MwSt. Berechnung umgehen.

Insbesondere der Lifetime Access in Verbindung mit dem einhergehenden Recht der Nutzung auf unbegrenzt vielen Websites und auch für Kunden macht die Verwendung des Divi Themes für viele interessant. Rein rechnerisch lohnt der Lifetime Access bereits ab dem 3. Nutzungsjahr. Viele Themes und Page Builder Plugins bieten keine solche Lifetime Optionen.

Leider bietet Elegant Themes keinen festen Rabatt auf die jährlichen Zahlungen wie viele andere Plugin oder Themehersteller. Dafür können Rabattaktionen auch für die jährliche Zahlung verwendet werden. Alle wichtigen Informationen zu den Preisen und Rabattmöglichkeiten findest Du auf Divi.world.

Fazit Divi Theme

Das Divi Theme mit seiner integrierten Page Builder Funktion kann für zwei Interessensgruppen eine gute Wahl sein: der ambitionierte Anwender ohne großes CSS und Programmier Know How und der auf Divi spezialisierte Anbieter wie z.B. Webdesigner oder -entwickler.

Die aus unserer Sicht deutlichsten Vorteile des Divi Themes sind:

  1. Die integrierten Page Builder Funktionen mit der umfangreichen Layoutbibliothek, die wöchentlich erweitert wird.
  2. Die aktive Weiterentwicklung mit mehreren Updates und damit neue Funktionen pro Monat.
  3. Die hohe Verbreitung mit den einhergehenden Communitys und vielen Drittanbietern.
  4. Die Nutzungsmöglichkeit auf unbegrenzt vielen Websites und auch für Kunden.
  5. Die relativ preisgünstige Kombination von den normalerweise getrennten zu zahlenden Komponenten: Theme und Page Builder. Dazu die Möglichkeit einer ebenfalls preisgünstigen Lifetime-Lizenz.

Die aus unserer Sicht deutlichsten Nachteile des Divi Themes sind:

  1. Der Lock-in-Effekt bei der Nutzung der Page Builder Funktionen. Dieser tritt allerdings bei allen Page Buildern auf!
  2. Teilweise überambitionierte Entwicklung: manche Updates wurden zu früh veröffentlicht und häufiger stehen eher schillernde neue Funktionen im Fokus als Projektpflege zu betreiben.
  3. Während die Lifetime-Lizenz vergleichsweise günstig ist, gibt es bei jährlicher Zahlungsweise nicht den üblichen Renewal Rabatt.
  4. Die Handhabung des Page Builders ist gelegentlich hakelig und stellenweise etwas unübersichtlich.

Die Kernfrage ist, ob Du einen Page Builder Builder verwenden oder für Deine Kunden bereitstellen willst. Falls nicht, fallen die meisten Vorteile des Divi Themes weg. Falls doch, dann bietet das Divi Theme in vielen Fällen einen sehr gutes Preis-Leistungs-Verhältnis - vor allem, wenn es auf mehreren Websites genutzt werden soll. Die Page Builder Funktionalität ist gut - auch wenn Mitbewerber wie z.B. der Beaver Builder etwas solider, übersichtlicher und nachhaltiger in ihrer Funktion wirken. Die zwar angekündigten, aber noch ausstehenden Theme Builder Funktionen kann man derzeit noch als Nachteil werten ... hoffentlich nicht mehr allzu lange.

Divi Theme Alternativen

Wer sich nicht auf das Divi Theme einlassen möchte und trotzdem gerne einen Page Builder verwenden will, kann sich als alternative Lösung auch eines der Page Builder Themes wie Astra, Ocean WP oder das Page Builder Framework in Verbindung mit den beliebten alternativen Page Builder Plugins wie Elementor oder Beaver Builder ansehen. So lange man jeweils nur die funktionseingeschränkten kostenfreien Versionen verwendet, ist das natürlich ideal für das Budget.

Sobald man die kostenpflichtigen Versionen nutzen will, kann es je nach gewählter Theme und Page Builder Kombination schnell teuer werden, da ggf. für beide Komponenten jährliche Zahlungen fällig werden. Zum Teil entstehen bei der Verwendung auf mehreren Websites noch weitere Kosten.

Beaver Builder bietet in der Pro Version auch ein passendes Beaver Theme. Allerdings liegen hier die Kosten auch bereits bei 199$ jährlich selbst mit dem verfügbaren 40% Renewal Rabatt deutlich über denen des Divi Themes.

Video zu Divi 4.0

Zur Veröffentlichung von Divi 4.0 haben wir ein Video erstellt:

Divi Theme Links

WordPress Page Builder Themes 2020

Seit einiger Zeit werden vermehrt WordPress Themes angeboten, die speziell auf die Verwendung mit Page Builder Plugins optimiert sind und gleichzeitig auf eine schlanke Codebasis achten, um schnelle Ladezeiten zu gewährleisten. In diesen Page Builder Themes sind außerdem viele Einstellungsmöglichkeiten vorhanden, so dass für vieles kein CSS-Code erstellt werden muss.

Man kann diese Page Builder Themes als Gegenentwurf zu den beliebten Allzweck-Multipurpose-Themes sehen. Multipurpose Themes sollen möglichst flexibel und für viele Verwendungszwecke anpassbar sein. Das bedeutet aber auch, dass tendenziell viel Code vorhanden und damit auch höhere Ladezeiten in Kauf zu nehmen sind.

Da viele der Funktionen eines Multipurpose Themes mittlerweile besser von Page Builder Plugins bereitgestellt werden können, ist die schwergewichtige Kombination Multipurpose Theme mit Page Builder Plugin in der Regel nicht sinnvoll. Genau hier setzen die WordPress Page Builder Themes an. diese stellen einen schlanken, aber flexiblen Rahmen zur Verfügung innerhalb dessen die Page Builder Plugins ihre Vorzüge voll ausspielen können.

Selbst wenn kein Page Builder Plugin verwendet werden soll, bieten diese Themes eine gute Grundlage für einfach gehaltene Websites oder als Basis für Entwickler von individuellen Designs, die dann nicht erst ein Theme von Grund auf programmieren müssen.

Astra, Ocean WP und Page Builder Framework

Die Anzahl der Page Builder Themes ist noch nicht besonders groß. Wir haben drei aus unserer Sicht interessante und auch beliebte Themes für diesen Artikel angesehen:

Uns interessierten die Vor- und Nachteile dieser Themes und auch die konkreten Unterschiede untereinander.

Gemeinsamkeiten

Zunächst haben die drei Themes viele Gemeinsamkeiten. Sowohl was die Funktionen betrifft als auch die Preisgestaltung und den Aufbau.

Alle diese Themes sind auf die Verwendung mit den gängigen Page Builder Plugins wie z.B. Beaver Builder, Elementor, Divi, WPBakery (früher Visual Composer), Thrive Architect, SiteOrigin, Brizy und das beliebte Online Shop Plugin WooCommerce optimiert. Dazu sind allesamt auch schlank programmiert und somit sehr performant. Außerdem lassen sich viele Grundeinstellungen im Customizer bzw. Designmodifikator ohne die Verwendung von CSS anpassen. Responsive sind die Themes ebenfalls, was man heutzutage aber sowieso als absolute Grundvoraussetzung für jedes Theme betrachten sollte.

Alle drei Page Builder Themes sind in einer gut ausgestatteten kostenfreien Version verfügbar. Wer mehr will kann zu allen ein oder mehrere kostenpflichtige Plugins erwerben, die den Funktionsumfang erweitern.

Was die Nachhaltigkeit betrifft, veröffentlichen alle Entwickler bisher regelmäßig Updates, die auch komplett neue Funktionen beinhalten. Es gibt allerdings einen Unterschied bei der Verbreitung: während das Astra Theme und Ocean WP über 100.000 aktive Installationen aufweisen können, sind es beim Page Builder Framework "nur" über 4.000. Was allerdings auch nicht unbedingt etwas bedeuten muss.

Vorlagen

Zwei der drei Themes bieten die Möglichkeit vorgefertigte Demo Layouts zu importieren auf deren Grundlage man seine eigenen Ideen und Inhalte schneller umsetzen kann als wenn man bei Null anfängt.

Diese Vorlagen setzten allerdings das Vorhandensein eines Page Builder Plugins voraus. Das Astra Theme bietet Vorlagen, die auf Elementor oder dem Beaver Builder basieren. Ocean WP zeigt vor dem Import einer Demo an welche Plugins installiert sein sollten. Nur das Page Builder Framework bietet keine solchen Vorlagen.

Die Vorlagen sind sicher eine nette Zugabe, sollten aber nicht das ausschlaggebende Argument für die Auswahl des Themes sein. Alle Page Builder Plugins bieten ebenfalls solche Vorlagen zum Import an, so dass jeder bei Bedarf auch diese statt der Zugaben des Themes nutzen kann.

Zunächst schlichtes Design

Allen drei Themes ist auch gemein, dass das Design direkt nach der Installation sehr schlicht und einfach aussieht. Wer also keinen Page Builder verwenden will und nach einem schlichten minimalistischen Theme sucht, wird hier ebenfalls fündig. Genauso der fortgeschrittene Anwender oder Entwickler, der gerne einige eigene Anpassung auf der Basis eines soliden Themes vornehmen möchte. Auch der kombinierten Anwendung mit beispielsweise schlicht gestalteten Blogartikeln neben via Theme Builder Plugin hübsch gestalteten Seiten steht nichts im Wege.

Astra Theme

Astra Theme: Direkt nach der Installation

Ocean WP Theme

Ocean WP Theme: Direkt nach der Installation

Page Builder Framework

Page Builder Framework: Direkt nach der Installation

Page Builder Themes im Detail

Da die Themes viele Gemeinsamkeiten besitzen, sind natürlich die individuellen Unterschied interessant. Dazu haben wir uns die einzelnen Themes genauer angesehen.

Astra Theme

Astra Page Builder Theme Website

Das Astra Theme wird von der Gruppe Brainstorm Force entwickelt. Brainstorm Force sind bereits bekannt für Ihre Addon Packs für den Beaver Builder und Elementor sowie die Plugins Convert Pro, Schema Pro und WP Portfolio. Insofern können sie auf viel Erfahrung im Page Builder Umfeld zurückgreifen. Laut WordPress Repository existieren derzeit über 100.000 aktive Installationen des Astra Themes.

Die Entwicklung des Astra Themes findet Open Source, d.h. für jeden transparent und einsehbar auf GitHub statt. Hier können Entwickler auch Ergänzungen und Weiterentwicklungen des Codes vorschlagen.

Astra entspricht den WCAG (Web Content Accessibility Guidelines) und damit vielen Anforderungen für barrierefreie Websites. Das Theme ist vorbereitet für die Übersetzung in verschiedene Sprachen über .po und .mo Dateien und kann auch für links nach rechts geschriebene Websites (RTL) verwendet werden.

Funktionen des Astra Themes

Bereits die kostenfreie Version des Astra Themes bietet vielfältige Einstellungsmöglichkeiten. Diese kostenfreien Optionen im einzelnen aufzuführen würde den Rahmen sprengen. Im Grunde bieten alle drei Themes in der kostenfreien Variante vielfältige Einstellungen für Design und Typographie, die sich nicht sehr stark unterscheiden und am einfachsten austesten lassen. Also einfach das kostenfreie Theme installieren und sich die Einstellungen ansehen.

Fast alle Funktionen, die man sich darüber hinaus noch wünschen könnte, werden dann mit dem kostenpflichtigen Plugin ergänzt.

Pro Funktionen

Mit dem Kauf des Astra Pro Plugins stehen weitere Funktionen zur Verfügung.

Diese Funktionen können einzeln aktiviert werden, so dass Performance des Systemes möglichst wenig belastet und auch die Einstellungen im Designmodifikator nicht zu unübersichtlich werden.

Dokumentation & Support

Den leider nur englischsprachigen Support des Astra Themes mussten wir bisher nicht in Anspruch nehmen und können uns daher kein Urteil über dessen Qualität machen. Die Dokumentation wirkt gut, ist aber wie so oft ebenfalls nur in englischer Sprache verfügbar.

Es gibt eine englischsprachige Astra Facebook Gruppe mit über 2.000 Mitgliedern in der man auch Hilfe finden kann, die über Supportfragen hinaus geht. Außerdem betreibt Brainstorm Force einen YouTube Channel.

Preisgestaltung Astra Theme

(Preise & Bedingungen: Stand Januar 2020)

Angenehmerweise lassen sich alle verfügbaren Preisvarianten des Astra Themes auf beliebig vielen Websites nutzen. Es werden zwei Bundles zu höheren Preisen angeboten, die über die zusätzlichen Funktionen hinaus weitere Plugins und Demo Seiten des Herstellers Brainstorm Force enthalten.

Rahmenbedingungen

Preise

Die Preise für die Lifetime Lizenzen rentieren sich je nach gewählter Option:

Ocean WP

Ocean WP Page Builder Theme Website

Der Gründer von Ocean WP ist Nicolas Lecocq. Er begann 2012 zu bloggen und kam so in Kontakt mit WordPress. Er lernte wie er selbst WordPress Themes programmieren konnte und startete bereits in 2013 ein eigenes WordPress Business, um seine Themes zu verkaufen und Themedesign als Dienstleistung anzubieten.

Mit der Zeit bemerkte Nicolas, dass es regelmäßig zwei Probleme bei seiner Arbeit gab: Er musste entweder jedes Mal ein Theme von Grund auf neu erstellen oder viel Zeit in die Anpassung eines bestehenden Themes stecken, um die von den Kunden gewünschten Funktionen einzubauen.

Als Lösung kam ihm die Idee ein einfaches, schnelles, aber extrem anpassbares Theme zu entwickeln, auf dessen Grundlage er schneller und einfacher seine Aufträge erfüllen konnte. Das war die Geburtsstunde von Ocean WP.

Nach mehreren Monaten Arbeit konnte Nicolas sein Theme dann 2016 veröffentlichen. Ocean WP besitzt derzeit laut WordPress Theme Repository mehr als 100.000 aktive Installationen.

Kostenfreie Funktionen Ocean WP

Genauso wie bei den anderen Themes bietet Ocean WP bereits in der kostenfreien Version viele Einstellungsmöglichkeiten im Designmodifikator, so dass es nicht sinnvoll ist diese alle aufzuzählen. Hier lohnt sich eine schnelle Testinstallation des Themes, um einen klaren Eindruck zu erhalten.

Über diese Optionen hinaus, existieren noch einige kostenfreie Extensions für Ocean WP, die weitere Funktionen ermöglichen. Extensions für Ocean WP sind im Grunde einfach WordPress Plugins. Die kostenfreien können direkt aus dem WordPress Plugin Repository installiert werden:

Kostenpflichtige Funktionen Ocean WP

Die folgenden Extensions sind kostenpflichtig und kosten einzeln jeweils 9,99$ pro Jahr. Ab der 4. kostenpflichtigen Extension lohnt es sich über den Erwerb des Core Extension Bundle Personal für 39$ nachzudenken. Gelegentlich wird das Bundle auch für nur 34,99$ angeboten.

Ocean WP Theme Support

Bisher haben wir keine Erfahrungen mit dem Ocean WP Support gemacht. Insofern können wir die Qualität nicht beurteilen. Es existiert eine Facebook Seite: OceanWP Theme Facebook Seite und noch interessanter eine OceanWP Facebook Gruppe. Außerdem werden in dem hauseigenen OceanWP - YouTube Channel mehrere Tutorialvideos bereit gestellt.

Falls man auf deutschsprachige Unterstützung angewiesen ist, dürfte das größte Manko der fehlende deutschsprachige Support und auch die rein englischsprachige Dokumentation sein.

Preisgestaltung Ocean WP: mühsame Recherche

(Preise & Bedingungen: Stand Januar 2020)

Auch wenn Ocean WP im Grunde das flexibelste Preismodell anbietet, ist es etwas anstrengend herauszufinden welche Funktionen von Ocean WP kostenpflichtig sind und wie viel diese kosten. Auf der Homepage sind die zusätzlichen Funktionen unter dem Begriff "Extensions" zu finden.

Leider sind die Extensions nicht klar in kostenlose und kostenpflichtige Erweiterungen unterteilt. Man muss immer erst auf die Detailansicht der Extension surfen, um zu erkennen, ob dieses zu den 8 kostenlosen oder zu den 13 kostenpflichtigen gehört. Außerdem wird bei den kostenpflichtigen der genaue Preis erst angezeigt, wenn diese Extension in den Warenkorb gelegt wurde.

Unserer Recherche nach sind allerdings die kostenpflichtigen Extensions alle für jeweils 9,99$ verfügbar. Für diesen Preis erhält man das jeweilige Plugin inkl. Support und Updates für 12 Monate.

Ab der Verwendung von vier kostenpflichtigen Extensions lohnt es sich über den Kauf des "Core Extensions Bundle" nachzudenken. Dieses beinhaltet alle 13 kostenpflichtigen Extensions und alle Pro Demo Vorlagen inkl. Updates und Support für 12 Monate. Sollten weitere Premium Extensions während dieser Zeit veröffentlicht werden, gehören diese automatisch mit zu dem Bundle.

Im Gegensatz zu Astra und dem Page Builder Framework ist der Preis des Bundles abhängig von der Anzahl der verwendeten Seiten. Auch Ocean WP bietet Lifetime Lizenzen an.

Rahmenbedingungen Ocean WP

Preise Ocean WP

Die Preise für die Lifetime Lizenzen rentieren sich erst, wenn man das Theme mit mehr als 4 kostenpflichtigen Extensions über 4 Jahre einsetzen will.

Fazit Ocean WP Theme

Es gibt kaum Kritikpunkte für das Ocean WP Theme.

Wir fanden die undifferenzierte Darstellung der Extensions etwas nervig. Es wird nicht deutlich welche Plugins kostenfrei nutzbar sind und welche kostenpflichtig. Auch dass die kostenpflichtigen Plugins jeweils 9,99$ kosten muss man erst mühsam recherchieren. Aber all das tut der Funktionalität, Geschwindigkeit und Anpassbarkeit des Themes keinen Abbruch.

Dass keine Dokumentation und keinen Support in deutscher Sprache geboten wird ist bedauerlich, aber das gilt bis auf die Ausnahme des deutschsprachigen Supports des Page Builder Frameworks für alle Page Builder Themes.

Insgesamt ist Ocean WP ein empfehlenswertes Page Builder Theme, dass sich wohl hauptsächlich in der Art der Preisgestaltung von den anderen Themes abhebt und bereits in der kostenfreien Version einen etwas mehr Funktionen bietet als andere ähnlich ausgerichtete Themes.

Page Builder Framework

Page Builder Framework Theme Website

Der Entwickler des Page Builder Framework Themes ist der in Deutschland ansässige David Vongries. Ähnlich wie der Entwickler des Ocean WP Themes Nicolas Lecocq hat auch er früh angefangen Lösungen für WordPress zu entwickeln. Aus den Erfahrungen mit seinen Kunden, kam er zunächst auf die Idee das Ultimate Dashboard Plugin zu entwickeln, um Kunden den Einsteig und Umgang mit WordPress zu erleichtern. Dann fiel ihm auf, dass es eine Angebotslücke im WordPress Themes Markt gab: Themes die speziell für den Einsatz mit Page Buildern konzipiert sind. Deshalb entwickelte er das Page Builder Framework Theme.

Es wurde 2017 veröffentlicht und hat bis heute über 4.000 aktive Installationen laut WordPress Repository.

Page Builder Framework kostenlose Funktionen

Auch bei dem Page Builder Framework wäre es mühsam alle kostenfreien Funktionen aufzuzählen. Es gibt sehr viele Möglichkeiten und auch hier empfiehlt es sich einfach das Theme zu Testzwecken zu installieren, um einen klaren Eindruck zu bekommen.

Page Builder Framework kostenpflichtige Funktionen

Die zusätzlichen Funktionen werden durch die Installation eines kostenpflichtigen Page Builder Framework Premium Plugins bereitgestellt.

Preisgestaltung Page Builder Framework

(Preise & Bedingungen: Stand Januar 2020)

Das Page Builder Framework Theme hat die einfachste Preisstruktur im Vergleich mit den anderen Themes. Hier gibt es nur zwei kostenpflichtige Premium Varianten.

Rahmenbedingungen Page Builder Framework

Preise Page Builder Framework

Die Preise für die Lifetime Lizenz rentieren sich, wenn man das Theme mehr als 4 Jahre einsetzen will.

Weitere Page Builder Themes

Es existieren weitere Page Builder Themes, die wir bisher in unserem Artikel nicht berücksichtigt haben, aber vielleicht zukünftig werden.

Fazit Page Builder Themes

Alle Page Builder Themes zeigen mehr Gemeinsamkeiten als Unterschiede. Daher gibt es von unserer Seite keine eindeutige Empfehlung. Bei den wichtigen Punkten wie Performance, vielfältige Einstellungen, Optimierung für den Einsatz von Page Builder Plugins und WooCommerce sind im Grunde keine gravierenden Unterschiede auszumachen. Die eigene Entscheidung ist im Einzelfall abhängig von den individuellen Anforderungen zu treffen.

Ein Ausschlaggebender Grund für das Page Builder Framework könnte der auch in deutscher Sprache verfügbare Support sein. Allerdings ist die Dokumentation des Page Builder Frameworks trotzdem nur in englischer Sprache verfügbar.

Fazit kostenfreie Versionen

Wenn Du die kostenfreien Versionen dieser Themes nutzen willst, solltest Du diese einfach testen und überprüfen, ob das jeweilige Theme die Funktionen bereitstellt, die Du benötigst. Oft sind es nur kleine Unterschiede, die dann den Ausschlag für das eine oder andere Theme geben können.

So ist z.B. die Fußzeile im Footer sowohl beim Astra Theme als auch bei Ocean WP bereits in der kostenfreien Version ganz einfach im Designmodifikator anpassbar, während diese Option im Page Builder Framework erst mit der Premium Version verfügbar ist.

Insgesamt bietet im Vergleich Ocean WP die wohl vielfältigsten Optionen bereits in der kostenfreien Version, während diese bei Astra und erst recht dem Page Builder Framework etwas eingeschränkter sind. Als ein Beispiel wären hier die individuellen Einstellungsmöglichkeiten für Überschriften der Größe H1 bis H4 zu nennen.

Insgesamt kann man sagen, dass es schon erstaunlich ist, wie viele Möglichkeiten diese Themes bereits in der kostenfreien Grundversion bereit stellen.

Fazit Premium Versionen

Auch bei den kostenpflichtigen Premium Versionen gibt es keine pauschale Empfehlung von unserer Seite. Zum einen solltest Du Dir auch hier klar werden welche Funktionen Du benötigst. Dann sollte der Blick als nächstes in Richtung des Preises gehen.

Hier ist die Frage wichtig, ob Du die kostenpflichtigen Funktionen des Themes auf mehreren Seiten einsetzen willst und ob der Erwerb einer Lifetime Lizenz eine sinnvolle Investition sein könnte, denn hier unterscheiden sich die Investitionen in den verschiedenen Fällen deutlich.

Für einzelne Seiten und falls nur wenig kostenpflichtige Erweiterungen benötigt werden, ist aus finanzieller Sicht Ocean WP mit der Möglichkeit nur einzelne Funktionen zu kaufen oder einem sehr preiswerten Bundle für nur eine Seite die günstigste Option.

Bei der Verwendung auf vielen Seiten ist das Page Builder Framework sowohl bei jährlicher Zahlungsweise als auch beim Erwerb der Lifetime Lizenz die preiswerteste Option.

Astra ist allerdings kaum teuerer als das Page Builder Framework. Wer andere Plugins des Herstellers Brainstorm Force nutzt, für den können die Bundle Optionen wiederum interessant sein.

Links

Page Builder Themes

Page Builder Plugins

Schriften in WordPress einbinden

Die verwendete Schriftart (englisch Font) entscheidet maßgeblich über den Gesamteindruck Deiner Website. Daher solltest Du bei der Auswahl eine sorgfältig durchdachte Entscheidung treffen. Früher gab es nur eine Handvoll Schriftarten, bei der sicher war, dass jeder Browser diese auch anzeigen kann.

Das Problem mit seltenen Schriftarten

Nicht jede Schriftart, die Du auf Deiner Website verwendest, befindet sich auch auf dem Rechner Deiner Besucher. Sie können Deine Artikel zwar trotzdem lesen, allerdings werden ihnen diese dann in einer Schriftart angezeigt, die auf ihrem Computern installiert ist. Das kann den Gesamteindruck Deiner Website stark beeinträchtigen. Zur Lösung dieses Problems stehen Dir zwei Wege offen: Zum einen kannst Du sogenannte Webfonts nutzen. Dies sind Schriften, die online abrufbar sind und nicht auf einem Computer hinterlegt sein müssen. Zum anderen kannst Du die gewählte Schriftart direkt als Datei auf Deinem Server einbinden. Beides bewirkt, dass die Texte auf Deiner Seite Besuchern automatisch in der richtigen Schriftart angezeigt wird — selbst dann wenn die Schriftart nicht auf dem Rechner des Besuchers installiert ist!

Themeoptionen: vielleicht gibt es schon was du brauchst?

Bevor Du Dich für einen der folgenden Lösungswege entscheidest, solltest Du zunächst überprüfen, ob Dein aktuelles Theme nicht schon das bietet was Du suchst. Mittlerweile haben viele Themes den Zugriff auf z.B. die beliebten Google Fonts bereits integriert. Hier lohnt sich also ein Blick in die Einstellungen Deines genutzten Themes. Wenn Du dort findest was Du benötigst, solltest Du einfach diese Möglichkeit nutzen.

Webfonts einbinden

Der große Vorteil von Webfonts ist, dass sie online abrufbar sind und automatisch mit dem Inhalt der Website laden. Bei der Auswahl der passenden Schrift musst Du lediglich darauf achten, unter welcher Lizenz sie laufen. Kostenlose Fonts findest Du z. B. auf Google Fonts. In einem Preview-Text kannst Du testen, wie ein Schriftbild wirkt, ehe Du die Schrift tatsächlich in Deine Website integrierst.

Schriften & DSGVO: Datenschutz berücksichten

Auch wenn es immer etwas nervig ist, sollte man sich seit dem Inkrafttreten der DSGVO beim Einbinden externer Dienste immer ein paar Gedanken zum Datenschutz machen. D.h. wenn Du Google Fonts oder einen anderen Dienst nutzen willst und die Schriften über die im Folgenden beschriebene Methode einbindest, sollte unbedingt ein entsprechender Hinweis in Deiner Datenschutzerklärung stehen. Weitere Infos zu dem Thema findest du in unserem DSGVO & WordPress Artikel.

Wenn Du das Problem umgehen willst, dann kannst Du die Schriften auch auf Deinen Server laden und über die weiter unten beschriebene @font-face Methode einbinden. Dann erübrigt sich ein Eintrag in Deine Datenschutzerklärung.

Der einfache Weg: Einbindung durch das Plugin WP Google Fonts

Wenn Du Dich im Umgang mit PHP und CSS nicht sicher genug fühlst, kannst Du das Plugin WP Google Fonts verwenden. Nach der Installation wählst Du in dem Plugin bis zu sechs Schriften aus den Google Fonts aus und weist diese den Elementen zu, die anschließend in der jeweiligen Schrift angezeigt werden sollen.

DIY: Webfonts selbst einbinden

Wenn Du Dir das Bearbeiten der Themedateien zutraust, kannst Du Webfonts auch selbst integrieren.

Hast Du Dich für eine Schriftart entschieden, generiert Google Fonts Dir einen Code, den Du in die header.php Deines Themes nach dem head-Tag einbindest. Bzw. besser noch in eine in Deinem Child Theme Ordner erstellte Kopie der header.php, damit diese Veränderung auch nach einem Theme Update erhalten bleibt. So sieht beispielsweise der Code für die Schriftart Lato aus den Google Fonts aus:

Damit die ausgewählte Schriftart auch den entsprechenden Textelementen zugewiesen wird, musst Du dem jeweiligen Element diesen CSS-Code zuweisen. Der CSS-Befehl für die von Dir gewählte Schriftart wird Dir ebenfalls von Google Fonts angezeigt. Hier als Beispiel für die Schriftart Lato:

font-family: 'lato', sans-serif;

Um auf diesem Weg den Überschriften h1 und h2 die neue Schriftart Lato zuzuweisen, könntest du folgenden CSS-Code in die style.css Deines Child Themes einfügen:

h1, h2 {font-family: 'Lato', sans-serif;}

Direkte Einbindung über @font-face

Auch mit @font-face kannst Du Schriften in Deine Website implementieren. Hierfür wird nur CSS und die Schriftdateien benötigt, weshalb dieser Weg sehr einfach ist. Damit das Design anschließend kompatibel mit allen Browsern ist, solltest Du die Schrift in allen Formaten einbinden: TTF, OTF, EOT und WOFF. Wenn Du Deine Schriftart nur in einem dieser Formate besitzt, kannst Du diese über den Kit-Generator für Webfonts in alle Formate umwandeln. Wie Du an die Google Fonts Dateien kommst, haben wir weiter unten beschrieben.

Per FTP lädst Du die Schriftdateien in einen neu angelegen Ordner innerhalb Deines Theme- bzw. besser Child Theme-Ordners hoch. In unserem Codebeispiel gehen wir davon aus, dass dieser Ordner "fonts" genannt wurde.

Anschließend fügst Du in der style.css in Deinem Child Theme diesen Code ein (Beispiel für die Einbindung der Schriftart Lato):

@font-face {
  font-family: "Lato";
  src: url(fonts/lato.eot);
  src: url(fonts/lato.eot#)
format("hier kann irgendetwas stehen"),
   url(fonts/lato.woff)
format("woff"),
   url(fonts/lato.ttf)
format("truetype"),
   url(fonts/lato.svg#webfont)
format("svg");
}

Nach font-family kannst Du eine beliebige Bezeichnung vergeben, mit der Du später die eingebundene Schriftart verwendest. Allerdings ist der Name der Schriftart hier am sinnvollsten. Als Quelle gibst Du den Pfad zu der entsprechenden Schriftdatei an. Falls Du den Ordner anders benannt hast, muss die Verlinkung angepasst werden. Beispielsweise statt fonts/lato.eot -> Schriften/lato.eot. Um die neue Schriftart zu verwenden, kannst Du nun das font-family-Attribut genau wie bei den Webfonts beschrieben nutzen.

h1, h2 {font-family: 'Lato', sans-serif;}

Google Fonts herunterladen

Wenn Du Google Fonts gerade aufgrund der DSGVO lieber direkt über Deinen Server einbinden willst, kannst Du die Schriften auch herunterladen. Allerdings ist diese Option etwas versteckt. Wenn Du Schriften ausgewählt hast und dann auf den unten rechts eingeblendeten Balken mit dem Titel "Family Selected" klickst, erscheint eine Übersicht in der Du oben rechts auf das Download-Symbol klickst:

Google Fonts Download

Responsive und Schriften

Bei eingebundenen Schriften ist keine pixelige Anzeige zu befürchten, gleichgültig wie groß oder klein die Schrift angezeigt wird. Allerdings sollte jeder nach dem Einbinden einer Schrift die Anzeige auf einem Tablet und Smartphone prüfen. Es kann sein, dass die neue Schrift bei Ansicht auf diesen Geräten zu groß oder klein erscheint und so andere Schriftgrößen für diese Anzeigearten festlegt werden sollten.

In der Regel finden sich entsprechende Möglichkeiten in den Einstellungen des verwendeten Themes. Ansonsten muss direkt im CSS bei den entsprechenden Break-Points die Schriftgröße festgelegt werden. Das werden wir in einem späteren Artikel genauer erläutern.

Individuelle Schriften für WordPress kaufen

Auch wenn die Auswahl an Google Fonts recht umfangreich ist, möchte man sich vielleicht doch von anderen abheben oder einfach einfach eine passendere individuelle Schrift für die eigene Darstellung verwenden. Diesem Vorhaben steht nichts im Wege, denn es gibt mehrere Möglichkeiten, um aus einer großen Auswahl an Schriften die für die eigene Zwecke optimale auszuwählen.

Wichtig: Bei der Auswahl sollte man stets darauf achten, dass die Schrift auch die deutschen Umlaute "ÄÖÜ" und andere besondere Zeichen wie "ß" beinhaltet. Das ist leider nicht selbstverständlich. Ansonsten ist die Freude an der neuen Schrift oft nur von kurzer Dauer, wenn statt "Schöne Ferienziele" nur "Sch ne Ferienziele" angezeigt wird.

Eine gekaufte Schrift wird dann in den meisten Fällen über die oben erläuterte @font-face Methode eingebunden. In manchen Fällen möchte man eine solche Schrift auch einfach z.B. in seinen Beitragsbildern (Featured Image) verwenden. Dann genügt es die Schrift auf dem eigenen Rechner zu installieren, um diese im Grafikprogramm seiner Wahl verwenden zu können.

Creative Market Fonts

Ein sehr großen Fundus an Schriften zu einem moderatem Preis bietet Creative Market an:

Fonts kaufen: Creative Market

Auf den Creative Market Detailseiten der Schriften lassen sich in der Regel auch Beispieltexte eingeben und es wird eine Vorschau erzeugt. So kann man einen guten Eindruck von der Umsetzung der eigenen Texte mit dieser speziellen Schrift erhalten. Außerdem lässt sich so gut überprüfen, ob die deutschen Umlaute und Sonderzeichen vorhanden sind.

Envatos GraphicRiver Fonts

Auf der Graphic River Website des Anbieters Envato, finden sich ebenfalls viele Schriften und auch Bundles (Paketangebote) zu kleinem Preis.

Fonts kaufen: GraphicRiver von Envato

Auch hier kann meist auf der Detailseite der jeweiligen Schrift ein Beispieltext eingegeben werden, der dann in der gewünschten Schriftform als Vorschau dargestellt wird.

MyFonts

MyFonts bietet wohl die derzeit größte Auswahl an Schriften weltweit an. Allerdings liegen hier die Preise auch durchaus im höheren Segment, so dass man bei einem schmalen Budget oft nicht so weit kommt.

Fonts kaufen: MyFonts

Fazit: Der Auswahl einer individuellen Schrift steht nichts im Wege

Mit den genannten Lösungsmöglichkeiten gibt es keinen Grund sich gegen eine individuelle Schriftart zu entscheiden. Befürchtungen, dass die Schriftart nicht angezeigt werden kann, gehören zum Glück der Vergangenheit an.

WordPress Themes: Technische Grundlagen

Schon in den ersten Sekunden muss die Oberfläche einer Webseite den Besucher überzeugen - denn die meisten Nutzer verweilen weniger als zwanzig Sekunden auf einer neuen Internetseite. Damit Deine WordPress-Seite überzeugt, benötigst Du ein aussagekräftiges Theme, das ein modernes Design besitzt und Dir verschiedene technische Möglichkeiten bietet.

Theme-Verzeichnis

Einen Überblick über alle kostenfrei über WordPress herunterladbaren Themes erhältst Du im Theme-Verzeichnis. Im Administrationsbereich Deiner Webseite findest Du unter dem Menüpunkt "Design" oben den Button "Hinzufügen", der auf eine Seite führt mit der Möglichkeit aus allen Themes des WordPress Theme-Verzeichnis auszuwählen oder alternativ über den Button "Theme hochladen" eine eigene Themedatei zu installieren.

Lass Dir bei der Auswahl ruhig Zeit — Du kannst auch mehrere Themes ausprobieren, bis Du das richtige gefunden hast. Die kostenlosen Optionen sind für Anfänger deshalb besonders gut geeignet. Falls Du noch Tipps zur Auswahl Deines Themes benötigst, findest du alles Wichtige in unserem Artikel "Mit 7 Fragen zum richtigen WordPress Theme".

Sobald Du Dich für ein Theme entschieden hast, erstellt WordPress ein eigenes Theme-Unterverzeichnis auf dem Server. Wenn Du Deine Webseite mithilfe eines FTP-Clients verwaltest, findest Du das neue Themeverzeichnis im Ordner wp-content/themes/.

Kleine Anpassungen ohne Vorkenntnisse

Wer nur geringfügige Änderungen am WordPress-Theme vornehmen möchte, benötigt dazu keine Programmierkenntnisse. Mit dem Designmodifikator (englisch "Customizer") kannst Du viele Modifikationen vornehmen. Welche Optionen dabei zur Verfügung stehen, hängt vom jeweiligen Theme ab. Du möchtest einen persönlichen Header oder einen individuellen Hintergrund für Deine Webseite? Mit dem Designmodifikator ist das meist kein Problem.

Darüber hinaus lässt sich eine WordPress-Seite mithilfe von Widgets individualisieren. Nach dem Baukastenprinzip kannst Du Dir genau die Widgets zusammensuchen, die zu Deiner Internetseite passen und die Seitenleiste oder den Footer sinnvoll nutzen. Mit einem Kalender kannst Du beispielsweise Deine Besucher auf bevorstehende Events hinweisen und mit einem Bild-Widget kannst Du Deine schönsten Fotos zur Schau stellen.

Der Theme-Editor und seine Dateien

Für noch mehr Individualität ist ein Blick in den Code erforderlich. Dazu rufst Du im Administrationsbereich "Design" und dort den Punkt "Editor" auf. Du siehst nun den Theme-Editor. Oben rechts kannst Du mithilfe eines Dropdown-Menüs auswählen, welches Theme Du bearbeitest. Direkt darunter sind die einzelnen Dateien zu sehen, die zum aktiven Theme gehören. Viele dieser Dateien sind optional. Ein WordPress-Theme muss jedoch mindestens drei Dateien besitzen:

Stylesheet (style.css)

Das Stylesheet bildet das Herzstück eines WordPress-Themes. Diese Datei enthält grundlegende Informationen über das Layout und die grafische Gestaltung Deiner Webseite. Deshalb können schon wenige Zeilen Code die Erscheinung Deiner Internetseite vollkommen verändern. Die style.css ist meistens Deine erste Anlaufstelle, wenn Du Änderungen am Code vornehmen möchtest. Das Stylesheet bindet oft weitere Dateien ein, beispielsweise eine PHP-Datei für den Header.

Theme-Funktionen (functions.php)

Was kann eine WordPress-Seite? Die Datei functions.php legt die verschiedenen Funktionen fest und ist mit einem Plugin vergleichbar. Beispiele für Funktionen, die Du in der functions.php speichern kannst, sind die Seitenleisten, individuelle Hintergründe und verschiedene Menüs. Deshalb kann fast kein Theme auf diese Datei verzichten.

Template-Dateien

Template-Dateien enthalten Schablonen, die Deinen Content optimal präsentieren. Eine WordPress-Seite benötigt mindestens eine Template-Datei, damit Deine Webseite angezeigt werden kann: die index.php. Template-Dateien helfen Dir, Deine WordPress-Seite nutzerfreundlich und ansprechend zu gestalten. Kommentare sollten sich gut von Deinen Blogposts abheben und reine Bilder-Posts dürfen keinen Scrollbalken anzeigen. Deine Texte sollten sowohl im Blog als auch auf statischen Seiten gut lesbar sein. Deshalb ist es sinnvoll, für diese unterschiedlichen Anforderungen jeweils eigene Templates anzulegen.

WordPress wählt die passende Template-Datei hierarchisch aus. Die Template-Hierarchie verläuft dabei von spezifisch nach allgemein: Nur wenn keine spezifische Template-Datei gefunden werden kann, greift WordPress auf eine allgemeine Vorlage zurück. Damit Dein Content perfekt angezeigt wird, sollte das jedoch die Ausnahme sein.

Mit 7 Fragen zum richtigen WordPress Theme

Das große Angebot an WordPress Themes, lässt einen schnell den Überblick verlieren. Unsere sieben Fragen helfen einen klaren Fokus zu bestimmen. Je präziser die Antworten auf die folgenden Fragen ausfallen, desto eindeutiger sind auch die Anforderungen an das zukünftige Theme.

1. Ziel: Was will ich mit meiner Website erreichen?

Mit einem klaren Ziel vor Augen, fällt es leichter zu entscheiden, ob ein Theme das Erreichen des Zieles unterstützt oder zumindest nicht behindert. Es können durchaus mehrere Ziele sein, allerdings sollte stets klar sein welche Prioritäten innerhalb der Ziele aktuell gesetzt werden. Geht es darum ...

2. Investition: Wie viel Zeit und Geld will bzw. kann ich investieren?

Eine wichtige Frage zu Beginn. Damit entsteht ein klarer Rahmen der möglichen Kosten und dem Aufwand sowohl bei der Themesuche als auch der folgenden Einrichtung und Anpassung des Themes an die eigenen Bedürfnisse.

3. Thema: Welches Thema hat meine Website?

Das Thema oder auch die Branche sollten sich im Design der Website widerspiegeln. Oder falls es um ein Multipurpose Theme geht, sollten passende Layouts zur Verfügung stehen, damit nicht alles von Grund auf selbst konfiguriert werden muss. Beispiele:

4. Funktion: Welche Funktionen sollen vorhanden sein?

Neben Standards wie dem Kontaktformular oder einem responsive Design können weitere Funktionen wichtig sein. Hierbei ist überwiegend auf die Darstellung zu achten. Zusatzfunktionen, die nichts mit der Darstellung zu tun haben, lassen sich in der Regel besser durch Plugins bereitstellen. Beispiele:

5. Notizen: Wohin mit meinen Fundstücken und Erkenntnissen?

Gerade bei einer umfangreicheren Recherche kann es schnell zur Informationsschwemme kommen. Es hilft vorher zu entscheiden wo die Links zu geeigneten Themes und die eigenen Notizen zu den Vor- und Nachteilen gespeichert werden sollen wie z.B.:

6. Qualitätscheck: Wie gut ist das Theme und der Support?

Eine Recherche nach Tests, Reviews und Kundenmeinungen gibt Hinweise auf die Qualität des Themes und des Supports:

7. Preisgestaltung & Konditionen: Was kostet das Theme (jährlich)?

Selten ist es mit einer einmaligen Zahlung getan. Meist werden weitere Gebühren fällig und spezielle Konditionen haben ebenfalls Auswirkungen auf den Preis. Typische Themen sind:

Fazit: Leichte Entscheidung durch klare Kriterien & Ausrichtung

So verliert du dich nicht in den unendlichen Möglichkeiten, sondern bleibst achtsam und fokussiert auf dein Ziel ausgerichtet.

Viel Erfolg bei deiner Auswahl!

WordPress Child Theme erstellen

Auch wenn moderne Themes häufig sehr viele Konfigurationsmöglichkeiten bieten, ergibt sich früher oder später ein Anpassungswunsch, der nicht mit den Optionen in den Theme-Einstellungen zu verwirklichen ist. Die Lösung ist dann eine Anpassung in den Dateien des Themes. Allerdings werden diese bei einem Update des Themes überschrieben und alle Veränderungen gehen verloren. Um das Problem zu umgehen, bietet WordPress die Möglichkeit ein sogenanntes Child Theme zu erstellen.

Was ist ein Child Theme?

Ein Child (engl. für Kind) Theme verweist im Grunde auf das 'Eltern' Theme und beinhaltet nur zusätzlichen CSS-Code oder Funktionserweiterungen, die in der functions.php Datei des Themes hinterlegt werden. So kann ein Update des 'Eltern' Themes erfolgen und die Änderungen bzw. Ergänzungen der style.css und functions.php werden nicht überschrieben. Dies gilt auch für Anpassungen von Seiten Templates wie beispielsweise die Ansicht eines Beitrages, die in der single-post.php definiert wird.

Ein guter Grund, um gleich mit einem Child Theme zu starten und nicht erst zu warten. Darüber hinaus lassen sich auch mehrere Child Themes zu einem Eltern Theme erstellen, so dass zwischen verschiedenen Designkonzepten hin- und hergewechselt werden kann.

Wie wird ein Child Theme erstellt?

Leider bietet WordPress bisher keine automatische Erstellungen von Child Themes. Es gibt drei Wege um ein Child Theme zu erstellen:

  1. Download: Wir bieten den Download einer Child Theme Vorlage an, in der du nur ein paar Anpassungen durchführen musst. In einigen Fällen bietet auch der Hersteller des genutzten Themes ein passendes Child Theme an.
  2. Plugins: Es gibt einige Plugins, die automatisch Child Themes erstellen.
  3. Do it yourself: Zwar ein wenig mehr Handarbeit, aber sehr lehrreich ist die eigenständige Erstellung der notwendigen Ordner und der Dateien.

Unbedingt beachten: Falls in dem Eltern Theme bereits Einstellungen verändert wurden, werden diese nicht unbedingt in das Child Theme übernommen. Gleiches gilt für Einstellungen im Designmodifikator, den Menüs und den Widgets. Außerdem müssen bereits vorgenommene Änderungen in den Dateien des Eltern Themes in das Child Theme übertragen werden, da diese bei dem nächsten Theme Update verloren gehen.

Download unseres vorbereiteten Child Themes

Die einfachste Lösung ist die Nutzung unseres vorbereiteten Child Theme Ordners.

Schritt 1: Download ZIP-Datei

Du meldest Dich einfach über diesen Link zu unserem Newsletter an. Nachdem du Deine E-Mailadresse bestätigt hast, gelangst du zu der Downloadmöglichkeit unseres vorbereiteten Child Theme Ordners. Sobald der ZIP-Order entpackt ist, sind zwei Anpassungen nötig:

  1. Ordnernamen anpassen: Nicht zwingend notwendig, aber damit die Zuordnung des Child Themes gut zu erkennen ist, lohnt sich die Umbennenung des Ordners in der Art: name-des-themes-child. So liegt der Ordner in der Sortierung gleich unterhalb des Ordners deines eigentlichen Themes und falls du mehrere Themes mit Child Themes installiert hast, kommt keine Verwechslung der Child Theme Ordner zustande.
  2. style.css: In der style.css müssen zwei Einträge angepasst werden (siehe unten).

Schritt 2: Child Theme installieren

Dies kann auf zwei Wegen erreicht werden: entweder der Ordner wird per FTP in den WordPress Themes Ordner /wp-content/themes hochgeladen. Oder der Ordner mit den Anpassungen wird wieder in ein ZIP-Archiv komprimiert. Dann kann die ZIP-Datei über die Option "Hinzufügen" im WordPress Adminbereich unter 'Design' > 'Themes' hochgeladen werden. Anschließend muss das Child Theme nur noch aktiviert werden.

Auch wenn diese Variante recht bequem ist, lohnt es sich zusätzlich die Anleitung zur eigenhändigen Erstellung eines Child Themes durchzulesen. So wird klar welche Datei wofür zuständig ist und auf welchem Weg Veränderungen vorgenommen werden.

Child Theme mit Hilfe eines Plugins erstellen

Es existieren hilfreiche Plugins, die automatisch passende Child Themes erstellen können. Unsere Empfehlung ist der kostenfreie Child Theme Configurator. Das Plugin ist in deutscher Sprache verfügbar und bietet weitere Möglichkeiten, um Einstellungen des Eltern Themes zum Child Theme zu kopieren und Seiten Templates im Child Theme anzulegen.

Auch bei der Verwendung eines Plugins lohnt sich der Blick in die Anleitung zu selbständigen Erstellung eines Child Themes, damit klar wird wie ein Child Theme aufgebaut ist und in welche Dateien die Änderungen eingetragen werden.

Child Theme selbst erstellen

Das selbständige Erstellen eines Child Themes ist nicht besonders schwer. Es werden nur ein Ordner und zwei Dateien angelegt. Mehr ist nicht zu tun und jeder ist um eine Erfahrung reicher.

Alle folgenden Schritte lassen sich per FTP auch direkt auf dem Server durchführen. Meist ist es einfacher den Ordner und die Dateien auf der lokalen Festplatte zu erstellen und anschließend in den WordPress Themes Ordner hochzuladen.

Schritt 1: Child-Theme Ordner erstellen

Als erstes wird ein Ordner für das Child Theme benötigt. Grundsätzlich kann dieser frei benannt werden. Es sollten allerdings keine Leerzeichen verwendet werden. Wir empfehlen die Kombination des Ordnernamens des bisher genutzten Eltern Themes mit dem Zusatz '-child'.

name-des-themes-child

Damit findet sich der Ordner des Child Themes gleich unterhalb des Eltern Themes. Diese klare Zuordnung ist auch hilfreich, falls zu mehreren Themes Child Themes erstellt werden.

Schritt 2: style.css anlegen

Anschließend wird mit einem Texteditor (keine Textverarbeitungsprogramme nutzen!) die Datei style.css in dem Child Theme Ordner erstellt. Diese muss folgende Angaben beinhalten, die allerdings für jedes Theme etwas angepasst werden müssen:

/*
 Theme Name:     Mein Child-Theme
 Theme URI:      https://www.meine-domain.de
 Description:    Mein Child-Theme
 Author:         Ich selbst
 Author URI:     https://www.meine-domain.de
 Template:       eltern-theme-ordner
 Version:        1.0.0
*/

/* =Ab hier kannst du deine CSS-Anpassungen eintragen */

Im Grunde benötigt die style.css eines Child Themes nur zwei angepasste Einträge:

  1. Theme Name: An dieser Stelle kann ein eigener Theme Name vergeben werden. Auch hier ist die Kombination von Name des Eltern Themes plus 'Child Theme' sinnvoll.
  2. Template: Hier muss unbedingt der Ordnername des Eltern Themes eingetragen werden. Am besten ganz sicher gehen und im WordPress Theme Ordner (../wp-content/themes) nachsehen wie der Ordner des verwendeten Themes genau benannt ist (Groß- und Kleinschreibung beachten). Diese Information ist wichtig, weil WordPress damit weiß welches Eltern Theme zu verwenden ist.

Die restlichen Einträge sind nicht zwingend notwendig:

Wenn das Child Theme aktiv ist, können Änderungen am CSS in der style.css des Child Themes unterhalb der Zeile 'Ab hier kannst du deine CSS-Anpassungen eintragen' erfolgen. Diese bleiben dann auch bei einem Update des Eltern Themes erhalten.

Schritt 3: functions.php anlegen

Als zweite Datei wird nun ebenfalls mit Hilfe eines Texteditors die functions.php angelegt. Diese muss folgenden Code enthalten, der keinerlei Anpassungen erfordert:



Die functions.php sorgt dafür, dass alle CSS-Dateien des Eltern Themes geladen werden. Für manche Funktionserweiterungen muss Code in der functions.php ergänzt werden. Erfolgen diese Ergänzungen in der functions.php des Child Themes statt der des Eltern Themes, wird der Code bei einem Update des Eltern Themes nicht überschrieben.

Wichtig zu wissen: Falls sich jemand wundert, dass auf anderen Seiten die Dateien teilweise etwas anders aussehen. Lange Zeit wurden die CSS-Dateien des Eltern Themes über einen Eintrag in der style.css geladen (@import url("../mein-theme/style.css");). Mittlerweile empfiehlt WordPress die hier vorgestellte Variante mit dem Import in der functions.php, weil mit dieser u.a. die CSS-Dateien schneller geladen werden.

Optional: Screenshot integrieren

Kein Muss, aber ein nettes Extra: In der Übersicht der verfügbaren Themes werden im Administrationsbereich Vorschaubilder angezeigt. Wenn das Child Theme keine entsprechende Datei bereit hält, erscheint nur ein grau gemusterter Bereich. Zur besseren Erkennung kann eine 1.200 x 900 Pixel große PNG-Datei angelegt werden und mit der Bezeichnung screenshot.png in den Child Theme Ordner gespeichert werden.

Eine einfache Möglichkeit ist die Verwendung der screenshot.png des Eltern Themes über die mit Hilfe eines Grafikprogramms der Text 'Child Theme' gelegt wird.

Schritt 4: Upload des Child Theme Ordners

Jetzt ist alles bereit und der erstellte Child Theme Ordner mit den zwei Dateien kann per FTP auf den Server in den WordPress Themes Ordner geladen werden:

/wp-content/themes

Schritt 5: Child Theme aktivieren

Anschließend muss das Child Theme im Administrationsbereich unter 'Design' > 'Themes' nur noch aktiviert werden. Eine anschließende Funktionskontrolle zeigt, ob das Child Theme richtig angelegt wurde und alles wie vorgesehen funktioniert.

Mögliche Probleme bei Verwendung eines Child Themes

In der Regel ist die Verwendung eines Child Themes die beste Möglichkeit für grundlegendere Anpassungen an einem Theme. In seltenen Fällen kann es zu trotzdem zu Problemen führen. Wenn der Entwickler des Themes größere Veränderungen vornimmt, dann passen die Ergänzungen aus dem Child Theme ggf. nicht mehr zum Eltern Theme. Das kommt unserer Erfahrung nach nur sehr selten vor. Falls es Probleme nach einem Theme Update gibt, ist dies allerdings eine Möglichkeit, die überprüft werden sollte.

Fazit Child Theme

Unserer Meinung nach sollte das Erstellen eines Child Themes zum Standardvorgehen gehören. Damit ist jeder vor der unangenehmen Überraschung gefeit, dass nach einem Theme Update sämtliche Veränderungen unwiderruflich überschrieben wurden.