So wandeln Sie eine Elementor-Seite in reines HTML und CSS um

Eine mit Elementor gebaute Seite wird bei jedem Aufruf von WordPress und PHP zusammengesetzt, doch was im Browser ankommt, ist gewöhnliches HTML, CSS und JavaScript. Genau deshalb ist eine statische Kopie überhaupt möglich: Sie behalten die Ausgabe und lassen die Maschinerie weg, die sie erzeugt hat. Man macht das, um eine fertige Landingpage überall hosten zu können, um keine WordPress-Installation mehr für eine Website pflegen zu müssen, die sich nie ändert, oder um eine schwere Seite schneller laden zu lassen.

Elementor hat dafür keinen Button. Sein eigener Export erzeugt eine Template-Datei im JSON-Format, die zum erneuten Import in Elementor gedacht ist, nicht HTML, das Sie hosten können. Die Arbeit geschieht deshalb in drei Schritten: die gerenderte Seite speichern, das CSS auf das reduzieren, was sie tatsächlich nutzt, und die Teile ersetzen, die von WordPress abhingen.

Was den Umzug übersteht und was nicht

Besteht die Seite vor allem aus den ersten beiden Zeilen, ist eine statische Kopie ein leichter Gewinn. Lebt sie von Formularen, Shop-Listen oder einem Blog-Feed, lassen Sie sie in WordPress und machen Sie sie stattdessen dort schneller.

Schritt 1: die gerenderte Seite speichern

Melden Sie sich zuerst bei WordPress ab oder öffnen Sie die Seite in einem privaten Fenster. Ein angemeldeter Besuch fügt dem HTML die Admin-Leiste und ihre Styles hinzu, und beides wollen Sie nicht in der Kopie haben.

Eine Seite: aus dem Browser speichern

1. Öffnen Sie die Seite in Chrome, abgemeldet.
2. Drücken Sie Strg+S (Cmd+S auf dem Mac) und wählen Sie Webpage, Complete (Webseite, vollständig).
3. Sie erhalten eine HTML-Datei und daneben einen Ordner mit den Bildern, Stylesheets und Skripten, die die Seite geladen hat.

Eine ganze Website: ein Plugin für statischen Export verwenden

Bei mehr als einer Handvoll Seiten crawlt ein Plugin für statische Websites wie Simply Static die WordPress-Website und schreibt jede Seite mit ihren Assets in einen Ordner oder eine ZIP-Datei. Es schreibt außerdem die internen Links um, was von Hand mühsam ist. Prüfen Sie die Ausgabe trotzdem Seite für Seite: Plugins können Dateien übersehen, die nur JavaScript anfordert.

Schritt 2: das CSS auf das kürzen, was die Seite nutzt

Eine typische Elementor-Seite lädt das Stylesheet des Themes, das Frontend-CSS von Elementor, eine CSS-Datei pro Widget-Typ, eine generierte Datei für die Seite selbst und oft noch eine oder zwei Schriftdateien. Die meisten dieser Regeln gestalten Widgets, die gar nicht auf der Seite sind. Am zuverlässigsten finden Sie die genutzten, indem Sie Chrome sie aufzeichnen lassen.

1. Öffnen Sie die Live-Seite, abgemeldet, und öffnen Sie die DevTools.
2. Öffnen Sie das Menü mit den drei Punkten, dann More tools (Weitere Tools), dann Coverage (Abdeckung), und klicken Sie dort auf die Schaltfläche zum Neuladen.
3. Benutzen Sie die Seite: Öffnen Sie das mobile Menü, klicken Sie sich durch Tabs und Akkordeons und ziehen Sie das Fenster auf Ihre Smartphone- und Tablet-Breiten.
4. Klicken Sie im Coverage-Panel auf Export (Exportieren) und speichern Sie die JSON-Datei.
5. Ziehen Sie diese Datei auf die Seite Coverage-JSON zu CSS und klicken Sie auf Genutztes CSS extrahieren.
6. Speichern Sie das Ergebnis als ein Stylesheet, ersetzen Sie die Tags <link rel="stylesheet"> der Seite durch einen einzigen Link darauf und behalten Sie die Schriftdateien, auf die es verweist.

Das Tool Unbenutztes CSS entfernen schreibt jede Regel zurück in ihren eigenen @media-Block, und das ist hier entscheidend: Elementor legt seine Tablet- und Mobil-Regeln in Media Queries ab, und ein Tool, das diese verliert, lässt das mobile Layout auch auf dem Desktop greifen. Außerdem behält es @font-face und @keyframes vollständig.

Arbeiten Sie lieber mit den gespeicherten Dateien, nimmt der Tab HTML + CSS desselben Tools stattdessen das HTML und die Stylesheets entgegen. Elementor und seine Add-ons fügen nach dem Laden der Seite einige Klassen per JavaScript hinzu. Tragen Sie deshalb deren Präfixe unter Immer behalten ein, zum Beispiel /^elementor-/ und /^e-/, und vergleichen Sie das Ergebnis mit der Originalseite, bevor Sie ihm vertrauen.

Schritt 3: ersetzen, was WordPress brauchte

Eingangsanimationen und versteckte Widgets

Ein Widget mit Eingangsanimation trägt die Klasse elementor-invisible, und das JavaScript von Elementor entfernt sie, sobald das Widget in den sichtbaren Bereich scrollt. In einer Kopie ohne dieses Skript verschwindet die Klasse nie, und das Widget bleibt unsichtbar. Behalten Sie entweder die Frontend-Skripte von Elementor, oder entfernen Sie elementor-invisible aus dem HTML und lassen Sie die Widgets ohne Animation erscheinen.

Formulare

Ein Elementor-Formular sendet seine Daten an WordPress, das nicht mehr da ist. Ersetzen Sie es durch einen Formulardienst, der ein einfaches HTML-Formular annimmt, oder durch einen einfachen Link, der eine E-Mail öffnet.

Links und Überbleibsel

• Prüfen Sie jeden internen Link: WordPress-Adressen wie /about/ brauchen einen passenden Ordner mit einer index.html oder eine Umschreibung auf dem neuen Host.
• Entfernen Sie die WordPress-Skripte, die die Seite nicht mehr braucht, etwa das Emoji-Skript, und die ?ver=-Nummern in Dateinamen, falls Sie Dateien umbenennen.
• Behalten Sie die srcset-Bilder, auf die das HTML verweist, sonst laden Smartphones das Bild in voller Größe.

Prüfen, bevor Sie umstellen

1. Öffnen Sie die statische Kopie und das Original nebeneinander in Desktop-, Tablet- und Smartphone-Breite.
2. Öffnen Sie jedes Menü, jeden Tab und jedes Akkordeon und scrollen Sie durch die ganze Seite, um versteckte Widgets zu finden.
3. Lassen Sie beide durch einen Geschwindigkeitstest laufen und vergleichen Sie die Menge des geladenen CSS.
4. Behalten Sie die WordPress-Website und die vollständigen CSS-Dateien, bis die statische Kopie eine Weile live ist.