LiveCanvas Review: Der WordPress Page Builder für Leute, die HTML schreiben

Die meisten WordPress Page Builder verstecken den Code vor dir. LiveCanvas macht das Gegenteil: Es gibt dir das HTML in die Hand und lässt dich daran arbeiten, während sich die Seite live verändert.

Genau deshalb habe ich es ausprobiert. Über die Jahre liefen Kundenseiten bei mir auf WPBakery, Elementor, Oxygen und LiveCanvas, und LiveCanvas war der Builder, der sich anfühlte, als wäre er für Leute gemacht, die wissen, was ein div ist.

Dann habe ich mit WordPress ganz aufgehört. Ich habe darüber geschrieben, warum ich WordPress nach sechs Jahren verlassen habe, und mit Page Buildern hatte das nichts zu tun. Dieses Review kommt also mit einer Offenlegung: Ich setze LiveCanvas heute nicht für Kundenprojekte ein. Was folgt, ist das, was ich in meinem Test gesehen habe, abgeglichen mit dem, was LiveCanvas im Oktober 2026 anbietet, und für wen es meiner Meinung nach noch passt.

Was LiveCanvas ist, in einem Absatz

LiveCanvas ist ein WordPress Page Builder auf Basis von Bootstrap 5. Die aktuelle Version ist 4.9.5 vom 30. September 2026. Dazu gehört ein kostenloses Starter-Theme namens picostrap, und heraus kommt reines Bootstrap-Markup, Rows und Columns mit Utility-Klassen. Keine proprietären Wrapper-Divs, keine Builder-Shortcodes in deinem Content.

Du klickst im Frontend auf ein Element und bearbeitest es direkt. Wenn du Bootstrap kennst, weißt du schon 90 % davon, wie LiveCanvas tickt. Wenn nicht, lernst du in der ersten Woche eher Bootstrap als LiveCanvas.

Der Live-HTML-Editor ist der eigentliche Grund

Wählst du ein Element aus, öffnet sich sein Code in der unteren Bildschirmhälfte. Du änderst eine Klasse, die Vorschau aktualisiert sich. Du fügst ein Snippet aus der Bootstrap-Doku ein, es wird gerendert. An dieses Feature erinnere ich mich aus meinem Test am meisten, und kein anderer Builder, den ich benutzt habe, kam da ran.

Im September 2026 (Version 4.9.4) wurde dieses Editor-Fenster neu gebaut. Es unterstützt jetzt Split-View-Layouts und Bearbeitung über mehrere Monitore. Klickbare HTML-Breadcrumbs bringen dich zum Elternelement, ohne dass du danach suchen musst. Den neuen Editor habe ich selbst nicht benutzt, ich kann dir also nur sagen, was im Changelog steht.

Der Ansatz ist erst Layout, dann Content. Die meisten Drag-and-Drop-Builder starten beim Content: Überschrift rein, Bild rein, herumschieben. LiveCanvas will, dass du zuerst das Grid aufbaust und es danach füllst. Für Entwickler ist das sowieso unser Arbeitsablauf. Für jemanden aus dem Marketing, der einen Button 20 Pixel nach links schieben will, ist es Reibung.

Responsive Design ohne Rätselraten

Das Bootstrap-Grid ist mobile-first, responsives Verhalten kommt also über die Breakpoint-Klassen, die du setzt (col-md-6, col-lg-4 und so weiter). LiveCanvas bringt ein Responsive-Preview-Tool mit, damit du jeden Breakpoint vor dem Veröffentlichen prüfen kannst.

Wechselst du in den mobilen Viewport, siehst du dieselbe Seite auf Handybreite, und der Editor bleibt aktiv. Wenn etwas bricht, korrigierst du die Klasse direkt dort.

Blöcke, Templates und die Unsplash-Abkürzung

