Host, iframe stage, right-bar e navigatore: come e organizzato il builder. Questa guida approfondisce il flusso nel Web Builder Martini con passi operativi, verifiche consigliate e riferimenti alle aree della UI coinvolte (canvas, inspector, navigatore).
Prerequisiti
- Accesso all'area Web Builder con permessi di modifica sul sito.
- Pagina aperta nel canvas (iframe) e ultima revisione caricata.
Due documenti
La UI del builder (menu, inspector, navigatore) vive nella finestra host. La pagina editabile e dentro l'iframe (#builderPage).
Nel Web Builder Martini questa operazione si riflette su HTML/CSS dello stage e, quando serve, su attributi di configurazione salvati nel snapshot (es. trigger, componenti, variabili).
Dopo ogni modifica strutturale significativa salva la pagina e ricarica se noti ritardi o stato incoerente tra navigatore, inspector e canvas.
Right-bar
Layout, tipografia, background, effetti e interazioni si configurano dall'inspector a destra, sincronizzato con l'elemento selezionato.
Nel Web Builder Martini questa operazione si riflette su HTML/CSS dello stage e, quando serve, su attributi di configurazione salvati nel snapshot (es. trigger, componenti, variabili).
Dopo ogni modifica strutturale significativa salva la pagina e ricarica se noti ritardi o stato incoerente tra navigatore, inspector e canvas.
Navigatore
L'albero DOM mostra la gerarchia blocchi. Utile per selezionare elementi annidati e riordinare la struttura.
Nel Web Builder Martini questa operazione si riflette su HTML/CSS dello stage e, quando serve, su attributi di configurazione salvati nel snapshot (es. trigger, componenti, variabili).
Dopo ogni modifica strutturale significativa salva la pagina e ricarica se noti ritardi o stato incoerente tra navigatore, inspector e canvas.
Suggerimenti
- Usa il navigatore DOM per selezionare nodi annidati quando il click sul canvas e impreciso.
- Passa desktop, tablet e mobile prima di pubblicare layout critici.
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.