Palette · Tela · Ispettore
Come Si Comporta la Tela Drag-and-Drop
La pagina iniziale mostra una finta schermata di drag-and-drop e passa oltre. Questa pagina è la meccanica dietro quel gesto: tre pannelli, cosa arriva in ciascuno, il movimento che posiziona un blocco sulla pagina, e cosa cambia una volta selezionato — come una modifica di stile resta legata a una sola larghezza di schermo, come si annulla un passaggio, e come il tour guidato e le impostazioni si inseriscono in tutto questo.
Tre pannelli, tre compiti
L'editor è organizzato con una palette su un lato, la tela al centro e un ispettore sull'altro lato, e questa disposizione richiede larghezza sufficiente per mostrare tutti e tre insieme: questo sito blocca la rotta sotto i 960 pixel e spiega il motivo invece di mostrare un layout che si sovrapporrebbe a se stesso. La palette è dove i blocchi esistono prima di finire sulla pagina; la tela è la pagina stessa, mostrata dal vivo; l'ispettore resta vuoto finché non si seleziona qualcosa sulla tela, momento in cui si riempie con i controlli propri di quell'elemento.
Sopra la tela c'è una barra degli strumenti, separata dagli altri due pannelli, con due interruttori che contano più di quanto la loro dimensione suggerisca: uno alterna tra modificare e un'anteprima della pagina come la vedrebbe chi visita il sito, e l'altro sceglie quale delle cinque larghezze di schermo sta mostrando la tela in quel momento. Il salvataggio automatico parte dalla stessa intestazione, quindi non c'è un passaggio di salvataggio separato tra posizionare un blocco e vederlo mantenuto.
Il gesto: trascinare dalla palette, rilasciare sulla tela
Il movimento centrale è un trascinamento diretto: si prende un blocco dalla palette e si rilascia sulla tela, dentro il contenitore che si trova sotto il puntore al momento del rilascio. Questo singolo gesto è il modo in cui ogni tipo di blocco arriva su una pagina; non esiste un menu di inserimento separato né un percorso documentato per aggiungerlo con un clic, quindi se si vuole il blocco sulla pagina, trascinarlo lì è la via.
Una volta che un blocco è sulla tela, altre due azioni si applicano a ciò che è attualmente selezionato: duplicarlo, che produce una copia accanto all'originale, ed eliminarlo, che lo rimuove. Riposizionare un blocco già presente si fa nello stesso modo in cui è stato aggiunto: trascinandolo. Il tour guidato di Builder42 dedica un passaggio proprio al trascinamento dalla palette alla tela, segno di quanto sia centrale questo movimento nell'intero flusso di lavoro, non un dettaglio secondario nascosto in un menu di impostazioni.
Selezionare un blocco apre l'ispettore, in tre tab
L'ispettore è dove un blocco selezionato smette di essere solo posizionato e comincia a essere configurato, ed è organizzato in tre tab: Contenuto, per il testo, l'immagine o altri dati che il blocco porta; Stile, per il suo aspetto visivo; e Interattività, per assegnargli un comportamento. Quale tab serve dipende da cosa si sta cambiando, ma il blocco resta selezionato mentre si passa dall'uno all'altro, quindi una modifica di contenuto e una di stile sullo stesso elemento distano un tab, non due visite separate alla tela.
Il tab Stile è dove vive il controllo per breakpoint, e merita una spiegazione a parte perché è facile sottovalutarlo: una modifica di stile fatta resta legata alla larghezza di schermo che la tela sta mostrando in quel momento, non si applica ovunque insieme. Un titolo che si rimpicciolisce con la tela impostata sulla larghezza mobile non cambia come appare quello stesso titolo alla larghezza desktop, a meno di passare il selettore di visualizzazione a desktop e ripetere lì la modifica. Assegnare un comportamento — un accordion, un modale, un effetto all'apparire durante lo scroll — è un'impostazione dentro il tab Interattività, non una sezione propria; cosa contiene quel catalogo di comportamenti è argomento della guida su come lavorare senza codice.
Cinque larghezze con un nome proprio, non una media query scritta a mano
Il selettore di visualizzazione nella barra degli strumenti nomina cinque larghezze invece di lasciare il numero alla memoria: mobile come base, poi mobile grande, tablet, laptop e desktop. Cambiare il selettore mostra di nuovo la tela a quella larghezza e limita a essa qualsiasi cosa si modifichi dopo, il che rende concreto il punto precedente sul tab Stile: cinque larghezze significano cinque insiemi indipendenti di modifiche per elemento, e nessuno viene scritto a mano come CSS.
La forma pratica di lavorare con questo è: scegliere la larghezza in cui qualcosa non sta bene, correggere quell'elemento preciso, e passare alla larghezza successiva solo se anche quella richiede una modifica. Un layout che sta già bene a quattro larghezze e male a una non richiede quattro modifiche ripetute: ne richiede esattamente una, alla larghezza in cui si rompe.
Annulla, ripeti, e i tab intorno alla tela
Ogni trascinamento, duplicazione, eliminazione e modifica di stile finisce in una cronologia che si può ripercorrere all'indietro con Ctrl o Cmd più Z, e di nuovo in avanti aggiungendo Maiusc alla stessa combinazione. Entrambe le scorciatoie si disattivano mentre il cursore è dentro un campo di testo, proprio perché un tasto normale usato durante la scrittura non riporti indietro per errore una modifica che si voleva mantenere.
Altri tre tab si trovano in un'area di impostazioni fuori dalla tela stessa: Livelli, per la struttura della pagina come albero invece che come superficie renderizzata; Pagine, per aggiungere, rinominare e passare tra le pagine di un sito multipagina; e Lingue, per le lingue di contenuto del sito. Tutti e tre fanno parte della stessa interfaccia a tre pannelli descritta sopra, raggiungibili senza uscire dall'editor. Un tour guidato accompagna chi entra per la prima volta attraverso tutto questo impianto: l'intestazione e il salvataggio automatico, l'interruttore modifica/anteprima, il selettore di visualizzazione, annulla e ripeti, la palette, la tela, duplica ed elimina, i tre tab dell'ispettore e i tab di impostazioni per livelli, pagine e lingue. Il tour definisce 18 passaggi in totale; due scompaiono in questo montaggio incorporato, quelli legati a un menu che questo sito non mostra, e ne restano 16 che si possono davvero percorrere qui.
Quattro modelli densi abbastanza da valer la pena smontare
Una pagina di agenzia creativa, uno studio di architettura, una pagina team e un negozio di abbigliamento: scelti perché ognuno impila blocchi distinti e breakpoint a sufficienza da mostrare come sono davvero selezionare, trascinare e ristilizzare un elemento tra tanti.
Le domande che arrivano prima
Come si posiziona davvero un blocco sulla pagina?
Si trascina dalla palette e si rilascia sulla tela, dentro il contenitore che si trova sotto il puntore al momento del rilascio. Questo trascinamento è il modo in cui ogni tipo di blocco arriva su una pagina; non esiste un passaggio di inserimento separato.
Se ridimensiono un titolo per il mobile, cambia anche sul desktop?
No. Una modifica di stile fatta nell'ispettore si applica solo alla larghezza di schermo che la tela sta mostrando in quel momento. Passando il selettore di visualizzazione a un'altra larghezza, lo stesso elemento può avere lì un'impostazione diversa.
A cosa servono i tre tab dell'ispettore?
Contenuto conserva il testo, l'immagine o altri dati che un blocco porta. Stile conserva il suo aspetto visivo, limitato per breakpoint. Interattività è dove si assegna un comportamento al blocco, come un accordion o un modale.
Si può spostare un blocco dopo averlo già posizionato?
Sì, trascinandolo di nuovo: riposizionare usa lo stesso gesto di posizionarlo la prima volta. Duplicare ed eliminare il blocco selezionato sono azioni separate, disponibili una volta che è selezionato.
L'annulla torna indietro più di un passaggio?
Sì. Ctrl o Cmd più Z torna indietro attraverso una cronologia di modifiche, e aggiungere Maiusc ripete un passaggio in avanti. Entrambe le scorciatoie vengono ignorate mentre si scrive in un campo di testo.
Perché l'editor blocca le finestre piccole invece di rimpicciolire il layout?
La palette, la tela e l'ispettore stanno fianco a fianco e richiedono almeno 960 pixel di larghezza per restare utilizzabili; sotto quella soglia si sovrapporrebbero, quindi questo sito mostra una spiegazione invece di un layout a tre pannelli rotto.