HTML/CSS-Designs konvertieren

HTML/CSS ist als Quellformat in jedem Plan verfügbar, einschließlich Free. Dieser Leitfaden erklärt, wie die Konvertierung funktioniert und wie du deine Quelldateien für den besten Fidelity Score strukturierst.

Wie der Parser funktioniert

Tapetos HTML-Parser durchläuft das DOM und konvertiert es in die IR (Zwischendarstellung), die von jedem Generator gemeinsam genutzt wird. Dabei:

• Bildet er Standardattribute (src, alt, href, Überschriften-level usw.) auf IR-Knoten ab.
• Liest er verlinktes und inline eingebettetes CSS, einschließlich @media-Regeln — Breakpoints werden in designTokens.breakpoints der IR erfasst, damit responsives Verhalten die Konvertierung überlebt.
• Behandelt er Überschriften, Absätze und Bilder als Blattknoten — sie werden niemals zu Containern, selbst wenn dein Markup andere Elemente in sie verschachtelt.

Den URL-Cloner verwenden

Statt Dateien hochzuladen, kannst du Tapeto auf eine öffentliche URL verweisen. Der URL-Cloner lädt das HTML der Seite und ihre externen Stylesheets herunter und speist sie in dieselbe Pipeline wie ein hochgeladenes HTML/CSS-Projekt ein. Externes CSS wird mit MIME-Type-Prüfungen, einer maximalen Größenbegrenzung und einem Timeout abgerufen, damit eine langsame oder unerwartete Ressource deine Konvertierung nicht ins Stocken bringt.

Tipps für einen höheren Fidelity Score

• Halte Stile in CSS, nicht in inline style-Attributen — der Parser liest Stylesheets zuverlässiger als verstreute Inline-Stile.
• Verwende semantisches HTML (<h1>–<h6>, <p>, <img>, <a>) — semantische Tags werden direkt auf IR-Knotentypen abgebildet; generischer <div>-Wirrwarr verliert Struktur.
• Verlasse dich nicht auf JavaScript-gerenderte Inhalte — Tapeto parst das HTML, wie es ausgeliefert wird, nicht nach dem clientseitigen Rendering.
• Prüfe Bildpfade — relative Pfade werden gegenüber der Quelle aufgelöst; defekte Pfade erscheinen im Ergebnis als fehlende Bilder.

Einen Builder wählen

Sobald die IR erstellt ist, wählst du den Ziel-Builder für die Konvertierung (gutenberg, elementor, oxygen oder divi, abhängig von deinem Plan). Dieselbe IR kann in mehrere Builder konvertiert werden, ohne die Quelle erneut hochzuladen — siehe API-Referenz, falls du dies skriptest.

Nächster Schritt

Sobald du eine abgeschlossene Konvertierung hast, siehe Ergebnisse exportieren, um sie herunterzuladen oder an WordPress zu pushen.