Die Preisseite nennt mehr als 120 HTML-Templates in der Bibliothek, dazu fertige Blöcke für Header, Footer, Menüs und Content-Bereiche. Im Oktober 2025 (Version 4.8.0) wurden die dynamischen Blöcke überarbeitet und ACF-Integrationsblöcke ergänzt. Das ist relevant, wenn dein Content in Custom Fields liegt.

Diese Blöcke sind ein Startpunkt für Entwickler und kein Theme-Marktplatz. Sie sehen aus wie Bootstrap-Beispiele, weil sie genau das sind. Wenn du etwas willst, das ab Werk fertig aussieht, ist das Template-Angebot von Elementor größer.

Die Unsplash-Integration ist eine Kleinigkeit, die mir gefallen hat. Du suchst kostenlose Stockfotos direkt im Editor und ziehst sie in die Seite, ohne sie herunter- und wieder hochzuladen.

Jeder Block, den du einfügst, ist reines Bootstrap-Markup. Du kannst ihn also im Code-Editor öffnen und jede Zeile ändern.

Warum es schnell ist: kein zusätzliches CSS, standardmäßig kein JavaScript

LiveCanvas lädt kein eigenes Stylesheet zusätzlich zu deinem Theme. Das CSS kommt aus demselben Bootstrap-Build, den picostrap nutzt, und es gibt kein JavaScript, solange du keine Animationen einschaltest (dafür ist die AOS-Animationsbibliothek dabei). Die eigene Homepage von LiveCanvas gibt einen Largest Contentful Paint von 295 ms und 0 ms Total Blocking Time an. Das ist deren Messung auf deren Seite, nicht meine, aber die Architektur passt dazu: Es gibt schlicht nichts Zusätzliches zu laden.

Auch das Backend war flott. In meinem Test öffnete sich der Editor schnell, während andere Builder, die ich regelmäßig benutzt habe, mehrere Sekunden brauchten, nur um den Bearbeitungsbildschirm zu laden.

Für SEO zählt das. Leichtere Seiten laden schneller, und die Ladezeit fließt in die Core Web Vitals ein. Wenn du deine eigene Seite prüfen willst, habe ich einen Leitfaden zum Testen der Website-Ladezeit geschrieben. Eine Korrektur zur alten Version dieses Beitrags: LiveCanvas macht kein On-Page-SEO für dich. Titles und Meta Descriptions kommen weiterhin aus deinem SEO-Plugin. Was du bekommst, ist sauberes Markup, das dir nicht im Weg steht.

Was sich seit meinem ursprünglichen Review geändert hat

Die alte Version dieses Beitrags nannte LiveCanvas "neu", und mein Page-Builder-Vergleich behauptete, Updates kämen nur langsam. Die zweite Aussage stimmt nicht mehr. Der Changelog zeigt durch 2025 und 2026 alle paar Wochen ein Release. Das ist dazugekommen und relevant:

• KI-Assistent. Du kannst Modelle von OpenAI, Anthropic, Google, DeepSeek und Mistral (plus OpenRouter) anbinden, um im Editor Content und HTML zu erzeugen.
• Tailwind-CSS-Support, noch als Beta markiert. Im Changelog heißt es "further steps towards Tailwind compatibility", behandle es also als experimentell.
• Statischer HTML-Export. Du kannst Seiten als eigenständige .html-Dateien exportieren.
• White-Label-Editor für Agenturen, die die Seite an Kunden übergeben.
• Loops & Logic Syntax (von Tangible), um WordPress-Daten in Templates zu ziehen.

Der statische Export ist mir aufgefallen. Ein WordPress-Plugin, mit dem du für eine einzelne Seite aus WordPress aussteigen kannst. Wenn ich bedenke, wo ich gelandet bin, finde ich das ein bisschen witzig.

WooCommerce Dynamic Templating, Schritt für Schritt

Diesen Teil von LiveCanvas habe ich am gründlichsten getestet, und die Screenshots unten stammen aus diesem Test. Mit Dynamic Templating gestaltest du WordPress-Templates (einzelne Beiträge, Archive und Custom Post Types, inklusive ACF-Feldern) mit LiveCanvas. Mit WooCommerce deckt es Produktseiten, Kategoriearchive, den Shop, den Warenkorb und den Checkout ab. Beide Features sind in den aktuellen Plänen weiterhin enthalten.

