Conversione di design HTML/CSS

Come Tapeto analizza HTML e CSS trasformandoli in blocchi WordPress, e come ottenere i risultati più puliti.

HTML/CSS è disponibile come formato sorgente su ogni piano, incluso Free. Questa guida spiega come funziona la conversione e come strutturare i tuoi file sorgente per ottenere il miglior Fidelity Score.

Come funziona il parser

Il parser HTML di Tapeto scorre il DOM e lo convette nella IR (rappresentazione intermedia) condivisa da ogni generatore. Nel farlo:

  • Mappa gli attributi standard (src, alt, href, level dei titoli, ecc.) sui nodi della IR.
  • Legge il CSS collegato e inline, incluse le regole @media — i breakpoint vengono catturati in designTokens.breakpoints della IR, così il comportamento responsive sopravvive alla conversione.
  • Tratta titoli, paragrafi e immagini come nodi foglia — non vengono mai trasformati in contenitori, anche se il tuo markup annida altri elementi al loro interno.

Usare il Clonatore URL

Invece di caricare file, puoi indicare a Tapeto un URL pubblico. Il Clonatore URL scarica l’HTML della pagina e i suoi foglio di stile esterni e li invia alla stessa pipeline di un progetto HTML/CSS caricato. Il CSS esterno viene recuperato con controlli sul tipo MIME, un limite massimo di dimensione e un timeout, così una risorsa lenta o inattesa non blocca la tua conversione.

Consigli per un Fidelity Score più alto

  • Mantieni gli stili nel CSS, non in attributi style inline — il parser legge i foglio di stile in modo più affidabile rispetto a stili inline sparsi.
  • Usa HTML semantico (<h1><h6>, <p>, <img>, <a>) — i tag semantici si mappano direttamente sui tipi di nodo della IR; una zuppa di <div> generici perde la struttura.
  • Evita di affidarti a contenuti renderizzati via JavaScript — Tapeto analizza l’HTML come viene fornito, non dopo il rendering lato client.
  • Controlla i percorsi delle immagini — i percorsi relativi vengono risolti rispetto alla sorgente; i percorsi non funzionanti compaiono come immagini mancanti nel risultato.

Scegliere un builder

Una volta costruita la IR, scegli il builder di destinazione per la conversione (gutenberg, elementor, oxygen o divi, a seconda del tuo piano). La stessa IR può essere convertita in più builder senza ricaricare la sorgente — vedi Riferimento API se stai scriptando questo processo.

Passo successivo

Una volta ottenuta una conversione completata, vedi Esportare i risultati per scaricarla o inviarla a WordPress.