Etch – der neue, andere PageBuilder für WordPress

Nur kurz etwas Geschichte: die Entwicklung von WordPress

Grob gesagt ist die Entwicklung von WordPress in vier Abschnitten verlaufen:

WordPress Phase 1: Frühphase (2003–2010)

WordPress ist ein reines Blogging-System, Themes und Plugins mischen fröhlich Funktion und Design. Es gibt keine klaren Standards, aber Blogger und auch Entwickler werden auf WordPress aufmerksam.

Ich setze WordPress übrigens seit 2010 – Version 3 – ein … damals sah es so aus:

WordPress Phase 2: WordPress wird zum CMS (2011–2018)

WordPress wird durch Custom Post Types erweiterbar, Layout und Funktion werden durch Standards und Theme-Review Richtlinien besser getrennt. Es entstehen die ersten Plugin-Ökosysteme (WooCommerce, Yoast SEO, ACF usw.).

In dieser Phase war der mittlerweile veraltete “Classic Editor” das Tool der Wahl.

WordPress Phase 3: Visuelle Pagebuilder (2019–2024)

Divi und Elementor erlauben erstmalig die Layoutkontrolle und Texteingabe direkt am Frontend, Gutenberg wird sinnvoll benutzbar, Full Site Editing entwickelt sich.

Dies ist die Hochphase der anfängerfreundlichen Pagebuilder.

Trotzdem gibt es technische Limitierungen, die insbesondere Profis stören und eine professionelle Entwicklung mit WordPress erschweren.

WordPress Phase 4: WordPress als Plattform (ab 2025)

Neue Pagebuilder wie Etch gehen einen radikal neuen Ansatz. Sie verzichten auf Altlasten und ermöglichen so die Verwendung von modernen HTML/CSS-Funktionen, produzieren sauberen Code, stehen der Barrierefreiheit nicht im Weg (wie alte Ära 3-Pagebuilder).

Komponenten und “atomare Elemente” erlauben die Entkopplung von Design und Daten.

Dieser Abschnitt in der Entwicklung wurde von Etch eingeläutet, einen Pagebuilder der sehr vieles anders macht und das WordPress Ökosystem langfristig positiv verändern hat. Denn: alle anderen modernen Pagebuilder (Bricks 2, Divi 5, Elementor 4, Oxygen 6) setzen auf die selben Funktionen.

Etch ist nicht “noch ein Pagebuilder”!

Divi, Elementor, Bricks & Co wurden entwickelt, um Webdesign und Webentwicklung für Menschen zugänglich zu machen, die keinerlei Erfahrung mit Webdesign haben.

Dies bedeutet, dass die Komplexität, die eine Website hat (Responsive Design, Variablen, Architektur, Komponenten, Barrierefreiheit …) hinter einfachen Benutzerinterfaces versteckt wurde.

Als Nicht-Entwickler kann ich mit diesen Pagebuildern sehr einfach eine ansehnliche Website zusammenklicken, ohne zu verstehen, was CSS-Variablen sind, wie Vererbung bei CSS funktioniert und warum ein negativer Margin keine gute Idee ist, um Inhalte an die richtige Stelle zu schieben … denn:

WordPress Pagebuilder sind für Hilfsarbeiter!

Kevin Geary nennt diese Nicht-Entwickler “Laypeople”, Hilfsarbeiter.

Und das trifft es perfekt. Denn sie verstehen nicht, dass aktuelle Pagebuilder

• schlechten, langsamen Code erzeugen,
• viele Designs nicht oder nur mit viel Mühe erlauben,
• eine schlechte Architektur haben und erzwingen,
• schlecht wartbar und nicht barrierefrei sind sowie
• dich als Entwickler einschränken und begrenzen.

Etch hingegen erlaubt dir den Zugang zu einem professionellen Webentwicklungs-Prozess, fordert dich auf zu lernen und dich weiterzuentwickeln und steht dir an keiner Stelle im Weg.

Der ausgegebene Code ist zu 100 % anpassbar und hält sich an Web-Standards. Aber: wenn du nicht möchtest, dann musst du nicht einmal mit Code arbeiten.

Etch ermächtigt dich, anstatt dich einzuschränken!

