Ich sage dir direkt, was mich jahrelang genervt hat. Nicht die großen Dinge. Nicht die Strategie, nicht das Konzept, nicht die KI-Integration. Sondern eine kleine, wiederkehrende Frickelei, die sich in meinem Workflow wie ein Stein im Schuh angefühlt hat: HTML-Widgets in Elementor bearbeiten.
Klingt nach einer Kleinigkeit. Ist es auch. Aber Kleinigkeiten, die sich täglich wiederholen, werden irgendwann Mittelgroßigkeiten.
Das Problem, das du vielleicht kennst
Ich baue viele Dinge in Elementor. Animierte Widgets, custom Ticker, TTS-Player, CTA-Buttons mit eigenem Verhalten. Fast alles davon landet als HTML-Snippet in einem HTML-Widget. Das ist der ehrlichste Weg, weil du damit vollständige Kontrolle über Code und Verhalten hast, ohne ein Plugin für jede Kleinigkeit zu brauchen.
Das Problem beginnt, wenn du diese Snippets bearbeiten willst.
Du öffnest Elementor. Du navigierst zu der Seite. Du suchst das richtige Widget in der manchmal chaotischen Seitenstruktur. Du klickst drauf. Der Elementor-Panel öffnet sich. Du siehst den eingebauten ACE-Editor mit dem HTML-Code, der bei komplexen Snippets schnell 200, 300, manchmal über 500 Zeilen hat. CSS ist darin eingebettet, direkt im <style>-Block. Alles in einem Topf.
Und dann fängst du an zu suchen. Du scrollst. Du tippst deinen Edit. Du speicherst. Du schaust nach, ob es stimmt. Und irgendwo zwischen dem dritten Tab-Wechsel und dem fünften Mal, dass du mit der Maus im Panel-Editor eine Zeile zu weit gescrollt hast, denkst du: „Das muss besser gehen.“
Das war mein Alltag. Seit Jahren.
Warum ich kein Plugin gefunden habe, das das löst
Ich habe gesucht. Natürlich. Es gibt Plugins, die den Elementor-Workflow erweitern, Plugins die Custom Code verwalten, Plugins die Snippets als Shortcodes ausliefern. Aber keines davon macht das, was ich wirklich wollte: einen ordentlichen, vollständigen Code-Editor direkt im Elementor-Kontext öffnen. Ohne Umweg über ein separates Interface. Ohne dass ich das Widget irgendwo auslagern oder neu strukturieren muss.
Das ist der Punkt, an dem es interessant wird: wenn die Lösung nicht existiert, baust du sie selbst.
Elementor Code Editor: was das Plugin tut
Das Plugin ist ein einziger, einfacher Eingriff in den Elementor-Editor. Wenn du ein HTML-Widget anklickst, erscheint im Panel ein Button: „Code Editor öffnen“. Du klickst darauf, ein Modal öffnet sich, und du hast einen vollständigen Editor vor dir.
Drei Tabs. Das ist das Herzstück.
Der erste Tab heißt HTML. Er enthält den reinen HTML-Code deines Snippets, ohne die CSS-Blöcke, die normalerweise oben oder unten im Snippet sitzen. Der zweite Tab heißt CSS. Er enthält automatisch den Inhalt aller <style>-Blöcke, die im Snippet stecken. Kein manuelles Rauskopieren. Kein Suchen. Der dritte Tab heißt Preview und zeigt dir, wie das Snippet aktuell aussieht, direkt im Modal, ohne Elementor speichern zu müssen.
Was das konkret bedeutet: du arbeitest erstmals mit getrennten Ebenen. HTML ist HTML. CSS ist CSS. Wenn du fertig bist, klickst du „Apply“ und der Editor fügt alles wieder zusammen, schreibt es zurück ins Widget und markiert die Seite als geändert. Elementors normaler Speicher-Button übernimmt von dort.
Der Editor selbst ist CodeMirror 5, mit Syntax-Highlighting im htmlmixed-Modus für HTML und im CSS-Modus für Stylesheets. Du bekommst Zeilennummern, Bracket-Matching, Auto-Close-Tags, Code Folding, einen Kommentar-Shortcut über Strg+Slash und eine Suche über Strg+F. Das Dracula-Theme ist voreingestellt, weil es auf dunklem Hintergrund einfach besser lesbar ist als jede Alternative. In der Footer-Zeile des Editors stehen Zeile, Spalte und die aktuelle Dateigröße des Snippets.
Es gibt auch einen Copy-Button pro Tab. Wenn du den HTML- oder CSS-Code einfach in ein anderes Tool exportieren willst, ein Klick, und es ist in der Zwischenablage.
Was dieses Plugin nicht kann, und das ist Absicht
Es gibt keine Snippet-Bibliothek. Keine Cloud-Sync. Keine Teamfunktionen. Keine Versionsverwaltung.
Das war eine bewusste Entscheidung. Ich wollte ein Plugin, das genau eine Sache macht, und zwar richtig. Wer Snippet-Verwaltung braucht, hat andere Werkzeuge dafür. WPCode ist gut. ACF macht vieles möglich. Für das, was ich täglich tue, reicht ein ordentlicher Editor im richtigen Moment.
Das Plugin hat keinen Frontend-Footprint. Es lädt seine Assets ausschließlich im Elementor-Editor-Kontext. Kein JavaScript, kein CSS auf der öffentlichen Seite. Der einzige Overhead auf dem Backend sind die CodeMirror-Skripte, die über die Cloudflare CDN geladen werden.
Warum ich es verschenke
Kurze Antwort: weil ich den Aufwand für ein seriöses kommerzielles Plugin nicht rechtfertige.
Ein Plugin, das ich verkaufe, braucht Lizenzinfrastruktur, Support, eine Update-Strategie und Dokumentation, die auch ohne mich verständlich ist. Dieser Aufwand steht für ein Nischen-Tool, das einen spezifischen Workflow löst, in keinem vernünftigen Verhältnis zu einem Preis, der unter zehn Euro liegen müsste. Ich baue lieber etwas, das funktioniert, und stelle es bereit.
Dazu kommt ein technischer Realismus: das Plugin hängt an der internen JavaScript-API von Elementor. Elementor 4.x hat mehrere interne APIs verändert, das habe ich beim Bauen selbst gemerkt. setFlagEditorChange() ist deprecated. Der ACE-Editor sitzt in einem anderen DOM-Container als noch in Version 3.x. Die Instanz liegt nicht auf window.ace, sondern auf element.env.editor. Das sind Details, die ich beim Bauen durch echte Tests herausgefunden habe.
Was das für die Wartung bedeutet: ich schaue mir Updates an, wenn sie kommen. Wenn Elementor etwas Grundlegendes ändert, passe ich das Plugin an. Wenn es so fundamental bricht, dass eine Anpassung nicht mehr sinnvoll ist, sage ich das auch. Das ist meine ehrliche Aussage zur Maintenance.
Installation und Voraussetzungen
Das Plugin setzt Elementor Pro voraus. Der Haken, über den der Editor aktiviert wird, gehört zur Pro-API und ist in der freien Version nicht verfügbar.
Die Installation ist unkompliziert. ZIP herunterladen, im WordPress-Backend unter „Plugins > Installieren > ZIP hochladen“ einspielen, aktivieren. Danach öffnest du eine beliebige Seite im Elementor-Editor, klickst auf ein HTML-Widget, und der „Code Editor“-Button erscheint im Panel.
Getestet mit Elementor Pro 4.x, WordPress 6.9.x, PHP 7.4 und höher.
Den Download-Link findest du am Ende dieses Artikels. Kein E-Mail-Opt-in, kein Formular. Direkt.
Ein Hinweis für Leute, die viele HTML-Widgets bauen
Wenn du wie ich viele Custom-Snippets in Elementor einsetzt, zahlt sich eine Konvention aus: trenne dein CSS strukturell vom HTML, schon bevor du das Plugin nutzt. CSS oben in einem <style>-Block, HTML danach. Das Plugin extrahiert nach diesem Muster. Wenn dein CSS fragmentiert über das gesamte Snippet verteilt ist, funktioniert die Extraktion zwar, aber das Ergebnis im CSS-Tab ist weniger aufgeräumt.
Das ist kein Bug, sondern eine Konsequenz davon, wie <style>-Tags geparsed werden.
Häufige Fragen zu Elementor Code Editor
Funktioniert das Plugin auch ohne Elementor Pro?
Nein. Der Hook panel/open_editor/widget/html, über den der Editor ausgelöst wird, ist Teil der Elementor-Pro-API. Eine Free-Version-kompatible Alternative gibt es aktuell nicht.
Werden meine Änderungen automatisch gespeichert?
Nein. „Apply“ schreibt die Änderungen zurück ins Elementor-Widget und aktiviert Elementors Speicher-Button. Danach musst du wie gewohnt in Elementor speichern oder veröffentlichen.
Kann ich das Plugin auf mehreren Seiten gleichzeitig nutzen?
Ja. Das Plugin ist global aktiv, sobald du im Elementor-Editor bist, egal auf welcher Seite.
Was passiert, wenn Elementor in einer neuen Version die interne API ändert?
Dann kann das Plugin brechen. Ich beobachte das und passe es an, wenn es notwendig ist. Die technische Abhängigkeit ist dokumentiert und mir bewusst.
Das Plugin
Link klicken, herunterladen, installieren. Vielleicht hilft es dir genauso wie mir:
