Das Qi Theme ist das neuste Theme aus dem Hause Qode Interactive, die mit ihren Themes und Plugins über 300.000 Kunden weltweit betreuen.
Wie immer haben wir das WordPress Theme durchleuchtet und damit unser Beispielprojekt (Die Skatedogz Skateboardschule) umgesetzt. In diesem Beitrag liest du die Zusammenfassung und unsere Empfehlung.
Es gab sehr gute Erfahrungen aber auch ein paar weniger gute, wie du im Videotutorial nachschauen kannst:
Wird Qi unseren aktuellen Favoriten Kadence vom Thron stürzen können? Wie steht es im Vergleich zu Blocksy oder OceanWP? So viel vorweg: Qi ist auf jeden Fall konkurrenzfähig, hat aber eine spezielle (kleine) Einschränkung, über die jeder Käufer informiert sein sollte.
Die wichtigsten Qi-Features im Überblick
Die kostenlose Version von Qi liefert schon ein extrem umfangreiches Featureset. Qi ist schön und schnell – es bietet visuell sehr attraktive Layouts und es ist auf Speed ausgerichtet.
Unter den liebevoll gestalteten Demo-Websites sind einige echte Perlen, primär bei den Premiumlayouts.
Neben den vier Header-Typen gibt es beispielsweise lediglich drei weitere Typen in Premium-Version. Ferner gibt es ein Fullscreen-Menü, mehr Widget-Bereiche, eigene SVGs für den Suchbutton und ein paar erweiterte Footer-Typen. Das hört sich nicht nach viel an und das liegt daran, dass die meisten Features eben bereits in der Free-Version enthalten sind. Daher lohnt es sich auf jeden Fall, diese mal auszuprobieren.
Basis-Theme und Premium-Plugins
Wer Premium lizenziert, bekommt je nach Lizenzplan ein oder zwei Plugins.
Das Qode Essential Addon erweitert das Free-Theme um zahlreiche Funktionen, die über die Optionsseite erreichbar sind. Diese Optionsseite ersetzt den Customizer und ist blitzschnell zu bedienen. Das Addon erlaubt die Kontrolle über Farben, Typografie, Gestaltung der Boxen und Elemente, wie Title, Sidebar, Content Bottom, Suche, Blog, Portfolio und mehr.
Die Qi Addons for Elementor sind laut Hersteller die größte Sammlung an Elementor-Widgets auf dem Markt. Die Premium-Version hat über 100 davon. Die Anzahl ist wirklich überwältigend und anstatt an dieser Stelle alle Module aufzulisten, beschränken wir uns auf die eher exotischen Module, die sich so nicht einfach woanders finden lassen.
Premium Buttons
Arbeitsstunden
Kundenlisten
Interaktive Banner
Advanced Toggle
Fortschrittsbalken in allen Varianten
Timeline Showcase
Vorher/Nachher Bild-Slider
Image Marquees (automatisch scrollende Bilder)
Pinterest-Galerien
Device-Frame-Slider
Stacked Item Scroll
Floating Item Showcase
Scroll to reveal
Divided Showcase Carousel
Intro Scrolling Images
Intro Glitch Effect
Ich hatte die meisten von diesen noch nie woanders gesehen, aber auch nicht gewusst, dass diese so heißen 😉
Entgegen der Installation von OceanWP ist Qi blitzschnell installiert, weil nicht jede kleine Funktion in ein eigenes Plugin ausgelagert ist. Also einfach Theme direkt aus WordPress heraus installieren. Ebenso die Qode Essential Addons und die Qi Addons für Elementor. Den Download-Link zu den Premium-Versionen bekommt man nach dem Kauf in der Registrierungsmail zugesandt. Diese Zip-Dateien müssen ebenfalls beide installiert werden.
Sobald diese vier Plugins installiert sind, geht es mit der Umsetzung los.
Auf den ersten Blick sieht die Umsetzung gut aus. Wer aber genau hinschaut, sieht ein paar Kleinigkeiten, die nicht optimal lösbar waren. Dazu gleich mehr.
Jedes Theme hat Stärken und Schwächen. So auch Qi.
Keine abgerundeten Ecken?
Es gab diesmal keine abgerundete Ecken bei den halbtransparenten Overlays. Daher fehlen sie überall. Witzigerweise gab es die Funktion nicht bei der „Call to action“-Box, die in der obersten Sektion Verwendung fand. Wie kann es sein, dass so eine einfache Funktion, wie das Abrunden der Ecken, nicht in einem Elementor-Modul enthalten ist? Sie ist regelrecht in jedem anderen Modul vorhanden.
Ist das ein großes Problem? Nein, schließlich lässt sich das auch über CSS lösen. Es deutet jedoch auf ein Problem in der Qualitätskontrolle hin und frustriert leicht, weil die Suche nach einer Lösung immer wieder wertvolle Zeit kostet. Daher ist es so wichtig, den eigenen Arbeitsablauf mit einem Theme oder Builder (oder Addon/Modul) zu testen, um ein Gefühl für das Produkt zu bekommen. Wie sorgfältig sind die Entwickler eines Plugins?
Links lassen sich im Footer-Widget nicht horizontal ausrichten
Auch unten die drei Links „Datenschutz, Impressum, AGB“ ließen sich über das Interface nicht horizontal ausrichten.
Einzelbeitragsseiten lassen sich nur beschränkt gestalten
Bei der Gestaltung einer Einzelbeitragsseite trat ebenfalls ein Problem auf. In der aktuellen Version von Qi lässt sich die Blogpage nicht wirklich gut an eigene Bedürfnisse anpassen. Hier die mit Kadence umgesetzte Vorlage:
Kadence erlaubt das Platzieren von Metafeldern zum Beispiel auf im Titel-Element (1-3). Das Beitragsbild lässt sich über die gesamte Breite ziehen und als Coverbild verwenden (4).
Qi bietet diese Möglichkeit nicht. Die Optionen dafür existieren aktuell nicht. Eigenes CSS muss wieder her. Am besten den Support nerven, bis der das Feature einbaut 🙂
Das heißt insgesamt nicht, dass nicht sehr gute und attraktive Layouts mit Qi möglich sind. Man muss eventuell nur Abstriche bei den üblichen Vorgaben machen. Hier ein Beispiel für eine sehr attraktive Blogseite aus den Qi Demo-Sites.
Qi verwendet als Designelement bei Blogbeiträgen hauptsächlich die Sidebar und für die Platzierung des Bildes nutzt man einfach ein wenig CSS oder verwendet eines der hervorragenden Starterpacks.
Qi benötigt Formulare
Qi unterstützt die meisten Formular-Plugins und Formularfelder lassen sich auch einfach gestalten. Eine eigene Formular-Funktion bringt Qi im Vergleich zu Kadence nicht mit. Ähnlich wie OceanWP. Schade. Wenn du nach einem richtig guten Formular-Editor suchst, dann schau mal in unseren Beitrag „Die besten WordPress Formular-Plugins: Form-Builder im Vergleich“.
Qi kann Portfolios
Die Gestaltung von Portfolioseiten liegt Qi besonders am Herzen. Portfolios sind aufgebohrte Bildergalerien. Unsere Skatedogz haben aktuell dafür keine Verwendung für ein Portfolio, aber das Feature ist so umfangreich, dass es auf jeden Fall genannt werden will.
Es gibt allein 18 Typen von Portfolio-Layouts.
Die Möglichkeiten sind schier endlos und was Qi bei Beitragsseiten fehlt, das macht es bei den Portfolios auf jeden Fall wieder wett. Hier ist Qi sogar im Vergleich mit dem doppelt so teuren Kadence, Blocksy und OceanWP die Nummer 1.
Das Qi Addon gibt es schon für 49 USD jährlich für Einzel-Websites. Unlimitierte Sites kosten 99 USD. Die Addons, 150 Demo-Sites, das Portfolio-Modul, Blog-Layouts und am wichtigsten die Qi Elementor Addons gibt es für Einzel-Websites schon ab 79 USD und für unlimitierte Sites für 139 USD jährlich. Das war auch das von uns getestet Paket.
Der perfekte Qi-Nutzer baut schicke Websites, die hauptsächlich aus wohlgestalteten Seiten auf Basis der existierenden Demoseiten besteht. Idealerweise mit umfangreichem Portfolio, denn darin ist Qi richtig stark. Schicke Bloglayouts sind auch möglich, wenn man um die aktuellen Beschränkungen navigiert oder keinen so hohen Anspruch hat. Feature-Requests beim Hersteller helfen bestimmt mittelfristig. Ich kann mir gut vorstellen, dass Qode diese Feature-Lücke bald schließt.
Damit tritt es in direkte Konkurrenz zu den aktuellen Favoriten Kadence und Blocksy. Wir haben das Theme auf Herz und Nieren geprüft und unser Beispielprojekt (Skatedogz Skateboardschule) damit umgesetzt. Dieser Erfahrungsbericht enthüllt, ob es einen neuen Favoriten gibt oder ob du vielleicht besser bei Kadence oder Blocksy bleiben solltest.
Wie immer zeigt unser Mega-Tutorial das Theme bei der Umsetzung unseres Beispielprojekts. Viele Themes sehen oberflächlich schick aus, verursachen bei der täglichen Arbeit so viele Kopfschmerzen, dass die Suche nach dem nächsten Theme vor Vorne beginnt. Daher sind wir bei unseren Tests sehr kritisch. Nur so ist es möglich, Unzulänglichkeiten zu entdecken.
Die Möglichkeit eine komplette Demo-Webseite inklusive aller lizensierten Fotos und Illustrationen zu importieren und sofort damit online gehen zu können, ist wirklich einzigartig! In der Praxis ändert man natürlich einige Bilder und Texte, aber man braucht keine Angst mehr vor Abmahnungen wegen Platzhalter-Bildern zu haben! So schnell habe ich noch nie eine professionelle Webseite gebaut!
Die wichtigsten Features im Überblick
OceanWP liefert bereits in Free-Version viele interessante Features.
Stick Anything erlaubt das „Festkleben“ von Elementen im Viewport, etwa von Navigationselementen in der Sidebar.
Modal Window liefert Popup-Fenster mit beliebigen Inhalten, zum Beispiel für Formulare.
Post Slider präsentiert Beiträge als Slider.
Custom Sidebar erstellt beliebig viele Sidebars für eigene Widgets.
Product Share bietet Social Sharing-Buttons für Produktseiten.
Social Sharing bietet Social Sharing-Buttons für Beiträge.
Ocean Extra ist besonders interessant. Es beinhaltet viele, kleine, teils wichtige Einzelfeatures, wie Meta Boxes, Layout/Sidebar je nach Beitrag/Seite ändern, Abstände regulieren, Titel an-/abschalten, individuelle Titel, Untertitel, Styling des Titels, Bildergalerie, Demo-Installation u. v. m.
Außerdem spendiert OceanWP 15 kostenlose Demos in der Free-Version.
OceanWP ist zwar mit vielen Buildern kompatibel, der Favorit scheint jedoch Elementor zu sein. Elementor haben wir auch im Mega-Tutorial verwendet. Einige Erweiterungen sind nur mit Elementor kompatibel und nur für Elementor gibt es eine ganze Reihe Content-Module.
Portfolio: Eine Bildergalerie mit Beschreibungstext (eigener Contenttyp).
Woo Popup: Fenster mit Hinweis „In den Warenkorb gelegt – weiter shoppen?“
Sticky Header/Footer: Umfangreiches Modul zum Anpassen des Scrolleffektes des Headers.
Ocean Hooks: Inhalte an fast allen möglichen Stellen im Theme platzieren. Rollenbasiert und mit konditioneller Logik.
Side Panel: Extra Seitenbereich, der nur auf Klick öffnet.
Footer Callout: Call-to-Action für den Fußbereich der Seite.
Elementor Widgets: 43 Contentmodule exklusiv für Elementor.
Die Elementor-Widgets verdienen einen besonderen Hinweis. Die Anzahl und Qualität sind so hoch, dass eine Lizenzierung von Elementor Pro für viele Anwender nicht notwendig sein sollte. Für den Preis von OceanWP gibt es nicht nur das Theme selbst, sondern einen fast gleichwertigen Ersatz für Elementor Pro.
Besonders interessant für Liebhaber von großen Bilddatenbanken ist der Zugriff auf die Royalty-Free Bilder von Freepik und Flaticon. OceanWP integriert die Dienste direkt unter „Medien ⭢ Browse Ocean Images“.
Zuerst nach einem Bild suchen und mit einem Klick speichert OceanWP das gewählte Bild automatisch unter Medien. Komfortabler geht es kaum.
Freepik hat neben Millionen von Stockfotos auch Vektoren und Icon-Packs.
Flaticon gehört zu Freekpik.
Da ist für jeden Geschmack und Anwendungsfall etwas dabei.
Die Features der Premiumversion überzeugen. Vor allem die integrierte Bilderdatenbank dürfte vielen Nutzern gefallen. Dies ist im aktuellen Thememarkt (bisher) einzigartig.
Die Lizenzierung ging schnell: Installation des Themes geschieht direkt aus dem Markt. Premiumplugins müssen leider einzeln installiert werden. Das kostet gut und gerne eine Viertelstunde Zeit. Stattdessen wäre es gut, falls alle Plugins bereits im Hauptpaket enthalten wären und der Nutzer sie nur noch im Backend freischalten muss.
Nach der Installation findet sich im Backend das „Theme Panel“.
Darüber lassen sich Features an- und abschalten, zum Beispiel Customizer-Optionen, JS-Module, Gutenberg-Blöcke etc.
Um alle Features im Theme nutzbar zu machen, braucht es noch Elementor oder einen anderen Editor. Wir haben uns für Elementor entschieden, weil OceanWP-Premium ein großes Erweiterungspaket für diesen Builder bereitstellt.
Die Liste der OceanWP-Elementor-Module ist lang. Die Module sind als Alternative oder Ergänzung zu Elementor Pro gedacht. Im Video benutze ich viele dieser Contentmodule.
Insgesamt gab es keine großen Probleme bei der Umsetzung der Beispiel-Website. Es ging alles sehr flott und und einfach. Auch wenn vielleicht nicht ganz so flott und einfach, wie bei Kadence. Insgesamt gab es aber weniger „Problemchen“ bei OceanWP als bei Blocksy.
OceanWP bietet leider keinen Formulareditor. Das ist natürlich kein Problem, wenn du dir eine Formular-Plugin aus unserer Liste aussuchst. Kadence hat einen Formulareditor (und Builder) eingebaut, ist aber auch deutlich teurer.
Die Header- und Footer-Editoren im Customizer sind etwas weniger intuitiv, als bei anderen Themes. Die bieten in der Regel einen Spalteneditor, in dem sich Logo, Navigation, Suchicon etc. leicht anordnen lassen. OceanWP macht es etwas anders und versucht alles über Einstellungen zu regeln. Etwas ungewohnt, aber es gibt alle Features, die das Herz begehrt und wer etwas komplett Individuelles wünscht, kann einen Header/Footer einfach über das „Theme Panel ⭢ My Library“ erstellen und einbinden.
Von Vorteil ist die Möglichkeit Features an- und abschalten zu können.
Einfach ungenutzte Features deaktivieren und die Ladezeiten sollten so schneller werden. Nicht vergessen sicherzustellen, dass noch alles funktioniert.
Eine weitere Stärke von OceanWP sind die zahlreichen Starterpacks, die sich leicht installieren lassen. Bei über 200 davon findet sicher jeder was.
Es war mir tatsächlich nicht möglich, die Fontfarbe im Footer einzustellen, ohne eigenes CSS dafür anzulegen. Gleiches für die mittige Ausrichtung des Titels.
Insgesamt ging die Umsetzung der Beispiel-Website blitzschnell, wie du im Video sehen kannst.
Empfehlenswert ist der Businesstarif. Hauptsächlich wegen der Integration von Freepik und Flaticon.
Fazit: Demo-Seiten einfach online stellen!
Die drei großen Stärken von OceanWP sind der Zugriff auf die Bilddatenbanken, die Elementor-Module und die zahlreichen Website-Demos. Bei der täglichen Arbeit mit dem Theme gibt es nach kurzer Eingewöhnung keine Hürden. Der Preis ist sehr attraktiv. Die Business-Version ist sogar günstiger als das Abo bei Freepik selbst! Wer viele Bilder braucht, für den ist das alleine ein ausschlaggebendes Kaufargument. Das Theme mit seinen Premium-Features gibt es sozusagen kostenlos dazu.
Die Möglichkeit eine komplette Demo-Webseite inklusive aller lizensierten Fotos und Illustrationen zu importieren und sofort damit online gehen zu können, ist wirklich einzigartig! In der Praxis ändert man natürlich einige Bilder und Texte, aber man braucht keine Angst mehr vor Abmahnungen wegen Platzhalter-Bildern zu haben! So schnell habe ich noch nie eine professionelle Webseite gebaut!
Jedes Theme hat vor und Nachteile. Letztendlich kommt es wirklich darauf an, mit welchem Theme die Arbeit am schnellsten und komfortabelsten umgesetzt ist. Für mich ist das immer noch Kadence. Aber da bekomme ich keine Bilder dazu. Ich liebe kostenlose Bilder, also wird mir nichts anderes übrig bleiben, als Kadence UND OceanWP zu lizenzieren 🙂
Wer die beliebtesten Formular-Plugins für WordPress miteinander vergleicht, stellt schnell fest: Alle kosten quasi das gleiche und haben fast identische Features. Rein von der Oberfläche oder der Featureliste scheint es unmöglich, sich für eines der Pakete zu entscheiden.
Jedes Formular-Plugin muss im Test ein mehrseitiges Formular für unsere Skatedogz-Website (die wir bereits bei den letzten Theme-Tests verwendet hatten) meistern. Ein einfaches Kontaktformular war uns dafür zu einfach, wir wollten auch komplexere Formularelemente wie Dateiuploads integrieren.
Das Testszenario: Die (fiktive) Skateschule wächst. Sie braucht ein Bewerbungsformular für neue Trainer. So sieht das Formular auf einer Seite aus:
Neben Kontaktinfos können Bewerber ihre Erfahrung in Jahren auf einem Slider einstellen, mehr als eine Website verlinken und Dateien (Videos, PDFs) von sich hochladen. Später werden die Felder auf drei Seiten aufgeteilt.
Daher haben wir das kostenlose und sehr verbreitete Contact Form 7 Plugin im unserem Test leider nicht berücksichtigen können, dieses bietet schlichtweg zu wenige Funktionen.
Das folgende Video demonstriert die Erstellung des Formulars für alle vier Plugins:
Der gesamte Erstellungsprozess geht selbstverständlich mittels Drag & Drop, d.h. man braucht nicht programmieren können, oder irgendwelche Shortcodes oder HTML-Code bearbeiten!
Es lohnt sich auf jeden Fall reinzuschauen, denn der Erfahrungsbericht offenbart nicht nur die Stärken, sondern auch viele Schwächen der einzelnen Plugins.
Die Installation verlief bei allen Plugins ohne Probleme. Nur bei Ninjaforms ist es notwendig zusätzliche Module, also Erweiterungen zu installieren, um zum Beispiel das Formular auf mehrere Seiten aufzuteilen oder mehrspaltige Formulare anlegen zu können.
Alle vier Formular-Plugins bieten bereits in der günstigen Basisversion die wichtigsten Felder; angefangen bei Text, Absatz, Checkboxen, Radio-Buttons, Dropdown-Felder, verborgene Felder, Felder für das Datum und die Uhrzeit und viele mehr.
Für normale Kontaktformulare ohne große Ansprüche sind alle Formular-Plugins wirklich ausreichend.
Außerdem bieten alle der getesteten Form-Builder die Möglichkeit abgeschickte Formulare weiterzuverarbeiten und Einreichungen an diverse Drittanbieter weiterzureichen. Hier ist es aber wichtig zu wissen, mit welchem Drittanbieter man arbeiten möchte, denn nicht jeder Anbieter ist in den Basisversion erhalten. Alle Plugins bieten außerdem einen Datei-Upload und können Formulare auch in der Basisversion schon auf mehrere Seiten aufteilen.
Alle getesteten Formular-Plugins beherrschen selbstverständlich auch bedingte Logiken, mit denen man Felder ein- und ausblenden kann, je nachdem, was der Nutzer davor ausgewählt hat.
Für sämtliche Formular-Plugins fallen jährliche Lizenzkosten an:Formidable Forms gibt es schon ab ca. 40 USD, Gravity Forms erst ab 59 USD, NinjaForms kostet 49 USD und WPForms liegt bei 40 USD. Wer sämtliche Features braucht, zahlt bei allen Anbietern rund 300 USD im Jahr.
Formidable bietet mehr wichtige Felder an als die Mitbewerber. Außerdem ist es sehr übersichtlich.
Felder lassen sich nach Belieben im Formularbereich verschieben und, wie auf dem Screenshot zu erkennen, nebeneinander in Spalten arrangieren.
Am einfachsten geht das mit dem Feld „Bereich“, das erlaubt, mehrere Felder in einer Box zu gruppieren. Die Mitbewerber können das nicht so einfach. Einmal in einem Bereich lassen sich die Felder per Auswahl unter „Set Row Layout“ anordnen.
Layouteinstellungen gibt es für jedes Feld. Diese können global eingestellt werden und lassen sich so an alle Anforderungen anpassen.
Besonders gut gefallen ein paar der Sonderfelder, die es bereits in der Basisversion gibt. Das „Repeater“-Feld erlaubt das Duplizieren von Formularfeldern für den Ausfüller. Im Video ist das für das Feld „Website/URL“ demonstriert. So kann ein Ausfüller zum Beispiel mehr als eine Website eintragen. Ein Slider ermöglicht die Angabe einer Zahl aus einem Bereich, zum Beispiel „Wie viel Jahre Erfahrung hast du?“.
Das Feld „Zusammenfassung“ bieten nur zwei der vier Kontrahenten. Dies lässt sich auf der letzten Seite einbinden. So kann der Ausfüller zum Schluss überprüfen, ob alle Felder richtig ausgefüllt sind.
Die ausgegrauten Drittanbieter stehen nur bei den teureren Lizenzen zur Verfügung.
Hat auch nicht jeder: Mit der Formularplanung lassen sich Formulareinreichungen öffnen, schließen und sogar planen und limitieren.
Gravity fällt vor allem durch seine „cleane“ Oberfläche auf.
Die Felder lassen sich in Spalten anordnen.
Leider hat Gravity kein Repeater-Feld. So ist es notwendig, mehrere Felder in das Formular einzufügen. Auch gibt es keinen Slider. Für einen Zahlenbereich muss ein normales Zahlenfeld herhalten. Über die Validierung gelingt es zwar auch den Bereich von 5-40 einzugrenzen, aber cool ist anders. Der Seitenumbruch funktionierte tadellos, aber ein gruppierendes Feld wie das Feld „Bereich“ bei Formidable gibt es nicht. Immerhin gibt es die Möglichkeit Sektionen anzulegen.
Bei Ninja Forms ist nicht ganz klar, ob man ein Ninja sein muss, um diese Software zu bedienen oder ob sie einem Ninjafähigkeiten verleihen möchte.
Sehr wichtig bei den Ninja Forms ist es, die zusätzlichen Module von der Herstellersite zu laden und zu installieren. Erst dann funktionieren mehrspaltige Layouts und Multiseitenformulare wie gewünscht.
Die Meldung oben links (1) ging nie weg. Es gab auch keinen „Schließen“-Button. Die Sektionsüberschriften (2) zeigt Ninja nur an, wenn das Feld aktiv ist. Dann fährt die rechte Spalte aus und offenbart den Text (3). Den Text im Layoutbereich zu haben, erscheint wohl nicht wichtig, wie der Folgescreenshot zeigt.
Die Übersichtlichkeit des Interfaces ist jedoch vorbildlich. Ebenso die Geschwindigkeit. Ein Klick auf einen Button und das Formularfeld erscheint sofort. Bei allen anderen Buildern dauert es 1-2 Sekunden. In der Basisversion bietet Ninja keinen Slider. Aber es gibt einen Repeater, den ich erst nach dem Videotest ans Laufen bekommen habe. Allerdings ist er nicht 100% einsatzfähig:
Unter (1) lässt sich die Überschrift einstellen, die dann auch unter (2) auf dem Button übernommen wird. Das Wort „ADD“ bleibt aber immer vorne auf dem Button stehen. Anpassen lässt sich das nicht.
Unser Favorit ist Ninja nicht. Ninja fühlt sich leicht und schnell an. Wer über die kleinen Mankos hinwegsehen kann und sich mit den Eigenheiten vertraut macht, der wird sicher auch mit Ninja glücklich. Die wichtigsten Funktionen werden abgedeckt und bestimmt lassen sich diese kleinen Fehlerchen auch über den Support korrigieren.
An WPForms habe ich selbst hohe Erwartungen gestellt, hatte dann aber vor allem bei der Gestaltung mit einigen Problemen zu kämpfen.
Auch wenn WPForms sehr aufgeräumt ist, stecken die Problemchen im Detail. Erstens fehlt es an vielen Feldtypen (im Vergleich zu des Testgegnern) und die Möglichkeit Formularfelder in ein Wunschlayout zu bringen, lässt im Vergleich zu Wünschen übrig. Mehr Infos im Video.
Fazit: Der Gewinner in unserem WordPress-Formular-Plugin Vergleich
Alle Formularplugins können einfache Kontaktformulare erstellen und dies auch schnell und ansehnlich. Bei unserem Test hat sich jedoch schnell gezeigt, wer die Nase vorn hat.
Die Installation bei NinjaForms war unnötig kompliziert. Es hat zwar keine besonderen Fähigkeiten, ist aber von den Vieren das schnellste Plugin.
Insgesamt stört uns daran allerdings, dass das Backend nicht so übersichtlich ist, wie das der anderen drei Plugins. Wen das nicht stört, für den ist NinjaForms ebenfalls eine gute Wahl.
WPForms bildet hier klar das Schlusslicht. Die Layoutmöglichkeiten sind vergleichsweise bescheiden. Auch gibt es keine weiteren Herausstellungsmerkmale oder besonderen Funktionen.
Das war für uns etwas überraschend, da WPForms eines der bekanntesten Formular Plugins ist, aber die anderen haben schlichtweg mehr zu bieten.
Am Ende haben im Grunde Kleinigkeiten, wie das hervorragende Repeater-Feld und die übersichtlichen Feldbereiche bei Formidable Forms über den Gesamtsieg im Vergleich der besten Formular-Plugins für WordPress entschieden.
Um es vorwegzunehmen: Du fühlst dich mit dem HTML/CSS-Framework Bootstrap pudelwohl, brauchst aber bei deinen Projekten auch die Unterstützung von WordPress + Plugins? Dann ist der Bootstrap 5 WordPress Page Builder livecanvas ein absolutes Muss.
livecanvas verspricht hohe Geschwindigkeit und daraus abgeleitet besseres SEO. Ob Letzteres tatsächlich erreicht wird, hängt natürlich von vielen weiteren Faktoren ab. Aber schnell ist er. Bisher ist uns kein schnellerer Builder zwischen Zeigefinger und Mausbutton gekommen. Allerdings erkauft man sich den Speed mit einer Menge Kompromisse an anderer Stelle. Dennoch ist livecanvas für Hartgesottene eine klare Empfehlung. Fangen wir aber mal von Vorne an.
Skatedogz-Projekt
Wie immer haben wir mit livecanvas unser Skatedogz-Projekt umgesetzt. Im Video gibt es ein vollständiges Tutorial zu livecanvas mit ein paar Tipps zur Entwicklung mit Bootstrap.
Hier ein kurzer Eindruck, wie die fertige Webseite der Skatedogz, die wir im Tutorial bauen, aussieht:
Breche aus dem Gefängnis herkömmlicher Pagebuilder aus
Laut Entwickler sind aktuelle Pagebuilder kacke! Sie fesseln ihre Kunden (Customer lock-in), haben oft schlechte Performance aufgrund von zu viel „Bloat“ und erlauben keine Flexibilität bei der Implementierung von HTML-/CSS-Lösungen.
Wer sich eine Weile mit dem Pagebuilder-Ökosystem beschäftigt, kann dies leicht bestätigen. Wie will livecanvas diese Probleme aus der Welt schaffen? Schließlich kann man konkurrierenden Pagebuildern ja keine grundsätzliche Böswilligkeit unterstellen. Die wollen schließlich auch nur, dass ihr Kunden gute Erfahrungen mit ihren Produkten machen. Das führt aber unweigerlich zu den o. g. Problemen. Bei livecanvas etwa nicht?
livecanvas-Innovationen
livecanvas trumpft mit einigen Innovationen auf, um diese Probleme aus dem Weg zu schaffen.
livecanvas erzeugt kein eigenes HTML oder CSS. Es hält sich strikt an die Vorgaben aus dem Bootstrap-Framework. Alle erzeugten Layouts lassen sich über einen Button als HTML abspeichern. Soweit in die neue HTML-Datei Bootstrap eingebunden wird, bleiben alle Layouts so, wie sie in livecanvas unter WordPress erstellt wurden. Angenommen es käme ein weiterer Pagebuilder auf den Markt, der auch alles nach Bootstrap-Vorgaben macht, dann wäre dieser zumindest theoretisch dazu in der Lage einfach livecanvas zu ersetzen. Bei Elementor und Divi wird das nie passieren.
Weiterhin erschließt der Einsatz von Bootstrap tausende Layouts, Elemente und Tutorials, die einfach so in livecanvas verwendet werden können.
livecanvas speichert dieses HTML in der Datenbank. Da es in der Regel keine Shortcodes enthält, wie das bei anderen Pagebuildern der Fall ist, muss WordPress nach einer Datenbankabfrage auch nichts mehr „transformieren“. Dadurch ist livecanvas sauschnell.
Der HTML-Code lässt sich nach allen Regeln der (Bootstrap-)Kunst anpassen, erweitern und am wichtigsten: verkleinern! (s. Video für diverse Beispiele).
Der Code-Editor ist ein Traum. Er läuft direkt im Browser. Es fühlt sich so an, als würde man lokale Dateien mit Visual Studio Code oder ähnlich bearbeiten. Alle Änderungen werden sofort (!) auf der Seite reflektiert als wäre ein Liveserver an.
livecanvas Überblick
Nach der Installation offenbart ein Blick in die Einstellungen, dass es im Prinzip keine gibt:
Okay, neben einem Einleitungsvideo auf Englisch gibt es wirklich nur ein Handvoll Features. Einfach nach Gebrauch an- und ausschalten.
Für unseren Test haben wir das empfohlene picostrap-Theme verwendet (vom gleichen Anbieter).
Ein Childtheme gibt es gleich dazu. So ist es dann auch möglich, Änderungen an den Dateien vorzunehmen, die durch Updates nicht einfach überschrieben werden.
Wem das nicht reicht, der kann auch eines der zahlreichen Bootstrap-Themes bei envato erwerben. Die meisten sind kompatibel mit livecanvas und wenn es dabei Probleme geben sollte, dann einfach den Support bemühen.
Ein ganz normaler Customizer, in dem sich viele übliche Einstellungen vornehmen lassen. Beispielsweise Fonts, Farben und weitere Optionen. Das Besondere hier ist aber, dass bei einem Klick auf „Veröffentlichen“ die Einstellungen nicht etwa in der Datenbank gespeichert werden.
Sie werden kompiliert und in den Dateien des Bundles abgespeichert. Gerade einmal 29kB ist die komprimierte Datei. CSS-Dateien anderer Pagebuilder sind nicht selten fünf- bis zehnmal größer.
Der livecanvas-Editor
Das Herz von livecanvas ist der Editor. Zuerst fällt auf, dass die Seite ganz normal angezeigt wird.
Es gibt lediglich eine unscheinbare Topleiste mit drei Buttons (1) und einen Button unten rechts (2), der eine neue Sektion erstellt.
Nach einem Klick auf „Add Section“ fügt der Editor eine neue Zeile ein und das Bearbeitungsmenü öffnet sich. Hier lassen sich Dutzende Vorlagen unter Readymades auswählen. Solange man auf ein neues klickt, wird dieses sofort angezeigt. Hier glänzt livecanvas nur so vor Speed. Das Laden geht wirklich unverzüglich. Schwer zu beschreiben. Man muss es einfach gesehen haben, zum Beispiel im Video.
Neben den Readymades gibt es aber auch einen Gridbuilder. Mit dem lassen sich die meisten Grids bauen, die Bootstrap so bietet.
Während die Maus über einen Element schwebt, zeigt livecanvas an den Kanten der Boxen Schaltflächen an, über die die Einstellungen der Elemente aufgerufen werden.
Über das Menü lassen sich Elemente verschieben, kopieren, einsetzen, duplizieren oder zum Beispiel neue Zeilen einfügen.
Es ist jedoch (aktuell) nicht möglich Elemente per Drag’n’drop zu verschieben. Ein Feature das fast alle anderen Pagebuilder bieten.
STRG+Z (oder CMD+Z) für „Rückgängig machen“ geht auch nicht. Aber es gibt zum Glück eine Historiefunktion, mit der man zu früheren Version zurückkehren kann. Nur eben nicht mit der Tastatur.
Ein Doppelklick auf diese Schaltflächen (1) öffnet übrigens die Optionen und eine Rechtsklick den Codeeditor (2), das wahre Schmuckstück von livecanvas. Hier wird der Code der Spalte angezeigt. Alle Änderungen im Codeeditor werden live auf der Seite widergespiegelt. Unter Global CSS (neben (2)) lässt sich auch gleich das globale CSS bearbeiten und live testen. Das macht richtig Spaß und ist im Prinzip das Hauptfeature von livecanvas. Es geht ja darum Bootstrap-Webdesignern die bestmögliche Experience zu liefern und das macht livecanvas wirklich gut.
Hat livecanvas auch Nachteile?
Was andere Builder in der Regel können, aber livecanvas nicht:
Drag’n’drop von Elemente geht nicht.
Es lassen sich keine Spalten oder Zeilen abändern. Wenn also eine Zeile drei Spalten hat und du daraus zwei machen möchtest, dann musst du das im HTML abändern.
Keine Unterstützung für dynamische Felder, Formulare und viele andere dynamische Funktionen.
Diverse andere Probleme, die ich im Video demonstriere.
Fazit: Der perfekte PageBuilder für Bootstrap-Entwickler
Nachdem ich in den letzten Monaten etliche WYSIWYG-Pagebuilder getestet hatte, war livecanvas zuerst wie ein großer Kulturschock, den ich erstmal verkraften musste. Meine Erfahrungen mit Bootstrap liegen schon viele Jahre zurück. Nach ein paar Stunden Dokumentation lesen und experimentieren, bin ich aber gleich wieder im Element gewesen.
Bei der Arbeit mit livecanvas zeigt sich schnell, was dieser Pagebuilder leistet und was nicht. Aus meiner Sicht gibt es noch viel Verbesserungspotenzial. Es stellt sich aber die Frage inwiefern liebgewonnene Features wie das Verschieben von Elementen, konditionelles Einbinden von Seiten, Dutzende von Blöcken usw., was es alles bei der Konkurrenz gibt, für dich tatsächlich entscheidend sind. Schließlich benutzt du Bootstrap und bist daher schon ein Badass 😉 Es gibt für Bootstrap im Prinzip auch alles, was es für WordPress gibt. Man muss nur kurz Google bemühen.
livecanvas ist ein geniales Tool für Bootstrap-Entwickler, die hier und da gerne WordPress mit einem Plugin verwenden wollen. Zum Beispiel für Formulare oder andere Interaktivelemente. Alle anderen sollten lieber auf einen herkömmlichen Builder setzen.
Kannst du dich noch an die drei Punkte aus dem livecanvas-Manifesto erinnern? Customer Lock-in, zu viel „Bloat“ und kaum Flexibilität bei der Implementierung von HTML-/CSS-Lösungen. Diese drei Probleme behebt livecanvas vollständig. Wenn das für dich wichtig ist, dann schlag zu und mach Gebrauch von der 30-Tage-Geldzurückgarantie.
Die meisten WordPress-Nutzer jubelten als RankMath Ende 2018 als kostenloses Ersatzplugin für Yoast und andere SEO-Plugins auf den Markt kam. Bietet selbst die Free-Version einen unglaublichen Funktionsumfang, der sogar den der konkurrierenden Bezahloptionen deutlich übertrifft. Das war eine echte Überraschung.
Seit November 2019 gibt es nun eine Pro-Version mit vielen interessanten Features. Dieser haben wir auf den Zahn gefühlt. Neben einem ausführlichen Tutorial und einer Erklärung der wichtigsten Features beantwortet unser ausführlicher Testbericht auch die Frage, für wen und ab wann sich die Pro-Version lohnt.
Unser Video-Tutorial demonstriert Installation und Einsatz bei Hey-Uni.de. Einem Hobby-Projekt, das wir im letzten Beitrag schon gehörig mit WP ROCKET beschleunigt haben. Jetzt geht es darum, herauszufinden, welche Best Practises sich mit RankMath Pro umsetzen lassen.
In unserem Video findest du einen kompletten Durchgang von der Installation, Konfiguration und eine Beleuchtung der meisten Features – Free und Pro (jedoch noch ohne Content AI):
Nach dem Kauf landet der Downloadlink in der Inbox. Über diesen lässt sich das WordPress-Plugin auf der Account-Seite als ZIP-Datei herunterladen.
Nach dem Download die ZIP-Datei einfach unter Plugins/Installieren/Plugin hochladen auswählen, installieren und direkt aktivieren.
Es empfiehlt sich direkt den Account zu verbinden, damit alle Features zur Verfügung stehen.
Username und Passwort steht in der E-Mail nach dem Kauf.
Einmal aktiviert, kann es losgehen mit dem Installations-Wizard. Es gibt Einiges zu einzurichten.
Selbstverständlich wählen wir „Advanced“, um alle Features konfigurieren zu können.
Da YOAST installiert ist, möchte RankMath mit der automatischen Migration beginnen. Alle Einstellungen von Yoast werden nach „Import starten“ übernommen.
Der Vorgang dauerte bei Hey-Uni ungefähr eine Minute. Danach wird das Yoast SEO Plugin deaktiviert.
Unter „Deine Seite“ lässt sich der Website-Typ einstellen. Ein Logo für Google. Das wird dann bei Suchen rund um die Website und/oder das Unternehmen bei Google angezeigt. Ein standardmäßiges Bild zum Teilen auf Social Media ist auch nützlich.
Eine der Stärken von RankMath Pro ist die Zusammenführung von Daten aus den unterschiedlichen Quellen, um so die Ranking-Performance besser analysieren zu können. Das bedeutet selbstverständlich auch, dass das Plugin Zugriff auf all diese Dienste benötigt.
In unserem Beispiel ist die Search Console verbunden. Das sollte fürs Erste reichen. Solltest du aber Google Analytics verwenden, dann richte es entsprechend ein. Unter Country unbedingt Deutschland einstellen, damit Google.de als Suchmaschine für Rankingabfragen verwendet wird.
Sitemaps sind streng genommen bei kleineren Sites nicht unbedingt notwendig. Schaden tun sie aber auch nicht. Die Standardvorgaben reichen für den Anfang.
Für News- und Video-Websites lassen sich separate Sitemaps anlegen.
Im Schritt „Optimierung“ lassen sich leere Tag- und Kategorieseiten auf NoIndex stellen (empfohlen). Externe Links grundsätzlich mit NoFollow zu versehen, bringt schlechtes Karma. Es schadet auch nicht den eigenen Rankings. Ob externe Links in einem neuen Fenster aufgehen sollen, hat eher Auswirkungen auf die Usability, ist aber ein beliebtes Feature.
Fertig. Ist die Installation von RankMath Pro jetzt abgeschlossen? Nicht ganz.
In der Rollenverwaltung (s. u.) lässt sich feingliedrig festlegen, wer welche Funktionen von RankMath verändern darf. Falls eine Seite nicht existiert, kann der 404 Monitor darüber benachrichtigen. Außerdem lassen sich solche Seiten dann umleiten.
Schema ist eines der herausragendenen Pro-Features bei RankMath. Die Typen für Beiträge und Seiten lassen sich vorab definieren. Das kann nützlich sein, sollte die Website vielleicht keine Publikation sein (z. B. ein Onlineshop oder Immobilienportal), dann macht es Sinn andere Schematypen zu verwenden. Natürlich lässt sich der Typ nachher noch individuell anpassen.
Features: RankMath Pro nach der Installation
Nach der Installation, für die man sich gerne 10 Minuten nehmen darf, geht es direkt ins Dashboard. Hier finden sich eine große Menge an Modulen (1), den Einrichtungsassistenten (2) und die Import & Export Funktionen (3). Der Rest der Funktionalität ist im Menü abrufbar.
Aktuell gibt es insgesamt 19 Module. Dabei braucht niemand wahrscheinlich alle Module gleichzeitig. Schauen wir uns dennoch mal die wichtigsten Module im Detail an.
Der 404 Monitor
Sobald ein Modul aktiviert ist, erstellt RankMath einen Link dazu im Menü.
Über einen Klick auf „Einstellungen“ geht es zum 404-Fehlerprotokoll.
Hier tauchen Anfragen auf, die ins Leere gelaufen sind. Sehr nützlich nicht nur für eine bessere Nutzerfreundlichkeit, sondern auch zum Beispiel um interne und externe Links zu finden, die nicht richtig gesetzt sind.
Ein Klick auf „Einstellungen“ liefert weitere Möglichkeiten. Die „Erweitert“-Option (1) protokolliert auch den Referrer, wichtig um herauszufinden, von welcher URL ein Klick kommt. Das „Protokolllimit“ begrenzt die Anzahl der Logs. Einhundert Zeilen in einem Protokoll (2) sollten reichen. Sollte es Pfade auf der Website geben, bei denen der 404-Fehler ausdrücklich gewünscht ist, so lassen die sich unter (3) ausschließen. Falls URLs Parameter angehangen sind, so können diese ignoriert werden.
Der Fehlaufruf ist direkt im Monitor sichtbar (1). Prompt nach der Aktivierung sind viele weitere 404s aufgetaucht. Es ist vielleicht interessant diese mal zu kategorisieren. (2) und (6) könnten falsche Links auf der eigenen Site sein. Das sollte klarer werden, sobald auch die Referrer-Infos bei zukünftigen Anfragen das erst Mal gespeichert werden. (3) bis (5) sind vermutlich Crawler oder Spamanfragen. (7) und (8) sehen aus wie typische Security-Attacken. Hier versuchen Hacker bekannte Schwachstellen zu ermitteln. Das passiert im Prinzip den ganzen lieben langen Tag lang. Also immer alles aktuell halten!
???? für den 404 Monitor. Sehr nützlich. Damit bleibt die Site immer clean. Die Erfahrung zeigt, dass sich im Laufe der Zeit so viele kleine Fehler eliminieren lassen. Am besten alle paar Wochen oder Monate mal hereinschauen und Fehler prüfen.
Wer braucht das? Jeder.
Support für Advanced Custom Fields
Sobald das bekannte Plugin Advanced Custom Fields installiert ist, weiß RankMath damit umzugehen. ACF wird von Sites eingesetzt, die viele zusätzlichen Feldoptionen benötigen. Ein Immobilienmakler möchte vielleicht in einer Sektion Immobilienobjekte veröffentlichen. Neben Titel und anderen Standardfeldern benötigt ein Eintrag auch Felder für Quadratmeter, Anzahl Zimmer, Miete etc.
Es ist lediglich notwendig den Support zu aktivieren. Es gibt keine Einstellungsmöglichkeiten. Sobald es aktiviert ist, kann RankMath die zusätzlichen Felder in die Contentanalyse und -Optimierung einbeziehen.
???? Mit ACF und theoretisch auch mit vergleichbaren Plugins müssen alle SEO-Plugins umgehen können.
Wer braucht das? Nur Sites, die angepasste Daten veröffentlichen, die über die Standardfelder nicht abgedeckt sind.
Support für das AMP-Plugin
Wer das AMP-Plugin benötigt, der braucht lediglich den Schalter hier umzulegen.
Danach werden alle für AMP notwendigen Funktionen bereitgestellt.
Sobald ein Beitrag bearbeitet wird, zeigt das AMP-Modul (1) an, ob das Markup gültig ist, bzw. welche Fehler es noch zu beheben gilt (2).
???? Wenn Speed auf der eigenen Site nicht gut realisierbar ist, vielleicht Aufgrund der Anforderung viele Widgets verwenden zu müssen, macht es eventuell Sinn die AMP-Version der Seite oder des Beitrags indizieren zu lassen.
Wer braucht das? Zuerst sollte es einen guten Grund geben überhaupt AMP einzusetzen. Dies macht nicht unbedingt für jede Site Sinn. Wer es nutzen möchte, hat aber immerhin ein komfortables Tool zur Analyse und Optimierung.
Analysen: Die Kernfunktion von RankMath Pro
Das Analysen-Modul stellt die Ranking und Trafficzahlen miteinander in Zusammenhang. Das macht es vermutlich für Viele zu dem wichtigsten Pro-Feature.
In den Einstellungen lassen sich alle Dienste verbinden. Das Projekt hey-uni.de benutzt lediglich die Search Console.
Das Analyse-Dashboard liefert einen guten Überblick über die aktuelle Performance und den Optimierungsstand. Da das Plugin frisch installiert ist, fängt die Arbeit jetzt erst an. Die meisten Seiten haben noch keine Bewertung und ob die Optimierung Früchte tragen, wird sich in Zukunft hier zeigen.
Besonders hilfreich ist dabei der Bereich „Top 5 Winning Posts“. Der lässt sich auch auf „Top 5 Losing Posts“ umstellen. So hat man einen guten Überblich darüber, welche Posts als nächstes zu optimieren sind.
Im Bereich „Site Analytics“ (1) gibt es einen Überblick über den SEO-Score aller Seiten und Beiträge. Der SEO-Score muss für jeden Beitrag eigens erarbeitet werden. Darin besteht die Haupttätigkeit der Onpage-Optimierung. Er besteht aus vielen kleinen Schritten. Jeder für sich genommen nicht sonderlich schwer. Aber es ist einiges an Arbeit.
RankMath hat im Blog eine detaillierte Anleitung dazu, die über 10.000 Wörter stark ist: Score 100/100 With Rank Math Post Tests. In diesem Beitrag können wir natürlich nur flüchtig über die einzelnen Schritte gehen. Hinterlasse auf jeden Fall einen Kommentar, wenn du dir dazu ein Tutorial wünschst. Wenn sich genügend melden, dann nehmen wir es mit auf die Liste.
Die SEO-Performance liefert nochmals den Überblick.
Hier sind alle Seiten und Beiträge aufgelistet.
Ein Überblick über alle Keywords gibt es auch.
Weiter unten können diese auch dem Rank Tracker hinzugefügt werden.
Dazu einfach auf das Plussymbol in der ersten Spalte klicken. Hier sieht man das aktuelle Ranking und die Geschichte der Rankings.
Im Rank Tracker erscheint das Keyword dann. Ich habe direkt noch ein paar weitere Keywords hinzugefügt (1). Für diese ermittelt RankMath ebenfalls die Rankings. Positionen tauchen nach kurzer Zeit auf. In der Pro-Version werden maximal 500 Keywords über alle Sites getrackt. Die Business-Lizenz für 199 USD jährlich erlaubt bis zu 10.000 Keywords.
Wichtiger Tipp: Damit RankMath ausschließlich Rankings aus einem Land ermittelt (also nur über Google.de), das Land in den Allgemeinen Einstellungen ⭢ Analysen ⭢ Country auswählen.
???? RankMath Pro bietet gerade in diesem Bereich Features, für die es sich lohnt, etwas zu zahlen. Zwar lässt sich diese Funktionalität auch mit anderen Tools nachbilden, aber nicht direkt in WordPress, bzw. nicht auf so eine übersichtliche und vollständige Art.
Wer braucht das? Jeder, der seine Ranking- und SEO-Performance stets im Blick haben möchte.
Forensupport
RankMath unterstützt bbPress (nur Pro) und BuddyPress bei WordPress-Installationen, die als Foren laufen. Es erstellt automatisch korrektes Q&A-Schema und kann deswegen schon interessant sein. Aktuell kein Thema für hey-uni.de.
Wer braucht das? Nur Forenbetreiber.
Bilder-SEO
Bilder wollen ordentlich ausgezeichnet werden. Das steigert die Chancen für ein gutes Ranking in der Bildersuche enorm. Die Einstellungsmöglichkeiten sind hier schon enorm. RankMath nimmt einem sehr viel Arbeit ab, wenn es um das Auszeichnen von Bildern geht.
Die Einstellungen lassen kaum Wünsche übrig. Nicht nur ALT-Attributen können Texte zugewiesen werden – auch den Titleln, Captions und Descriptions. Das passiert übrigens, ohne etwas am Text selbst zu ändern. Die Daten werden beim Rendern der Seite dynamisch in die DOM eingehangen. Der Google-Bot versteht das und der Originalinhalt bleibt unberührt.
Dabei können verschiedene Variablen zu einem String zusammengesetzt werden. Natürlich gilt es hier nicht zu übertreiben. Automation verlockt immer dazu die Grenzen des Machbaren auszuprobieren und die ALT-Attribute vollzuspammen. Zurückhaltung ist angesagt. Außerdem sollte in den ALT-Attributen (fast) nichts stehen, was nicht auch im Bild vorkommt.
???? Eine allumfassende Funktion zur Optimierung der Bilder. So wünscht man sich das.
Wer braucht das? Jeder, der Bilder verwendet und mit diesen noch ein Quäntchen mehr Rankings rauspressen möchte.
Sofortige Indexierung
Normalerweise nicht notwendig. Kommen doch alle Crawler früher oder später vorbei. Wer es aber eilig hat, kann seine URL an Bing schicken, um sie eventuell dort etwas schneller in den Index zu bekommen. Bringt das was? Versuche es einfach.
???? Ein kleines Gimmick. Aber schaden kann es auch nicht.
Wer braucht das? Jeder, der auf Bing steht.
Linkzähler
Das Linkzähler-Modul zählt ausgehende und eingehende Links in allen Beiträgen und Seiten.
Die drei Symbole im roten Kasten zeigen (von links nach rechts) interne Links auf eigene Unterseiten, ausgehende Links auf andere Domains und eingehende Links von der eigenen Website. Wichtige Inhalte sollten selbstverständlich mehr Links erhalten.
???? Nettes kleines Feature, das einem stets zeigt, auf welcher internen Linkbaustelle als Nächstes gearbeitet werden muss.
Wer braucht das? Sites, die an ihrem internen Linkprofil arbeiten wollen. Für externe Links ist immer noch ein anderes Tool notwendig.
Info: RankMath arbeitet anscheinend an einem Link-Builder-Modul, das einen stark erweiterten Funktionsumfang haben soll. Der Releasetermin ist noch nicht bekannt.
Lokaler SEO & Knowledge Graph
Restaurant, Frisör, Apotheke – solche Websites profitieren besonders und meistens ausschließlich von lokalem SEO. Das Modul bietet einen sehr großen Funktionsumfang. Wenn man eines über die Optimierung von lokalen Suchergebnissen sagen kann, dann dies: „Übertriebene Gründlichkeit führt zum Erfolg“. Je mehr Felder man bei Google ausfüllt, desto höher die Chance für eine gutes Listing.
In der Optionen lassen sich alle Daten eintragen, die das Unternehmen selbst widerspiegeln. Auf der Website selbst, können diese Unternehmensdaten dann mit dem Shortcode [rank_math_contact_info] eingefügt werden. Das hat den Vorteil, dass sich keine Tippfehler einschleichen. Ein weit verbreitetes Problem sind Tippfehler bei den Adressangaben, die Google Local durcheinanderbringen, wodurch die Rankings leiden können.
RankMath bietet einen Artikel mit allen Informationen, die zum korrekten Ausfüllen notwendig sind: Using Rank Math’s Local SEO Module. Es sind wirklich viele, aber es lohnt sich alles gründlich auszufüllen.
Ein besonderes Feature bei RankMath Pro ist die Unterstützung für multiple Standorte. Die Funktionalität wird freigeschaltet, nachdem „Organization“ unter „Person or Company“ angeklickt wird. Danach noch „Use Multiple Locations“ aktivieren und RankMath Pro fügt den neuen Menüpunkt „RM Locations“ ein.
Unter RM Locations können danach neue Standorte hinzugefügt werden, so erhält jeder Standort eine eigene Seite, die individuell gestaltbar ist. Eine weitere Einteilung nach Kategorien (2) ist möglich, sollte es sehr viele Standorte geben. Sogar Aldi, Lidl & Co könnten RankMath verwenden, um all ihre Filialen weltweit abzubilden.
???? Wow, dieses Modul hat es in sich. Es bildet alle notwendigen Features ab, die für eine mehr als ausreichende lokale Optimierung notwendig sind. Da bleiben keine Wünsche übrig.
Wer braucht das? Alle Sites, die für ein lokales Business stehen.
News-Sitemaps
News-Sitemaps machen Beiträge für den Google-Newsbot leichter zugänglich.
Dieses kleine Modul hilft dabei, die richtigen Kategorien für newsrelevante Inhalte auszuwählen.
???? Ein kleines, aber nützliches Feature, dass einer Site mit newsrelevanten Sites dabei hilft, ihre Beiträge schneller bei Google News zu platzieren.
Wer braucht das? Nur News-Websites.
Weiterleitungen
Viele Sites leiden unter Rankingverlusten, weil oft unabsichtlich nach einem Relaunch oder einfachen Änderungen an URLs Sichtbarkeit verloren geht. Das Modul Weiterleitungen (1) hilft dabei das zu vermeiden. Debug-Umleitungen (2) ist ein Tool für Entwickler, die so nachvollziehen können, was genau bei den Umleitungen passiert. Das Rückfallverhalten (3) bestimmt, was passiert, wenn eine umgeleitete URL nicht gefunden wird. Der Umleitungstyp (4) erlaubt auch die Wahl von anderen HTTP-Codes – 301 dürfte aber fast immer die richtige Wahl sein. Die automatische Postumleitung (5) ist äußerst praktisch, legt sie doch nach einer Änderung des Slugs (dem Pfadanteil eines Beitrags) automatisch einen Redirect an.
???? Das muss jedes SEO-Plugin können.
Wer braucht das? Jeder.
Schema
Das Thema Schema ist eines der beherrschenden SEO-Themen der letzten Jahre. Gepflegte Schemaeinträge können, am Haupt-Algorithmus vorbei, gute Rankings ergattern. Die Unterstützung von Schema-Daten in RankMath Pro ist phänomenal.
Die Optionen für Standardbeiträge finden sich im Menü unter RankMath ⭢ Titel & Meta.
In der Dropdown-Box lassen sich viele weitere Schemas auswählen.
(Screenshot: RankMath)
Das ist jedoch nur der Anfang. Die Schemaunterstützung zieht sich durch alle Bereiche und Beitragstypen in WordPress. Sollte eines fehlen, besteht kein Zweifel daran, dass RankMath es in Zukunft unterstützt.
Allen unterstützten Inhaltstypen können nach Belieben Schemas hinzugefügt werden bzw. lassen sich diese auch anpassen. Einfach auf das RankMath-Symbol klicken (1), dann auf Schema (2) gehen und den „Schema Generator“ aktivieren.
Vielleicht ist dieser Beitrag auch ein HowTo? Mit (+) Use einfach das HowTo-Schema hinzufügen.
Danach stehen zusätzlich Felder aus dem HowTo-Schema zur Verfügung. Zum Beispiel die notwendige Zeit bei der Umsetzung (1), ein Bild (2), etwaige Kosten (3) in einer Währung (4), benötigtes Material (5) usw.
Und schon können für diesen Beitrag zusätzliche Metainformationen hinterlegt werden, die eine Chance auf ein Ranking deutlich erhöhen können.
Außerdem können eigene Schemas angelegt werden, für die, die wissen, was sie tun.
???? Die Integration der Schema-Daten bei RankMath Pro geht noch deutlich tiefer. Sie lässt kaum Wünsche offen und bietet damit ein echtes Edge bei der Optimierung an.
Wer braucht das? Nur Leute, die es mit der Suchmaschinenoptimierung wirklich ernst meinen und schnell Resultate erzielen wollen.
Rollenverwaltung
In größeren Teams ist es notwendig die Rechte gewisser Gruppen einzuschränken.
???? Vielleicht bei jungen Sites noch nicht relevant. Wenn eine Site jedoch wächst und immer mehr Teammitglieder hinzukommen, dann wird diese Funktion immer wichtiger, vor allem um Unfälle zu vermeiden. (Jemand verstellt aus Versehen etwas und Rankings gehen dadurch verloren.)
Wer braucht das? Sites mit größeren Teams.
SEO-Analyse
Die RankMath SEO-Analyse ist crazy cool.
Nach dem Aktivieren präsentiert das Interface einen einfachen blauen Button. Ein Klick darauf startet eine umfassende SEO-Analyse, die als Grundlage der Optimierungsarbeiten verwendet werden kann.
Keine 30 Sekunden später erhält man einen hilfreichen SEO-Report, mit dem man direkt anfangen kann. Es heißt in der Suchmaschinenoptimierung ja immer: Behebe alle Fehler und Unzuläglichkeiten, denn man weiß nie, was dich vom Ranking eventuell zurückhält.
???? Die Ein-Button-Analyse ist superhilfreich, lassen sich so schnellstens offensichtlich Fehler und Schwachstellen aufdecken.
Wer braucht das? Jeder.
Sitemaps
Sitemaps sind ein Basisfeature.
In den Optionen lassen sich Bilder integrieren und für Bereiche Filterkriterien erstellen, die nicht in der Sitemap auftauchen sollen.
???? Auch wenn die Einbindung einer Sitemap sicher keine SEO-Wunder bewirkt, so ist es immer noch eine gute Best Practice.
Wer braucht das? Jeder.
Video-Sitemaps
Sites mit vielen Videos freuen sich über die Möglichkeit, diese per Sitemap anzubieten.
Das steigert die Chancen in einem Videosnippet in der Google-Videosuche angezeigt zu werden.
Wer braucht das? Nur Sites, die ihre Videos in die Suche bekommen wollen.
Google Web Stories
Web Stories sind Googles Antwort auf Instagram. Sie erfreuen sich einiger Beliebtheit und bietet eine Chance auf ein Ranking außerhalb des Standard-Algos. Wer das nutzen kann, der sollte dies auch tun.
???? Cool? Mal sehen, ob sich die Web Stories als festes Element etablieren. Google ist ja bekannt dafür, solche Experimente schnell abzuschießen, falls sie nicht funktionieren. Den Daumen hoch dafür, dass RankMath so schnell ein Feature zu Verfügung stellt.
Wer braucht das? Nur für Nutzer der Google Web Stories.
WooCommerce
Du betreibst einen Onlineshop mit WooCommerce? Dann gibt dir RankMath Pro hier auch Rückendeckung.
Beim Erstellen neuer Produkte und Kategorien klinkt sich RankMath Pro genauso ein, wie bei normalen Seiten und Beiträgen.
???? Die Integration ist durchgehend und vorbildlich. So lassen sich Onlineshops gründlich optimieren.
Wer braucht das? Onlineshops.
Update: Content AI von Rank Math
Gerade hat das Team von RankMath ein vollkommen neues Feature vorgestellt: Content AI:
Dabei handelt es sich quasi um eine Art Surfer SEO-Klon nur eben direkt im WordPress. Falls Du Surfer SEO nicht kennst, die Idee dahinter ist es, automatisiert die Suchergebnisseite von Google zu einem bestimmten Keyword abzurufen und die dort rankenden Seiten hinsichtlich bestimmter SEO-Signale zu untersuchen. Im Grunde sieht man damit, welche Keywords, die gut rankenden Seiten an welchen Stellen einsetzen und welche Begriffe diese in ihren Inhalten verwenden. Die Vorschläge sind dabei dynamisch und hängen vom eingestellten Fokus-Keywords und dem Zielland ab, das man in den Einstellungen konfigurieren kann:
Das Tool versucht tatsäch eine Art „intelligente Empfehlung“ zu geben, beispielsweise bei der optimalen Länge des Inhalts. Ich halte jedoch nichts davon, mich auf eine Pseudo-KI zu verlassen, die mir vorschreibt, wie viele Wörter ich schreiben soll, welche Überschriften ich verwenden, wie viele Links ich einfügen oder welche Medien ich einbetten sollen. Ebenso hilft Content AI dabei, herauszufinden, welche Phrasen oder Wörter man im Text, in Überschriften oder den SEO-Metadaten verwenden könnte.
Externe Links zu gut rankenden und damit vertrauenswürdigen Seiten, können ebenfalls einen Inhalt aufwerten. Mit den Linkvorschlägen der Content AI lassen sich schnell und einfach Zitate zu den eigenen Inhalten hinzufügen, um weiterführende Quellen für den Leser einzubinden und darüber die Sichtbarkeit in den Suchmaschinenergebnisseiten zu erhöhen. Darüber hinaus erhält man eine Liste von W-Fragen, vornehmlich aus den FAQPage-Snippets sowie PAA-Boxen (People-also-ask), die man dann im Textbeantworten, oder wiederum in strukturierter Form für ein eigenes FAQPage-Snippet einbauen kann.
Dies alles sollte man immer nur als Empfehlung, Vorschlag und Möglichkeiten verstehen und selbst prüfen, in wie weit dies für den Suchenden und das eigene Ziel sinnvoll ist!
Ich halte den Begriff „Content AI“ für vollkommen überzogen, aber heutzutage muss ja alles irgendwie nach künstlicher Intelligenz aussehen, dennoch ist das Feature aber eine sehr gute Möglichkeit, die Konkurrenz-Analyse quasi zu automatisieren und direkt im WordPress-Editor zu erledigen.
Fazit
RankMath ist ein wahrer Feature-Gigant. Wenn man Feature pro Dollar rechnet, dann ist das Plugin unglaublich preiswert.
Wer etwas Schlechtes über RankMath Pro sagen möchte, dann wahrscheinlich, dass die Einarbeitung aufgrund all dieser Optionen ziemlich aufwendig ist. Man kann aber unmöglich behaupten, dass RankMath Pro eine schlechte Investition wäre. Ganz im Gegenteil. Bei der Arbeit damit stellt sich schnell das Gefühl ein, das letzte SEO-Plugin gefunden zu haben, was man jemals braucht.
Die Dokumentation von RankMath ist ebenfalls vorbildlich, wenn auch nur auf Englisch. Es gibt umfangreiche Tutorials, die beim Optimieren helfen. Mehrere davon sind über 10.000 Wörter stark, mit klaren Anleitungen, wie die einzelnen Optionen am besten umzusetzen sind.
Eine Supportanfrage wurde übrigens auch schnell und akkurat beantwortet.
Für wen ist das Plugin?
Ganz ohne SEO-Kenntnisse könnte es zu schwer werden. Da ist viel Lernarbeit notwendig, denn man muss ja auch wissen, was all die unterschiedlichen Stellschrauben bewirken. In den Händen von Profis ist das Tool so etwas wie der Heilige Gral. Rund um RankMath lässt sich wahrscheinlich ein eigenes Agenturmodell aufbauen, denn „normale Kunden“ möchte man nicht mit RankMath alleine lassen.
Es gibt zwar einen „Easy Mode“, der es Anfängern ermöglicht, erstmal zu beginnen. Meine Erfahrung nach, ist es wahrscheinlich besser als nichts zu machen, allerdings werden dabei sicher Potenziale verschenkt.
Kurz gesagt: Wer Zeit hat, sich einzuarbeiten, der wird kaum ein besseres Tool finden.
Lohnt sich die Pro-Version?
Die Pro-Version lohnt sich natürlich nur, wenn es ein Modul gibt, das du unbedingt brauchst. Du sieht ja an den Screenshots, welche Module nur in der Pro-Version enthalten sind. Außerdem steht unter jeder Modulbeschreibung, für wen das jeweilige Modul gemacht ist. Es spricht auch nichts dagegen, erstmal mit der kostenlosen Free-Version zu beginnen und dann zu schauen, ob einem etwas fehlt. 59 USD jährlich für die Pro-Version ist bei dem Feature-Umfang schon fast geschenkt.
Was den Kauf von RankMath Pro aber besonders attraktiv macht: Es gibt kein Limit für eigene Sites! Du hast 50 verschiedene Domains? Dann brauchst du nur eine Lizenz und kannst das Plugin überall installieren. Genial!
Mit dem Erscheinen von Content AI, macht es die RankMath Pro Version aus unserer Sicht nur noch interessanter. Zwar kannst Du auch mit einem kostenlosen Account mit 5 Credits das Feature mal antesten, um es regelmäßig nutzen zu können, brauchst Du dann aber definitiv mindestestens den PRO-Plan mit 25 Credits pro Monat für die Content AI, oder sogar Business mit 200 Credits bzw. für größere Teams den Agency Plan mit 750 Credits.
Was das RankMath-Team da geschaffen hat, ist wirklich phänomenal.
Von uns gibt es eine absolute Kaufempfehlung und höchste Bewertungen!
Dieser Beitrag beleuchtet nicht nur die Features dieser Kombination – wie immer muss diese auch zeigen können, dass sich ein nahezu echtes Projekt damit umsetzen lässt: unsere Skateboard-Schule „Skatedogz“. In diesem Video (ohne Ton) kannst du dir kurz anschauen, wie die Website zum Schluss ungefähr aussehen soll.
Am besten direkt danach unser fast 1,5 Stunden langes Megatutorial ansehen, in dem von der Installation, der Umsetzung von Skatedogz-Website, Supportanfragen und Spezialtricks alles besprochen wird, was der angehende Blocksy-Nutzer wissen muss.
Das Theme: Blocksy
Der Herausforderer Blocksy hat starke Konkurrenz. Bei unserem letzten Test hat sich Kadence + Kadence Pro als echte Geheimwaffe entpuppt. Sie macht nicht nur in 98 % der Fälle Elementor überflüssig. Es macht auch noch riesig Spaß damit zu arbeiten. Was kann Blocksy besser?
Blocksy ist ebenfalls schön schlank. Und eine Supportanfrage zu einem zuerst als Bug wahrgenommen hat gezeigt, dass der Hersteller hohen Wert auf Performance legt. Das hat uns besonders gut gefallen.
Blocksy ist jedoch nur ein Theme, also das Grundgerüst für den Content. Die Blöcke muss man mit einem Plugin von Drittanbietern erstellen. Diese gilt es also zusätzlich zu installieren.
Beide Blocklieferanten haben einige Blöcke mehr, die sich bei Kadence Blocks Pro (noch) nicht finden lassen.
Wir haben uns letztlich für Qubely entschieden, da es mit dem Business-Starterpack bereits ein Layout hatte, was nur noch an die Skatedogz anzupassen war. Dies ist aber keineswegs notwendig. Auch ohne Starterpack lassen sich beliebige Layout-Wünsche umsetzen.
Für das Business-Theme empfiehlt Blocksy den Einsatz von Qubely, was nach der Lizenzierung prompt installiert war.
Blocksy konfigurieren
Wie für moderne Themes üblich lässt sich Blocksy voll und ganz im Customizer anpassen.
Die Möglichkeiten hier decken sich ungefähr mit denen bei Kadence. Neben den allgemeinen Einstellungen, dem Header und Footer, der Typografie sind besonders die Inhaltstypen wichtig. Hier lassen sich Blog-Beiträge und Kategorieseiten bzw. Seiten genau an die eigenen Vorstellungen anpassen.
Eine überschaubare und mit Kadence vergleichbare Anzahl. Die Sites sind professionell gestaltet und lassen sich installieren und auf Wunsch auch wieder deinstallieren.
Zusätzlich lassen sich diverse Erweiterungen installieren, die im Alltag unentbehrlich sind (zum Beispiel ein Cookies-Consent-Modul).
Die Bezahlvariante enthält darüber hinaus neun weitere Extensions.
Unter Plugins schlägt Blocksy ebensolche von Drittanbietern vor. Qubely fehlt hier in der Liste. Allerdings wird dies automatisch bei der Installation der Business-Starter-Site mitinstalliert.
Qubely
Qubely hat keine nennenswerten Settings. Gerade einmal Api-Key-Felder für Goolge-Maps, ReCaptache und Mailchimp. Dafür trumpft es mit einer Vielzahl von Contentblöcken.
Das sind deutlich mehr als bei Kadence Blocks Pro. Auch wenn es mehr Blöcke gibt, so sollte die schiere Anzahl der Features nicht das ausschlaggebende Argument für Qubely sein. Im Vergleich lassen sich die Kadence Blocks etwas leichter bedienen. Das sieht man im Video immer wieder, da es manchmal ein leichter Kampf war, etwas genau so aussehen zu lassen, wie bei den Kadence Blocks. Beispiele:
Im Screenshot sind zwei Probleme zu erkennen. Unter (1) leuchtet grün der innere Abstand der Zeile. Kadence erlaubt das Einstellen mit der Maus. Einfach anklicken und hoch oder runterziehen, um die Höhe zu verstellen. Sehr intuitiv. Qubely möchte jedoch, dass dieser Wert im Menü geändert wird (2). Das funktioniert auch, ist aber weniger intuitiv und mehr Arbeit.
Die Galerie (3) ist voll funktionsfähig und im fertigen Layout sieht sie dann so aus.
Alles Top. Das Problem ist hier eher, dass es im Backend leicht anders aussieht. Das hat Kadence deutlich besser gelöst. Auch wenn es dort nicht 100 % WYSIWYG ist, so kommen wir dem doch ganz schön nah.
Weitere Problemchen:
Im Video musste ich immer wieder die Typografie-Kontrolle ausschalten, da Qubely die Fonteinstellungen nicht ohne Weiteres von Blocksy übernimmt. Unnötige Schritte. Dies sollte Qubely konfigurierbar machen.
Die Dimensionen der Inhaltsboxen zu bestimmen, ist etwas schwerfälliger.
Kleinigkeiten, wie das Einstellen der Überschrift (also zum Beispiel H4 statt H2) im Postgrid waren nicht möglich. Kadence konnte das.
Qubely hat (noch) mehr Features. Ist es flüssiger zu bedienen? Nein. Aber der Abstand ist jetzt nicht so groß, dass alleine deswegen die Entscheidung auf das eine oder andere Paket fallen muss. Ein ausgiebiger Test beider Plugins ist empfehlenswert. Mit Qubely oder Kadence Blocks zu arbeiten, fühlt sich definitiv leicht anders an.
Blocksy Erfahrungen
Mit Blocksy konnte ich hauptsächlich gute Erfahrungen machen. Vor allem das Pro-Feature „Content Blocks“ ist gelungen – wenn man erstmal weiß, wie genau es funktioniert. Denn hier gab es bei der ersten Nutzung Schwierigkeiten.
Die Content-Blöcke wurden nicht richtig auf den Seiten eingebunden. Zuerst sah es nach einem Bug aus, der sich dann aber als Feature herausstellte.
Hier ein Tipp, der nicht im Video vorkommt:
Um einen Content-Block einfach frei auf einer Seite oder in einem Beitrag zu plazieren, braucht es regelrecht nur den passenden Shortcode (oben im Screenshot in der Output-Spalte). Kopieren, Einfügen, Abspeichern und schon wird der Block an der gewünschten Stelle angezeigt. Allerdings fehlt das dazugehörige CSS und JS, so dass das Layout „kaputt“ ist.
Der Trick ist unter Display Conditions den Filter so einzustellen, dass die gewünschte Location auch abgedeckt wird. Im Screenshot ist Entire Website ausgewählt. So wird unter Umständen unnötiger Code auf jeder Seite geladen. Besser wäre es hier die beiden Seiten einzustellen, auf denen dieser Team-Content-Block geladen wird. So am besten:
So lässt sich die Ladezeit aller anderen Seiten und Beiträge beschleunigen.
Dieser Umstand hat allerdings unnötig Zeit gekostet, da hierfür erst eine Antwort durch den Support notwendig war. So konnten wir auch gleich diesen testen. Blocksy ist noch ein kleines Team und so antwortet der Inhaber nach nur wenigen Minuten und immer freundlich. Vielleicht kann der Entwickler hier so bei der Bedienung darauf hinweisen, dass man nicht erst nachfragen muss.
Blocksy oder Kadence? Das ist hier die Frage. Um diese zu beantworten, solltest du unbedingt beiden Themes eine Chance geben. Denn das erlaubt dir, ein gutes Gefühl dafür zu bekommen, was dir persönlich wichtig an Theme und Block-Builder ist.
Blocksy ist sehr gut optimiert und intuitiv zu bedienen. Der E-Mail-Austausch mit dem Support hat gezeigt, dass es dem Entwickler super wichtig ist, dass die Website sehr gut optimiert ist. In der Praxis dürften die Unterschiede aber eher zu vernachlässigen sein. Blocksy und Kadence sind beide sauschnell. Es kommt im Alltag eher darauf an, wie einfach das Theme zu bedienen ist und wie gut es mit dem Block-Builder harmoniert.
Da das Kadence-Theme und der Kadence-Block-Builder aus dem gleichen Hause kommen, ist dieses Paar besser integriert. Für diesen Test würde ich daher Kadence vorziehen. Aber es gilt eines zu bedenken:
Theoretisch lässt sich Kadence auch mit Qubely verwenden und Blocksy mit Kadence Blocks. Willkommen in der neuen Welt der maximalen WordPress-Modularität, in der alles mit allem kombiniert werden kann. Das ist tatsächlich von WordPress so gewollt und gibt den Nutzern die maximale Freiheit. Für uns Tester und auch die Endnutzer bedeutet das: Wir haben die Qual der Wahl.
Wir hoffen auch deswegen, dass dir unsere Videos dabei helfen können, eine gute Entscheidung zu treffen. So sparst du dir die Installation und kannst direkt sehen, wo die großen Unterschiede liegen.
Es gibt noch eine Menge zu tun. Also bis zum nächsten Review 😉
Auf der Suche nach der perfekten Theme- und Block-Builder-Kombination tauchte das neue Kadence Theme bei unseren Recherchen auf. Es ist eines der wenigen Themes, das nicht versucht, sich über Hunderte von Extra-Features zu verkaufen, sondern ist auf das Wichtigste, Wesentliche reduziert. Und genau desshalb ist es für uns das aktuell beste WordPress Theme 2021!
Aber schauen wir uns mal an, was Kadence WP bietet: Schon die Startseite ist wirklich minimal.
Das ist alles! Es gibt lediglich das Versprechen: Kadence sei schnell und versatil. Das wollten wir testen und dazu haben wir uns etwas Neues ausgedacht: Von nun an muss jedes hier getestete Theme dazu in der Lage sein, eine nahezu vollständige Website nachzubilden.
Die Frage war also: Schafft Kadence das? Oder ist es wieder nur eins der Themes, die auf der Oberfläche glänzen, aber im Praxiseinsatz ständig Kopfschmerzen bereiten?
Es ist eine Sache, die unterschiedlichen Module eines Builders auf eine leere Seite zu klicken. Was aber, wenn wir wirklich versuchen, ein „echtes“ Projekt umzusetzen? Oder wenigstens ein Projekt, das als echt durchgehen könnte. Mit moderner Startseite, diversen Unterseiten, Blogbereich mit Kommentaren, Formularen, Bildergalerien, FAQs, Popus, Inhaltsverzeichnissen, globalen Vorlagen und mehr?
Unser Testkandidat: Die Skateboardschule „Skatedogz“
Skatedogz ist die Website einer fiktiven Skateboardschule. Die erklärt, wie Skateboardtricks funktionieren. Interessenten können auch an Kursen und Events teilnehmen. So sieht die Startseite aus:
In diesem Video gibt es eine kurze Tour durch alle Seiten und Features:
Jedes Theme muss dazu in der Lage sein, alle Features der Skateboardschule zu reproduzieren. Dabei geht es nicht um Pixelperfektion, sondern darum, eine funktionsähnliche Website zu produzieren.
Mega-Videotutorial zu Kadence-Theme und Kadence Blocks Pro
Eine vollständige Installationsanleitung und die komplette Umsetzung der Skatedogz-Website liefert dir das (1 Stunde und 22 Minuten lange) Mega-Videotutorial.
Es folgt ein Überblick über Kadence und eine Einschätzung zu Stärken und Schwächen.
Kadence-Theme: Die wichtigsten Features
Kadence lässt sich schnell installieren (Tutorial im Video) und kommt nach der Installation sehr übersichtlich und ohne Schnickschnack daher.
Das Dashboard zeigt die Hauptmodule.
Global Colors: Hier lässt sich eine globale Farbpallette einrichten, die dann auf der ganzen Website genutzt werden kann. Davon haben wir regen Gebrauch gemacht.
Branding: Upload des Logos
Typographie: Umfangreiche Einstellungsmöglichkeiten über die verwendeten Schriftarten.
Header und Footer Layout: Das Layout lässt sich in drei Zeilen und drei bis fünf Spalten bearbeiten.
Header-Addons: Fügt etliche Elemente hinzu, die sich im Header und Footer verwenden lassen.
Page Layout: Legt die globalen Einstellungen für alle Seiten fest. Seitentitel, volle oder begrenzte Breite der Contentspalte, ob eine Seitenspalte oder ein Titelbild angezeigt wird und viele weitere Einstellungen. Diese globalen Einstellungen lassen sich durch jede Seite individuell überschreiben, was das Tutorial zum Beispiel bei der Startseite demonstriert.
Conditional Headers: So lassen sich unterschiedliche Header anzeigen, je nach Filterkriterium.
Ultimate Menu: Große Menüsysteme einfach umsetzen.
Header/Footer Scripts: Programmierer können hier individuelle Skripte einbinden.
Hooked Elements: Globale Vorlagen, die überall eingesetzt werden können. Außerdem verfügen die „Elements“ über das ausgefeilte Hooksystem. So lassen sich Filterkriterien zum Anzeigen der Elemente definieren. Dies demonstriert das Tutorial anhand des Newsletter-Popups.
WooCommerce Addons: Unterstützung für das Onlineshop-Plugin.
Infinite Scroll: Archivseiten scrollen ohne blättern.
Local Gravatars: Gravatardateien werden lokal gespeichert. Das bringt Speed.
Archive Custom Page Title Backgrounds: Archivseiten haben eigene Hintergrundbilder.
Besonders gut gefällt, wie einfach sich diese Startet-Themes installieren und wieder deinstallieren lassen. Bei anderen Themes gibt es öfters Probleme bei solchen Kernfunktionen.
Mit Kadence Blocks zum waschechten „Gutenberg“-Sitebuilder
Immer mehr Builder gehen dazu über, das WordPress-eigene Userinterface als Schnittstelle für Layout- und Funktionselemente zu verwenden. Kadence löst dies vorbildlich. In den Einstellungen gibt es einen Überblick über alle Möglichkeiten mit den Kadence Blocks.
Fast alle davon haben wir verwendet. Es ist eine wahre Freude damit zu arbeiten. Im Gutenberg-Editor sehen sie dann so aus:
Aktuell gibt es 23 Kadence-Blöcke. Am wichtigsten ist das Row Layout. Hiermit lassen sich Layoutzeilen anlegen, die dann „Blöcke“ enthalten können.
An einer leeren Stelle einfügen und die Anzahl der Spalten aussuchen. Nach einem Klick auf die Spaltenanzahl (hier: zwei Spalten) lassen sich weitere Inhalte einfügen. Natürlich kann man auch „verschachteln“. Aber Vorsicht! Zu viele Verschachtelungen sind nicht gut für die Seitengeschwindigkeit.
Jede Zeile und Spalte lässt sich mit unzähligen Elementen und Einstellungen (rechts)versehen.
Hintergrundbilder, Padding, Margin, runde Ecken, Schatten, Animationen, Trenner, Texteinstellungen etc. Der Kreativität sind kaum Grenzen gesetzt.
Dabei schmiegen sich alle Bedienschaltflächen nahtlos in das Gutenberg-System ein. Eine eigene Oberfläche wie bei Elementor, Divi und Co. gibt es nicht.
Ähnlich verhält es sich auch mit den globalen Einstellungen. Die sind alle im WordPress-eigenen Customizer untergebracht. Im Video gibt es dazu ein komplettes Walkthrough.
Was sind die Nachteile von Kadence?
Große Nachteile hat Kadence nicht. Manchmal bockt der Editor ein bisschen, wenn es darum geht, die unterste (Leer-)Zeile nach oben zu verschieben. Im Video kann man das auch sehen. Nicht das unterste Element nach oben verschieben, sondern das vorletzte nach unten. Problem gelöst.
Das Layouten geschieht im Backend. Es ist also nach dem Speichern immer notwendig in die Vorschau zu gehen. Allerdings ist das Layout-Erlebnis im Backend so nah dran, dass ich persönlich erst alle halbe Stunde nachgeschaut habe, ob es wirklich so aussieht, wie gewünscht. Ich empfinde dies, wenn überhaupt, nur als kosmetischen Nachteil.
Es ist durchaus denkbar, dass dieses Problem in der Zukunft durch WordPress selbst gelöst wird. Sollte dies der Fall sein, passt Kadence mit Sicherheit auch die eigene Software an.
Fazit: Wie gut ist Kadence wirklich?
Kadence + Blocks ist einfach zu bedienen, dabei aber keineswegs unvollständig. Damit zu arbeiten macht wirklich Spaß. Die Integration in das Gutenberg-Ökosystem ist durch und durch gelungen. Man fragt sich, ob es in Zukunft noch Builder geben wird, die sich diese Schnittstelle nicht nutzen und eine eigene Oberfläche basteln. Der große Vorteil der Standardisierung: Sobald man einen Builder gelernt hat, kennt man alle. Es gibt kaum noch eine Lernkurve.
Ich hatte bei SEARCH ONE die Gelegenheit, eine ganze Reihe an Buildern zu testen. Bisher muss ich jedoch sagen, dass Kadence mein Favorit ist. Elementor und Divi können mehr. Keine Frage. Aber mir persönlich macht das schnelle Arbeiten mit Kadence am meisten Spaß.
Wenn du schlanke Webseiten und schnelle Page Builder magst, dann solltest du Kadence ernsthaft in Betracht ziehen.
Da Kadence die Verwendung auf unbegrenzten Sites erlaubt, ist das aus unserer Sicht ein fairer Preis.
Ein paar mal im Jahr sind die Bundles auch im Angebot, wie hier im Screenshot vom September 2021. Der Nachlass ist aber nicht so hoch, dass man unbedingt darauf warten sollte.
Zwei Daumen hoch für Kadence: Voll empfehlenswert.
Elementor Pro oder Free? Für einen kostenlosen Page-Builder hat es Elementor wirklich in sich. Kein anderer Page-Builder gibt einem so viel Flexibilität bei der Seitengestaltung, ohne etwas zu Kosten. Wer bereits ein gutes Theme hat, der kann die Free-Version als WYSIWYG-Editor einsetzen und wird wahrscheinlich wunschlos glücklich. Die Pro-Version bietet jedoch so viele zusätzliche Vorteile, dass es sich lohnt einmal genau hinzuschauen. Für viel beschäftigte WordPress-Nutzer und Profis lohnt sich der Einsatz wirklich.
Passend zu diesem Artikel haben wir ein ausführliches Video vorbereitet, in dem fast alle PRO-Features demonstriert werden. Auch Features der nagelneuen Version 3.3 werden beleuchtet:
Selbstverständlich gibt es in der Pro-Version bessere Support-Leistungen, darunter den 24/7 Premium Support. Der Support bei Elementor ist gut. Aber es kommt natürlich immer auf den Einzelfall an. Dieser Beitrag beleuchtet die Design-, Marketing- und Technikfeatures, die ausschließlich in der Pro-Version vorkommen.
Page-Builder versus Site-Builder
Die Free-Version ist im Prinzip nur ein sehr guter Page-Builder mit ein paar netten Bonusfeatures. Mit ihr lassen sich demnach einzelne Seiten und Beiträge gestalten. Die kostenlose Version bietet beispielsweise nicht die Möglichkeit, den Kopf- oder Fuß-Bereich anzupassen. Zwar bietet die freie Version die Möglichkeit Landingpages zu gestalten. Die Auswahl an Vorlagen hierfür ist jedoch eher begrenzt. Wer ohnehin plant Landingpages selbst zu entwerfen, für den mag das nicht ausschlaggebend sein. Wer sich lieber von vielen professional gestalteten Vorlagen inspirieren lässt, der greift zu Pro.
Die Pro-Version ist ein kompletter Site-Bilder: Mit ihr lassen sich alle Layoutaufgaben auf der Website meistern. Darüber hinaus liefert Elementor für jedes Modul, jede Landingpage, jede Sektion, jedes Popup und jedes andere erdenkliche Element Dutzende von professionell gestalteten Layout-Vorlagen.
Wer das eigene Blog von oben bis unten komplett individuell gestalten möchte und dabei Inspiration sucht, der kommt schon alleine deswegen nicht an der Pro-Version vorbei.
Aktuell gibt es in der Landingpages-Sektion 111 Templates, davon sind lediglich 28 in der Free-Version enthalten.
Pro bietet deutlich mehr Auswahl bei den Templates. Zu erkennen am roten Pro-Abzeichen.
Der Theme-Builder: Das Herz von Elementor Pro
Mit dem Theme-Builder lässt sich jede Sektion der Website gestalten. Header, Footer, Beiträge, Seiten, Newskategorien, Suchresultate und sogar die 404-Seite.
Eine Website ist mit diesen Elementen vollständig gestaltet:
Header: Der Kopfbereich für Logo, Menü, evtl. ein Suchfeld etc.
Footer: Der Fußbereich enthält meist den Copyright-Hinweis, Adressinfos, evtl. weitere Navigationslinks etc.
Single Page: Definiert das Layout für den Hauptcontent der SEITEN. Das können auch mehrere Spalten sein bzw. sind hier der Kreativität keine Grenzen gesetzt.
Single Post: Definiert das Layout für den Hauptcontent der BEITRÄGE. Auch hier ist alles möglich.
Archive: Das Layout für Kategorieseiten für Beiträge.
Search Results: Das Layout der Suchergebnisliste.
Error 404: Das Layout für die Seite „Seite nicht gefunden“.
Das neue Interface erlaubt den Import von Templates (1), eine einfache Navigation zu den verschiedenen Seitenteilen (2) und einen Überblick über die bereits bestehenden Templates (3).
Ein Klick auf Header führt zur Übersicht (1). Daraufhin lässt sich das Template bearbeiten (2) oder aber auch die Konditionen abwandeln (3).
Die Konditionen sind ein fantastisches Feature. Mit ihnen lässt sich bestimmen, an welchen Stellen auf der Website dieser Header angezeigt wird. So ist es durchaus möglich verschiedene Sektionen auf der Website zu definieren und jeder Sektion einen eigenen Header zu geben.
Wie im Screenshot zu sehen, lässt sich der Header auf der gesamten Website anzeigen, nur in einem Newsarchiv oder auf einer bestimmten Seite oder einem bestimmten Beitrag. Außerdem lässt sich Include auch auf Exclude stellen. Durch eine Verkettung von verschiedenen Konditionen lassen sich sehr flexible Anzeigeregeln erstellen.
Im Editor lässt sich das Template nach Belieben anpassen.
Hier in der mobilen Ansicht des Header-Templates.
Site-Kits erledigen die ganze Arbeit
Wem der Theme-Builder zu kompliziert ist, der kann ab Version 3.3 komplette Site-Kits importieren. Das sind im Prinzip vorgefertigte Themes, die alle notwendigen Sektionen bereits enthalten. Site-Kits haben bereits Header, Footer, Beiträge, Seiten, Newskategorien, Suchresultate und die 404-Seite vordefiniert. Sie sind professionell gestaltet. Die Farben und Fonts sind perfekt aufeinander abgestimmt.
Die Elementor-Library enthält Hunderte kompletter Kits sortiert nach den üblichen Kategorien.
Da ist für jeden Geschmack etwas dabei. So lässt sich ein komplettes Website-Layout innerhalb weniger Sekunden erstellen und dann nach den eigenen Wünschen anpassen.
Das beste daran: Die Template-Kits bzw. Site-Kits bei envato verwendet nur Fotos und Bildmaterial von Envato Elements. Das bedeutet, das Du mit einem Abo von Envato Elements alle Bilder auf einmal lizenzieren und diese dann für Deine eigene Website verwenden kannst! Natürlich kannst Du alle Bilder auch durch Deine eigenen ersetzen. Damit bekommst Du quasi in wenigen Sekunden eine komplette professionelle Webseite per Import!
Widgets: Pro-Features bis zum Abwinken
Die Templates bestimmen das Außenrum. Widgets sind dazu da einzelne Content-Elemente in ein schickes Format zu pressen. Die Free-Version trumpft hier nochmals voll auf.
Elementor bietet in der Pro-Version diese 29 Widgets (plus Widgets für WooCommerce):
Es sind tatsächlich noch mehr, da nicht alle Widgets in Pro-Sektion gelistet sind.
Hier eine Auflistung mit Screenshot. Im Video haben wir die meisten davon übrigens demonstriert (Wink, Wink):
Das Posts-Widget
Einfach eine Liste von Beiträgen an einer beliebigen Stelle einfügen. Es gibt drei verschiedene Oberflächendesigns. Spaltenanzahl und Posts pro Seite lassen sich einstellen. So lässt sich jede Seite zu einer Blogkategorie umwandeln.
Das Portfolio-Widget
Am besten für Referenzen geeignet. Im Prinzip ein Navigationselement mit Bildern. Spalten, Bildgröße definierbar.
Das Gallery-Widget
Die Bildergalerie zeigt Bilder an. Ein Klick auf ein Bild liefert die gezoomte Version. Ein Klick auf die Pfeile springt zum nächsten Bild. Hochgradig konfigurierbar.
Das Form-Widget
Ein besonderes Feature, dass die meisten Formular-Plugins überflüssig macht. Sogar mehrschrittige Formulare lassen sich damit umsetzen!
Dieses Widget ist vollgepackt mit Features. Dies ist alles möglich:
Inline Abofelder
Nach dem Abschicken-Aktion
Bestätigungsmail versenden
HTML/Nur Text
Interaktionsmeldungen (z. B. „Nachricht erfolgreich verschickt“) anpassbar
Auch Dateifelder, Datum und andere Formfeldformate möglich
Versteckte Felder
Honeypot zur Spammerabwehr
Akzeptieren-Feld
Formularnachrichten werden im Backend gespeichert
Das ist Deutschland rechtlich notwendige Double-Optin geht auch, aber nicht direkt mit dem Widget. Hierzu ist es notwendig einen Drittanbieter (z. B. MailChimp) zu verwenden, der das übernimmt.
Das Login-Widget
Hiermit lassen sich angepasste Login-Boxen auf beliebigen Seiten platzieren und an das eigene Layout anpassen.
Das Slides-Widget
Folien können in alle Richtungen rein- und rausgleiten. Gestaltungsmöglichkeiten ohne Ende.
Das Nav Menu-Widget
Mit dem hauseigenen Navigationstool lassen sich Menüs überall auf der Website platzieren.
Das Animated Headline-Widget
Manchmal braucht es einen Eyecatcher. Verschiedene Elemente animieren um den Text herum oder der Text wird getippt, gelöscht, getippt, gelöscht usw. Hier wird das Wort Amazing eingekreist. Das Coole ist, dass es sich um reinen Text handelt.
Das Hotspot-Widget
Hier lassen sich auf einem Bild animierte Punkte oder Flächen definieren, die die Aufmerksamkeit des Betrachters auf die wichtigen Stellen lenken. Sie blinken langsam, sodass dieser verleitet wird, mit der Maus darüberzufahren. Bei Klick kann ein Tooltip angezeigt werden.
Das Price List-Widget
Wer an Preislisten für Restaurant- oder Friseur-Websites denkt, liegt richtig.
Das Price Table-Widget
Um Preise für verschiedene Pakete richtig darzustellen.
Das Flip Box-Widget
Sobald die Maus das Element erreicht, flippt es horizontal oder vertikal und die andere Seite kommt zum Vorschein. Das Motto der Flipbox: Hinten erklären was vorne steht.
Das Call to Action-Widget
Attraktive Buttons und Links, die sich natürlich auch mit den nur in der Pro-Version vorhandenen Drittanbietern (z. B. E-Mail-Dienstleister) verbinden lassen.
Das Media Carousel-Widget
Bilder und Videos gehen auf Karussellfahrt.
Das Testimonial Carousel-Widget
Kundenstimmen in einem Karussell.
Das Reviews-Widget
Bewertungen lassen sich in ebenfalls in einem Karussell anordnen.
Das Table of Contents-Widget
Heute schon ein Inhaltsverzeichnis gebraucht und 70 verschiedene kostenlose Optionen probiert? Dieses hier funktioniert einwandfrei. Ich musste allerdings die Seite speichern und neu laden, damit sich das Inhaltsverzeichnis füllt.
Das Countdown-Widget
Ein Countdown bis zu einem vordefinierten Datum. Idee: Es sollte eine Variante geben „Wie oft schlafen bis (Datum in der Zukunft)?“ 🙂
Das Share Buttons-Widget
Wer lässt die eigenen Inhalte nicht gerne teilen? Es gibt sogar XING!
Das Blockquote-Widget
Auch Blockzitate lassen sich einbauen. Sogar mit Tweet-Funktionalität.
Das Facebook Button-Widget
So können auch die Freunde (?) bei der Verbreitung der guten Kunde beitragen.
Das Facebook Comments-Widget
Facebook-Kommentare sind oft (aber nicht immer) etwas zivilisierter.
Das Facebook Embed-Widget
Beliebige Inhalte von Facebook integrieren.
Das Facebook Page-Widget
Sogar eine Facebook-Page lässt sich mit diesem Widget einbetten.
Das Lottie-Widget
Lottie ist ein Animationsprogramm für das Web, das angetreten ist, animierte GIFs abzulösen. Sehr vielversprechend.
Das Code Highlight-Widget
Falls du programmierst, kannst du deine Code-Schnipsel schön formatiert präsentieren.
Das Video Playlist-Widget
Wir haben einige Videotutorials zu Site- und Page-Buildern gemacht. Dieses Widget fasst sie in einer Playlist elegant zusammen.
Das Paypal Button-Widget
Biete die Zahlungsabwicklung über PayPal an.
Für Shopsites gibt es noch viele weitere WooCommerce-Widgets, die wir gerne in einem gesonderten Beitrag mit Fokus auf E-Commerce vorstellen können. Melde dich bei Interesse in den Kommentaren.
Das Search Form-Widget
So lässt sich die Suchleiste an einer beliebigen Stelle platzieren. Auch ein Suchfeld über den gesamten Sichtbereich (Fullscreen) ist möglich.
Das Template-Widget
Ein Template in einem Template einbetten. Das kann manchmal überaus nützlich sein.
Es kommen hin und wieder neue Widgets hinzu. Für’s Erste sollte das aber reichen. Gibt es etwas, das die Pro-Widgets nicht abdecken? Schreib es in die Kommentare!
Der Popup Builder
Für Viele ein Übel. Aber aus Marketingsicht einfach unerlässlich. Wenigstens liefert Elementor Pro einen der besten Popup-Builder auf dem Markt. Ein kleines Tutorial:
Klicke auf Popup und dann auf Hinzufügen.
Wähle den Typ Popup und gebe dem Template einen Namen.
In der Library findest du viele Vorlagen. Wähle eine aus und klicke auf Einfügen.
Passe das Popup nach Herzenslust an und klicke auf Speichern.
Jetzt beginnt die Magie. Füge zuerst eine Kondition hinzu.
Im Beispiel soll das Popup nur auf der „Über uns“-Seite angezeigt werden. Klicke auf Next.
Das Beispiel-Popup soll nur bei Exit-Intent angezeigt werden. Next.
Außerdem soll das Popup erst erscheinen, sobald jemand mindestens drei Seiten der Website aufgerufen hat.
Im Video hat das sogar geklappt.
Action Links
Ein einfaches aber cooles Feature. Mit den Action-Links lassen sich Kontaktbuttons zu Facebook, WhatsApp erstellen. Auch Wegbeschreibungen mit Waze oder Termine auf Google Calendar sind möglich. Hierzu muss einfach ein Button oder Link angeklickt werden und schon gibt es die Optionen.
Das Feature ist ein wenig versteckt, daher hier ein kurzes Tutorial.
Jeder Link (1) kann über den kleinen Button „Dynamische Attribute“ (2) in einen Aktionslink gewandelt werden. Danach zum Beispiel „Contact URL“ (3) auswählen.
Danach auf den kleinen Schraubenschüssel (1) klicken. Es öffnen sich die Einstellungen. Im Feld Typ (2) dann zum Beispiel Skype (3) auswählen.
Jetzt lassen sich die Skype-Einstellungen vornehmen.
Schon können Besucher der Site auf den Button klicken und direkt einen Skype-Call starten. Niceness.
Custom CSS
Einfach auf ein beliebiges Element klicken. Unter Erweitert lässt sich eigener CSS-Code hinterlegen. Eine Schande, dass das nur in Pro geht. Ich protestiere!
Global Custom CSS
Das Gleiche gilt auch für die globale CSS-Funktionalität. Dies lässt sich zur Not aber auch anders lösen.
Motion Effects
Pro bietet jede Menge Scrolling-, Mouse-Effekte und auch Parallax an.
Die lassen sich auf jedem Element anwenden. Zurückhaltung ist hier wahrscheinlich angebracht.
TypeKit Integration und Custom Fonts
Das Einbinden von Google-Fonts ist ja nichts Neues. Adobes TypeKit unterstützt aber auch nicht jeder.
Außerdem ist es möglich eigene Fonts und Kombinationen zu erstellen. So lassen sich Fonts von der Größe reduzieren, indem man nur die Buchstaben, Schnitte und Weights inkludiert, die auf der Website auch zur Verwendung kommen. Gut für Speed, SEO und den Besucher.
Dynamic Content
Dynamische Inhalte lassen sich überall da einbinden, wo es das kleine Datenbank-Symbol gibt:
Im Menü gibt es Zugriff auf alle möglichen Felder aus der Datenbank. Das gilt auch für Felder aus den beliebten Plugins ADD ACF, PODS, JETENGINE oder TOOLSET CONTENT. So lassen sich wahrlich dynamische Websites erstellen.
Dynamic Colors
Selbst Farben lassen sich dynamisieren. So ist es möglich einer Kategorie (Sommerkleidung / Winterkleidung) eine Farbe zuzuweisen und diese dann als Hintergrundfarbe auf gewisse Elemente oder in den Header und Footer zu legen.
Sticky Header
Der Header kann in der Pro-Version an den oberen Rand gepinnt werden. Er bleibt dann immer im Bild, auch wenn der Nutzer nach unten scrollt.
Integration mit 3rd-Party-Diensten
Zum Schluss noch die Liste der Drittanbieter, die sich problemlos nutzen lassen:
Campaign Monitor
HubSpot
Zapier
Adobe TypeKit
Discord
GetResponse
Drip
ReCaptcha V3
Facebook SDK
MailerLite
Slack
Font Awesome 5
Fontello, IcoMoon & Fontastic
Elementor Pro Kosten
Für eine einzelne Website kostet Elementor Pro schlappe 49 USD im ESSENTIAL Tarif und für 3 Webseiten im Tarif ADVANCED 99 USD pro Jahr. Wer noch mehr Webseiten mit Elementor betreibt, für den gibt es den Tarif EXPERT (bis zu 25 Webseiten) für 199 USD, STUDIO (bis zu 100 Webseiten) für 499 USD und AGENCY (maximal 1.000 Webseiten) für 999 USD.
Selbstverständlich gibt es eine 30 Tage Geld-zurück-Garantie für alle Tarife!
Fazit: Für wen lohnt sich die Pro-Version?
Ich glaube nicht, dass es notwendig ist, alle Features der Pro-Version zu nutzen. Auch wenn das möglich wäre. In der Praxis ist es nicht selten so, dass man heute das eine Feature unbedingt braucht und ein weiteres vielleicht erst in sechs Monaten. Trotzdem wäre es fahrlässig, sich Pro (oder einen vergleichbaren Site-Builder) NICHT zu holen und stattdessen Tage und Wochen darein zu investieren, alles von Hand zusammenzufrickeln.
Ich spreche da aus Erfahrung, da ich ca. 2006 ein komplettes CMS und einen Onlineshop in PHP entwickelt hatte. Da gab es noch nicht einmal WordPress. Dass es mal sowas wie Elementor Pro gibt, hätte ich mir nicht träumen lassen. Es ist schwer sich einen Anwendungsfall vorzustellen, der nicht mit der Pro-Version abgedeckt werden kann. Wenn du es mit deiner Website halbernst meinst oder du damit deinen Unterhalt verdienst, dann kannst du wirklich nichts falsch machen!
Im Dezember 2016 kam Elementor Pro auf den Markt, ein Erweiterungs-Plugin für Elementor, das für Webdesigner und Fachleute gedacht ist. Elementor Pro enthält einige einzigartige Funktionen, wie visuelles Live-Formulardesign, flexible Beiträge und Portfolio-Widgets, benutzerdefiniertes CSS und globales Widget.
Wie teuer ist Elementor Pro?
Für eine einzelne Website kostet Elementor Pro im ESSENTIAL Tarif gerade einmal 49 USD im Jahr. Bei 3 Websites sind es im ADVANCED Tarif 99 USD pro Jahr. Für bis zu 25 Webseiten sind es im EXPERT Tarif 199 USD pro Jahr. Darüber gibt es noch Den Tarif STUDIO mit bis zu 100 Webseiten für 499 USD und AGENCY für maximal 1.000 Webseiten für 999 USD. Gemessen am Leistungsumfang und daran, dass sich die mächtige Free-Version unendlich kostenlos verwenden lässt, ist das ein unschlagbar günstiger Preis. Selbstverständlich gibt es eine 30 Tage Geld-zurück-Garantie für alle Tarife.
Was ist Elementor Free?
Elementor Free ist der weltweit führende WordPress Page Builder. Elementor dient Web-Profis wie Entwicklern, Designern und Marketingexperten. Elementor ist eine Open-Source-Software unter der GPLv3-Lizenz.
Update: Juli 2021. Das neue WP ROCKET 3.9 ist da und es bringt einige spannende Funktionen mit. Vor allem hilft diese Version deutlich bei der Vorbereitung auf die neuen Core Web Vitals, die seit Juni Bestandteil des Google-Algos sind. Ein ausführlicher Überblick, der sich nicht nur für SEOs lohnt!
Jede WordPress-Website stößt früher oder später an ihre Leistungsgrenze. Bei WordPress handelt es sich bekanntlich um ein dynamisches System zur Generierung von HTML (CMS). Das heißt, bei jedem Aufruf werden im Hintergrund auf dem Server diverse Skripte geladen und durch den PHP-Interpreter geschickt. Dabei werden Tausende von Berechnungen durchgeführt und auch Daten aus der Datenbank geladen. Schlussendlich wird das Ergebnis „zusammengebaut“ und an den Browser zurückgegeben.
Je nach Server-Hardware, Hosting-Situation, Anzahl der Plugins oder Umfang der Seiteninhalte kann dieser Vorgang mehrere Sekunden dauern. Falls der Besucher über eine langsame Verbindung verfügt, kann es sein, dass die „Zeit bis zum Anzeigen der Seite“ 5 Sekunden oder länger beträgt. Das ist inakzeptabel, weil es dazu führt, dass Besucher denken, die Seite sei kaputt und das Browserfenster schließen oder woanders hin surfen. Bei Wartezeiten von deutlich über 1 bis 3 Sekunden stellt sich das Gefühl ein, die Webseite sei aktuell nicht erreichbar.
Zum Glück gibt es für WordPress eine ganze Reihe sogenannter Caching-Plugins, die genau dieses Problem beseitigen können. Gemein haben alle, dass sie kompliziert einzustellen sind. Auch müssen sie zuerst konfiguriert und dann aktiviert werden. Nicht so WP Rocket: Es ist direkt nach der Installation aktiviert und beschleunigt die Ladezeiten in vielen Fällen. Mit den richtigen Einstellungen können Höchstwerte erreicht werden, wie wir im Video demonstrieren.
In diesem Beitrag fassen wir nochmals alle wichtigen Informationen rund um die Installation und den Betrieb bzw. die Optimierung von WP Rocket zusammen. Ein Blick in das Video zum Beitrag lohnt sich allemal. Es enthält weitergehende Infos, die hier im Artikel nicht besprochen werden.
Die Features: Was hat WP Rocket alles zu bieten?
Zum Ersten hat WP Rocket eine große Nutzerbasis. Mit mehr als 1.7 Millionen Nutzern weltweit wird die Software von sehr vielen WordPress-Usern verwendet. Das gibt einem die Sicherheit, dass die Entwickler auch in Zukunft an diesem Plugin arbeiten und Fehler schnell beheben. Die Bewertungen im Netz sind nicht ohne Grund überdurchschnittlich gut.
Neben der Standardfunktionalität des Page-Cachings kann WP Rocket auch den kompletten Cache der Website vorausladen, statische Dateien komprimieren, Bilder und iframes werden erst geladen, wenn der Besucher auf der Seite an die entsprechende Position scrollt (Lazy Loading) und der Support für Entwickler lässt sich auch sehen.
Top-Feature: WP ROCKET hat viele Ressourcen in den Support der anstehenden Core Web Vitals gesteckt. Es gibt Feature, die gezielt dabei helfen LCP, FID und CLS zu verbessern. Falls Du bereits mit älteren Versionen gearbeitet hast, bekommst Du hier einen Überblick über alle Neuerungen der Version 3.9.
Wer einen Überblick über diese neuen Metriken sucht, für den hat Kai bei SISTRIX einen ersten guten Überblick als Videopräsentation gemacht:
Das macht es besonders spannend und brandaktuell, sich das Plugin mal im Detail anzuschauen.
Anleitung: Installation und schnell
Nach einer Standard-Installation unter WordPress Version 5.7.2 ist WP Rocket direkt einsatzbereit, d. h. schon ohne weitere Konfiguration werden Beiträge und Seiten gecacht. Die Ladezeiten auf der Website werden direkt beschleunigt. Aber es lässt sich je nach Website deutlich mehr rausholen!
Am besten lässt sich die Power von WP Rocket demonstrieren, wenn wir einfach von Menüpunkt zu Menüpunkt durch das Backend gehen. Zu Testzwecken haben wir eine bestehende Website (HEY UNI) aus dem eigenen Portfolio optimiert.
Ein WordPress-Projekt mit aktuell 179 Beiträgen, 129 Seiten und 18 aktivierten Plugins. Die Performance vor der Optimierung lässt einiges zu Wünschen übrig.
Nachdem WP ROCKET eingerichtet ist, erhalten wir auf fast jeder Seite Höchstwerte zwischen 90 und 99.
Das Dashboard von WP Rocket
Direkt nach der Installation landet man im Dashboard. Hier gibt es einen Überblick über die wichtigsten Kontoinformationen, und auch die Möglichkeit den Cache zu leeren (1), falls etwas mal nicht richtig angezeigt werden sollte. Der Opcache ist ein PHP-interner Cache, in dem sich ebenfalls Daten ansammeln können und auch diese lassen sich hier gefahrlos löschen (2). Kritisches CSS (3) wird durch eine neue Funktion erzeugt, die weiter unten im Beitrag erläutert wird. Die Dokumentation von WP ROCKET ist übrigens sehr detailliert und wirklich zu empfehlen.
Die Kernfunktion Cache in WP Rocket
Im Bereich Cache gibt es die Möglichkeit den Cache für mobile Geräte zu aktivieren (1). Das ist in jedem Fall zu empfehlen. Ein separater Cache (2) für mobile Geräte könnte dann erforderlich sein, falls das eingesetzte Theme noch nicht responsiv ist und für mobile Geräte ein eigenes Layout generiert. Es gibt die Möglichkeit, einen separaten Cache hierfür anzulegen. Es ist grundsätzlich zu empfehlen, besser ein responsives Theme einzurichten. Beruhigend ist allerdings, dass sich so auch Legacy-Projekte noch beschleunigen lassen. Sollte deine Website responsiv sein, auf keinen Fall anschalten.
Das Caching lässt sich auch für angemeldete WordPress-Nutzer aktivieren (3). Das ist allerdings nur für Websites interessant, die über eine hohe Mitgliederzahl verfügen und bei denen Hunderte von Nutzern gleichzeitig die Website nutzen.
Zum Testen am besten ein weiteres Browser-Fenster im Inkognito-Modus öffnen. Nur so lässt sich prüfen, ob das Caching richtig funktioniert. Im Video siehst du genau, wie wir das gemacht haben.
Unter Cache-Dauer (4) lässt sich die Zeit einstellen, bis zu der der Cache invalidiert wird. Wie im Screenshot angezeigt, wird in diesem Fall nach 10 Stunden der Cache neu aufgebaut. Für Websites, die nur einmal die Woche oder seltener einen neuen Beitrag erhalten, ist ein Wert von 0 zu empfehlen.
Datei-Optimierung mit WP Rocket
Der HTML-Code wird in 3.9 nicht mehr minifiziert. Wahrscheinlich ist das Dank GZIP-Komprimierung nicht mehr notwendig. CSS (1) und JavaScript (7) können aber weiterhin durch Minifikation verkleinert werden. Dabei werden unnötige Leerzeichen, Leerzeilen und Kommentare entfernt.
Das Zusammenfassen von CSS (2) und JS (8) macht aus vielen Dateien, jeweils eine Einzelne (für CSS/JS). Das hilft bei den Ladezeiten, falls der Server noch auf HTTP/1 läuft. Falls die Website schon auf HTTP/2 umgestellt ist (zu empfehlen), fällt dies nicht mehr so ins Gewicht.
Unsere Test-Website läuft bereits auf HTTP/2, was sich mit einem Checker überprüfen lässt.
Ausnahmen lassen sich ebenfalls unter (3) und (9) anlegen. Das kann beim Debugging helfen. Also wenn durch Minifikation oder Zusammenfassen das Layout „zerschießt“, dann einfach mal eine Datei nach der anderen ausschließen, um den Übeltäter auszumachen.
Das erste wirklich interessante neue Feature (bzw. frisch aus der Beta) ist die Option CSS-Darstellung optimieren (4). WP ROCKET erstellt automatisch critical path CSS. Wie das genau funktioniert, ist ganz schön kompliziert. Am einfachsten kann man sich das so vorstellen. Aus den Stylesheets werden nur die CSS-Layout-Infos extrahiert, die die Website braucht, um die wichtigsten (critical) Layoutanweisungen umzusetzen. Der Rest wird in andere CSS-Dateien ausgelagert. Die für das Layout kritischen Anweisungen lädt der Browser dann zuerst. Die restlichen Anweisungen können danach parallel im Hintergrund geladen werden. Das ermöglicht weniger blockierendes Verhalten beim Rendern, da der Browser immer eine Sache nach der anderen macht. So muss er vielleicht erstmal nur 10 % der CSS-Dateien laden und kann direkt mit anderen Sachen weitermachen. Für den Nutzer fühlt sich das dann schneller an.
Ob der Einsatz Sinn ergibt, muss jeder selbst überprüfen. Die Performance-Zugewinne sollten aber für die meisten nur minimal sein. Testen schadet aber nicht.
Auch nicht mehr genutztes CSS lässt sich entfernen (6). Im Laufe der Zeit sammeln sich gerne CSS-Anweisungen, die gar nicht mehr verwendet werden. Zugewinne sind hier wahrscheinlich minimal, außer das Theme ist sehr schlampig umgesetzt oder seit Jahren gewachsen.
Eine Sache ist bei WP Rocket nicht so gelungen, nämlich die Bezeichnungen der Funktionen „JavaScript verzögert laden“ (10) und „JavaScript-Ausführung verzögern“ (11). Denn so könnte man meinen, es sei das beste, beide zu aktivieren.
Von der ersten Funktion (10) ist im Prinzip vollständig abzuraten, weil sie nur das parallele Laden von JS-Dateien (async) aktiviert. Das kann dazu führen, dass Elemente auf der Website ihre Funktionen aufrufen wollen, obwohl diese noch gar nicht geladen sind. Besser ist die zweite Variante (11), die JS-Dateien erst lädt, wenn eine Interaktion (Touch, Scroll, Klick etc.) ausgeführt wird (mittels defer), dann aber in der richtigen Reihenfolge. Im Video sieht man auch, zu welchen Problemen das führen kann. Die Ausnahmen (12) helfen, wie immer, beim Debugging oder bei besonders bockigen Skripten.
ACHTUNG: JavaScript verzögert laden (10) und JavaScript-Ausführung verzögern (11) sollten nicht gemeinsam aktiv sein.
Also am besten so einstellen:
Die JavaScript-Ausführung verzögern (11) war dann auch der mit Abstand größte Faktor bei der Optimierung, hat er im PageSpeed Insights Test den Wert von unter 50 auf 90 katapultiert – WOW.
Dieser Bereich ist im Vergleich zur Vorgängerversion auch um einige weniger nützliche Features bereinigt.
Medienoptimierung mit WP Rocket
Im Bereich Medien lässt sich das Lazy Loading für Bilder, Videos und andere iframe-Elemente (1-3) aktivieren. Lazy Loading ist im Prinzip immer zu empfehlen. Denn das bedeutet, dass Bilder auf der Seite erst dann geladen werden, wenn sie durch Scrollen in den sichtbaren Bereich gelangen. Das lohnt sich vor allem bei Seiten, auf denen es sehr viele Bilder gibt. Noch mehr sogar. Eine Seite mit zehn YouTube-Videos beginnt beim Aufruf zehn Videos gleichzeitig zu laden. Dies verhindert ein Klick auf „YouTube iFrame durch Vorschaubild ersetzen“ (4).
Fehlende Bildabmessungen hinzufügen (5) hilft dabei Layout-Shifting zu unterbinden. Ein besonders nerviges Problem für den Nutzer, der auf einen Link klicken möchte, in diesem Moment shiftet das Layout und der Nutzer klickt aus Versehen auf den falschen Link/Button (Demo im Video). Diese Option hilft bei der Optimierung des CLS-Wertes der Core Web Vitals.
Die Option WordPress-Embeds deaktivieren (6), verhindert das Einbinden beliebiger Embeds. Die meisten Autoren dürften Inhalte von YouTube, Facebook und Co. einbinden wollen und das geht normalerweise. Einmal aktiviert, ist dies nicht mehr für alle Portale möglich. Ein Link ersetzt das iframe-Element.
WebP-Kompatibilität (7) liefert WebP-Bilder an kompatible Browser aus. Die Kompatibiltät für dieses Bildformat ist mittlerweile sehr gut. WebP erzeugt bei gleicher Qualität oft kleinere Dateien als JPEG.
Support für WebP ist bei allen modernen Browsern mittlerweile gegeben. Nur Safari unter MacOS kleiner Big Sur macht noch nicht mit.
Grundsätzlich ist der Einsatz zu empfehlen, es ist jedoch notwendig, dass WebP-Bilder hochgeladen werden. WP ROCKET unterstützt nicht direkt (nur indirekt über einen Zusatzdienst) dabei. Es gibt jedoch viele andere Plugins, die dabei helfen, bestehende Bilder zu konvertieren. Wenn sie erstmal vorliegen, dann empfiehlt sich natürlich auch der Einsatz. Kleiner Bilder sind immer besser!
Wer sich für den Dienst IMAGIFY von WP ROCKET interessiert, kann diesen natürlich gerne ausprobieren. Mehr Infos dazu im Bereich Bildoptimierung.
Cache automatisch füllen
Wer Vorladen aktivieren (1) anmacht, für den baut sich der Cache bei jedem Speichern automatisch neu auf. Das ist bei Websites mit wenigen Seiten und seltenen Updates vielleicht interessant. Websites mit vielen Seiten oder ständigen Updates würden ständig ein Recrawling verursachen, daher empfehlen wir dies erst einzuschalten, falls auch wirklich gebraucht.
Die Funktion DNS-Prefetch (2) verursacht, dass bestimmte URLs bereits im Hintergrund voraufgelöst werden. Die IP-Adresse der URL wird vorab ermittelt, was gerade bei mobilen Netzwerkverbindungen zu einem kleinen Geschwindigkeitsboost führen kann. Wer das nutzen möchte, trägt jede Zeile externer Domains ein, mit einem doppelten Slash (//) vorne. Der Google-Fonts-Server wäre hier ein gutes Beispiel: //fonts.gstatic.com.
Fonts vorladen (3) gibt Browsern die Chance, Fonts zu laden, bevor sie die Anweisung in einer CSS-Anweisung entdecken. Es empfiehlt sich, das zu aktivieren, falls die Anweisung prefetch beim Einbinden des Fonts nicht im Quelltext ist und auch nur für 1 – 2 Fonts. Werden zu viele Fonts vorgeladen, wird die Seite bei langsamen Verbindungen nicht angezeigt, weil der Browser ja noch mit dem Laden der Fonts beschäftigt ist. Also nicht übertreiben.
Erweiterte Regeln
Jede Konfiguration braucht ihre Ausnahmen. Daher kann man in diesem Bereich hinterlegen, in welchen Fällen Seiten nicht gecacht werden sollen – für bestimmte URLs (1), Cookies (2) oder User-Agents (3).
Manchmal gibt es URLs, die außerhalb von WordPress ihren Cache erzeugen. Diese dann im Bereich „Immer löschen“ (4) eintragen.
Normalerweise legt WP Rocket für URLs mit Query-Strings keinen Cache an. Wenn es das doch tun soll, lassen sich solche Parameter unter „Cache für Query-Strings“ angeben. In der Dokumentation gibt es auch ein Beispiel dafür: example.com/page/?country=italy.
Datenbankoptimierungen mit WP Rocket
Vor Änderungen an der Datenbank bitte immer ein Backup anlegen!
Erst danach kann die Datenbank um diverse eventuell unnötige Einträge (1-6) erleichtert werden. Allerdings sollte man sicher sein, nicht etwas zu löschen, das man später noch braucht. Gerade die Revisionen bei den Beiträgen und Seiten könnten noch mal nützlich werden. Auch sehen wir hier keine besonders gute Möglichkeit, die Performance zu optimieren. Außer es gibt in der Datenbank mittlerweile Tausende von Revisionen, die sich im Laufe der Monate und Jahre angesammelt haben. Das Feature ist also eher etwas für sehr aktive Publikation.
Ein CDN (Content-Delivery-Netzwerk) verwenden
Ein Content-Delivery-Network (1-2) ist ursprünglich dazu gedacht, ein internationales Netzwerk von gecachten Seiten anzubieten, sodass unabhängig von wo ein Besucher eine Seite aufruft, diese immer so schnell wie möglich ausgeliefert werden kann. So kann beispielsweise ein Kunde, der sich aktuell im Urlaub in Australien befindet, genauso schnell auf einer deutschen Website surfen, ohne tatsächlich in Deutschland zu sein. Ausnahmen lassen sich unter (3) definieren. Wer internationalen Traffic erwartet, der sollte sich Schlau machen.
Für die beliebten Dienste von Cloudflare und Sucuri gibt es eigene Add-ons. Diese also bitte nicht auf der CDN-Seite konfigurieren. Der Varnish-Cache ist nur etwas für absolute Spezialisten bzw. für Leute, die auf dem Server schon Varnish vorinstalliert haben.
Die Heartbeat-Frequenz einstellen
WordPress nutzt im Hintergrund ein Protokoll namens Heartbeat. Dieses Protokoll kommuniziert fortlaufend mit dem Server, um diverse Arbeiten zu erledigen, zum Beispiel das automatische Speichern zu ermöglichen. Je nach Server-Kapazitäten kann dies zu einer Verlangsamung führen. In der Regel aber nur bei Shared-Hosting-Anbietern, bei denen sich mehrere Nutzer eine Serverinstanz teilen. Es empfiehlt sich, diese Funktion auszuprobieren, wenn die Ressourcen knapp werden. Mit anderen Worten: Wenn du schon den Heartbeat unterbinden musst, dann überlege einmal, ob es nicht sinnvoller ist, den Hostingsanbieter zu wechseln oder einen schnelleren Server zu buchen.
Weitere Werkzeuge in WP Rocket
In diesem Bereich lassen sich Einstellungen exportieren, importieren und auf eine ehemalige Version downgraden.
Kostenlose Tutorials zu WP Rocket
WP Rocket verfügt über diverse hochgradig produzierte Videotutorials (auf Englisch), die einige der Features und Möglichkeiten nochmals vertiefen. Diese sind auch auf der Website kostenlos abrufbar.
Fazit: Ist WP Rocket richtig für deine WordPress-Website?
Ein Caching-Plugin ist für jede Website zu empfehlen, die plant ihren Traffic immer weiter auszubauen. Ein älterer oder nicht gerade gut dimensionierter Server kann schnell in die Knie gehen, wenn zu viele Nutzer gleichzeitig auf diesen zugreifen. Richtig eingestelltes Caching kann die Performance deiner Website verhundert- oder vertausendfachen.
Die neue Version 3.9 hat uns besonders gut gefallen, weil sich mit ihr im Handumdrehen deutlich höhere Performanz-Werte erzielen lassen. Die Tests im Video verdeutlichen das sehr gut. Wenn überhaupt bietet WP ROCKET ein oder zwei zu viele Features, aber man muss ja nicht alles nutzen. Wir sind gespannt, was sich das Team in Zukunft noch alles einfallen lässt. Daher bleibt uns auch in diesem Review nur die Möglichkeit zwei Daumen nach oben zu geben. ????????
Falls du dich wunderst, dass WP Rocket Web Fonts nicht lokal cached, solltest Du mal diese Begründung lesen. Das einzige Feature das uns noch fehlt, wäre eine Funktion, um manche Ressourcen auf bestimmten Seiten, Artikel oder Post-Typen komplett entfernen könnte, also z.b. jQuery Core nur auf der Seite mit einem Kontaktformular laden. Aber das lässt sich mit einer zusätzlichen Nutzung von Asset CleanUp Pro gut lösen.
Nach allem, was wir bis jetzt über WP Rocket herausgefunden haben, vor allem in unseren eigenen Tests, können wir dir dieses Plugin wirklich ans Herz legen. Es ist für ein Caching-Plugin einfach zu konfigurieren, hocheffizient, raketenschnell und auch noch bezahlbar.
Das Leben eines Website-Betreibers ist schon schwer genug. Da muss jener nicht auch noch eine Menge Zeit damit verschwenden, Blogbeiträge und Seiten mit HTML und CSS „schön“ zu machen. Dafür gibt es seit geraumer Zeit eine ganze Reihe sogenannter WordPress-Page-Builder. Das sind Plugins, mit denen sich im Handumdrehen sehr ansehnliche, moderne Designs und Layouts für die eigenen Seiten zusammenstellen lassen. Sie machen das Einpflegen und Aufbereiten von Inhalten zum Kinderspiel – zumindest im Vergleich zum Standard-Editor von WordPress. Daher haben sich Page Builder in den letzten Jahren als eine der populärsten WordPress-Plugin-Kategorien etabliert. Dieser Beitrag zeigt Euch, welche Vor- und Nachteile die sieben populärsten Page-Builder haben:
[toc heading_levels=“2″]
Was ist ein WordPress-PageBuilder und was bringt er mir?
Ein PageBuilder, wörtlich übersetzt „Seitenbauer“, ist ein Werkzeug, das beim Designen von Webseiten hilft, ohne dabei Programmierkenntnisse in HTML, CSS oder JavaScript zu erfordern. Solche Tools übertreffen die Standardfunktionalität des Standardeditors, der sich in mehr als 10 Jahren kaum verändert hat. PageBuilder mit Frontend-Funktionalität geben dem Nutzer zusätzlich die Möglichkeit der unabhängigen Echtzeitkontrolle über jedes einzelne Element einer Seite bzw. Site. Das wird auch gerne WYSIWYG (What You See Is What You Get) genannt.
2018 hat WordPress mit Version 5.0 den Standardeditor dann endlich mit dem Gutenberg-Editor ersetzt. Der neue Editor stellt einen Quantensprung in Richtung Erleichterung bei der Layoutarbeit dar. Allerdings ist das Projekt noch jung und im Vergleich zu den PageBuildern hat der neue Editor einiges an Ausbaupotenzial. Weiter unten findet sich eine Einschätzung. Da sich in Sachen Gutenberg-ready Themes derzeit viel tut, werden wir diesen Artikel permanent aktualisieren!
Standardeditor vs. PageBuilder
Wenn es nur um einfache Texte mit Bildern und gelegentlichen Videos geht, die in einer einzelnen Spalte dargestellt werden können, dann braucht es tatsächlich keinen besonderen „Builder“. Wer jedoch gestalterisch etwas kreativere Ansprüche hat, der hat sicher mehr Spaß mit einem der vorgestellten Plugins mit deutlich erweiterten Funktionen. Was die Page-Builder beispielsweise grundlegend vom Standardeditor unterscheidet, ist die Option, Inhalte in Zeilen und Spalten zu gliedern. Das ermöglicht vielfältige moderne Designs.
Darüber hinaus bieten die meisten Page-Builder-Plugins eine Vielzahl von Funktionen, das Erscheinungsbild der Layoutboxen frei zu gestalten: unterschiedliche Hintergründe, Parallax-Effekte, individuelle CSS-Anweisungen u. v. m.
Weitere Vorteile der PageBuilder:
Oft gibt es für besonders populäre Layout-Elemente Vorlagen, z. B. für Porträtbilder, Galerien, Slider, Countdown-Elemente (x Tage bis), Animationen, Feature-Tabellen etc. Ein, zwei Klicks und schon zaubert das Plugin ein fertig gestaltetes Element her, das der User nur noch mit eigenen Inhalten füllen muss.
Es sind keine HTML-, CSS- oder gar JavaScript-Kenntnisse notwendig.
Klicken, ziehen und ablegen – mehr muss man beim Einsatz von Page-Buildern nicht können. Echtes Drag’n’Drop eben.
Bei den visuellen WP PageBuildern passiert das sogar in Echtzeit auf der Seite, die der User gerade erstellt. So sieht man das Ergebnis sofort und muss nicht erst speichern und auf „Vorschau“ klicken.
Professionelle Vorlagen erlauben einen sehr schnellen Kreationsprozess.
In der Vergangenheit hat das oft ein Webdesigner machen müssen, was natürlich mit zusätzlichen Kosten verbunden war.
Aber: Wo Sonne scheint, da gibt es auch Schatten.
Hier einige Nachteile, die es zu berücksichtigen gilt:
Page-Builder erfordern Konfigurationsarbeit. Sie sind umfangreiche Werkzeuge mit vielen Optionen. Die wollen richtig eingestellt sein und das erfordert anfangs auf jeden Fall ein kleines Zeitinvestment.
Um diesen hohen Grad an Annehmlichkeit bei der Gestaltung zu erreichen, generieren Page-Builder verhältnismäßig komplexen Code. Das ist notwendig. Es bedeutet aber auch, dass der Quellcode etwas aufgebläht wird und sich die Ladezeit verschlechtern kann. Nur wenige Page-Builder werben damit, besonders schlanken Code zu generieren. Aus SEO-Sicht ist das besonders wichtig.
Genau aus dem gleichen Grund: Komplexer Code kann hier und da zu ärgerlichen Bugs führen, die erfordern, dass etwas zeitaufwendig neu erstellt werden muss (immer fleißig Backups machen!).
Wer den Page-Builder wechseln möchte, der muss sehr wahrscheinlich alle Seiten neu erstellen. Untereinander sind diese meist nicht kompatibel. Mit anderen Worten: Wer sich einmal entschieden hat, der ist festgelegt.
Die meisten Page-Builder können aufgrund spezifischer Layoutanweisungen nicht automatisch bestehende Inhalte umwandeln.
Im Vergleich zum normalen Editor fühlen sich Page-Builder manchmal sehr träge und schwerfällig an. Einfache Aktionen im Frontend-Editor dauern mehrere Sekunden, im Backend dauern sie dagegen nur den Bruchteil einer Sekunde.
Fehler in der Software führen unter Umständen zu Problemen auf der eigenen Website. Sie können sich in jede Software einschleichen. Wenn sie jedoch in WordPress selbst auftreten, dann ist die Wahrscheinlichkeit, dass ein Update sie bereinigt, eventuell etwas höher.
Insgesamt überwiegen für die meisten Nutzer klar die Vorteile. Wer WordPress professionell einsetzt und dabei beim Layout nicht auf externe Designer angewiesen sein möchte, der kommt ohnehin nicht um sie herum.
Frontend- vs. Backend-Builder
Historisch haben die ersten Page-Builder sich darin versucht, visuell über das Backend, also über den WordPress-Editor, verschiedene Layout-Varianten anzubieten. Dieser Ansatz gilt allerdings UInterface-technisch als überholt. Einige Builder bieten dieses Modell noch an, aber es ist sicherlich auf dem Abstellgleis. Auch wenn diese Form der Seitenbearbeitung effizienter sein kann, weil das Layout einer Seite oder eines Beitrags bei der Bearbeitung nicht „im Weg“ ist. Die Zukunft gehört den Frontend-Editoren, die das Bearbeiten des Layouts auf der Seite selbst und in Echtzeit ermöglichen.
Welches Theme ist ideal für den WordPress-Page-Builder?
Wer sich intensiv mit Page-Buildern auseinandersetzt, stellt früher oder später fest, dass zum Schluss die Auswahl eines passenden Themes immer noch Stunden über Stunden an Zeitaufwand nach sich ziehen kann. Die Standardthemes in WordPress und auch viele andere Themes funktionieren einfach nicht sonderlich gut. Das liegt daran, dass die meisten Themes zu viele Entscheidungen treffen, was das Aussehen der finalen Website betrifft. Wer seine Seite komplett mit einem WordPress-Page-Builder selbst gestalten möchte, sollte – je nach gewünschtem Page Builder – ein optimiertes PageBuilder Theme einsetzen. Diese sind extra für die Ausgestaltung mit einem WYSIWYG-Editor konzipiert und bringen selbst wenig Code und Styling mit.
Elementor hat hier mit seinem „Hello“-Theme eine gute Lösung. Kurz gesagt ist dieses Theme auf das Allernötigste reduziert, sodass die Vorlagen aus dem Page-Builder auch so aussehen wie angezeigt und sich ideal in das Layout einfügen. Andere Builder überschreiben einfach jedes Theme und übernehmen die volle Kontrolle. Der Beaver Builder möchte, dass man 100 USD mehr bezahlt, um ein ideales Theme zu erhalten. Für unsere Videos haben wir das Plugin Blank Slate installiert. Es ist kostenlos und erlaubt bei jeder neuen Seite ganz ohne Layout zu beginnen!
Ein Theme für alle Page Builder
Das neue Page Builder Framework Theme ist sehr einfach anzupassen. So kannst Du über der Theme alle Bereiche außerhalb des Contents gestalten, also Dein Menü, die Farben, etc. einfach über den integrierten WordPress Customizer anpassen und die restlichen Seitenelemente mit dem Page Builder ausgestalten.
Das Page Builder Framework Theme kann in seiner einfachsten Standard-Version kostenlos heruntergeladen, muss aber für einen sinnvollen Einsatz schon mit dem kostenpflichtigen Premium Plugin für 58 USD jährlich oder 248 USD einmalig erweitert werden. Das Theme arbeiten dann exzellent mit elementor, dem beaverbuilder, Brizy, divi, Visual Composer sowie dem SiteOrigin PageBuilder zusammen.
Wenn Du Dich also in einen der vielen Page Builder verliebt hast, würde ich Dir in der Tat das Page Builder Framework Theme empfehlen. Denn damit kannst Du beliebig viele Webseiten erstellen und jeden Aspekt Deiner visuellen Gestaltung selbst kontrollieren – und das auch noch schnell, einfach und ohne Programmierkenntnisse!
Die Surfschule – unser Beispielprojekt
Um die verschiedenen Page-Builder genau unter die Lupe zu nehmen, haben wir eine kleine Beispielseite entwickelt: „Die Surfschule“. Diese Seite haben wir dann in fast allen Plugins nachgebaut und dazu ein ausführliches Video erstellt. Das Video kannst du dir gerne anschauen, um selbst zu beurteilen, wie sich das jeweilige Plugin „anfühlt“. Wenn du ernsthaft über den Einsatz eines Page-Builders nachdenkst, dann schau unbedingt in die Videos rein.
So sieht die Webseite der Surfschule aus:
Und jetzt geht es ans Eingemachte! Die 7 besten WordPress-Page-Builder im Vergleich:
Der Markt der WordPress-Page-Builder ist aktuell kaum überschaubar. Es gibt über 20 davon. Alle haben ihren Sweetspot und manche kann man auch getrost links liegen lassen. Daher haben wir eine Vorauswahl der besten und populärsten Editoren getroffen, die für die meisten Wortpresser kaum Wünsche übrig lassen sollten.
Empfehlung: Divi Builder *Testsieger*
Der Divi-Builder ist stylisch und hat einen enormen Funktionsumfang. Er glänzt vor allem mit zahlreichen Content-Elementen und einer weitestgehend intuitiven Bedienoberfläche.
Der wahrscheinlich größte Vorteil bei Divi ist die Tatsache, dass der Hersteller „Elegant Themes“ zusammen mit dem Page-Builder über 110 komplette Website-Themes im Paket anbietet. Darüber hinaus gibt es über 880 gestaltete Seitenlayouts (Designs), viele davon optisch sehr ansprechend.
Besonders cool ist die Möglichkeit, den Text direkt auf der Seite zu editieren. Hier geht nicht etwa eine Box auf, die der Nutzer ausfüllt und mit einem Klick auf „Speichern“ schließt, bevor der Text dann auf der Seite erscheint. Nein, der Text auf der Seite selbst kann editiert werden. Sogar Kopieren und Einfügen sind möglich.
Auch der Wireframe-Modus kann ein extrem nützliches Feature sein. Wer mit einem Page-Builder gearbeitet hat, der weiß, wie fiddelig diese sein können. Manchmal ist es kaum möglich, ein Element anzufassen, um es an der richtigen Stelle zwischen zwei anderen Elementen wieder einzusetzen. Ständig flitschen die Elemente hin und her, und man weiß nicht, wann genau man loslassen soll. Hier hilft der Wireframe-Modus, der es ermöglicht, die verschiedenen Content-Elemente in eine andere Ansicht zu versetzen. Das Einfügen und das Verschieben der Elemente gehen in diesem Modus viel leichter.
Eine Besonderheit: Das Divi-Theme hat ein eingebautes A/B-Testing. Damit lassen sich verschiedene Layouts und Inhalte (z. B. Headlines) testen.
Nachteile des Divi-Page-Builders
Seiten mit wenigen Elementen fühlen sich sehr flink in der Bedienung an. Sobald die Anzahl der Elemente auf der Seite jedoch größer wird, verlangsamt sich auch die Bedienung merklich.
Das Divi-eigene CSS ist wahrlich enorm. Es gibt für die meisten Elemente überschreibende Layoutanweisungen, die oft mehr als ein Dutzend Zeilen lang sind. Wer also selbst bestimmen möchte, wie etwas auszusehen hat, der muss sich ganz schön tief in die Vorgaben reinfuchsen. Divi möchte einfach nicht, dass User selbst am Design rumspielen. Das ist auf der einen Seite ja gar nicht so schlecht, kann aber zum größeren Problem werden, wenn ein Plugin eines Drittanbieters verwendet werden soll (z. B. WooCommerce oder Gravity Forms). Hier kann es durchaus passieren, dass umfangreiche „Korrekturarbeiten“ notwendig werden. Die können zeitaufwendig und kostspielig sein.
Auch wenn Divi die Möglichkeit bietet, Filter auf die Bilder anzuwenden, so sind manchmal extrem einfache Optionen unauffindbar, z. B. die Anzahl der Spalten in einer Bildergalerie.
Wie viele andere Page-Builder verwendet auch Divi intern einen Shortcode-Parser. Das wird evident, wenn man Divi deaktiviert. Denn dann sind komplexe Seiten voll mit einem Wust von Shortcodes, durch die niemand mehr durchblickt.
Kosten & Besonderheiten des Divi-Page-Builders
Der Preis für den Divi-Page-Builder staffelt sich wie folgt:
89 USD pro Nutzer pro Jahr für alle Themes und Plugins!
249 USD einmalig und lebenslangen Zugriff auf alles. Kein Abo.
Dafür bekommt man:
unbegrenzte Anzahl von Websites
über 110 Website-Layouts und über 880 Designelemente
als Bonus ein Social-Sharing-Plugin und einen Pop-up-Designer
Unsere Einschätzung
Divi ist als Gesamtpaket sehr attraktiv. Wer mit den ansprechenden Templates und Designvorlagen von Elegant Themes arbeiten will, für den ist Divi eine gute Entscheidung. Vor allem dann, wenn die zu erstellenden Seiten nicht sehr umfangreich sind oder oft überarbeitet werden müssen. Zu bedenken ist hier, dass Probleme mit dem Builder womöglich erst dann sichtbar werden, wenn wirklich mal ein Tweak notwendig wird oder vielleicht ein externes Modul zum Einsatz kommen soll.
Hol Dir jetzt das Divi Theme mit 10% Rabatt!
1 Lizenz. Vollständiger Zugriff. Unbegrenzte Anzahl von Websites. Unbegrenzte Anzahl von Benutzern.
Nur 80$ im Jahr oder 224$ einmalig!
Werde jetzt einer von 750.000 Kunden und erhalte Zugang zu Divi, Extra, Bloom, Monarch und mehr. Das ultimative WordPress-Toolkit wartet auf Dich, und zwar für einen unschlagbaren Preis.
Elementor ist längst kein Neuling mehr unter den WordPress-Page-Buildern, um den sich mittlerweile eine riesige Community gebildet hat. Das liegt vermutlich am gelungenen User-Interface, dem starken Funktionsumfang und einer kostenlosen Version, die für die meisten Nutzer schon völlig ausreicht. Wer als kostenbewusster Blogger mit einem moderaten Featurebedarf unterwegs ist, hat hier eine kostenlose Möglichkeit, eigene WordPress-Seiten schön zu machen!
Elementor bietet Animationen, Gradienten-Hintergründe, Effekte für Überschriften und mehr. Außerdem enthält es eine große Anzahl von professionell gestalteten Vorlagen und Hunderte professionelle Erweiterungen. Die kostenlose Version ermöglicht volle Optimierung auf mobil. Darüber hinaus gibt es unter anderem Unterstützung für den Wartungsmodus, Under-Construction-Seiten und Landingpages.
Vorteile und Funktionen des Elementor-Page-Builders
Was Elementor von der Konkurrenz unterscheidet, sind die Layout-Features. Kein anderes Plugin hat hier so viele Einstellungsmöglichkeiten. Beispielsweise können Sektionen leicht auf Bildschirmhöhe angepasst werden.
In der Standardversion sind bereits fast 30 Elemente enthalten, darunter Überschriften, Bilder, Videos, Buttons, Maps, Galerien, Bilderkarussells, Testimonials, Counter, Fortschrittsbalken und viele mehr.
In den Pro-Versionen gibt es darüber hinaus mehr als 20 weitere Elemente. Hier finden sich zusätzlich Preislisten & -tabellen, Formulare, Menüs, animierte Headlines, Facebook-Button und -Kommentare und vieles mehr.
Zudem gibt es noch viele weitere Elemente, die einen Einsatz in verschiedenen Themes ermöglichen. Elemente für WooCommerce gibt es auch. So spricht auch nichts gegen den Einsatz von Elementor in E-Commerce-Projekten.
Als Besonderheit lässt sich bei Elementor das „Hello“-Theme erwähnen. Es ist ein simples Theme, das alle standardmäßig vorhandenen Layoutanweisungen zurücksetzt und so einen optimalen Startpunkt für eigene Designs bietet. Unserer Meinung nach lohnt es sich schon wegen des Theme-Builders, die Pro-Version zu kaufen. Das eingebundene Elementor-Demovideo zeigt, wie einfach es ist, alle notwendigen Seitentypen direkt im Theme-Builder einzurichten und über ein elegantes Regelwerk (Conditions) in die Website zu integrieren.
Elementor ist Open Source und somit sind Anpassungen am Quelltext möglich. Das spielt für viele, vor allem technisch versierte Nutzer eine Rolle, aber auch für diejenigen, die trotzdem noch einen Entwickler für die Website beschäftigen.
Beim Deaktivieren von Elementor hinterlässt der Editor keine proprietären Codeschnipsel. Das ist sehr gut und sonst bei den wenigsten Plugins zu finden.
Neu: Mit Elementor Templates schneller zum Ziel!
Einer der größten Vorteile der Neuen Version von Elementor ist die Möglichkeit, sogenannte Elementor Templates zu verwenden. Das sind quasi vorgefertigte Seitenvorlagen, die man in jede Website importieren kann.
Envato, der größte Marktplatz der Welt für WordPress Themes bietet seit Neuestem nun auch eine ganze Reihe professioneller Elementor-Vorlagen-Kits an. Bei diesen Kits handelt es sich um eine Sammlung ähnlich gestalteter Vorlagen, Stock-Photos und Grafiken, die dazu gedacht sind, auf einer Website gemeinsam verwendet zu werden und dadurch automatisch super zusammen zu passen.
Damit kannst Du in Windeseile eine ganze Website super schnell und einfach zusammen bauen.Und das beste: Von Fotos und Videos bis hin zu Hintergründen und Schriftarten, in den Template-Kits sind bereit sämtliche Lizenzen für die Medien enthalten!
Weitere Pro-Features, die eine Anschaffung lohnenswert machen:
Mit dem Pop-up-Builder lassen sich Pop-ups kreieren, die zum Beispiel zum Abfragen von E-Mail-Adressen eingesetzt werden können.
Der visuelle Formular-Generator ermöglicht es, eigene Formulare zu kreieren.
Dynamische Inhalte lassen sich innerhalb des Page-Builders verwenden.
Es gibt Animationen, Parallax- & Maus-Effekte für interaktive und bewegte Inhalte.
Nachteile des Elementor-Page-Builders
Elementor kämpfte in der Vergangenheit immer wieder mal mit leichten Layout-Differenzen: Elemente, die in Elementor leicht anders aussehen als in der Vorschau. Das kann bei der Arbeit als Entwickler frustrieren.
Es ist nicht möglich, Elementor abzuschalten, um sich das finale Layout einer Seite anzuschauen. Es ist nur möglich, wieder in das Backend zurückzukehren oder ein Preview auf einer neuen Seite anzuschauen. Das geht besser und viel intuitiver, z. B. im Beaver Builder.
Wer die Lizenz jährlich nicht verlängert, kann Elementor weiterhin verwenden, kommt aber nicht in den Genuss von Updates, Support und neuen Features.
Wer später upgraden möchte, muss nur die Differenz zum gewünschten Paket bezahlen.
Unsere Einschätzung
Alles in allem scheint Elementor die Nase bei den Features vorne zu haben. Vor allem die Layoutgestaltung ist unglaublich flexibel. Dafür ist der Page-Builder ein wenig buggyer. Es kann aber nur eine Frage der Zeit sein, bis hier alles funktioniert. Aufgrund der kostenlosen Version kann jeder genau ausprobieren, ob er von den Bugs betroffen ist. Nicht jeder mag unbedingt die Software mit den meisten Features. Also ist es ohnehin eine Frage des Testens.
Der Page-Builder von WPBakery bringt viele Jahre Produkterfahrung mit sich – er war einer der ersten visuellen WordPress-Editoren. Er hat einen enormen Funktionsumfang, ist allerdings auf das Editieren von Seiten beschränkt! Wer auch den Rest der Website mit dem visuellen Drag-and-Drop-Editor bearbeiten will, der braucht den Visual Composer. Zum Hintergrund: Das Unternehmen hat den auf das Bearbeiten von Seiten spezialisierten Editor in „WPBakery Page Builder“ umbenannt und einen nagelneuen Editor namens Visual Composer erschaffen, mit dem sich die gesamte Website einschließlich Header und Footer bearbeiten lässt.
Vorteile und Funktionen des WPBakery Page Builders
Der Builder ist mobile-first, also sehr stark auf mobile Seiten fokussiert. Layouts werden im Hinblick darauf erstellt, dass die meisten Besucher die Seite über das Smartphone ansteuern. Erst von dort wird das Layout für größere Displays optimiert bzw. erweitert.
Aufgrund des Alters des Plugins gibt es Integrationen mit so ziemlich jedem größeren Plugin von Drittanbietern. Wo andere Editoren sich auf Shortcodes verlassen, glänzt WPBakery mit einem grafischen Interface. Über 250 Integrationen gibt es.
WPBakery schreibt sich auf die Fahne, dass der Page-Builder mit jeden Theme zusammenarbeitet. Das liegt wahrscheinlich daran, dass das Plugin intern alles über Shortcodes darstellt und eine Menge Code in das Contentfeld einfügt. Auf der einen Seite mag das ein Vorteil sein, andererseits (siehe Nachteile) aber auch nicht.
Es gibt eine große Auswahl an Designvorlagen, die der Nutzer herunterladen kann.
Das Plugin bietet eine umfangreiche Zahl von Content-Elementen für nahezu jeden Anwendungsfall.
Nachteile des WPBakery Page Builders
Der Live-Editor ist teilweise merklich langsamer als seine Konkurrenten. Auch muss man immer auf „Speichern“ klicken, bevor eine Liveänderung auf der Seite angezeigt wird, z. B. beim Einbinden einer Hintergrundgrafik für ein Element. Die Notwendigkeit, immer auf „Speichern“ zu klicken, um ein Preview angezeigt zu bekommen, ermüdet auf Dauer sehr.
Die Oberfläche fühlt sich manchmal überladen an und gewisse Bedienelemente werden von anderen überdeckt.
Andere Bedienelemente sind völlig daneben, zum Beispiel die berühmte Auswahl der Bildgröße für die Bilder einer Bildergalerie. Hier wählt der Nutzer die Größe der Bilder nicht in einer Dropbox aus, die zum Beispiel „groß“, „mittel“, „klein“ oder „thumbnail“ zur Auswahl hat – nein, das Tool verlangt das Eintippen des Wortes „thumbnail“ in ein einfaches Textfeld! Dies ist bei Weitem nicht das einzige Manko des User-Interfaces.
Klicken macht Spaß, aber manchmal sind Tasten schneller. Beim Einfügen von Elementen geht ein großes Fenster auf, aus dem sich ein passendes Modul auswählen lässt. Wer das Fenster wieder schließen möchte, zum Beispiel aufgrund eines Fehlklicks, der muss auf das X klicken. Die ESC-Taste oder ein Klick neben das Fenster funktionieren nicht.
Es ist nur mit einigen Tricks möglich, eine Zeile zu definieren, die sich über die gesamte Breite erstreckt und dann zum Beispiel in der Mitte eine Spalte enthält, die mit Content befüllt werden kann. Das macht es unmöglich, moderne Landingpages zu erstellen. Das ist auch der Hauptgrund, warum wir die Surfschule nicht mit WPBakery nachgebaut haben.
Es gibt viele weitere kleine Unzulänglichkeiten, die wir hier nicht alle aufzählen wollen. Es besteht immerhin die Hoffnung, dass die Entwickler viele davon aus dem Weg räumen. Bei einem so alten Produkt stellt sich aber die Frage, warum dies nicht schon längst passiert ist. Vielleicht liegt es auch an der Architektur des Plugins, welche sich nicht einfach ändern lässt, ohne die Kompatibilität zu bestehenden Seiten zu gefährden.
Kosten & Besonderheiten des WPBakery Page Builders
245 USD einmalig für den Einsatz in einer eigenen SaaS-Anwendung (z. B. für Theme-Entwickler)
Dafür bekommt man:
kostenlose Updates
Premiumsupport
Zugriff auf alle Templates
Unsere Einschätzung
Zu diesem Zeitpunkt können wir WPBakery auch trotz der Vorteile nicht so richtig empfehlen. Am meisten stört wirklich das ständige Speichern-Müssen. Wer darüber hinwegsehen kann, der sollte sich das Plugin genauer anschauen. Vielleicht ist ja Flexibilität bei den Integrationen wichtiger.
Video: Die Surfschule mit WPBakery Page Builder nachgebaut
Zu gerne hätten wir hierzu ein Video gemacht. Allerdings war dies schlichtweg nicht möglich, ohne sich tagelang in das Plugin einzuarbeiten und dann noch etliche Hacks nutzen zu müssen. Wenn man ohnehin schon für alles CSS-Schnipsel einbauen muss, wozu dann noch ein Plugin? Es war noch nicht einmal möglich, die Fontfarbe einer Überschrift auf Weiß zu stellen. In der derzeitigen Version können wir den WPBakery Page Builder daher leider nicht empfehlen!
Dies ist kein Märchen: Der Visual Composer war einmal ein Page-Builder. Dieser wurde jedoch in den WPBakery Page Builder umbenannt. Danach wurde der Visual Composer zu einem Site-Builder ausgebaut. Die Geschichte ist kompliziert.
Der Visual Composer Site Builder ist ein modernes Plugin für die WYSIWYG-Erstellung von Seiten und Beiträgen. Außerdem kann man auch Themes für Seiten und Elemente/Blöcke mit ihm erstellen. Eine komplette Feature-Liste des Plugins gibt es auf der Seite des Herstellers.
Vorteile des Visual Composer Site Builders
Nach einer kurzen Einarbeitung in den Zeilen-/Spalten-Layout-Builder sind auch moderne Layouts einfach möglich.
Für manche mag es ein Vorteil sein, dass der Visual Composer Site Builder auf eine lange Vergangenheit zurückblicken kann. Er war einer der ersten Builder überhaupt.
Text und das Layout lassen sich direkt auf der Seite bearbeiten. Das fühlt sich sehr zügig an im Vergleich zu WPBakery, das bei jedem Klick erst einen Roundtrip zum Backend erzeugt.
Das Visual Composer Hub bietet zahlreiche Erweiterungen und Addons für den Site Builder.
Es gibt alleine über 100 Content-Elemente für die Gestaltung der unterschiedlichsten Layouts.
Auch mit Layouts geizt der Visual Composer nicht. Es gibt über 100 davon
Das User-Interface ist anpassbar. Es lässt sich frei schwebend oder angedockt an einer Seite nutzen.
Der Themebuilder ist sicher ein Alleinstellungsmerkmal der Premium-Version. Mit ihm lassen sich komplette Layouts für ganze Seiten oder die einzelnen Komponenten (Headers, Footers, Sidebars etc.) erstellen
Parallax, Hintergrundvideos, Gradienten und andere beliebte Effekte beherrscht das Plugin ohne Probleme
Visual Composer wirbt mit einer umfangreichen Entwickler-API.
Nachteile des Visual Composer Site Builders
Der Visual Composer Site Builder ist manchmal, so der Eindruck nach eigenen ausführlichen Tests (s. Surfschule-Video), etwas in der Vergangenheit hängengeblieben. Die Größe eines Bildes bestimmt sich beispielsweise über ein Wort, das in ein Textfeld einzugeben ist. Genaue Pixelgröße angeben geht nicht.
Bei der Bearbeitung von Text direkt auf der Seite verdunkelt der Visual Composer alles außer den Text. Das soll wohl helfen, uns hat es eher irritiert, da es sich anfühlt, als wären die restlichen Features nicht mehr nutzbar. Nur ein Klick führt aus diesem Modus wieder raus.
Rückgängig/Wiederherstellen funktioniert nicht zuverlässig, wenn überhaupt. Das als Feature zu listen, ist schon mutig.
Das Visual Composer Hub wird als Besonderheit angeboten. So besonders ist es dann aber auch nicht. Andere Plugins liefern die meisten Content-Elemente direkt mit und man muss diese nicht erst in einem „Hub“ runterladen.
Das Plugin gibt es nur im Abomodell.
Kosten & Besonderheiten des Visual Composer Site Builders
Der Preis für den Visual Composer Site Builder staffelt sich wie folgt:
59 USD jährlich für eine einzelne Websitelizenz
149 USD jährlich für für drei Websitelizenzen
349 USD jährlich für beliebig viele Websitelizenzen
Ab dem zweiten Jahr gibt es einen Nachlass von 40 %. Innerhalb von 15 Tagen gibt es eine 100 % Geld-zurück-Garantie.
Unsere Einschätzung
Der Visual Composer hat seine eigene Fangemeinde. Er ist immer noch sehr beliebt. Die Abspaltung zum WPBakery Page Builder hat sicherlich gut getan. Die neue Oberfläche fühlt sich modern und zukunftssicher an. Auch wenn der Visual Composer Site Builder nicht unsere erste Wahl wäre, so muss man ihm schon zugestehen, dass einige Features wirklich überzeugen, z. B. die Galeriefunktion aber auch der Umgang mit Zeilen und Spalten geht gut von der Hand. Wer über die teils altbackenen Funktionen hinwegsehen kann, der findet mit dem Visual Composer Site Builder ein Plugin, das moderne Layouts im Handumdrehen ermöglicht – eine gründliche Einarbeitung vorausgesetzt. Die regelmäßigen Updates lassen hoffen, dass sich die Situation in der Zukunft immer weiter verbessert.
Video: Die Surfschule mit dem Visual Composer Site Builder nachgebaut
Der Beaver Builder ist vor allem für seine Zuverlässigkeit bekannt. Die Feature-Auswahl ist im Vergleich zu den meisten anderen Buildern beschränkt. Jedoch lässt sich alles Notwendige durchaus mit dem Beaver Builder bewerkstelligen. Allerdings muss man hier manchmal zweimal hinschauen, bevor man das Feature findet.
Vorteile und Funktionen des Beaver Builders
Der Frontend-Modus ist einfach und übersichtlich. Das Umschalten zwischen Bearbeiten-Modus und Vorschau funktioniert in Echtzeit.
Änderungen am Inhalt und den Styling-Optionen sind zwar nicht auf der Seite selbst (inline), sondern in einer eigenen Box, werden dafür aber (fast) in Echtzeit auf der Seite angezeigt.
Layout-Anweisungen werden über klar strukturiertes HTML und CSS eingestellt. Beaver Builder generiert keine Shortcodes.
Wenn Beaver Builder ausgeschaltet wird, bleibt ein klar strukturiertes HTML-Gerüst zurück. Das macht ein späteres Verarbeiten deutlich einfacher (– sollte dies jemals notwendig sein).
BB befreit den Nutzer davon, ein Theme basierend auf einem Design auszuwählen. Er ermöglicht das einfache Erstellen eigener Designs.
Die Entwickler arbeiten mit großer Geschwindigkeit an der Verbesserung des Plugins (besseres UI, bessere Performance etc.) und nicht – wie andere Plugin-Hersteller – ausschließlich am Hinzufügen von Eye-Candy.
Es gibt eine große aktive und leidenschaftliche Entwickler-Community rund um Beaver Builder. Das ist wichtig, wenn doch mal was schiefgeht bzw. der Website-Betreiber einen Entwickler finden möchte, um die eigene Website mit zusätzlicher Funktionalität auszustatten.
Nachteile des Beaver Builders
Der Inline-Editor ist der einzige Teil der Software, der manchmal herumzickt.
Beaver Builder besitzt unter allen WordPress-Page-Builder-Plugins mit Abstand die wenigsten Vorlagen für Content-Elemente. Dies scheint eine bewusste Entscheidung der Hersteller zu sein. Oft ist es möglich, die eigenen Wünsche zu erfüllen, allerdings ist die Auswahl des richtigen Moduls etwas schwieriger, da die Icons bzw. die Beschreibung nicht unbedingt dem Industriestandard entsprechen.
Für Layout-Änderungen gibt es kein Undo. Manchmal bedeutet das, von vorne anfangen zu müssen.
Um wirklich die größtmögliche Flexibilität beim Layout zu erhalten, empfiehlt es sich, zusammen mit dem Plugin das „Beaver Builder Theme“ zu erwerben. Für insgesamt 199 USD hat man dann wirklich alles, was man braucht, von einem Hersteller. Im Vergleich mit anderen Plugins ist das eher teuer.
Kosten & Besonderheiten des Beaver Builders
Der Preis des Beaver Builders staffelt sich wie folgt:
99 USD einmalig für eine Lizenz und unbegrenzte Installationen
199 USD einmalig für das „Beaver Builder Theme“ und die Option, Multisite zu nutzen
399 USD einmalig zahlen Agenturen, die zusätzlich Whitelabelling haben wollen.
Nach einem Jahr muss man allerdings erneuern, um Updates zu erhalten. Die Erneuerung kostet 40 % weniger.
Unsere Einschätzung
Von uns erhält der Beaver Builder eine klare Empfehlung – einfach wegen des Gefühls, das sich bei der Arbeit mit BB einstellt. Selbst komplexere Layouts lassen sich leicht erstellen. Auch wenn der Builder manchmal nicht 100 % intuitiv ist, bietet die Oberfläche nach entsprechender Einarbeitungszeit fast immer eine passende Lösung. Wenn das Team rund um diesen Page-Builder jetzt noch mehr Vorlagen für Content-Elemente einbaut und kleinere Probleme bei der Nutzung der Editoren in den Griff bekommt, dann wäre der Beaver Builder wahrscheinlich der beste WordPress-Page-Builder.
Video: Die Surfschule mit dem Beaver Builder nachgebaut
Brizy ist ein verhältnismäßig neuer und schneller WordPress-Page-Builder. Besonders augenfällig sind die vielen professionell gestalteten Templates und Designs.
Die Vorteile und Funktionen von Brizy
Direkt bei der ersten Nutzung wird klar, wie gut das visuelle Bearbeiten von Seitenelementen klappt. Der Nutzer arbeitet direkt auf der Seite. Das funktioniert sehr zuverlässig und schnell. Dieses Erlebnis sollten alle Page-Builder liefern.
Die Brizy-Vorlagen lassen sich wirklich sehen. Für jeden Anwendungsfall (Kontakt, Karten, Features, Testimonials etc.) gibt es eine gute Auswahl an professionellen Layouts. Es kommen auch ständig neue hinzu.
Responsives Layout ist von Grund auf integriert.
Eigene Spalten-basierte Layouts zu erstellen ist kinderleicht.
Brizy Pro erlaubt das Erstellen von Headern und Footern, damit ist Brizy wie der neue Visual Composer mehr als nur ein Page-Builder.
Ein Rollen-basiertes System erlaubt die Eingrenzung der Rechte beim Bearbeiten einer Seite. Ein Feature, das bei größeren Teams eine Rolle spielen kann.
Brizy verwendet keine Shortcodes, was ein Wechsel zu einer anderen Plattform deutlich erleichtern kann.
Global Blocks erlauben das Abspeichern von einmal erstellten Content-Elementen, sodass diese auch auf weiteren Seiten eingebunden werden können. Der Clou: Bei Änderung eines globalen Blocks werden diese Änderungen auch auf allen Seiten sichtbar, auf denen dieser globale Block eingebunden ist.
Undo/Redo funktioniert recht gut. Das hat nicht jeder Builder.
Automatisches Speichern funktioniert ähnlich wie bei Google-Docs und hat auch sonst niemand.
Für das Neusortieren von Blöcken gibt es ein eigenes Interface, das das Verschieben etwas vereinfacht.
Die Nachteile von Brizy
Das Projekt ist recht neu. Viele Kernfeatures müssen noch weiter ausgebaut werden, um auf das Niveau der etablierten Page-Builder zu gelangen. Das Brizy-Team veröffentlicht jedoch ständig neue Features und Verbesserungen.
Die Dokumentation ist nicht wirklich berauschend. Es gibt, wahrscheinlich aufgrund der Neuheit, einfach noch nicht so viele Tutorials.
Sehr unüblicher Customer-Support über Github. Man muss dort – auch als Nicht-Entwickler – erst ein Konto einrichten und dann Tickets erstellen.
Kosten & Besonderheiten von Brizy
Der Preis von Brizy staffelt sich wie folgt:
49 USD jährlich für 3 Sites
99 USD jährlich für unbegrenzte Sites
299 USD einmalig für Lifetime-Updates und -Support
Brizy hat einen noch recht jungen Cloud-Dienst gelauncht, der es auch ohne WordPress möglich macht, mit Brizy Seiten zu gestalten. Damit tritt Brizy mit Squarespace in Konkurrenz, wobei es hier eher darum geht, einzelne Seiten zu erstellen, um diese zur Vermarktung von Produkten und Leistungen zu verwenden. Im Abo ist brizy.cloud aktuell noch kostenlos enthalten. Wer nur den Cloud-Dienst nutzen will, zahlt extra.
Unsere Einschätzung
Brizy hat als Branchenneuling enormes Potenzial. Mit der Oberfläche zu arbeiten, macht einfach nur Spaß. Wenn das Team wie bisher an der Produktqualität arbeitet, dann bekommen Elementor, Oxygen und Beaver Builder bald ernstzunehmende Konkurrenz. Der Editor fühlt sich sehr gut an und ist auf jeden Fall einen Test wert.
Die Surfschule mit dem Page-Builder Brizy nachgebaut
Der Oxygen-Builder ist am ehesten mit Brizy zu vergleichen, auch wenn der Builder ein paar Jahre älter ist. Content und Layouts werden live auf der Seite erstellt. Die Auswahl an Templates und Designs ist ebenfalls vergleichbar. Oxygen ist jedoch schon ein bisschen ausgereifter als Brizy.
Vorteile und Funktionen von Oxygen
Oxygen hat ein intuitives Drag-and-Drop-Interface. Ganze Seitenlayouts lassen sich im Handumdrehen erstellen. Auch Vorlagen für einzelne Seitenelemente gibt es zur Genüge.
Der Builder bietet darüber hinaus auch gute Unterstützung für Coder, die mit JavaScript, HTML, PHP und CSS arbeiten.
Oxygen hat aktuell ein attraktives Preismodell. Der Kunde zahlt nur einmal und erhält auf Lebenszeit Updates und Support.
Die Gliederung ist mächtiger als bei Brizy.
Die Bedienung von Oxygen ist wirklich flüssig.
Nachteile von Oxygen
Anders als die meisten Page-Builder ist Oxygen mehr auf den Entwickler fokussiert. Die meisten Aufgaben lassen sich aber auch als Nicht-Entwickler erledigen.
Der Page-Builder erzeugt eine Menge Shortcode-Müll, der bei einem Umzug störend ist.
Wie tragbar das Preismodell ist, muss sich erst noch zeigen. Unter Umständen könnte es den Anbieter in Schwierigkeiten bringen. Damit ist auch niemandem geholfen.
Kosten & Besonderheiten von Oxygen
Das Preismodell von Oxygen ist ziemlich simpel: Für 99 USD einmalig gibt es Lifetime-Support und -Updates. Zudem gibt es eine 60-Tage-Geld-zurück-Garantie, also könnt Ihr Oxygen einfach ausprobieren.
Unsere Einschätzung
Wer sich gleichzeitig Brizy und Oxygen anschaut, der kommt ins Grübeln. Beide Page-Builder sind einfach zu bedienen und unter der Haube ganz schön mächtig. Wer sich den einen anschaut, der sollte auch den anderen prüfen. Letztendlich ist das Geschmackssache.
Video: Die Surfschule mit dem Page-Builder Oxygen nachgebaut
Den kostenlosen Page Builder von SiteOrigin haben wir bei unserer ersten Recherche irgendwie übersehen. Das beliebte Plugin zur Seitenerstellung für WordPress wurde mehr als eine Million mal herunter geladen. Damit lassen sich relativ einfach, responsive und spaltenbasierte Inhalte zu erstellen. Dabei platziert man Widgets, die man bereits aus dem WordPress Backend kennt in vorher definierte Bereiche. Der Page Builder arbeitet mit Standard WordPress Widgets, so dass man aus einer sehr großen Anzahl vorhandener Elemente wählen kann, oder mittels Plugins weitere Widgets hinzufügen kann. In der Premium-Version sind dann viele nützliche und sinnvolle Widgets enthalten:
Der Page Builder von SiteOrigin funktioniert grundsätzlich mit jedem Theme. Dank der einfachen Drag-and-Drop-Funktion des Page Builders muss man keine Zeile Code schreiben. Der Page Builder generiert den gesamten Code für die Darstellung, allerdings kann es natürlich zu Überschneidungen beim CSS kommen. Wir empfehlen daher eines der kostenlosen Themes oder der Premium Themes von SiteOrigin zu verwenden!
Mittels Zeilen- und Widgetstile lassen sich die eigenen Inhalte optisch anpassen und somit einzigartig gestalten. Eigenschaften wie Abstände, Hintergrundfarben und Spaltenabstände lassen sich ebenfalls gezielt anpassen oder mit eigenem CSS-Code gezielt umgestalten.
Kosten & Besonderheiten von SiteOrigin Premium
Das jährliche Abo startet bei 29 USD für eine Webseite, bis 5 Webseiten kosten 49 USD und die Developer-Lizenz für 99 USD ist dann unbeschränkt für beliebig viele Webseiten gültig. Eine aktive Lizenz ermöglicht den Zugriff auf den Premium-E-Mail-Support und sämtliche Plugin-Updates. Die Lizenz kann natürlich jederzeit gekündigt werden. Sehr gut ist: SiteOrigin bietet eine 60-Tage-Geld-zurück-Garantie auf alle Jahres- und Einmalpakete.
Unsere Einschätzung
Insbesondere die SiteOrigin Premium Version enthält alle Elemente, die man auf einer normalen Webseite benötigt und kann eine tolle Alternative sein, seine Webseite aufzubauen. Der Page Builder unterstützt eine Live-Bearbeitung womit man Inhalte sehen und Widgets in Echtzeit bearbeiten kann. Mit einem der kostenlosen Themes oder einem Premium Themes von SiteOrigin kann man seine Seite sehr schnell und professionell gestalten.
Gutenberg ist der aktuelle WordPress-Editor, der mit Version 5.0 im Backend den altbackenen Standardeditor ersetzt hat. Da der Editor aktuell noch auf das Backend beschränkt ist, konkurriert er nicht wirklich mit den Frontend-Page-Buildern, die wir hier getestet haben. Die Frage ist vielmehr, ob die Einführung von Gutenberg es obsolet macht, sich heute noch einen Page-Builder anzuschaffen.
Aus unserer Sicht können wir dies derzeit noch ganz klar verneinen. Gutenberg ist bis jetzt nicht in der Lage, die Welt der Frontend-Editoren umzukrempeln. Das hat vor allem drei Gründe:
Gutenberg hat zwar mittlerweile auch Spalten, allerdings sind die in ihrer Funktionsweise noch relativ rudimentär.
Gutenberg hat aktuell noch keine Zeilen, die es ermöglichen, Spalten darin zu platzieren – zumindest nicht ohne entsprechende Shortcode-Plugins. Mit der grandiosen Toolset-Erweiterung kannst Du aber trotzdem individuelle Layouts und sogar eigene Post-Types ohne Programmieraufwand erstellen.
Außerdem ist Gutenberg nicht im Frontend, also auf der Seite selbst, zu finden. Er ist ausschließlich im Adminpanel als Backend-Editor implementiert. Er wird also auch in Zukunft wahrscheinlich keine Livebearbeitung von Elementen auf einer Seite unterstützen.
Es könnte sein, dass sich das irgendwann einmal ändert. Die WordPress-Roadmap sieht eine tiefere Integration von Gutenberg für Header, Footer und Sidebar vor, allerdings steht das derzeit noch alles in den Sternen. Bis es so weit ist, führt also kein Weg an einem ordentlichen WordPress-Page-Builder vorbei. Wenigstens nicht für Website-Betreiber, die gehobenere Ansprüche an Layout und Content-Darstellung haben und sich nicht auf feste Templates beschränken lassen wollen.
Fazit: Welcher Page-Builder ist denn jetzt der beste für mich?
Das möchte jeder gerne wissen. Allerdings ist diese Frage nicht allgemein und für jeden gleichermaßen zu beantworten. Auch wenn nach einem Test jeder seinen eigenen Favoriten haben wird, so heißt das nicht, dass dieser Page-Builder der beste für alle ist. Ausprobieren ist angesagt. Und hier können wir folgenden Tipp geben: Einfach die folgenden vier Page-Builder in dieser Reihenfolge testen und ausprobieren, womit Du am besten zurechtkommst!
Dabei wird garantiert jeder SEINEN Page-Builder finden <3
