Livelli e canvas

L'editor ha tre colonne: a sinistra Livelli elenca ogni parte della pagina come un albero, al centro l'anteprima è la pagina stessa, a destra l'ispettore modifica ciò che hai selezionato. Qui vedi come trovare e selezionare una parte, spostarla, nasconderla a una certa larghezza, darle uno stile e disporre elementi liberamente su una tela.

Prima di iniziare #

• Ti serve il ruolo Editor di contenuti o superiore. Un Autore dei contenuti vede gli stessi pannelli ma può cambiare solo i contenuti; le schede Stili e Movimento gli spiegano che non sono di sua competenza.
• Premi ? in qualsiasi punto dell'editor (fuori da un campo di testo) per l'elenco Scorciatoie da tastiera. In tutta la pagina, ⌘ vale Ctrl su Windows e Linux.

Leggere il pannello Livelli #

Ogni riga è un elemento. Da sinistra: la freccia per chiudere o aprire (se contiene altri elementi), un'icona, il nome e fino a due etichette: il tag HTML (H2, SECTION) e il layout principale (grid 3, flex column).

• Il nome è quello che hai dato al livello; altrimenti le prime parole del testo, il nome del file di un'immagine o il tipo ("Box").
• L'etichetta Scollegato significa Gli stili propri di questo livello sostituiscono lo stile collegato: l'elemento non corrisponde più alla sua variante del design system. Per promuoverlo o ricollegarlo vedi Componenti e varianti.
• Filtra i livelli (Filtra per nome, testo, tag o layout) tiene le righe che corrispondono e quelle che le contengono. grid trova tutte le griglie; una parola trova il testo che la contiene.
• Comprimi tutto ed Espandi tutto chiudono o aprono l'intero albero.

Sopra l'albero, tre pulsanti scelgono quale albero mostrare: Intestazione, Pagina e Piè di pagina. Intestazione e piè di pagina sono comuni a tutte le pagine: una modifica lì cambia tutto il sito. Se fai clic su un elemento dell'intestazione nell'anteprima, Livelli apre da solo l'albero dell'intestazione.

Il menu dell'intestazione può aprirsi sotto la barra invece che sopra tutto lo schermo. Nell'albero dell'intestazione seleziona Finestra del menu e imposta Il pannello entra da su Sotto la barra. Il pannello si apre allora sotto la barra, largo quanto lo schermo; la barra resta visibile e il suo pulsante del menu diventa quello che lo chiude. Lo chiudono anche Esc o un clic fuori dal pannello. Il suo aspetto è la variante A tutto schermo di Menu laterale a scomparsa in Componenti e varianti: colore, opacità e sfocatura dello sfondo fanno il velo sotto il pannello, e uno sfondo del pannello trasparente lo lascia vedere. Un agente fa lo stesso con la prop from: "below-bar" sul nodo menu-dialog.

Selezionare #

Nell'anteprima:

In Livelli fai clic su una riga; Maiusc o ⌘ + clic aggiungono righe. La selezione principale ha un contorno blu pieno, le altre tratteggiato. Sotto l'anteprima, il percorso (Dove si trova la selezione) elenca i contenitori della selezione: fai clic su uno per selezionarlo.

Con un elemento selezionato, i tasti funzionano sia nell'anteprima sia nell'editor:

Spostare, copiare, raggruppare, eliminare #

1. Trascina una riga in Livelli. Il quarto superiore di una riga la rilascia prima, il quarto inferiore dopo, il centro dentro. Il punto di arrivo dice Rilascia qui oppure il motivo del rifiuto, per esempio Immagine non può contenere altri livelli. Rilascialo sopra o sotto.
2. Oppure usa i tasti sulla selezione:

Il menu … della riga (anche Maiusc F10 su una riga attiva, o il clic destro) contiene Copia, Incolla dopo, Duplica, Elimina, Rinomina e Crea componente…. Per rinominare fai doppio clic sulla riga o premi F2; Invio conferma, Esc annulla.

Bloccare e nascondere #