Installiere zuerst WooCommerce und das LiveCanvas Plugin. Beide tauchen im linken Admin-Menü auf.

Ich habe ein Demo-Produkt angelegt und die WooCommerce-Grundeinstellungen gemacht. Ohne Templating sah die Produktseite so aus.

Geh im WordPress-Backend zu LiveCanvas, setz den Haken bei "Manage WordPress templates", scroll nach unten und speichere.

Nach dem Neuladen erscheint unter LiveCanvas ein neuer Eintrag Dynamic Templates.

Hier siehst du alle deine Templates. Klick oben auf Add New.

Rechts wählst du, welches WordPress-Template dieses ersetzt. Es gibt WooCommerce-spezifische Checkboxen, und Single Product steuert deine Produktseiten.

Darunter findest du das Produktkategorie-Archiv und das Produkt-Tag-Archiv, also die Seiten, die Produkte einer Kategorie oder eines Tags auflisten.

Ganz unten gibt dir WooCommerce Specialty die Kontrolle über die Shopseite sowie Warenkorb, Checkout und Konto. Das sind normalerweise die WooCommerce-Seiten, die sich am schwersten umgestalten lassen.

Setzt du den Haken bei Single Product, bietet LiveCanvas ein eingebautes Starter-Template mit den Shortcodes für alle grundlegenden WooCommerce-Elemente an.

Klick auf Veröffentlichen.

Das Template ist jetzt live. Öffne unter WooCommerce die Produkte, wähl eins aus und klick auf Ansehen.

So sieht die Produktseite mit dem Starter-Template aus.

Zum Bearbeiten klickst du in der oberen Leiste auf Edit dynamic template for single product.

Du bekommst den vollen LiveCanvas Editor, inklusive des HTML der ganzen Seite und aller Shortcodes.

Für einfache Farb- und Größenänderungen bearbeitest du die Klassen-Parameter der Shortcodes. Das erzeugte Markup aktualisiert sich sofort.

Alle Shortcodes und ihre Parameter stehen mit Beispielen in der LiveCanvas Shortcode-Dokumentation.

Von Hand kopieren musst du die Shortcodes aber selten. Sie sind alle als Blöcke verfügbar. Um die Kurzbeschreibung gegen die vollständige Produktbeschreibung zu tauschen, fährst du mit der Maus darüber, öffnest die Block-Optionen und wählst Replace block.

Wähl Product Description, und die Vorschau aktualisiert sich in Echtzeit. Du siehst also genau, was du einsetzt.

Für Archiv- und Shopseiten aktivierst du im Backend die passenden Standard-Templates.

Strukturell sieht der Shop jetzt richtig aus.

Bis hierhin nutzt alles die Standardfarben und -schriften von Bootstrap. Um sie zu ändern, öffnest du den WordPress Customizer. picostrap stellt dort die Bootstrap-Variablen bereit.

Unter Farben legst du Text- und Hintergrundfarben sowie die Bootstrap-Theme-Farben fest (primary, secondary und die übrigen).

Unter Typografie tauschst du die Standardschriften aus.

Klick auf Veröffentlichen, und der ganze Shop übernimmt die neuen Farben und Schriften.

Das ist echte Kontrolle über genau die WooCommerce-Seiten, die sonst mühsam anzupassen sind, und du verlässt dafür nie Bootstrap.

LiveCanvas Preise 2026

Die ursprüngliche Version dieses Beitrags nannte 79 $ pro Jahr oder 139 $ für eine Lifetime-Lizenz. Der Jahrespreis ist gleich geblieben. Der Lifetime-Preis hat sich mehr als verdoppelt.

Stand Oktober 2026, laut livecanvas.com:

