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.
Vai alla nostra Wix Studio Academy (contenuti in inglese) per dare un'occhiata a webinar, tutorial e corsi aggiuntivi su Wix Studio.
In questo articolo, scopri di più su:
Suggerimento:
Puoi impostare una dimensione di modifica (larghezza dello schermo) per ogni punto di interruzione su ogni pagina del sito del tuo cliente.
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:
Suggerimento:
Il punto di interruzione che vede un visitatore del sito dipende dalla larghezza del viewport. Ad esempio, un utente di iPad Pro (es. 1024 px di larghezza) vedrebbe il punto di interruzione del desktop (1001 px e oltre). Questo varia anche con la modalità verticale o orizzontale, poiché ogni modalità ha una larghezza dello schermo diversa che può rientrare in intervalli di punti di interruzione diversi.
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.
Hai creato punti di interruzione desktop aggiuntivi?
Se elimini il secondo punto di interruzione più grande, le impostazioni dal punto di interruzione più grande passano automaticamente a quelli più piccoli, anche se hai già creato alternative. Ad esempio, gli elementi nascosti solo dal punto di interruzione più grande diventerebbero nascosti anche nei punti di interruzione più piccoli. Per risolvere questo problema, crea di nuovo le alternative.
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 gli elementi da punti di interruzione specifici. Vai al punto di interruzione pertinente, clicca con il tasto destro del mouse sull'elemento e seleziona Nascondi.
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
Suggerimento: puoi selezionarlo direttamente nell'area di lavoro o nel pannello Livelli - Clicca sull'icona Altre azioni
- Clicca su Rimuovi alternative
Lo sapevi?
Puoi utilizzare lo strumento di IA responsiva per ottimizzare rapidamente il layout delle sezioni su tutti i punti di interruzione.
Hai trovato utile questo articolo?
|