HTML to Elementor
Hilfe

Verwandeln Sie HTML-Seiten in Elementor-fertigen Inhalt

Dieses Tool wandelt bestehende HTML-Seiten in Inhalt um, den Sie in Elementor einfügen oder als Vorlagendatei zum Import herunterladen können. Alles läuft in Ihrem Browser.

Schnellstart

Öffnen Sie das Tool, legen Sie Ihr HTML ab, wählen Sie eine Methode und klicken Sie auf Umwandeln.

  1. Tool öffnenNutzen Sie „Tool öffnen“ in der Navigation.
  2. HTML hinzufügenLegen Sie eine .html/.htm-Datei ab oder fügen Sie HTML direkt ein.
  3. Methode wählenWählen Sie hochgenau, um das Aussehen zu behalten, oder native Komponenten, um in Elementor weiterzubearbeiten.
  4. KonvertierenKlicken Sie auf Umwandeln, und das Tool erzeugt Elementor-fertigen Inhalt.
  5. Nach ElementorDirekt einfügen oder die Vorlagendatei herunterladen und in der Bibliothek importieren.

Hochgenauer Modus

Behält das ursprüngliche Aussehen; ideal, um eine Seite vollständig zu übernehmen.

  • Gut für Detailseiten, Landingpages und komplexe Layouts.
  • Kommt der Originalseite am nächsten.
  • Nachteil: Viel Inhalt sitzt in einem Block, daher ist die Bearbeitung je Element schwächer.

Native-Komponenten-Modus

Zerlegt die Seite in Elementor-Überschriften, -Text, -Bilder, -Buttons und -Container.

  • Gut, wenn Sie Inhalt und Gestaltung nach dem Import weiter anpassen.
  • Überschriften, Text, Bilder und Buttons lassen sich leichter einzeln bearbeiten.
  • Sehr komplexe Animationen oder Drittanbieter-Effekte können manuelle Anpassungen erfordern.

So wählen Sie native Einstellungen

Diese Optionen beeinflussen, wie leicht die Bearbeitung nach dem Import ist.

OptionBedeutungEmpfehlung
Überschriften-TagsSteuert die H1/H2/H3-Ebenen.Für eine ganze Seite automatisch anordnen, um eine unordentliche Überschriftenreihenfolge zu vermeiden.
BilderOriginale behalten oder leere Bildplätze erstellen.Wenn Sie Bilder erneut hochladen, sind Platzhalter praktischer.
Medien-URLsBehandelt unvollständige, temporäre oder Inline-Bild-URLs.Die sichere Standardoption reduziert fehlgeschlagene oder fehlende Bilder.
SymboleAn Elementor-Symbole angleichen oder das ursprüngliche Aussehen behalten.Verwenden Sie im Quellcode Font-Awesome-Klassen – sie werden als bearbeitbare Icon-Bibliothek-Icons importiert.
Farben & SchriftenDas Original behalten oder der Zielseite folgen.Um zur neuen Website zu passen, folgen Sie der Zielseite.
Nur GerüstBehält Struktur und Abstände, ohne Inhalt einzufüllen.Gut für komplexe Seiten: das Gerüst bauen, dann füllen.
Erweitertes MappingPrüfen Sie, in welche Komponente jeder Block umgewandelt wird.Gut, wenn Sie jeden Block selbst entscheiden möchten.
StrukturübersichtZeigen Sie den Komponentenbaum neben der Seite an und fahren Sie zum Hervorheben darüber.Exportieren Sie nur einen Block oder schließen Sie unerwünschte Teile aus.

Methode A: Einfügen

Schnellster Weg in die aktuelle Elementor-Seite.

  1. Klicken Sie auf „Elementor-Daten kopieren“.
  2. Öffnen Sie die Elementor-Bearbeitungsseite.
  3. Rechtsklick auf einen leeren Bereich und „Von anderer Website einfügen“ wählen.
  4. Prüfen Sie nach dem Einfügen Bilder, Symbole, Abstände und Mobilansicht.

Methode B: Vorlagendatei

Speichern und später aus der Elementor-Bibliothek importieren.

  1. Klicken Sie auf „JSON-Vorlage herunterladen“.
  2. Öffnen Sie die Elementor-Vorlagenbibliothek.
  3. Wählen Sie Importieren und laden Sie die heruntergeladene Datei hoch.
  4. In die Seite einfügen, dann Bilder ersetzen und feinjustieren.

Vor dem Start gut zu wissen

Das Tool zielt auf sichere Importe, doch HTML- und Elementor-Seiten unterscheiden sich, sodass komplexe Seiten dennoch geprüft werden sollten.

  • Aus Sicherheitsgründen werden Skripte, gefährliche Links, externe Ressourcen und Formularübermittlungen bereinigt.
  • Beibehaltene Styles gelten nur für den importierten Inhalt, sodass sie andere Bereiche der Zielseite nicht beeinflussen.
  • Unvollständige, Inline- oder temporäre Bild-URLs werden standardmäßig zu Platzhaltern, um fehlgeschlagene Importe zu vermeiden.
  • Galerien und Karussells mit nicht importierbaren Bildern werden aufgeteilt, um keine Bilder zu verlieren.
  • Menüs, Produkte und Beitragslisten hängen von den Daten der Zielseite ab und müssen meist in Elementor neu ausgewählt werden.
  • Beginnen Sie bei sehr komplexen Seiten mit hochgenau; für einfaches Bearbeiten probieren Sie nativ oder nur das Gerüst.