• Pro: 79 $ pro Jahr (als Rabatt von 99 $ ausgewiesen). Unbegrenzt viele Seiten, ein Jahr Updates und Support.
• Lifetime: 299 $ einmalig. Unbegrenzt viele Seiten, lebenslange Updates und Support, plus Zugang zur privaten Beta.

Beide Pläne enthalten die Template-Bibliothek, WooCommerce Templating, Dynamic Templating und den KI-Assistenten. Du darfst LiveCanvas auf Kundenseiten einsetzen, ohne dass der Kunde eine eigene Lizenz kaufen muss, und es gibt 30 Tage volle Rückerstattung. Support läuft ausschließlich über Discord. Manche lieben das, andere wollen ein Ticketsystem und eine E-Mail-Adresse. Find vor dem Kauf heraus, zu welcher Gruppe du gehörst.

Zum Vergleich: Eine Bricks Lifetime-Lizenz für unbegrenzt viele Seiten kostet 599 $, wie ich in meinem Bricks Builder Review nach zwei Jahren Kundenseiten aufgeschlüsselt habe. LiveCanvas kostet die Hälfte.

Die Nachteile

Du musst HTML und Bootstrap können. LiveCanvas hat einen visuellen Editor, aber sobald eine Komponente anders aussehen soll als im Standard, bearbeitest du Klassen oder Code. Wer nicht programmiert, stößt da schnell an eine Wand. Die alte Version dieses Beitrags behauptete, LiveCanvas "erfordert keine Programmierkenntnisse". Das war falsch.

Weniger fertige Designs. Die Templates sind sauberes Bootstrap. Wenn ein Kunde ohne Entwickler einen polierten, einzigartigen Look erwartet, wird er enttäuscht.

Es bleibt ein WordPress-Plugin. Das Frontend ist schlank, aber du betreibst weiterhin WordPress mit seinem Update-Zyklus. Genau der war ein Grund, warum ich gegangen bin, und den behebt kein Page Builder.

Support nur über Discord. Für Entwickler okay, für Kunden, die einfach jemandem eine E-Mail schreiben wollen, unpraktisch.

Für wen LiveCanvas heute passt

Wenn ich noch auf WordPress bauen würde, wäre LiveCanvas für eine bestimmte Art von Entwickler sinnvoll:

• Du schreibst HTML und CSS sicher und magst Bootstrap.
• Du kommst mit einem fertigen Design im Kopf und brauchst keine Templates zur Inspiration.
• Dir ist das Seitengewicht wichtig und du willst standardmäßig null JavaScript.
• Du hast Kunden, die auf WordPress bleiben müssen, ein Headless-Rebuild kommt also nicht in Frage.

Wenn du lieber visuell mit einem umfangreicheren Builder arbeitest und trotzdem sauberen Output willst, schau dir Bricks an. Den kompletten Vergleich findest du in meinem Vergleich der Top WordPress Pagebuilder, mit LiveCanvas, Oxygen, Bricks und Elementor nebeneinander.

Meine eigenen Seiten laufen heute auf Next.js und Directus, statische Marketing-Seiten auf Astro. Das ist kein Urteil über LiveCanvas. Es ist ein Urteil über WordPress. Unter den WordPress-Buildern, die ich benutzt habe, kam LiveCanvas meiner heutigen Art, Code zu schreiben, am nächsten: reines Markup und nichts geladen, was du nicht angefordert hast.

Ob ich zurückgehen würde, falls ich je zu WordPress zurückkehre, weiß ich nicht. Bricks hat die größere Community. LiveCanvas hat die sauberere Idee.

Wenn du zwischen WordPress-Buildern feststeckst oder dich fragst, ob WordPress überhaupt noch die richtige Basis für deine Seite ist, lass uns über dein Webentwicklungsprojekt sprechen. Ich habe auf beiden Seiten gebaut und kann dir sagen, welche Kompromisse zu deiner Situation passen.

Dieser Beitrag enthält Affiliate-Links. Wenn du darüber kaufst, bekomme ich eine Provision, ohne dass es dich mehr kostet.