Prima di modificare il canvas devi avere un sito e almeno una pagina nel progetto. La dashboard prepara i metadati (titolo, slug) che il builder usera per caricare la revisione corretta tramite API load.
Prerequisiti
- Account con accesso Web Builder.
- Permessi di modifica sul sito target.
Creare o selezionare il sito
Dalla area account apri la sezione siti/progetti e crea un nuovo sito oppure seleziona quello esistente. Assegna un nome leggibile per il team e uno slug URL stabile: sara la base del dominio pubblico o del sottodominio di preview.
Verifica che il piano e i permessi consentano la modifica delle pagine. Se il sito e appena creato, il builder puo aprirsi con pagina Home vuota: e normale avere selezionato il body (#builderPage) senza blocchi figli.
Aggiungere pagine al progetto
Ogni pagina ha titolo editor, slug e proprie revisioni. Crea Home per prima, poi pagine interne (Chi siamo, Contatti, Landing campagna). Slug corti e descrittivi aiutano SEO e menu.
Quando apri una pagina nel builder, il contesto globale (window.__BUILDER_CTX) contiene siteId, pageId e revisionId usati da save/load.
- Crea la pagina con titolo e slug.
- Apri la pagina nel Web Builder.
- Attendi il caricamento revisione (eventuale selezione body).
- Salva una prima struttura minima.
Guide correlate
Contesto nel Web Builder Martini
Il builder separa sempre due ambienti: la dashboard host (menu, inspector, navigatore, pannelli) e lo stage iframe dove vive la pagina editabile (#builderPage). Le modifiche visive che salvi riguardano HTML e CSS dello stage; la UI del builder non viene pubblicata sul sito live.
Ogni elemento editabile e un blocco .builder-el. Quando selezioni un blocco, la right-bar mostra le proprieta coerenti con il tipo: Layout, tipografia, background, effetti, interazioni e impostazioni (Settings). Se non vedi un controllo, verifica di aver selezionato il nodo corretto dal navigatore o dal canvas.
Il navigatore DOM replica la gerarchia dei blocchi: utile per rinominare nodi, spostare sezioni e individuare componenti (is-component + data-component-id). I componenti riusabili condividono la stessa definizione di libreria ma ogni istanza resta indipendente nel layout della pagina.
Verifica prima di chiudere la sessione
Prima di uscire dal builder esegui un Salva esplicito dopo blocchi di lavoro importanti. Il salvataggio crea una revisione con snapshot HTML/CSS; non assumere che ogni micro-modifica sia gia persistita se non hai visto conferma o toast di successo.
Se stai testando interazioni (data-mfr-panel, trigger click, FAQ), ricorda che in edit mode i runtime pubblici sono spenti: attiva Anteprima interazioni nello stage oppure usa la preview account / sito pubblicato per validare il comportamento reale.
Undo/redo copre spostamenti, inserimenti e molte modifiche stile; dopo operazioni massive (import componente, paste di sezioni) un reload della pagina builder puo riallineare navigatore, badge di selezione e inspector.
Coerenza responsive e pubblicazione
Le regole stile sono per viewport (desktop, tablet, mobile). Un layout corretto su desktop puo rompersi su mobile se non imposti override dedicati. Passa i tre breakpoint dalla top bar prima di considerare la pagina pronta.
Salvare nel builder non equivale a pubblicare: la bozza resta nel database editor finche non esegui publish della revisione corretta. Dopo la pubblicazione verifica il sito in navigazione anonima per escludere cache locale o CDN.
Per SEO e condivisibilita controlla titolo pagina, meta description e Open Graph dalla sezione dedicata; i valori finiscono nel render pubblico insieme al CSS della revisione pubblicata.
Stili, variabili e design system
Le classi generate (el-xxxxxxxx) e il motore stili tengono insieme tipografia, colori, spaziature e stati hover/focus per breakpoint. Le variabili catalogo (--bv-*) permettono di riusare palette e font tra pagine dello stesso sito.
Background multilayer (colore, immagine, gradiente, overlay, video) e effetti (ombre, transform, transition, cursor) si applicano dal pannello Stile; l'ordine dei layer in lista corrisponde all'ordine CSS finale.
Quando un valore non si aggiorna in canvas, controlla di non avere regole in conflitto su un breakpoint diverso o su un elemento figlio con override piu specifico.
Media, form e blocchi speciali
La libreria media centralizza immagini e file: sostituire un asset aggiorna i riferimenti nei blocchi che lo usano, ma verifica dimensioni e crop dopo sostituzioni su hero o card.
Liste FAQ, form, slide, dropdown e blocchi icona hanno pannelli Settings dedicati (spesso anche pannello flottante dal badge). Configura testi, voci, target e comportamento prima di pubblicare.
Per video esterni (es. YouTube) usa i controlli del blocco corrispondente; per video background negli strati Background rispetta autoplay e peso della pagina su mobile.
Interazioni e runtime pubblico
Gli trigger elemento (data-builder-triggers) e pagina (data-builder-page-triggers) convivono con overlay data-mfr-panel e accordion FAQ: sul sito live lo script builder-triggers-runtime.js deve precedere mfr-panel-runtime.js.
Configura sempre un target valido (id pannello esistente) e lo stato iniziale chiuso sul nodo panel, non sul trigger. In preview builder attiva l'anteprima interazioni per simulare click e animazioni di chiusura.
Se un pannello non si apre in produzione, verifica id duplicati, regole CSS con display:none !important residue e che la revisione pubblicata contenga gli attributi data-mfr-* attesi.
Contesto nel Web Builder Martini (approfondimento)
Il builder separa sempre due ambienti: la dashboard host (menu, inspector, navigatore, pannelli) e lo stage iframe dove vive la pagina editabile (#builderPage). Le modifiche visive che salvi riguardano HTML e CSS dello stage; la UI del builder non viene pubblicata sul sito live.
Ogni elemento editabile e un blocco .builder-el. Quando selezioni un blocco, la right-bar mostra le proprieta coerenti con il tipo: Layout, tipografia, background, effetti, interazioni e impostazioni (Settings). Se non vedi un controllo, verifica di aver selezionato il nodo corretto dal navigatore o dal canvas.
Il navigatore DOM replica la gerarchia dei blocchi: utile per rinominare nodi, spostare sezioni e individuare componenti (is-component + data-component-id). I componenti riusabili condividono la stessa definizione di libreria ma ogni istanza resta indipendente nel layout della pagina.
Verifica prima di chiudere la sessione (approfondimento)
Prima di uscire dal builder esegui un Salva esplicito dopo blocchi di lavoro importanti. Il salvataggio crea una revisione con snapshot HTML/CSS; non assumere che ogni micro-modifica sia gia persistita se non hai visto conferma o toast di successo.
Se stai testando interazioni (data-mfr-panel, trigger click, FAQ), ricorda che in edit mode i runtime pubblici sono spenti: attiva Anteprima interazioni nello stage oppure usa la preview account / sito pubblicato per validare il comportamento reale.
Undo/redo copre spostamenti, inserimenti e molte modifiche stile; dopo operazioni massive (import componente, paste di sezioni) un reload della pagina builder puo riallineare navigatore, badge di selezione e inspector.
Coerenza responsive e pubblicazione (approfondimento)
Le regole stile sono per viewport (desktop, tablet, mobile). Un layout corretto su desktop puo rompersi su mobile se non imposti override dedicati. Passa i tre breakpoint dalla top bar prima di considerare la pagina pronta.
Salvare nel builder non equivale a pubblicare: la bozza resta nel database editor finche non esegui publish della revisione corretta. Dopo la pubblicazione verifica il sito in navigazione anonima per escludere cache locale o CDN.
Per SEO e condivisibilita controlla titolo pagina, meta description e Open Graph dalla sezione dedicata; i valori finiscono nel render pubblico insieme al CSS della revisione pubblicata.
Stili, variabili e design system (approfondimento)
Le classi generate (el-xxxxxxxx) e il motore stili tengono insieme tipografia, colori, spaziature e stati hover/focus per breakpoint. Le variabili catalogo (--bv-*) permettono di riusare palette e font tra pagine dello stesso sito.
Background multilayer (colore, immagine, gradiente, overlay, video) e effetti (ombre, transform, transition, cursor) si applicano dal pannello Stile; l'ordine dei layer in lista corrisponde all'ordine CSS finale.
Quando un valore non si aggiorna in canvas, controlla di non avere regole in conflitto su un breakpoint diverso o su un elemento figlio con override piu specifico.