Das ist der fundamental andere Ansatz von Etch.

Anstatt dir ein Interface beizubringen, das du genau für einen Pagebuilder (oder auch Webflow) verwenden kannst, lernst du mit Etch Schritt für Schritt richtiges, echtes Webdesign.

Etch ist für Menschen, die entweder wissen, was sie tun ODER die lernen wollen.

Die Dokumentation von Etch ist ein anschauliches Beispiel. Denn obwohl Etch sehr jung ist, merkt man anhand der Dokumentation jetzt schon, dass es das erklärte Ziel vom Entwicklungsteam ist Dinge so zu erklären, dass es einen langfristigen Lernerfolg und Wissensaufbau gibt.

Dieser andere Ansatz ermöglicht dir dein Wissen auch auf anderen Plattformen einzusetzen und nicht nur in dem User-Interface, welches ein Hersteller dir vorgibt.

Für wen ist Etch geeignet?

“Web-Hilfsarbeiter” (ich nenne sie gerne Klicki-Klicki’s) die ihr veraltetes Divi 4 Interface nicht hergeben möchten, landen leider mit ihren Tools in einer Sackgasse (bzw. sind es schon, wie Website Heroes wissen).

Etch eignet sich nämlich nur für all jene Webdesigner:innen, Webentwickler und Website-Besitzer:innen, die bereit sind zu lernen. Die sich mit der Technologie, die sie verwenden, beschäftigen wollen.

Dafür werden sie mit einer pfeilschnellen Website (auch ohne WP Rocket oder FlyingPress) belohnt, sowie dem befriedigenden Gefühl, dass sie die volle Kontrolle über ihre Website haben.

Das macht Etch besser (oder anders)

Der erstellte Code (CSS, HTML) ist immer zu 100 % bearbeitbar

In Etch werden CSS und HTML nicht vor dem Benutzer versteckt, sondern sind integraler Bestandteil des Entwicklungsprozesses. Jedes, wirklich jedes, HTML-Element kannst du anpassen und beliebig Klassen und Attribute hinzufügen.

Der HTML-Code synchronisiert sich mit dem Strukur-Panel und alles, was du dort siehst, kannst du bearbeiten. Es gibt keine (null!) versteckten Wrapper-Elemente, nicht einmal bei Schleifen (Loops) oder Bedingungen (if’s), die übrigens integraler Bestandteil von Etch sind.

Der CSS-Code synchronisiert sich mit dem Styling-Panel. Das Panel hat noch keine Unterstützung für eine gewisse CSS-Funktion? Schreib sie einfach direkt dort, wo du bist, ins CSS-Panel.

Wichtig: du kannst die HTML und CSS-Panels verwenden (was ich dir empfehlen würde), du musst aber nicht. Es ist vollkommen legitim, mit dem Struktur- und Styling-Panels zu arbeiten und nie den Code anzusehen.

Etch ist an keiner Stelle im Weg

Etch legt besonderen Wert darauf, dass die Basis-Etch-Stylings (für Sections, Container, Flex-Div und ein paar andere) nicht im Weg sind und du sie einfach und jederzeit überschreiben kannst.

Dazu verwendet Etch CSS-Selektoren mit der Spezifität 0, dh. du kannst sie ohne !important einfach überschreiben. (Für Nerds: es wird :where(…) verwendet).

Wenn du jemals mit dem CSS von Elementor oder Divi gekämpft hast und deine Einstellungen trotzdem nicht übernommen wurden, dann wirst du dies zu schätzen wissen.

Strikter Fokus auf Atomare Elemente

Etch fokussiert zu 100 % auf atomare Elemente. Es gibt standardmäßig relativ wenige Elemente:

• Ein <div>-Element in 3 Ausprägungen: Section, Container, Div; diese unterscheiden sich nur durch andere Standard-Einstellungen für das display-Attribut.
• Überschrift, Text, Link
• Bild, iframe, (inline) SVG
• Loop, If

Aus dieser handvoll atomarer Elementen lässt sich jede (!) beliebige Website aufbauen. Mehr ist nicht notwendig. Alle weiteren “Widgets”, die von anderen Pagebuildern kennst (z.B. Slider, Kundenstimmen, Flip-Boxen, Menü-Elemente, Popups ….), werden aus diesen Elementen in sogenannte Komponenten zusammengefasst (siehe nächster Punkt).

