HTML dei modelli
Modifica un modello come HTML, porta HTML da altrove, e gli attributi data che segnano campi, blocchi ed elementi.
Qualsiasi HTML è un modello
Qualsiasi HTML e CSS è un modello: stili in linea, qualsiasi struttura, immagini e caratteri remoti. Un salvataggio toglie solo ciò che potrebbe eseguire codice, come script, pagine incorporate, moduli, gestori di eventi e link javascript:, e dice cosa ha tolto.
Modifica l’HTML
- Codice, accanto a Design nella barra in alto, mostra il modello come HTML accanto a un’anteprima dal vivo; ciò che scrivi si salva man mano.
- Copia HTML nel menu ⋯ copia l’intero modello: modificalo dove vuoi, anche con un altro strumento, e incollalo di nuovo in Codice.
- HTML su un elemento selezionato modifica solo quell’elemento.
- L’assistente della dashboard e i client MCP leggono e scrivono lo stesso HTML.
Attributi
L’editor dispone ciò che riconosce, e l’agente compila ciò che è segnato con gli attributi data-* qui sotto. I nomi usano lettere minuscole, cifre e trattini bassi, iniziano con una lettera, massimo 40 caratteri.
| Attributo | Uso |
|---|---|
data-slot, data-type | Un campo, unico nel suo blocco; text (predefinito), markdown, number, money, date, enum, url (su un <a>: ne riempie il link), rows. |
data-row, data-field | Dentro rows: il primo data-row si ripete per ogni voce, gli altri sono esempi; data-field contiene ogni valore. |
data-if | Una parte facoltativa. |
data-layout | Un blocco, figlio diretto del body; data-min, data-max, data-position (first, last). |
data-required, data-default, data-hint | Valore obbligatorio, valore di ripiego, l’istruzione per l’agente. |
data-max-chars, data-max-words, data-min, data-max | Lunghezza del testo; limiti dei numeri; dimensione degli elenchi. |
data-options, data-currency, data-format | Scelte (separate da barra verticale); codice ISO 4217; integer, decimal, percent oppure short, medium, long. |
data-sample | Numero, importo o data di esempio; false nasconde una parte data-if. |
data-frame | Un elemento di una pagina o di un blocco: text (predefinito), image, shape, table, columns (con data-columns 2 o 3 contenitori), spacer, rule. Solo le colonne si annidano. |
data-canvas | Non in un’email. Una pagina fissa, su un blocco o sul body senza blocchi. I suoi elementi si posizionano con left, top, width, height, z-index nello style in linea (px per le slide, mm per l’A4), accanto a qualsiasi altro CSS. |
data-width, data-align, data-text-align, data-size | Pagine a scorrimento: full, two-thirds, half, third; left, center, right; testo da s a xxl. |
| Immagine e forma | Un <img> con data URL e data-fit (cover, contain); data-shape (rect, ellipse, triangle, line), data-color (accent, ink, muted, paper, soft, none) o background-color esadecimale in linea; spazio data-height (s, m, l). |
| Stili dei riquadri | data-bg su testo, tabella, colonne (accent, ink, muted, paper, soft); data-border (thin, medium, thick) e data-border-color (accent, ink, muted, rule); data-radius (0, sm, md, full). |
| Immagine da scegliere | Un <img> senza src, come <img class="logo" alt="" hidden> di un modello di partenza: si sceglie sulla pagina nell’editor; finché manca non si stampa nulla. |
| Intestazione e piè di pagina | <meta name="botchi-header"> o botchi-footer nella head: content è la riga ({page} e {pages} diventano il numero di pagina e il totale), data-align è left, center o right. Non in un’email. |
Regola — Script, iframe, form, gestori di eventi e link javascript: vengono tolti a ogni salvataggio. I campi compilano solo il contenuto degli elementi (un campo link ne compila l’indirizzo), mai altri attributi o CSS.