Editor Studio: creare un sito responsivo

Tempo di lettura: 3 min.

Il nuovo Editor Studio è la risorsa ideale per i professionisti per creare siti responsivi che si adattano perfettamente a ogni schermo e dispositivo. Con le sue funzionalità all'avanguardia, la piattaforma ti consente di creare siti responsivi velocemente e con precisione.

All'interno dell'Editor Studio, troverai una serie di strumenti accuratamente selezionati per semplificare il processo di progettazione, garantendo semplicità, efficienza e risultati eccezionali per i tuoi progetti. 

Personalizza i design per punto di interruzione

L'Editor Studio consente di personalizzare i siti in base al punto di interruzione, per un look sempre perfetto. I punti di interruzione sono intervalli di larghezza dello schermo, che rappresentano i possibili schermi e dispositivi che i visitatori tendono a utilizzare (es. tablet, smartphone).
L'Editor Studio utilizza un concetto a cascata quando si tratta di progettare per 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. 
GIF che mostra come cambia il design del sito quando si clicca sui diversi punti di interruzione in alto

Consenti all'IA di rendere le tue sezioni responsive

Rendi la tua sezione responsiva su tutte le dimensioni dello schermo con un clic, usando la potenza dell'IA. Lo strumento di IA responsiva identifica gruppi di elementi correlati e applica lo strumento di layout ideale per ciascun gruppo (es. pila, griglia).

Ridimensionamento automatico tra i punti di interruzione

Durante la progettazione di un sito, vuoi assicurarti che gli elementi si adattino perfettamente agli schermi di tutte le dimensioni. Modifica le dimensioni dell'elemento in pixel e seleziona un comportamento responsivo che si occupi del resto. 
GIF che mostra come utilizzare le maniglie di trascinamento per ridimensionare un elemento sull'area di lavoro
Ogni elemento ha un comportamento responsivo predefinito (es. Ridimensiona in proporzione), che controlla il modo in cui viene ridimensionato su altri schermi. Ciò velocizza davvero il processo di progettazione in quanto non è necessario passare a ogni singolo punto di interruzione per impostare il ridimensionamento.
Dal pannello Ispezione, puoi modificare il comportamento responsivo di un elemento in modo che soddisfi meglio le tue esigenze. 
Screenshot del menu a tendina Comportamento responsivo quando è aperto e le opzioni disponibili

L'elemento si abbina al design di qualsiasi schermo

Quando imposti un elemento in modo che si ridimensioni proporzionalmente, puoi assicurarti che il suo design sia ideale su ogni schermo. Abilita l'interruttore Ridimensiona proprietà nel pannello Ispezione per renderlo automatico.
Screenshot dell'interruttore Ridimensiona proprietà, che viene visualizzato solo se hai impostato il comportamento responsivo su Ridimensiona in proporzione
Questo è utile, ad esempio, se l'elemento ha un bordo definito. Il bordo potrebbe sembrare troppo spesso e ingombrante su schermi di piccole dimensioni, o quasi inesistente su schermi più grandi. Con l'interruttore abilitato, tutto ciò che devi fare è impostare il design che desideri sul desktop.

Ridimensionamento automatico e manuale del testo

Nell'Editor Studio, il testo è impostato per ridimensionarsi automaticamente in proporzione alle dimensioni dello schermo. Scegli la dimensione del carattere che desideri sul PC, al resto pensiamo noi. Puoi impostare i valori minimo e massimo per assicurarti che il testo non diventi mai troppo piccolo o troppo grande per il tuo design. 
Se hai bisogno di un controllo più preciso del ridimensionamento del testo, seleziona Personalizzato. Ciò consente di impostare l'intervallo di dimensioni per ogni punto di interruzione. 
Screenshot dell'opzione ridimensiona testo nel pannello Ispezione, che mostra dove impostare l'intervallo per il punto di interruzione

Hai trovato utile questo articolo?

|