Übrigens, auch Elementor Editor 4 und Bricks 2 setzen auf diese atomaren Elemente und werden zukünftig auf dieses Konzept setzen:

Denn anders ist es langfristig nicht möglich, schnelle Websites zu erstellen und den Entwicklern vollen Zugriff auf jeden Aspekt der Entwicklung zu geben, wie 2025 viele Entwickler im Zuge des European Accessibility Acts leidvoll erfahren mussten.

Die Erstellung von Komponenten ist super einfach

Bei Legacy-Pagebuildern war es fast unmöglich (Divi 4) bis schwierig (Elementor 3, Bricks 1) eigene Komponenten zu erstellen. Es war immer der Umweg über eigenen PHP-Code notwendig, um eigene Widgets zu erstellen.

Etch (und auch Elementor 4 sowie Bricks 2) unterstützen Komponenten direkt im Editor. Es ist damit sehr, sehr einfach eigene “Widgets” zu erstellen. Etwa Hero-Abschnitte, Slider, die Anzeige von Blog-Beiträgen usw. ist damit direkt im Editor möglich.

Komponenten sind unabdingbar in der modernen Webentwicklung:

• Du kannst Elemente wiederverwenden – seitenübergreifend.
• Du kannst Elemente an einer Stelle zentral anpassen.
• Durch die Kapselung wird die Komplexität verringert.

Über Komponenten im Webdesign wird es bald einen eigenen Artikel geben. Melde dich zum Newsletter an, um darüber informiert zu werden.

CSS Funktionen statt Umwegen

In der Phase 3 haben sich Pagebuilder weiterentwickelt und Schritt für Schritt globale Farben, globale Schriften und globale Stile eingeführt. In der Phase 4 führen diese Pagebuilder jetzt “Variablen” ein und verkaufen dies als neue Errungenschaft.

Alles Funktionen, die in CSS schon seit Jahren nativ vorhanden sind, einwandfrei funktionieren und für gutes, skalierendes Webdesign ohnehin notwendig sind.

Denn nichts ist lästiger, als wenn du eine Farb- oder Schriftänderung an gefühlt 1000 Stellen durchführen musst…

Etch setzt hier wie oben schon geschrieben zu 100 % auf vorhandene Web-Standards und kapselt diese Funktionen nicht hinter Benutzer-Interfaces wie Divi 5 und Elementor 4:

Container Queries statt Media Queries

Das Responsive Web ändert sich und 3 (oder auch 5) Breakpoints reichen oft nicht aus. Denn es gibt über 2.300 (!) verschiedene Gerätebreiten, wie soll man da nur mit 768px, 1024px und 1200px Breite zurechtkommen?

Auch Komponenten (siehe oben) verändern das Responsive Design, wie du es vermutlich kennst. Eine Komponente muss unabhängig von der Bildschirmbreite funktionieren – sondern perfekt in dem Platz, der ihr auf der Website zugewiesen wurde:

In diesem Beispiel handelt es sich um eine Komponente, die Blog-Beiträge darstellt und je nach verfügbarem Platz die Anordnung ändert. Dieser neue Ansatz erfordert ein Umdenken, ist aber die Zukunft des Webs, wo du wiederverwendbare Komponenten erstellst und nicht die Maus zu Tode klickst.

Etch bietet keine üblichen Breakpoints an, sondern möchte, dass du Container Queries verwendest. Media Queries solltest du nur mehr verwenden, wenn es absolut notwendig ist (z.B. bei Popups, Overlays, Off-Canvas).

Über Container Queries im Webdesign wird es bald einen eigenen Artikel geben. Melde dich zum Newsletter an, um darüber informiert zu werden.

Weitere Vorteile von Etch

Etch bietet für dich in der Entwicklung noch weitere Vorteile:

