Pagebuilder — Glossar

Direkte Antwort

Pagebuilder: Ein Pagebuilder lässt dich Seiten per Maus zusammenbauen, statt sie zu programmieren — Zeilen, Spalten und Widgets wie bei einem Baukasten, aber innerhalb eines CMS wie WordPress. Für jedes Element erzeugt er zusätzliche HTML-Container, Stile und Skripte. Das Ergebnis ist bequem zu bauen, aber langsam zu laden und für Maschinen schwer zu lesen.

Wichtigste Punkte

Elementor, Divi und Co. verpacken jeden Inhalt in viele verschachtelte Container.
Große DOM-Bäume verschlechtern Core Web Vitals und erschweren Extrahierbarkeit.
Inhalte, Bilder und URLs lassen sich retten; das Builder-Markup nicht.
Ablösung ist der Kern vieler Modernisierungen bei Modern Stack.

— Steve Baka

Aktualisiert: 6. Oktober 2026 · Autor: Steve Baka

Was ist ein Pagebuilder?

Ein Pagebuilder ist ein Plugin oder eine Theme-Ebene, mit der du Layouts visuell zusammenstellst. Bekannte Vertreter sind Elementor, Divi, WPBakery und Beaver Builder. Statt eines Templates mit fester Struktur öffnest du einen Editor, ziehst Abschnitte, Spalten und Widgets auf die Fläche und siehst das Ergebnis sofort. Das Layout speichert der Builder als Konfigurationsdaten in der Datenbank und setzt es bei jedem Aufruf in HTML um.

Der Vorteil liegt im Tempo: Auch ohne Entwickler entsteht schnell eine ansehnliche Seite. Der Preis steckt in der Übersetzung. Weil ein Builder jede denkbare Einstellung unterstützen muss, schreibt er für jedes Element Wrapper, Klassen und Inline-Stile. Ein einfacher Textabsatz kann so in fünf bis zehn verschachtelten Containern stecken.

Warum belasten Pagebuilder Performance und KI-Lesbarkeit?

Browser müssen jedes HTML-Element parsen, stylen und positionieren. Lighthouse warnt, wenn ein Dokument mehr als etwa 800 DOM-Knoten hat, und bewertet über 1.400 Knoten als Fehler; große Bäume verlangsamen Rendering, Stilberechnung und Interaktion. Builder-Seiten erreichen diese Marken schnell, weil schon ein Abschnitt mit Überschrift, Bild und Button mehrere Dutzend Knoten erzeugt. Dazu laden sie Skript- und Stilpakete für Widgets, die auf der Seite gar nicht vorkommen — das trifft LCP, INP und die mobile Bedienung.

Für Crawler und Assistenten kommt ein zweiter Effekt hinzu: Der eigentliche Text liegt tief in Containern, oft ohne klare Überschriftenhierarchie und manchmal erst nach Skriptausführung. Das senkt die Chance, dass ein RAG-Abruf saubere Abschnitte findet. In der AI-Readiness-Studie gehören solche Auftritte typischerweise zu den schwächeren Fällen.

Was ist besser als ein Pagebuilder?

Ein Team mit Komponenten, die semantisches HTML erzeugen: eine <h1>, <section>, <p>, <ul>, ein <img> mit Größen und Alternativtext, ohne zusätzlichen Wrapper-Zirkus. Inhalte liegen als strukturierte Daten oder MDX vor, das Layout steckt im Code. Redakteure ändern Texte weiter bequem, nur eben nicht die Struktur jedes Absatzes. Bei Modern Stack setzen wir dafür Next.js ein; die Alternative ist ein schlanker Block-Aufbau in einem Headless CMS.

Wie läuft die Ablösung ab?

Bestand inventarisieren: Seiten, Formulare, Plugins, Tracking, aktuelle URLs.
Inhalte extrahieren und Layout-Absicht dokumentieren.
Neue Komponenten bauen, Inhalte einsetzen, Metadaten und JSON-LD ergänzen.
Jede alte URL per Redirect auf das Ziel leiten.
Messen: LCP, DOM-Größe, Anfragen vor und nach dem Umbau.

Mehr dazu in Pagebuilder-Ablösung, Elementor-Migration und Divi-Migration.

Quellen

Chrome for Developers — Avoid an excessive DOM size — Google Chrome
Nennt Grenzwerte für DOM-Knoten und erklärt die Folgen für Rendering.
web.dev — Optimize Largest Contentful Paint — Google web.dev
Zeigt, wie Render-Blockaden und große Dokumente LCP verschlechtern.
Pagebuilder-Ablösung — Modern Stack
Vorgehen und Ergebnisse unserer Ablösungen von Elementor und Divi.

Häufige Fragen

Kann ich den Pagebuilder behalten?

Technisch ja. Wenn Ladezeit, mobile Bedienung und KI-Lesbarkeit aber zählen, ist das meist die teurere Entscheidung: Du bezahlst dauerhaft mit Performance, auch wenn der Umbau einmalig wäre.

Was passiert mit meinem Design?

Wir übernehmen Layout-Absicht, Farben, Typografie und Inhalte — nicht den Wust aus Shortcodes und Wrapper-Elementen. Das Ergebnis sieht vertraut aus und ist deutlich schlanker.

Sind Gutenberg-Blöcke auch ein Pagebuilder?

Der WordPress-Block-Editor ist leichter, kann aber mit Zusatz-Plugins ebenfalls aufblähen. Entscheidend ist die Menge an Markup, die am Ende im Dokument landet — nicht der Name des Werkzeugs.

Weiterlesen

WordPress-Migration
WordPress-, Elementor- und Divi-Webseiten auf modernen Web-Stack migrieren — ohne Plugin-Wartung, mit Übernahme bestehender Inhalte. Ab 500 €.
Pagebuilder-Ablösung
Warum Elementor, Divi & Co. Performance und GEO behindern — und wie Migration Inhalte behält, aber sauberes Markup schafft.
Webseite-Modernisierung
Was Webseite-Modernisierung bei Modern Stack bedeutet: bestehende WordPress- und Baukasten-Webseiten auf einen modernen Web-Stack bringen — Inhalte behalten, Technik erneuern, bereit für Google und KI-Suche.
WordPress
WordPress ist ein quelloffenes Content-Management-System auf Basis von PHP und MySQL/MariaDB, das laut W3Techs einen großen Teil aller Webseiten antreibt. Der Funktionsumfang entsteht über Themes, Plugins und oft Pagebuilder — und genau dieser Ballast bestimmt Performance und KI-Tauglichkeit.
Extrahierbarkeit
Extrahierbarkeit beschreibt, wie zuverlässig sich Fakten aus einer Webseite herauslösen lassen — durch Menschen, Crawler und KI-Modelle. Sauberes HTML, klare Überschriften und eigenständige Antwortabschnitte erhöhen sie; Layout-Ballast und JavaScript-Hüllen senken sie.
Elementor
Elementor ist ein WordPress-Pagebuilder, mit dem du Seiten per Drag-and-drop aufbaust. Der Komfort kostet oft Performance: tief verschachteltes HTML, viel CSS und JavaScript, schwächere Core Web Vitals und schwer extrahierbare Inhalte.
Divi
Divi ist das Theme und der visuelle Pagebuilder von Elegant Themes für WordPress. Inhalte werden in Modulen zusammengebaut und liegen häufig als Shortcodes in der Datenbank. Wie bei Elementor: bequem im Aufbau, schwergewichtig im Betrieb.