Editor Studio: progettare per punti di interruzione
Tempo di lettura: 5 min.
L'Editor Studio ti permette di personalizzare i siti per punto di interruzione, affinché abbiamo sempre un aspetto professionale. I punti di interruzione sono intervalli di dimensioni dello schermo, che rappresentano i possibili schermi e dispositivi che i visitatori tendono a utilizzare (es. tablet, mobile).
Il design che crei sul desktop si riflette sia su tablet che su mobile. Tuttavia, puoi creare alternative per adattare il design a schermi più piccoli. Clicca sull'icona di un punto di interruzione in alto per iniziare.
In questo articolo, scopri di più su:
Suggerimento:
Ogni punto di interruzione ha una dimensione adattabile (larghezza dello schermo) predefinita che puoi modificare in base alle tue esigenze.
Definire i punti di interruzione
L'Editor Studio viene fornito con 3 punti di interruzione integrati, che puoi personalizzare e ridefinire in qualsiasi momento:
- Desktop: 1001 px e oltre
- Tablet: 751 px - 1000 px
- Mobile: 320 px - 750 px
Puoi aggiungere fino a 3 punti di interruzione aggiuntivi per rendere il tuo design ancora più preciso per determinate dimensioni dello schermo.
Puoi definire i punti di interruzione separatamente per ogni pagina del sito e ogni schema globale. Ciò significa che uno schema globale e la pagina in cui si trova possono avere punti di interruzione completamente diversi.
Ad esempio, la pagina seguente ha 5 punti di interruzione definiti:
... Mentre l'intestazione globale di quella pagina ha 3 punti di interruzione definiti:
Design a cascata
L'Editor Studio utilizza un concetto a cascata quando si tratta di progettare per i punti di interruzione. Le modifiche apportate ai punti di interruzione più grandi vengono applicate ai punti di interruzione più piccoli, ma le modifiche sui punti di interruzione più piccoli non influiscono sui punti di interruzione più grandi.
Ad esempio, un tasto progettato per essere viola sul desktop, appare automaticamente viola anche su tablet e dispositivi mobile. Se modifichi il colore per i dispositivi mobile, il tasto rimane viola su tablet e desktop.
Nota:
Alcune modifiche si applicano a tutti i punti di interruzione, ad esempio quando sostituisci o elimini elementi. Scopri di più su queste modifiche nella sezione seguente.
Modifiche che si applicano a tutti i punti di interruzione
Alcuni tipi di azioni vengono applicate automaticamente a tutti i punti di interruzione e non possono essere personalizzate per un determinato viewport.
Modifiche dei dati
Modificando il contenuto di un elemento, di fatto si modificano i suoi dati. Ad esempio, la modifica del link di un elemento o dell'origine di un'immagine si applica a tutti i punti di interruzione.
Un altro esempio è quando sostituisci o elimini elementi dalla pagina, l'elemento viene sostituito/eliminato automaticamente su tutti i punti di interruzione.
Lo sapevi?
Puoi nascondere elementi da punti di interruzione specifici. Vai al punto di interruzione pertinente, clicca con il tasto destro del mouse sull'elemento e seleziona Non mostrare.
Modifiche strutturali
Modifiche alla posizione di un elemento nella gerarchia della pagina. Ad esempio, quando unisci gli elementi insieme in una pila o sposti un elemento in una cella, stai modificando la struttura della pagina e questo si riflette in tutti i punti di interruzione.
Creare alternative per i punti di interruzione
Hai un'alternativa quando apporti modifiche al design di un elemento su un punto di interruzione specifico. Ciò significa che non attinge più i valori di design dal punto di interruzione più grande sopra di esso, ma queste alternative influiscono solo sui punti di interruzione più piccoli.
Ci sono 2 tipi di alternative che puoi creare:
- Design: modifica le proprietà di un elemento, come la colorazione, il bordo e il carattere
- Layout: modifica la posizione e le dimensioni di un elemento, purché non si sposti su un elemento parent diverso
Suggerimento:
Gli elementi e le sezioni nell'Editor Studio hanno un comportamento responsivo. Questo controlla il modo in cui vengono ridimensionati sui punti di interruzione più piccoli, quindi non devi preoccuparti di impostare tutto manualmente.
Rimuovere le alternative di design su un punto di interruzione specifico
Puoi sempre ripristinare il design e il layout di un elemento alle sue proprietà sul punto di interruzione più grande.
Questo non influirà sulle proprietà dell'elemento nei punti di interruzione minori, ma solo nel punto di interruzione che contiene l'elemento per cui stai ripristinando il comportamento originale. Ad esempio, se stai rimuovendo le alternative su tablet, ciò non avrà effetto sui dispositivi mobile.
Per rimuovere le alternative di design su un punto di interruzione:
- Seleziona l'elemento pertinente
- Clicca sull'icona Altre azioni
- Clicca su Rimuovi alternative
Hai trovato utile questo articolo?
|