• Der Etch Editor ist schnell! Dank Svelte lädt und reagiert das User Interface sofort, alle anderen Pagebuilder sehen sehr alt dagegen aus.
• Die mit Etch erstellen Websites sind schnell! Denn Etch hat keine Legacy Altlasten und erzeugt keinerlei unnötigen Code. Der PageSpeed-Wert wird es dir danken, auch ohne Performance-Plugin.
• Konsequenter Fokus auf Entwicklereffizienz. Wer schon einmal Kevin Geary live auf YouTube gesehen hat, weiß, was ich meine. In Etch klickst du niemals umsonst durch ein Menü und hast sinnvolle Shortcuts um möglichst rasch an dein Ziel zu gelangen.
• Etch hat keine Altlasten und kann daher neue, moderne Wege gehen. Die Architektur setzt auf Geschwindigkeit und offene Lösungen – ein großer Unterschied im Vergleich zu bestehenden Pagebuildern.
• Alle Daten werden mit dem Block Editor (Gutenberg) synchronisiert und nativ als Gutenberg-Blöcke gespeichert. Das bedeutet, dass deine Daten nicht irgendwo in der WordPress-Datenbank vergraben werden, sondern du auf WordPress Standards setzt.
• Digital Gravy, die Firma hinter Etch, ist bekannt für perfekten, raschen Support und tiefes technisches Wissen. Definitiv ein Partner, auf den du dich verlassen kannst.

Nachteile von Etch

Einige Nachteile möchte ich dir nicht verschweigen:

• Die Lernkurve von Etch ist steiler als bei anderen Pagebuildern, die für Hilfsarbeiter ohne Web-Kenntnisse geschaffen wurden. Dafür lernst du Wissen, das dir langfristig weiterhilft, ein erfolgreicher Web-Professional zu werden.
• Der Grundansatz von Etch ist anders (Container Queries, Komponenten, Atomic Elements), sodass du umdenken und umlernen musst, wenn du einen anderen Pagebuilder gewohnt bist.
• Etch ist noch sehr neu, das heißt einige der Funktionen die in Elementor, Divi oder Bricks jahrelange gereift sind, sind schlicht bisher nicht vorhanden. Es gibt eine öffentliche Liste mit den Prioritäten, die aktuell umgesetzt werden – und Digital Gravy ist erstaunlich schnell in der Umsetzung …
• Integrationen mit anderen Tools und Plugins, wie z.B. WooCommerce, Formular-Plugins oder Ähnliches, sind erst in Arbeit.

Etch vs. andere Pagebuilder

Durch Etch ist Bewegung in den Pagebuilder-Markt gekommen:

• Divi arbeitet Jahre an Version 5, die mittlerweile erschienen ist.
• Elementor wurde mit dem Elementor Editor v4 ebenso komplett umgekrempelt.
• Bricks hat mit Version 2 einen großen Schritt vorwärtsgemacht.

Diese neuen Versionen unterstützen ebenso die oben genannten Funktionen, setzen diese aber anders um und kämpfen natürlich mit der lieben Rückwärtskompatibilität …. hier hat Etch den Luxus, darauf keine Rücksicht nehmen zu müssen (und: durch den klaren Fokus auf den CSS-Standard wird dies auch kein Problem werden).

Ich werfe hier die “alten” Versionen dieser Pagebuilder (und vor allem wirklich veraltete Legacy-Pagebuilder wie WPBakery, Enfold und Co) in einen Hut und vergleiche diese mit Etch:

Alte Pagebuilder	Etch
Black Box. Du kannst den Code nicht sehen oder verändern.	Du siehst den Code (wenn du willst), kannst ihn ändern und exportieren. Du kontrollierst alles!
Du bist an den Pagebuilder gebunden und hast keine Möglichkeit zu wechseln, ohne die Website komplett (!) neu aufzubauen.	Alle Daten werden als Gutenberg-Blöcke gespeichert, wenn du den Builder wechselst bleiben deine Blöcke erhalten.
Als Webentwickler: deine Kund:innen verstehen die Editoren nicht, zerstören dein Design und haben eine sehr steile Lernkurve.	Kund:innen können das einfache Interface vom Block-Editor (Gutenberg) verwenden sowie deine vorgefertigten Komponenten.
Das Design wird irgendwo gespeichert. Du hast keine Möglichkeit es zu exportieren, zu teilen, anders zu verwenden.	Die Entwicklung erfolgt in Komponenten, die sich einfach teilen und auf anderen Websites (auch nicht-WordPress!) verwenden lassen.
Statische Elemente erfordern, dass du jedem Element extra Stile zuordnest. Durch globale Farben, Schriften und neuerdings “Klassen” wird es etwas besser, aber …	Echte Komponenten, Loops und Vorlagen, die sich ohne Seiteneffekte wiederverwenden lassen. Und: bedingte Logik!
Verschiedenste Stellen um Custom Post Types, Abfragen (Loops), Medien usw. zu verwalten.	Der gesamte Workflow inklusive Medien, Custom Post Types, Loops… findet in Etch statt.

