Oltre a flex, il builder supporta layout grid con controlli dedicati nell'inspector e helper visivi nel canvas (drop zone) per inserire o spostare blocchi nelle celle.
Impostare display grid
Seleziona il container e dal pannello Layout imposta display grid. Definisci colonne e righe (o template tracks), gap e allineamento. Le regole sono per viewport: controlla tablet/mobile.
Grid editor e drop zone
Il modulo grid editor permette di aggiungere/rimuovere tracce in modo visuale. Le drop zone evidenziano dove un blocco puo essere rilasciato durante il drag and drop.
Evita annidamenti grid eccessivi: preferisci un container grid principale e flex interni per allineamenti semplici.
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.
Media, form e blocchi speciali (approfondimento)
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 (approfondimento)
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.