Layout fluido ti consente di allineare gli elementi in modo che le relative proporzioni e il relativo layout vengano adattati automaticamente alle dimensioni dello schermo. I documenti adattabili traggono vantaggio in particolare dal layout fluido, ma il layout fluido può funzionare anche con gli elementi con dimensioni fisse.
Puoi utilizzare diverse tecniche in Google Web Designer per creare un layout fluido:
Flexbox (Fluid Layout) - Google Web Designer
Valori basati sulla percentuale
Puoi impostare dimensioni e posizioni in percentuali anziché in pixel, in modo che gli elementi rimangano proporzionati e relativamente allineati tra loro.
Per utilizzare le percentuali al posto dei pixel, fai clic su px nel campo nel riquadro Proprietà e seleziona % dal menu a discesa.
Per convertire tutti i valori di posizione e dimensione in percentuali, fai clic sul pulsante Usa percentuali .
Nel tuo documento puoi utilizzare una combinazione di valori basati sulla percentuale e basati sui pixel.
Ancoraggio
L'ancoraggio ti consente di allineare in modo permanente gli elementi all'interno di un container, anche quando le dimensioni, la spaziatura interna o la larghezza del bordo dell'elemento o del contenitore cambiano. Le proprietà della posizione o della traduzione impostate compenseranno l'elemento dal punto di ancoraggio.
Selezioni una modalità di ancoraggio orizzontale e una modalità di ancoraggio verticale. L'impostazione predefinita è "in alto a sinistra".
Modalità di ancoraggio orizzontale
| Modalità | Effetto |
|---|---|
| a sinistra | Il bordo sinistro dell'elemento si allinea al bordo sinistro del container. |
| al centro | Il centro orizzontale dell'elemento è allineato al centro orizzontale del contenitore. |
| a destra | Il bordo destro dell'elemento è allineato al bordo destro del container. |
Modalità di ancoraggio verticale
| Modalità | Effetto |
|---|---|
| in alto | Il bordo superiore dell'elemento è allineato al bordo superiore del contenitore. |
| al centro | Il centro verticale dell'elemento si allinea al centro verticale del contenitore. |
| in basso | Il bordo inferiore dell'elemento è allineato al bordo inferiore del container. |
Puoi impostare la modalità di ancoraggio nel riquadro Proprietà o nella barra di opzioni dello strumento quando lo strumento Selezione è attivo.
Flexbox
Flexbox (modulo flessibile CSS Box) è un modo per organizzare gli elementi in modo flessibile in un contenitore all'interno di righe o colonne. Ogni elemento può aumentare o diminuire per ottimizzare lo spazio del contenitore mantenendo l'ordine e la spaziatura specificati.
Puoi utilizzare Flexbox e configurare le proprietà Flexbox nella scheda Flexbox del riquadro Adattabili. Scopri di più sull'utilizzo di flexbox.