• Blocca, tra gli strumenti della riga, impedisce di modificare l'elemento dall'anteprima. Sblocca per tornare a cambiarlo.
• Gli occhi della riga, uno per ogni punto di interruzione del sito (con l'iniziale: B, S, M, L, X), nascondono l'elemento da quella larghezza in su: Nascondi in Tablet, Mostra in Tablet. Una riga nascosta appare attenuata quando l'anteprima è a una larghezza in cui l'elemento non si vede.

Dare uno stile alla selezione #

Apri la scheda Stili dell'ispettore.

1. Tema della sezione, in cima, sceglie il tema del sito in cui si disegnano l'elemento e tutto ciò che contiene, per esempio Chiaro o Scuro.
2. La barra degli ambiti decide dove vale una modifica:
   • Dimensione schermo: Si applica da Ogni larghezza, oppure Da Tablet · 768 px e gli altri punti di interruzione. Gli stili valgono da quella larghezza in su.
   • Stato: Al passaggio del mouse, Focus da tastiera, Durante il clic e gli stati propri dell'elemento; sotto Altro, Movimento ridotto e Senza hover.
   • Tema: Ogni tema o uno dei temi del sito.
   • Parte: L'intero elemento o una parte con nome di un componente, come il titolo. La riga sotto i selettori descrive l'ambito a parole, per esempio Tablet: da 768 px in su · Al passaggio del mouse.
3. Modifica le sezioni sotto: Layout, Posizione, Dimensioni, Spaziatura, Tipografia, Sfondi, Bordi, Effetti e le altre. I campi propongono i token del design system adatti; un campo scrive quando lo lasci o premi Invio, mai mentre digiti.
4. Su una sezione, Larghezza passa da Contenitore ad A tutta larghezza.
5. Nascosto in questo ambito nasconde l'elemento nell'ambito scelto. Azzera ambito toglie tutti i valori impostati lì.

Ogni campo dice da dove viene il suo valore: impostato qui, da un ambito più ampio, un mixin, cella del componente o predefinito. Un ambito più ampio sostituisce questo valore da 1440 px vuol dire che un punto di interruzione più largo imposta la stessa proprietà; il suo nome è un pulsante che ti ci porta.

Per riusare un elemento già impaginato, scegli Salva come preset… nella sua scheda Impostazioni. Lo ritrovi nel pannello Aggiungi, sotto Preset del sito.

Disporre liberamente su una tela #

Una tela (canvas) è un contenitore i cui elementi si dispongono per posizione e non uno dopo l'altro: possono sovrapporsi, ruotare e stare dove vuoi. Inseriscine una dal pannello Aggiungi con Collage libero o Collage sparso (Preset di layout). Poi, nell'anteprima:

1. Trascina un elemento per spostarlo, trascina le maniglie per ridimensionarlo, usa la maniglia di rotazione per girarlo.
2. Spostamenti e ridimensionamenti scattano a passi del 2,5 % della tela. Tieni premuto ⌥ (Alt) mentre trascini per disattivare lo scatto. La rotazione non scatta.
3. Fai clic su un elemento nell'anteprima per selezionarlo e dare la tastiera alla tela. Le frecce lo spostano del 2,5 %, Maiusc + freccia del 10 %, [ e ] lo rimpiccioliscono o lo ingrandiscono, R lo ruota di 1° (Maiusc R di 15°). ↑ e ↓ spostano anche la selezione all'elemento precedente o successivo, come altrove nell'editor, quindi il tasto dopo sposta quell'elemento: fai di nuovo clic sull'elemento prima di ogni spostamento in verticale, oppure trascinalo.

Le posizioni si salvano in percentuale al punto di interruzione che l'anteprima mostra: sul telefono puoi comporre la tela in un altro modo.

Cosa vedi #

• La selezione contornata nell'anteprima ed evidenziata in Livelli, con il suo nome nel titolo dell'ispettore.
• Le schede dell'ispettore Impostazioni, Stili e Movimento; in un sito multilingua, la scheda Traduci nella barra di sinistra.
• Un rilascio o un incolla rifiutato spiegato sotto la sua riga, con il pulsante Chiudi; non cambia nulla.

Errori comuni #

• Due elementi selezionati non si spostano insieme. Si spostano insieme solo elementi affiancati nello stesso contenitore: Seleziona elementi affiancati nello stesso contenitore, poi spostali.
• Un incolla finisce in un punto inatteso. L'incolla va dopo la selezione se quel punto accetta l'elemento, altrimenti nel punto più vicino che lo accetta. Da un altro sito non si incolla: immagini e componenti di quel sito qui non ci sono.
• Uno stile non fa niente. Rileggi la riga dell'ambito: forse stai modificando uno stato, un tema o una parte. Controlla anche Un ambito più ampio sostituisce questo valore.
• Nascosto non vuol dire eliminato. Un elemento nascosto a ogni larghezza c'è ancora e conta nella pagina; se non ti serve, eliminalo.
• Le modifiche all'intestazione valgono per tutto il sito. Prima di cambiare lo stile di quella che credi solo questa pagina, controlla che Livelli mostri Pagina.

Vedi anche #

• Costruire una pagina
• Componenti del sito
• Componenti e varianti
• Scene e ricette