Kadence Theme und Kadence Blocks Pro: Review, Testbericht und Mega-Tutorial

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.

Screenshot Kadence WP Startseite

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:

Screenshot des Layouts des fiktiven Skateboard-Schule Skatedogz

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.

kadence-dashboard

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.
kadence-header
  • 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.
kadence-conditional-headers
  • 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.

Das Essential Bundle enthält außerdem die Pro Starter Templates. Eine Kollektion von kompletten Website-Vorlagen, die professionell gestaltet sind.

Starter Sites von Kadence WP

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.

kadence-blocks

Fast alle davon haben wir verwendet. Es ist eine wahre Freude damit zu arbeiten. Im Gutenberg-Editor sehen sie dann so aus:

kadence-blocks-editor

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.

kadence-row-layout-1

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.

kadence-row-layout-2

Jede Zeile und Spalte lässt sich mit unzähligen Elementen und Einstellungen (rechts)versehen.

kadence-row-layout-3

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.

kadence customizer Kadence Theme und Kadence Blocks Pro: Review, Testbericht und Mega-Tutorial

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.

Wie viel kostet Kadence?

Wir haben das Essential Bundle für 149 USD jährlich lizenziert, weil es sowohl die Pro-Version als auch Blocks Pro enthält. Außerdem gibt es Zugriff auf die sehr schicken und praktischen Pro Starter Templates, mit denen sich eine Website regelrecht in Minuten erstellen lässt. Das Full Bundle für 219 USD bietet für Shops und Agenturen interessante Zusatzfeatures. Mit der Lifetime-Option kaufst du dich aus dem Abo-Modell.

Da Kadence die Verwendung auf unbegrenzten Sites erlaubt, ist das aus unserer Sicht ein fairer Preis.

kadence-pricing

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.

2 Gedanken zu „Kadence Theme und Kadence Blocks Pro: Review, Testbericht und Mega-Tutorial“

  1. Hallo Saša,

    toller Artikel, vielen lieben Dank dafür! Mir wurde das Plugin Kadence Blocks in einer Gutenberg Gruppe auf Facebook empfohlen. Ich nutze DIVI und an sich mag ich DIVI sehr. Im Laufe der Zeit hab ich aber festgestellt, dass doch so einige individuelle Anpassungen braucht, eben weil DIVI (noch) nicht so wirklich mit Gutenberg zusammenarbeitet. Zum Beispiel „weite Breite“ und „ganze Breite“ – da braucht es eine Codezeile in der functions.php. Bildergalerien von Gutenberg sind links nicht bündig mit dem Text, weil es ja eigentlich Listen sind. Lauter so ein „Kleinkram“ halt. Der aber aufhält, wenn man Blogartikel mit Gutenberg schreiben möchte.

    Meine größte Herausforderung mit DIVI aber war, dass mir bei einer Seite mit vielen Inhalten der Browser jedes Mal abgestürzt ist, wenn ich sie bearbeiten wollte. Hab sie dann mit dem empfohlenen Kadence Blocks nachgebaut und es funktioniert alles prima. Hier die Seite, falls jemand schauen möchte: https://www.visit-angkor.org/de/provinzen-staedte-inseln-kambodscha/ Es ist wirklich so, dass Gutenberg im Zusammenspiel mit dem Plugin wie ein Pagebuilder funktioniert. In manchen Fällen wird mir sogar die Arbeit erleichtert. Insbesondere Listen mit unterschiedlichen Icons und Farben, verschachtelte Spalten, Einstellung der Sichtbarkeit je nach Endgerät und vieles andere mehr.

    An sich brauche ich DIVI jetzt nur noch für den Header und Footer. Das wird sich dann jetzt aber bald auch ändern, so der Plan.

    LG 🙂
    Inga

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.