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,leveldei titoli, ecc.) sui nodi della IR. - Legge il CSS collegato e inline, incluse le regole
@media— i breakpoint vengono catturati indesignTokens.breakpointsdella 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
styleinline — 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.