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:
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:
Il pannello dei punti di interruzione per una pagina del sito
... Mentre l'intestazione globale di quella pagina ha 3 punti di interruzione definiti: 
Il pannello dei punti di interruzione per un'intestazione globale, che mostra punti di interruzione diversi da quelli della pagina

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. 
Grafico che mostra il modo in cui i punti di interruzione si influenzano a vicenda in base al concetto a cascata

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. 
Screenshot di un messaggio che vedi nell'Editor quando apporti una modifica ai dati, in quanto influisce su 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.
Screenshot del messaggio che vedi nell'Editor quando provi ad associare un elemento con un nuovo elemento parent, un'azione che influisce su 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:

  1. Seleziona l'elemento pertinente
  2. Clicca sull'icona Altre azioni 
  3. Clicca su Rimuovi alternative
Screenshot di un tasto nel punto di interruzione tablet nell'Editor, su cui si clicca per rimuovere eventuali 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?

|