Block-Theme oder Page Builder: Was sich tatsächlich ändert
Ein Page-Builder fügt WordPress einen zweiten Editor hinzu und speichert Ihr Layout in einem eigenen Format, das nur dieses Plugin lesen kann. Ein Block-Theme nutzt den Editor, den WordPress mitliefert, und Seiten werden als Standard-Blockmarkup gespeichert. Der Unterschied zeigt sich, wenn Sie das Werkzeug wechseln. Wer einen Page-Builder verlässt, muss meist jede Seite neu aufbauen, während Core-Blöcke unter jedem Block-Theme weiter angezeigt werden. Die Geschwindigkeit hängt davon ab, was jede Seite lädt.
Teil 1: Die zwei Wege zum Erstellen einer WordPress-Seite
Blendet man das Marketing aus, stehen zwei Designs vor Ihnen.
Ein Page-Builder-Plugin
Ein Builder fügt WordPress einen eigenen Editor, eine eigene Layout-Engine und eine eigene Widget-Bibliothek hinzu. Sie gestalten in der Arbeitsfläche des Builders, und der Builder speichert das Ergebnis in seinem eigenen Format innerhalb Ihrer Beiträge. Sein Stylesheet und Script laufen im Frontend, um dieses Format wieder in eine Seite zu übersetzen. Das Theme tritt dabei weitgehend in den Hintergrund.
Ein Block-Theme für den Editor, den WordPress mitliefert
Der Block-Editor ist Teil von WordPress selbst. Blöcke werden als HTML gespeichert, mit strukturierten Kommentaren um sie herum, Templates sind Block-Templates, und Farben und Typografie stammen aus einer theme.json-Datei, die sowohl der Editor als auch das Frontend lesen. Ein Block-Theme wie Canvas fügt diesem einen Editor Blöcke, Templates und Einstellungen hinzu. Daneben gibt es nichts Weiteres.
Beide Ansätze liefern bereits an diesem Nachmittag eine Website. Der Unterschied zeigt sich drei Jahre später, wenn sich Ihre Prioritäten, Ihr Hosting-Anbieter oder Ihr Entwickler ändern.
Teil 2: Wie Ihre Inhalte gespeichert werden
Das ist der Teil, den Menschen im ungünstigsten Moment entdecken. Beginnen Sie deshalb hier.
Das Format des Builders
Builder speichern ein Layout in einer eigenen Struktur: als Shortcode, als serialisierter Block mit Einstellungen oder als JSON-Block in den Post-Meta-Daten. Solange das Plugin aktiv ist, wird alles tadellos dargestellt. Deaktivieren Sie es, zeigt dieselbe Seite entweder rohe Shortcodes oder gar nichts, weil kein anderes Werkzeug der Welt dieses Format lesen kann. Ein Umstieg bedeutet meist einen manuellen Neuaufbau, Seite für Seite.
Das Kernformat
Block-Markup ist einfaches HTML mit Kommentaren. Öffnen Sie einen Beitrag im Code-Editor und lesen Sie ihn. Wechseln Sie zu einem anderen Block-Theme, und die Core-Blöcke werden weiterhin dargestellt, weil das Rendering durch WordPress erfolgt. Das ist keine Marketingaussage, sondern eine Eigenschaft des Speicherformats.
Canvas geht auf eigener Ebene genauso sorgfältig vor. Jeder Canvas-Block ist ein registrierter Blocktyp mit einem echten Einstellungsbereich, niemals ein Shortcode, und seine Attribute sind gewöhnliche Block-Attribute. So können auch ein Muster, die REST-API oder die Kommandozeile sie setzen. Die Blöcke liegen im Canvas-Plugin, daher werden Ihre Seiten beim Wechsel des Themes nie auf reinen Text reduziert.
Seien Sie ehrlich über die Grenze: Jede Block-Bibliothek, die Sie installieren, ist Code, von dem Sie nun abhängig sind. Der Unterschied liegt in der Größe der Lücke, die sie hinterlässt. Wird eine Block-Bibliothek entfernt, bleiben die Abschnitte, die deren Blöcke verwendet haben, nicht dargestellt. Wird ein Builder entfernt, bleibt die gesamte Seite nicht dargestellt.
Testen Sie das auf einer Staging-Kopie, bevor Sie sich festlegen. Duplizieren Sie die Website, deaktivieren Sie das Layout-Tool und sehen Sie sich drei Seiten an. Was Sie dabei sehen, sind die tatsächlichen Kosten eines Wechsels, und es ist besser, sie jetzt zu erfahren.
Teil 3: Was tatsächlich auf der Seite geladen wird
Geschwindigkeitsargumente in diesem Bereich sind meist Glaubenssache. Der Mechanismus ist einfach genug, um ihn logisch nachzuvollziehen.
Ein Page Builder ist eine zweite Layout-Engine. Er bringt ein eigenes CSS-Grid-System, eine eigene Animationsbibliothek und eigenes JavaScript mit, oft auf jeder Seite, weil das Plugin nicht immer im Voraus wissen kann, welche Widgets eine Seite verwendet. Das ist ein fester Mehraufwand zusätzlich zu WordPress und Ihrem Theme.
Der Block-Editor hat keine eigene Laufzeitumgebung. Core-Blöcke bestehen größtenteils aus HTML und CSS, und ein gut gebautes Block-Theme fügt dem wenig hinzu. Canvas lädt nur das CSS und JavaScript der Blöcke, die eine Seite tatsächlich enthält, und ergänzt 35 Optimierungen, die Sie ein- und ausschalten können, darunter fünf, die speziell auf die Skripte von WooCommerce zielen, die auf Seiten ohne Verkaufsangebot geladen werden.
Die ehrliche Version
Eine sorgfältig gebaute Seite in einem guten Builder kann eine nachlässige Seite in einem Block-Theme übertreffen. Layout-Werkzeuge ist nur einer von mehreren Faktoren, neben Ihrem Hosting, Ihren Bildern, Ihren Schriften und den elf anderen Plugins, die Sie installiert haben. Der Grund, weniger Technik zu bevorzugen, hat nichts mit Benchmark-Screenshots zu tun. Es gibt weniger davon, das schiefgehen kann, an dem Tag, an dem Sie gerade anderweitig beschäftigt sind.
Teil 4: Wie sich das Bearbeiten im Alltag anfühlt
Hier haben Page-Builder ihren Ruf begründet, und hier hat sich der Abstand am stärksten verringert.
Die echte Seite beim Bearbeiten sehen
Der alte Kritikpunkt am Block-Editor war, dass eine Seite als weißes Feld ohne das umgebende Design erschien. Canvas richtet den Editor so ein, dass er das gesamte Template rendert, sodass Header, Slider, Seitentitel-Band, Inhalt und Footer in der Editor-Arbeitsfläche erscheinen, gezeichnet vom selben Code wie das Frontend. Breiten und Abstände entsprechen den echten Werten, sodass ein Abschnitt in voller Breite auch wie einer aussieht.
Einstellungen dort, wo Sie sie erwarten
Wählen Sie einen Block aus, und sein Panel öffnet sich mit den Texten, Links, Bildern, Symbolen, Farben, Größen und dem Verhalten, die dieser Block unterstützt. Canvas ergänzt dasselbe erweiterte Panel für jeden Blocktyp, der auf der Website registriert ist, einschließlich der Core-Blöcke: eine Einblend- und Ausblendanimation, benutzerdefiniertes CSS für diesen Block, benutzerdefinierte Attribute für Analysen oder Testhooks sowie Anzeigebedingungen nach Rolle oder Gerät.
Keine Wiederholungen
Zwei Systeme sparen Ihnen Wiederholungen. „Als Standard speichern“ speichert einen Block so, wie Sie ihn eingerichtet haben, sodass der nächste eingefügte Block dort beginnt. Globale Blockstile benennen eine Gruppe von Einstellungen als Voreinstellung, die Sie auf der gesamten Website anwenden und dann einmal ändern. Templates und Template-Teile befinden sich im Website-Editor, wo WordPress sie speichert, mit 173 Block-Templates, 5 Template-Teilen und 4 Stilvarianten in Canvas.
Teil 5: Was ein Page Builder noch besser kann
Ein Vergleich, der auf der anderen Seite nichts Gutes findet, ist Werbung. Hier zeigen wir, wo Page-Builder heute tatsächlich die Nase vorn haben.
- Freie Positionierung. Ein Element beliebig zu ziehen und um einen Pixel zu verschieben geht in einem ausgereiften Builder noch flüssiger. Der Block-Editor setzt auf Struktur statt auf absolute Platzierung, was für ein Team besser ist und für einen einmaligen Hero-Bereich schlechter.
- Umfang des Ökosystems. Die großen Page-Builder haben jahrelang Drittanbieter-Add-ons, Marktplätze und Integrationen aufgebaut. Wenn Ihr Workflow von einem bestimmten Add-on abhängt, prüfen Sie vor dem Wechsel, ob ein gleichwertiger Block existiert.
- Das Team kennt sich damit aus. Wenn Ihr Team, Ihr Kunde oder der Freelancer, den Sie freitags beauftragen, seit fünf Jahren mit einem einzigen Builder arbeitet, ist diese Routine echtes Geld wert. Umschulung hat ihren Preis, und er fällt bei Ihrem nächsten Projekt an.
- Gerätespezifische Einstellungen überall. Manche Builder bieten für nahezu jede Eigenschaft einen Wert für Smartphone und Tablet. Core ist selektiver, und gelegentlich greifen Sie für eine Einstellung, die ein Builder bietet, zu einem benutzerdefinierten CSS-Feld.
- Ein Produkt für alles. Ein Builder, der zusätzlich Popups, Formulare und einen Theme-Builder mitliefert, bedeutet einen Anbieter und eine Support-Anlaufstelle. Canvas begegnet dem, indem es dieselben Bausteine selbst mitliefert, doch das Argument ist gegenüber einem reinen Block-Theme fair.
- Stabilität der Oberfläche. Der Block-Editor ändert sich mit jeder WordPress-Version. Ein Builder ändert sich, wenn sein Anbieter es beschließt. Wenn sich die Oberfläche ständig ändert und Ihre Kunden dadurch gestört werden, fällt das ins Gewicht.
Keiner dieser Punkte ist ein Grund, ein Block-Theme zu meiden. Sie sind aber Gründe, die Entscheidung bewusst zu treffen und jeder Vergleichstabelle zu misstrauen, die eine Spalte grüner einfärbt.
Teil 6: Was der Wechsel wirklich kostet
Wenn Sie bereits eine Website mit einem Builder erstellt haben, lautet die ehrliche Antwort: Ein Umzug bedeutet einen Neuaufbau, keine Konvertierung. Kalkulieren Sie dafür entsprechend Zeit und Budget ein.
- Inhalte lassen sich übernehmen, das Layout nicht. Texte und Bilder gehören Ihnen und lassen sich mitnehmen. Die Anordnung gehörte dem Builder und muss neu aufgebaut werden.
- Gehen Sie Seite für Seite vor. Beginnen Sie mit den Seiten, die am meisten zählen: der Startseite, der wichtigsten Landingpage und der Kontaktseite. Heben Sie das Archiv alter Beiträge bis zuletzt auf, denn es besteht meist ohnehin aus schlichten Inhalten.
- Starten Sie mit einer Demo statt mit einer leeren Seite. Der Import einer kompletten Demo-Website stellt Ihnen ein fertiges Design zum Bearbeiten bereit, und der gesamte Import wird zurückgesetzt, falls Sie Ihre Meinung ändern.
- Lassen Sie den Builder installiert, bis Sie fertig sind. Deaktivieren Sie ihn erst, wenn keine Live-Seite mehr von ihm abhängt, und prüfen Sie die Website anschließend mit einem Link-Crawler.
- Leiten Sie nur um, was unbedingt umgeleitet werden muss. Behalten Sie dieselben URLs bei, dann bleiben auch die Suchrankings erhalten, die mit ihnen verbunden sind.
Rechnen Sie damit, dass die ersten zwei Seiten langsam vorangehen, während Sie die Ebenen von Block, Muster und Template kennenlernen, und dann stellt sich ein Rhythmus ein. Den größten Teil der später gesparten Zeit bringt es, Header und Footer nicht bei jedem Projekt neu aufzubauen.
Teil 7: So entscheiden Sie
Beantworten Sie diese fünf Fragen ehrlich, dann ergibt sich die Entscheidung meist von selbst.
- Wer bearbeitet diese Website in zwei Jahren? Wenn die Antwort ein Kunde, ein Praktikant oder niemand Bestimmtes ist, ist der Editor von WordPress wahrscheinlich der, den sie am ehesten wiedererkennen.
- Wie viele Websites betreuen Sie? Eine persönliche Website kann beliebig viel zusätzliche Technik tragen. Zwanzig Kundenwebsites können das nicht, und jede zusätzliche Schicht ist ein Support-Ticket, das nur darauf wartet, eröffnet zu werden.
- Ist Ihr Design ungewöhnlich oder konventionell? Konventionelle Seitenformen sind genau das, wofür Blöcke, Muster und Vorlagen gemacht sind. Ein mehrschichtiges, individuell gestaltetes Einzelstück kann im Builder trotzdem schneller sein.
- Was ist Ihr Ausstiegsplan? Wenn die Antwort lautet „es gibt keinen Ausstiegsplan“, wählen Sie das Format, das WordPress selbst liest.
- Wofür zahlen Sie eigentlich? Vergleichen Sie die Gesamtkosten: Theme, Builder, Formular-Plugin, Popup-Plugin, Slider-Plugin und die Verlängerungen jedes Einzelnen, und stellen Sie sie einem einzigen Produkt gegenüber, das all diese Bereiche abdeckt.
Falls ein Builder bereits in Ihrer engeren Auswahl steht, stellen zwei unserer Vergleiche diese Fragen an ein bestimmtes Produkt: Canvas als Elementor-Alternative, Tarif für Tarif, und wie Canvas im Vergleich zu Divi abschneidet in Bezug auf Bearbeitung, Anbieterbindung und das, was passiert, wenn eine Lizenz ausläuft. Beide führen ihre Quellen auf und nennen das Datum, an dem die Werte erfasst wurden.
Canvas ist die Block-Theme-Antwort auf diese Liste: 209 Blöcke im Block-Einfüger, den Sie bereits nutzen, 183 Muster, 173 Templates, ein Header- und Footer-Builder, Formulare und 88 vollständige Demo-Websites als Ausgangspunkt. Wenn Sie den Unterschied lieber sehen, als darüber zu lesen, öffnen Sie eine Demo und klicken Sie sich in eine Seite hinein.
Quellen
Wenn dieser Leitfaden etwas außerhalb von Canvas selbst beschreibt, finden Sie hier die offiziellen Seiten, die es dokumentieren.
- Markup-Darstellung eines Blocksdeveloper.wordpress.org · Blöcke werden als HTML gespeichert, mit Kommentaren, die Anfang und Ende jedes Blocks markieren
- Einführung in theme.jsondeveloper.wordpress.org · Die Einstellungen und Stile in theme.json wirken sowohl im Frontend als auch in den Editoren
- Was ist ein Theme?developer.wordpress.org · Block-Themes bestehen aus Block-Templates, und Funktionen in einem Plugin bleiben bei einem Theme-Wechsel erhalten
- Einführung in Templatesdeveloper.wordpress.org · Der Website-Editor speichert Ihre Templates und Template-Teile als Blockmarkup in der Datenbank
Wie es weitergeht
Zwei Leitfäden, die zeigen, wie der Block-Ansatz funktioniert, sowie die dahinterstehende Bibliothek.
Häufige Fragen
Die vollständige FAQ beantwortet alle weiteren Fragen, und die Dokumentation beschreibt jede Einstellung im Detail.
Ist ein Block-Theme automatisch schneller als ein Page-Builder?
Nein, und wer etwas anderes behauptet, will Ihnen etwas verkaufen. Die Geschwindigkeit hängt davon ab, wie viel CSS, JavaScript und Markup eine Seite ausliefert, nicht von der Kategorie des Werkzeugs. Was ein Block-Theme bietet, ist ein kürzerer Weg zu einer schlanken Seite: keine zweite Layout-Engine, und in Canvas nur die Assets der Blöcke, die eine Seite enthält, dazu 35 Schalter für den Rest. Messen Sie Ihre eigenen Seiten vorher und nachher. Glauben Sie keiner der beiden Aussagen, bevor Sie nachgemessen haben.
Funktionieren meine Seiten nicht mehr, wenn Sie Canvas nicht mehr verwenden?
Core-Blöcke werden unter jedem Theme weiterhin angezeigt, da Ihre Inhalte als standardisiertes Block-Markup gespeichert werden, das WordPress selbst liest. Die Canvas-Blöcke stammen aus dem Canvas-Plugin, daher bleiben sie in Ihren Beiträgen und Seiten erhalten, wenn Sie das Theme wechseln. Entfernen Sie zusätzlich das Plugin, werden diese bestimmten Abschnitte nicht mehr angezeigt, was bei jeder Blockbibliothek so ist.
Kann ich einen Page-Builder zusätzlich zu Canvas verwenden?
Ein Builder ist ein Plugin, daher hindert Sie nichts daran, einen zu installieren. Wir würden davon abraten: Sie würden auf einer Website zwei Layout-Systeme, zwei Gestaltungssysteme und zwei Update-Zyklen pflegen, und die Templates, die Rahmenelemente und die Blöcke, für die Sie Canvas bezahlen, lägen ungenutzt darunter.
Müssen Sie Code kennen, um ohne Page Builder bauen zu können?
Nein, eine Canvas-Website ohne Page Builder braucht keinen Code. Jeder Teil einer Canvas-Seite ist ein Block mit einem Einstellungsfeld, einschließlich Header, Footer und Seitentitel-Bereich. Das erweiterte Panel fügt jedem Blocktyp der Website Animationen, benutzerdefiniertes CSS, benutzerdefinierte Attribute und Anzeigebedingungen hinzu. Das Feld für benutzerdefiniertes CSS ist da, wenn Sie es möchten, nicht weil das Produkt es braucht.
Erstellen Sie Ihre nächste Website mit Canvas
Ob Einsteiger, Freelancer oder Agentur: Sie erhalten dieselben Blöcke und dieselben Demos. Beginnen Sie mit einer Website und erstellen Sie so viele, wie Sie benötigen, mit derselben Lizenz.