Durch die jahrzehntelange Erfahrung des Teams hinter Etch ist der Arbeitsablauf für Profis in Agenturen angepasst, gleichzeitig werden Anfänger (die lernen wollen!) aber sanft an aktuelle Standards der Web-Entwicklung herangeführt.

Als langjähriger WordPress-Programmierer kann ich nur sagen: der neue Ansatz von Etch ist großartig!

Werden andere Pagebuilder die Funktionen von Etch nachbauen?

Wie ich oben schon geschrieben habe, haben alle anderen großen und modernen Page Builder mittlerweile die selben Funktionen wie z.B. Atomic Elements, Variablen, Komponenten und Klassen. Grund hierfür ist, dass die Hersteller gesehen haben, dass sich z.B. barrierefreie Websites ohne Zugriff auf den HTML-Code nicht umsetzen lassen und Agenturen scharenweise nach anpassbaren, flexiblen Lösungen gesucht haben.

Bestehende Page-Bilder sind allerdings in dem Dilemma, dass sie als Zielgruppe großteils “Hilfsarbeiter” haben und natürlich nicht beliebig den Code oder das User-Interface ändern können, ohne bestehende Websites zu beeinflussen. Sie sitzen also in der Legacy-Falle.

Das sehe ich als den starken Vorteil von Etch, der gerade ohne Rückwärtskompatibilität den Markt aufräumt und WordPress Entwicklung auf eine neue Ebene hebt. Es bleibt auf jeden Fall spannend.

Solltest du Etch für deine Website verwenden?

Die kurze Antwort: ja, unbedingt!

Aktuell würde ich aber mit Etch nicht unbedingt einen großen WooCommerce-Shop umsetzen, sondern mich auf „kleinere“, einfache Projekte konzentrieren. (Sieh das „kleiner“ bitte in Relation: Etch ist seit Version 1.0.0 schon für große Content-Websites geeignet und stabil!).

Wenn du sehr in der Vergangenheit lebst und unbedingt bei Elementor oder deinem bestehenden Pagebuilder bleiben willst, schau dir Etch trotzdem an. Du wirst sehr, sehr viel über Webentwicklung lernen, wenn du deine eigene oder eine Übungswebsite mit Etch aufbaust. Website Heroes sind hier ganz klar im Vorteil, wir hatten schon mehrere Workshops zu Etch und sind immer am Puls der Zeit.

Ich finde ja, dass Etch das ist, was Gutenberg hätte sein sollen.

Nämlich mehr als nur ein (schlechter) Block-Editor ohne Live-Frontend-Preview. Sondern ein komplettes Neudenken von WordPress und dem Userinterface.

Die Zukunft von WordPress

Wenn ich einen Blick in die Glaskugel wagen darf (oder mir etwas vom Universum wünschen), dann denke ich, dass Etch dazu führt, dass WordPress professioneller aufgestellt sein wird. In ein paar Jahren wird es hoffentlich ganz normal sein, dass Webentwicklung nur mehr in Komponenten erfolgt und auch Kunden nur mehr diese Komponenten verwenden.

Weiteres werden Code und Design vom Inhalt getrennt sein. Der Code wird in einer Versionsverwaltung abgelegt und dank der Komponenten bedeutet ein Redesign nicht mehr eine komplette Neuentwicklung einer Website.

Wie siehst du das? Wohin führt die Zukunft von WordPress, was hältst du von Etch? Hinterlasse mir gerne einen Kommentar.

Weitere Fragen zu Etch