Episode 1
Divi Theme und seine Vor- und Nachteile

WordPress Webdesign Podcast - Divi Theme und seine Vor- und Nachteile
Worum geht es in dieser Episode?
Kurze Erklärung zu WordPress vorab:
WordPress ist ein Content-Management-System (CMS). Das bedeutet, dass du mit WordPress die Inhalte deiner Website verwalten kannst. Inhalte sind sowohl Texte und Bilder, aber auch Videos, Audios, Design und Navigation. Eine WordPress Website unterteilt sich immer in zwei Bereiche, das Frontend und das Backend. Das Frontend ist das was du siehst, wenn du die URL einer Webseite aufrufst. Zum Beispiel www.uixandy.com. Das Backend erreichst du über eine spezielle URL und du musst dich hier mit deinem Benutzernamen und Passwort einloggen. In dem WordPress Backend kannst du dann alle deine Inhalte verwalten. Das ganze unterteilt sich dann nochmal in verschiedene Bereiche (Seiten, Beiträge, Mediathek, Themes, Menüs, etc.). Themes legen das Design bzw. Styling / Layout der Website fest. Hier gibt es die Möglichkeit Themes zu kaufen oder kostenlose Themes zu installiern. Diese legen dann das Design deiner Website fest, also in den meisten Fällen den Aufbau der Website, sowie Schriftart, Schriftgröße und Farben der Website. Diese kannst du in den meisten Fällen über den Customizer bearbeiten, allerdings seltenst den Aufbau der Website verändern ohne in den PHP Vorlagen etwas verändern zu müssen, was doch etwas komplizierter ist.
Was ist das Divi Theme genau?
Eben so ein Theme ist auch Divi, allerdings unterscheidet es sich deutlich von den typischen Themes auf dem Markt. Der Hauptunterschied ist der Visual Page Builder. Hinter Divi steht Elegant Themes, ein Unternehmen aus den USA, das darauf bedacht ist, das Divi Theme ständig zu verbessern, neue Funktionen hinzuzufügen und die Sicherheit zu gewährleisten.
Außerdem gibt es zusätzliche Extras die bei Divi inklusive sind. Elegant Themes bietet kostenlose vorgefertige Layouts für fast jede Art von Website und Branche an, die von einem Ex-Google Designer entwickelt werden. Dies ermöglich auch bei wenig Budget oder geringem Zeitrahmen, höchstprofessionelle Websites.
Eine weitere nennenswerte Funktion ist das A/B-Split-Testing. Hierbei kann man für ein Modul zwei Designs entwickeln. Zum Beispiel einen Button in unterschiedlichen Farben. Die eine Farbe wird dann einer Hälfte der Website-Besucher angezeigt und die andere Farbe der anderen Hälfte der Website-Besucher. Damit kann man analysieren, welcher Button häufiger geklickt wird und somit in vielen Bereichen die Conversions einer Website erhöhen und optimieren.
Zudem bietet Elegant Themes kostenlose Plugins an. Ein Plugin nennt sich Bloom und damit kann man verschiedene Popups für Newsletter-Anmeldungen entwickeln, die entweder durch Klick auf einen Button oder Link erscheinen sollen oder nach einer festgelegten Zeit.
Das andere Plugin ist Monarch. Damit kann man eine Social-Sharing Funktion hinzufügen, die es dem Besucher ermöglicht eine Seite, Beitrag oder Produkt auf Social Media zu teilen.
Hinzu kommt, dass Divi eine WooCommerce Integration besitzt. Damit ist es möglich die verschiedenen Elemente von WooCommerce zu designen. WooCommerce ist das bekannteste Plugin, um WordPress zu einem Online-Shop zu erweitern und damit physische Produkte zu verkaufen. Für digitale Produkte eignet sich Easy Digital Downloads besser.
Eine weitere Möglichkeit Divi zu nutzen, ist es Divi zusätzlich zu einem bereits installierten Theme als Plugin zu installieren. Die meisten Themes sind kompatibel mit Divi und somit kann man mit Divi auch andere Themes an die eigenen Wünsche und Anforderungen anpassen.
Natürlich ist Divi auch responsive. Das heißt, dass alle Websites, die mit Divi entwickelt werden für alle Endgeräte (Handy, Tablet und Computer) optimiert sind.
Visual Page Builder:
Der Page Builder unterscheidet sich von den meisten Themes, da er zum Einen eine Vielzahl von verschiedenen Modulen und Funktionen mitbringt und zum Anderen über das Frontend bedient werden kann und man somit sowohl sehr effizient Websites entwickeln kann, aber diese eben auch sehr effizient verwalten. Zur Entwicklung muss gegenüber der klassischen Methode deutlich weniger Code geschrieben werden, da man das meiste über die Divi Einstellungen der Module anpassen kann. Meistens mit Schiebereglern oder klickbaren Optionen. Das bietet einen enormen Vorteil, weil man direkt im Frontend entwickeln kann und nicht ständig den Code mit dem Frontend vergleichen muss. Außerdem können Vorlagen angelegt werden und diese in der internen Bibliothek von Divi speichern und für neue Projekte anwenden. Hiermit ist es auch möglich individuelle Blöcke zu entwickeln, wenn auf einer Website regelmäßig neue Beiträge oder Seiten erstellt werden sollen und diese unterschiedlich aussehen sollen. Diese Blöcke können dann einfach eingefügt und per Drag & Drop verschoben werden und die Inhalte wie in Word durch anklicken im Editor angepasst werden. Damit ist man nicht an ein vorgefertigtes Template oder einen Entwickler gebunden und kann die Website relativ einfach erweitern. Damit kann man Inhalte auch ändern und sofort die Auswirkungen sehen und dagegen steuern. Man erspart sich hiermit das öffnen des Backends in einem Tab und des Frontends im anderen Tab des Browsers und das ständige hin und her wechseln, um im Backend die Änderungen zu machen und im Frontend die Auswirkungen zu sehen. Dadurch spart man sich mit Divi einfach sehr viel Zeit. Für den Anfang biete ich meinen Kunden immer einen kostenlosen Videokurs, in dem ich zeige, wie alles funktioniert und wie die Website selbst verwaltet werden kann. Dieses Video kann so oft angesehen werden, bis man geübt ist.
Deshalb bin ich davon überzeugt, dass Divi die optimale Lösung für Websites für kleine Unternehmen und Selbstständige ist. Es spart zum einen viel Zeit, durch die leichte Bedienung und ermöglicht gleichzeitig professionelle Websites und Optimierung der Conversions. Man ist somit nicht mehr von einem Entwickler oder einer Agentur abhängig, wenn man nur ein paar Zeilen Text ändern möchte oder die Reihenfolge von verschiedenen Sektionen, was auch Geld sparen kann.
Nachteile von Divi:
– out-of-the-box keine optimalen Ladezeiten: Das heißt, wenn Divi einfach nur installiert wird und man sich nicht mit der Optimierung der Ladezeiten auseinandersetzt und diese anwendet, sind die Ladezeiten der Website nicht optimal. Nach etwas Recherche und Ausprobieren, habe ich es allerdings geschafft mit Divi Ladezeiten zwischen 1 Sekunde bis maximal 2 Sekunden zu erreichen. Das ist auf jeden Fall eine sehr gute Ladezeit. Hierfür nutze ich WPRocket, Cloudflare (CDN) und einen virtuellen Server.
– Divi ist leicht zu lernen, aber schwer zu meistern: Man kann relativ einfach und zeiteffizient gute Websites erstellen. Um allerdings wirklich professionelle Websites zu erstellen, die alle Anforderungen und Funktionen erfüllen und festgelegte Ziele erreichen sollen, ist es doch ratsam sich an einen Experten zu wenden, statt das neben dem Tagesgeschäft zu versuchen.
– Shortcodes: Der Visual Page Builder arbeitet mit vielen Shortcodes. Das bedeutet, dass man nicht so leicht das Theme ändern kann und die Inhalte bestehen bleiben. Sollte man das Theme einfach ändern, werden die Inhalte in einem anderen Theme mit Shortcodes dazwischen angezeigt. Dies kann man allerdings umgehen, wenn man entweder mit dem Plugin ACF (Advanced Custom Fields) arbeitet und damit individuelle Felder für die Inhalte erstellt, die auch in anderen Themes problemlos angezeigt werden können oder indem man mit WordPress Gutenberg Blöcken arbeitet, die auch voll kompatibel mit Divi sind.
Alle zwei Wochen eine neue Folge
Live jeden Dienstag um 09:00 Uhr
Du willst einen Gastauftritt?
Jetzt abonnieren
Aktuelle Episoden
Episode 4 – Webhosting
In der heutigen Episode geht es um das Website-Hosting. Was ist Hosting überhaupt? Wofür benötigt man es? Welche Arten gibt es und worauf sollte man beim Hosten unbedingt achten? All das erfährst du in den folgenden Absätzen.
Episode 3 – WordPress Child-Theme
In dieser Episode geht es um WordPress Child-Themes. Du kannst es dir ganz einfach vorstellen, wie ein „Kind“ deines Themes, das in diesem Fall dann „Parent-Theme“ genannt wird, sobald ein Child-Theme aktiviert ist. Dieses erbt alle…
Episode 2 – Website Header verbessern mit Elevator Pitch
In dieser Episode geht es um den Header einer Website. Der Header ist der Bereich, den du siehst, wenn du eine Website öffnest. Häufig wird hier ein Bild mit etwas Text …
Episode 0 – Vorstellung
Willkommen zu meinem neuen WordPress Webdesign Podcast. Mein Name ist Andy Bittner, ich bin 28 Jahre alt und komme aus Landsberg. Landsberg liegt westlich von München in der Nähe von Augsburg in Bayern.