Elementor erkennen: Page-Builder im Quellcode identifizieren

Elementor ist einer der meistverbreiteten Page-Builder für WordPress. Sein visueller Editor macht ihn bei Agenturen und Einzelpersonen beliebt, die komplexe Layouts ohne Programmierkenntnisse erstellen möchten. Gleichzeitig hinterlässt Elementor im Quellcode einer Website eine Reihe charakteristischer Spuren, anhand derer sich sein Einsatz zuverlässig feststellen lässt.

CSS-Klassen als primäres Erkennungsmerkmal

Der deutlichste Hinweis auf Elementor sind die CSS-Klassen, die das Plugin jedem seiner Elemente zuweist. Diese Klassen folgen einem konsistenten Namensschema:

• elementor auf dem äußersten Container einer Elementor-Seite
• elementor-section für jede Zeile bzw. jeden Abschnitt
• elementor-column für Spalten innerhalb einer Sektion
• elementor-widget für individuelle Inhaltsbausteine
• elementor-widget-text-editor für Textelemente
• elementor-widget-image für Bildwidgets
• elementor-widget-heading für Überschriften

Diese Klassen erscheinen im DOM jeder mit Elementor erstellten Seite. Sie lassen sich durch einfaches Betrachten des Seitenquellcodes verifizieren. Der Analyzer nutzt dieses Muster als eines der Hauptsignale bei der Plugin-Erkennung.

Asset-Pfade im Quellcode

Elementor lädt seine Stile und Skripte aus einem festen Pfad innerhalb des WordPress-Plugin-Verzeichnisses:

• wp-content/plugins/elementor/assets/css/frontend.min.css
• wp-content/plugins/elementor/assets/js/frontend.min.js
• wp-content/plugins/elementor/assets/lib/

Wer im Netzwerk-Tab der Browser-Entwicklertools nach Anfragen aus dem Pfad wp-content/plugins/elementor/ sucht, findet bei einer Elementor-Installation sofort Treffer. Diese Pfade werden standardmäßig verwendet und erfordern Eingriffe in den Server-Code, um sie zu verändern.

Elementor Pro ergänzt diesen Pfad um ein zusätzliches Verzeichnis:

• wp-content/plugins/elementor-pro/assets/

Das Vorhandensein des elementor-pro-Verzeichnisses ist ein eindeutiger Hinweis darauf, dass die kostenpflichtige Pro-Version im Einsatz ist.

Inline-CSS und dynamische Stylesheets

Ein besonderes Merkmal von Elementor ist die Generierung von dynamischem CSS pro Seite. Elementor berechnet für jedes Element individuelle Styles auf Basis der Editor-Einstellungen und schreibt diese entweder als Inline-Styles in das HTML oder als separate CSS-Dateien:

• Inline: <style>/* elementor - v3.x.x */
• Datei: wp-content/uploads/elementor/css/post-123.css

Der Kommentar /* elementor - v3.x.x */ am Beginn eines Inline-Style-Blocks ist ein sehr spezifisches Signal, das auch die eingesetzte Version preisgibt. Im Verzeichnis wp-content/uploads/elementor/css/ werden pro Seite eigene CSS-Dateien abgelegt, die die Seitennummer als Teil des Dateinamens tragen.

JavaScript-Objekte im globalen Scope

Elementor injiziert beim Seitenaufbau JavaScript-Objekte in den globalen Scope des Browsers:

• window.elementorFrontendConfig
• window.elementorProConfig (nur bei der Pro-Version)

Diese Objekte enthalten Konfigurationsdaten für das Frontend-Rendering. Sie erscheinen im Quellcode als <script>-Block mit einer JSON-Zuweisung und sind ohne jede Verkleidung sichtbar. Ein kurzer Blick in die JavaScript-Konsole des Browsers reicht, um das Vorhandensein dieser Variablen zu prüfen.

Elementor-Datenattribute im DOM

Neben den CSS-Klassen nutzt Elementor data-*-Attribute zur Steuerung von Animationen und Interaktionen:

• data-elementor-type="wp-page" oder data-elementor-type="wp-post" auf dem Hauptcontainer
• data-elementor-id="123" mit der Seiten-ID
• data-settings='\{...\}' für Widget-spezifische Konfiguration

Das Attribut data-elementor-type auf dem äußersten Container ist ein eindeutiger Identifier und erscheint auf jeder Elementor-Seite, unabhängig davon, welche Widgets verwendet werden.

Unterschied zwischen Elementor-Seiten und Nicht-Elementor-Seiten

Nicht jede Seite einer WordPress-Website muss mit Elementor gebaut sein. Wenn ein Theme Elementor nur für bestimmte Seiten verwendet, fehlen die genannten Signale auf Seiten, die mit dem Gutenberg-Editor oder einem anderen Werkzeug erstellt wurden.

Das zeigt sich in der Praxis: Die Startseite einer Website kann mit Elementor gebaut sein, während einzelne Blogbeiträge im klassischen WordPress-Editor verfasst wurden. Wer eine vollständige Analyse einer Website durchführen möchte, sollte mehrere Seiten prüfen, um ein genaues Bild zu bekommen.

Erkennung mit dem Analyzer

Der Analyzer wertet für die analysierte URL alle relevanten Signale aus: CSS-Klassen, Asset-Pfade, Inline-Kommentare, Datenattribute und globale JavaScript-Objekte. Das Ergebnis unterscheidet zwischen der kostenlosen Version und der Pro-Version von Elementor, sofern die entsprechenden Pfade und Klassenmerkmale vorhanden sind.

Für eine manuelle Überprüfung genügt es, den Seitenquelltext nach dem Ausdruck elementor zu durchsuchen. Wer Zugriff auf die Browser-Entwicklertools hat, kann alternativ im DOM-Inspector nach data-elementor-type suchen oder im Netzwerk-Tab die Anfragen nach plugins/elementor filtern.