Elemento contenitore

L'elemento contenitore può essere allineato per ottenere molte cose.

• Disporre gli elementi orizzontalmente
• Aggiungere uno sfondo extra o un'ombra
• Colore o immagine di sfondo a tutta larghezza

Disporre gli elementi orizzontalmente

Aggiungere colonne e impostare il rapporto di larghezza

Dopo aver aggiunto un contenitore al canvas, puoi vedere che c'è solo 1 colonna nella scheda Dati.

Clicca su Colonna per aggiungere più colonne. E regola il loro Rapporto di larghezza per creare il layout desiderato. Nello screenshot ho impostato un rapporto di 2:1, dove la colonna sinistra è 2 volte più larga rispetto alla colonna destra.

Sempre orizzontale

Nota che anche se le colonne sono disposte orizzontalmente, sugli schermi mobili le colonne saranno disposte verticalmente per adattarsi a schermi più stretti.

Nella maggior parte dei casi va bene. Ma se vuoi che le tue colonne siano sempre disposte orizzontalmente, clicca sulla scheda Contenuti e controlla il campo Tipo. Seleziona Sempre orizzontale. E il tuo contenuto sarà disposto orizzontalmente indipendentemente dalla dimensione dello schermo.

Larghezza automatica delle colonne

Una breve nota su Rapporto di larghezza è che potrebbe essere impostato su Rapporto di larghezza, dove la larghezza della colonna si ridurrà per adattarsi agli elementi all'interno della colonna. È utile, ad esempio, quando vuoi impostare un avatar e un motto.

Colonna singola

Quando c'è solo una colonna in un contenitore, è comunque utile. Ad esempio, puoi aggiungere un extra Sfondo e un extra Ombra del box ad esso.

Sfondo a tutta larghezza

Gli sfondi a tutta larghezza possono essere ottenuti utilizzando un contenitore. Basta impostare Forma -> Larghezza su Larghezza schermo intero. Il contenitore si estenderà fino ai bordi dello schermo da sinistra a destra.

Ma i contenuti all'interno del contenitore saranno comunque limitati all'interno della larghezza dell'elemento della pagina. Puoi fare in modo che i contenuti si estendano fino al bordo del contenitore impostando Contenuti -> Larghezza interna al 100%.

Immagine a tutta larghezza

Come mostra lo screenshot sopra, se imposti Forma -> Larghezza dell'elemento immagine su Copri. L'elemento immagine si estenderà fino al bordo del contenitore, ignorando il padding e il gap del contenitore e della colonna.