Jedes Konvertierungswerkzeug hat Grenzen. Wer sie im Voraus kennt, macht aus einer frustrierenden Überraschung eine geplante Fünf-Minuten-Aufgabe.
Skripte und Interaktivität
Alle script-Tags werden entfernt. Das ist eine Sicherheitsentscheidung – beliebiges JavaScript per Einfügen in Ihre Website zu importieren wäre gefährlich und würde im Editor ohnehin nicht zuverlässig funktionieren. Alles, was von eigenem JS gesteuert wird (Slider, Tabs, Zähler, Akkordeons), kommt als statisches Markup an.
So gehen Sie vor: Bauen Sie die Interaktion mit dem passenden Elementor-Widget nach. Tabs, Akkordeons, Karussells, Zähler und Fortschrittsbalken gibt es alle nativ – und sie sind besser wartbar als importierte Skripte.
Formulare
Die Absende-Aktion und -Methode eines Formulars werden entfernt, die sichtbaren Felder bleiben erhalten. Ein Formular, das an irgendein Ziel sendet, ist eine Integration und kein Markup – die Zieladresse zu übernehmen würde die Daten Ihrer Besucher stillschweigend an einen fremden Server schicken.
So gehen Sie vor: Ordnen Sie es einem Elementor-Formular-Widget zu und konfigurieren Sie die Aktionen (E-Mail, Webhook, Integrationen) auf Ihrer eigenen Website.
Navigationsmenüs
Eine Navigation kann ein Nav-Menü-Widget erzeugen, aber das Widget muss auf ein echtes WordPress-Menü verweisen. Es gibt keine Möglichkeit, die Menüstruktur Ihrer Website aus dem Markup einer anderen Seite abzuleiten.
Pseudoelemente
Die Pseudoelemente ::before und ::after sind keine DOM-Knoten. Dekorative Formen, Anführungszeichen, Verlaufsüberlagerungen und Unterstreichungsakzente, die auf diese Weise gezeichnet werden, existieren schlicht nicht als Elemente und können nicht zu Widgets werden. Wenn nach der Konvertierung ein Designdetail fehlt, sollten Sie als Erstes Pseudoelemente in Verdacht haben.
Animationen, Übergänge und Sticky-Verhalten
Keyframe-Animationen, Scroll-Effekte, Übergänge und Sticky-Positionierung werden nicht übernommen. Elementor verfügt über eigene Bewegungseffekte und Sticky-Einstellungen, die ohnehin besser in den Editor integriert sind.
Einbettungen von Drittanbietern
Nur YouTube- und Vimeo-Iframes bleiben erhalten – alles andere wird entfernt, statt einen unbekannten Frame zu importieren. Auch object- und embed-Tags werden entfernt.
Hover- und Fokus-Zustände
Es kann nur der Ruhezustand eines Elements gelesen werden. Hover-Farben, Fokus-Ringe und aktive Zustände müssen in Elementor neu eingerichtet werden.
Base64-Bilder und lokale Pfade
Bilder als Data-URLs und relative Dateipfade können nicht zu Anhängen in der Mediathek werden. Deshalb werden sie zu leeren Bildplatzhaltern – mit dem ursprünglichen Alt-Text als Beschriftung, damit Sie wissen, welches Bild wohin gehört.
CSS-Custom-Properties kommen abgeflacht an
Wenn Ihre Quelle Design-Tokens verwendet – etwa --brand-500, --space-4 –, überleben die Variablen selbst nicht. Der Konverter liest berechnete Stile, und zum Zeitpunkt der Berechnung hat der Browser bereits jede var()-Referenz in einen konkreten Wert aufgelöst. Ein Button mit Hintergrund var(--brand-500) wird als die Farbe konvertiert, die diese Variable gerade enthielt – nicht als Verweis auf sie.
Hinterher sieht nichts falsch aus, und genau darin liegt die Tücke: Die Seite wird korrekt dargestellt, aber die Eigenschaft, die Ihr Designsystem wartbar gemacht hat, ist verschwunden. Ändern Sie später die Markenfarbe, bearbeiten Sie dreißig Widgets von Hand.
So gehen Sie vor: Bauen Sie die Token-Ebene auf Elementor-Seite neu auf. Definieren Sie vor dem Einfügen Ihre Palette unter „Globale Farben“ und Ihre Typografieskala unter „Globale Schriftarten“ und weisen Sie die importierten Widgets dann diesen globalen Werten zu. Das tun Sie nur einmal, und schon haben Sie wieder eine zentrale Quelle für diese Werte. Der Konverter hat genau dafür einen Modus Farben der Zielseite übernehmen und Globale Schriften der Zielseite übernehmen – er lässt Farben und Typografie bei den importierten Widgets weg, sodass sie Ihre globalen Elementor-Werte erben, statt fest codiert anzukommen.
Benannte Grid-Bereiche
Grid-Layouts werden über Spalten- und Abstandseinstellungen konvertiert: grid-template-columns wird auf einen Elementor-Grid-Container abgebildet, und Bruchteileinheiten bleiben erhalten. Was sich nicht übertragen lässt, ist grid-template-areas – die Syntax mit benannten Bereichen, bei der Sie das Layout als kleines ASCII-Bild zeichnen und jedem Kindelement einen Namen zuweisen.
Der Grid-Container von Elementor kennt keine Entsprechung zu benannten Bereichen. Ein so aufgebautes Layout verliert daher seine Platzierung, und die Kindelemente fallen in die normale Quellreihenfolge zurück. Das Ergebnis ist nicht kaputt, aber es ist auch nicht Ihr Layout.
So gehen Sie vor: Wenn Sie die Quelle kontrollieren, drücken Sie das Layout mit grid-template-columns plus expliziten Spannweiten statt mit benannten Bereichen aus. Wenn nicht, rechnen Sie damit, die Kindelemente in Elementor noch einmal neu platzieren zu müssen.
Fixierte Positionierung wird bewusst herabgestuft
Alles mit position: fixed wird bei der Konvertierung in position: absolute umgeschrieben, und der Sicherheitsbericht weist Sie darauf hin. Dies ist einer der wenigen Fälle, in denen das Werkzeug Ihr Design bewusst verändert, statt es zu reproduzieren.
Der Grund ist die Eingrenzung. Ein fixiertes Element wird am Browser-Viewport ausgerichtet, nicht an seinem Elternelement. Ein fixierter Header, eine Sticky-Cookie-Leiste oder eine schwebende Chat-Blase, die von einer fremden Seite importiert wurde, würde also aus dem Bereich ausbrechen, in den Sie sie eingefügt haben, und auf jeder Seite, die die Vorlage verwendet, über Ihrer gesamten Website schweben. Die Herabstufung auf absolute hält sie im importierten Block, wo Sie sie sehen und entscheiden können, was zu tun ist.
So gehen Sie vor: Wenn Sie das Element wirklich fixieren möchten, richten Sie es nach dem Import mit Elementors eigenen Sticky-Einstellungen ein. Diese kennen den Editor, die Admin-Leiste und Ihren Header – was eine reine CSS-Regel nicht tut.
Webfonts: Der Name reist mit, die Dateien nicht
Typografie wird als Werte konvertiert – Name der Schriftfamilie, Größe, Schriftstärke, Zeilenhöhe, Zeichenabstand – und landet in den Typografie-Einstellungen von Elementor. Die Schriftdateien sind eine andere Sache. Eine @font-face-Regel verweist auf woff2-Dateien, die auf der Quell-Website gehostet werden; nichts kopiert diese auf Ihren Server, und nichts registriert die Schriftfamilie bei WordPress.
Eine Überschrift, die von einer Seite mit selbst gehosteter Schrift konvertiert wurde, trägt also den korrekten Namen der Schriftfamilie und fällt auf das zurück, was Ihre Website tatsächlich hat. Meist sieht es ähnlich genug aus, dass Sie es erst beim direkten Vergleich bemerken.
So gehen Sie vor: Installieren Sie die Schrift zuerst auf Ihrer eigenen Website – über die benutzerdefinierten Schriftarten von Elementor, eine Google-Fonts-Auswahl oder Ihr Theme – und konvertieren Sie erst dann. Wenn die Schriftfamilie bereits verfügbar ist, stimmt die importierte Typografie sofort.
So erkennen Sie, an welche Grenze Sie gestoßen sind
Sie müssen nicht raten. Zwei Dinge in der Ergebnisansicht beantworten das direkt:
- Der Sicherheitsbericht listet auf, was entfernt oder umgeschrieben wurde – entfernte Skripte, bereinigte Formularaktionen, verworfene Einbettungen, das Umschreiben von fixed auf absolute, ausgelassene Base64-Bilder. Wenn ein Detail verschwunden ist, wird es hier normalerweise genannt.
- Die Strukturübersicht zeigt den Elementor-Baum neben einer Live-Vorschau, wobei sich beide beim Überfahren mit der Maus gegenseitig hervorheben. Alles, was als roter HTML-Widget-Block ankam, hatte keine native Entsprechung – fahren Sie mit der Maus darüber, und Sie sehen genau, welcher Teil der Seite es war.
Mit beidem wird aus der Frage „Warum sieht das anders aus?“ die Aussage „Genau dieses Element wurde auf genau diese Weise behandelt“ – und daraus wird eine Zwei-Minuten-Korrektur statt eines ganzen Nachmittags.
Das ehrliche Fazit
Struktur, Text, Bilder, Icons, Farben, Abstände und Typografie lassen sich gut konvertieren. Verhalten, Integrationen, alles, was nicht im DOM vorhanden ist, und alles, was von Dateien oder Daten auf dem Quellserver abhängt, dagegen nicht. Planen Sie einen kurzen Durchgang nach dem Import für Formulare, Menüs, Hover-Zustände, Animationen und Schriften ein, und der Prozess wird berechenbar statt überraschend.