Gestione dispositivi
In questo video imparerai come gestire l'aspetto del tuo sito sui tre dispositivi più comuni: Desktop, Tablet e Mobile. Attraverso le utilities di Auto Layout e Copia tra dispositivi, puoi risparmiare tempo nella gestione dei layout per ogni canvas su tutti i dispositivi.
Trascrizione
Valutazione dei dispositivi mobili e tablet
La sezione è completa, ma prima di procedere, dobbiamo valutare come i componenti appaiono sui dispositivi mobili e tablet. La versione mobile prevede una larghezza dello schermo di 425 pixel, mentre la versione tablet mostra una larghezza dello schermo di 768 pixel. È molto importante prendere in considerazione queste anteprime prima di pubblicare il nostro sito web.
La preview del tablet sembra vuota, ma il canvas è effettivamente presente, con tutti i componenti che utilizzano ancora le proprietà predefinite. Ciò accade perché ogni configurazione in Webround è unica al dispositivo scelto. Mentre aumentiamo l'altezza del canvas, possiamo vedere chiaramente che tutti i componenti sono spostati nella parte superiore sinistra senza alcuna forma di organizzazione. Ciò sta anche accadendo nella preview mobile.
Adattamento delle impostazioni della griglia
Dobbiamo adattare le impostazioni della griglia, ma possiamo utilizzare alcuni strumenti per accelerare il processo. Facendo clic destro sulle proprietà del canvas, possiamo accedere al pulsante Apply Automatic Layout, che farà molto lavoro sporco per noi. Poiché le impostazioni della griglia sono estremamente flessibili, è difficile mantenere un approccio generico per allineare perfettamente ogni componente, ma possiamo semplicemente riorganizzare il contenuto in pochi clic.
Ricordatevi che potete fare clic e trascinare su un'area vuota per disegnare una selezione. Tutti i componenti nell'area saranno selezionati e sarete in grado di spostarli insieme. Ora, andiamo nella preview del tablet e vediamo un altro modo di aggiustare la griglia in modo rapido.
Riproduzione delle impostazioni della griglia
Di solito, le viste tablet e mobili sono molto simili, ma in questo caso voglio mostrarti un'altra funzionalità di Webround per accelerare l'adattamento della griglia del canvas. Fate clic destro sul canvas e utilizzate lo strumento Copia per riprodurre la stessa impostazione da un dispositivo all'altro. Stiamo copiando la versione desktop di questo canvas sulla versione tablet.
Come potete vedere, la disposizione del tablet è diventata molto simile a quella della versione desktop. Ci sono alcuni piccoli problemi con le altezze dei componenti, ma tutto ciò si risolve in pochi click.
Regolazione dell'allineamento del testo
Infine, voglio mostrarti come cambiare l'allineamento del testo. In questo caso, avendo meno spazio, è meglio utilizzare i testi centrati per le piccole informazioni sotto all'immagine. Se apriamo la barra degli strumenti del testo, l'allineamento del testo sarà applicato ai componenti di testo specifici solo su quel dispositivo.
Passando alla versione desktop, possiamo facilmente vedere che l'allineamento è ancora impostato a sinistra, mentre l'allineamento tablet è impostato al centro.