Elemento de contêiner

O elemento de contêiner pode ser alinhado para alcançar muitas coisas.

• Organizando elementos horizontalmente
• Adicionando fundo extra ou sombra
• Cor de fundo ou imagem em tela cheia

Organizando elementos horizontalmente

Adicionando colunas e definindo a proporção de largura

Após adicionar um contêiner à tela, você pode ver que há apenas 1 coluna na aba Dados.

Clique em Coluna para adicionar mais colunas. E ajuste suas Proporção de largura para criar o layout desejado. Na captura de tela, configurei uma proporção de 2:1, onde a coluna esquerda é 2 vezes mais larga em comparação com a coluna direita.

Sempre horizontal

Observe que, mesmo que as colunas estejam organizadas horizontalmente, em telas de dispositivos móveis as colunas serão organizadas verticalmente para se adaptar a telas mais estreitas.

Na maioria dos casos, isso é aceitável. Mas se você quiser que suas colunas sejam sempre organizadas horizontalmente, clique na aba Conteúdos e verifique o campo Tipo. Selecione Sempre horizontal. E seu conteúdo será organizado horizontalmente, independentemente do tamanho da tela.

Largura automática da coluna

Uma breve observação sobre Proporção de largura é que ela pode ser configurada para Proporção de largura, onde a largura da coluna se ajustará para caber nos elementos dentro da coluna. Isso é útil, por exemplo, quando você deseja configurar um avatar e um lema.

Coluna única

Quando há apenas uma coluna em um contêiner, ainda é útil. Por exemplo, você pode adicionar Fundo extra e Sombra da caixa extra a ele.

Fundo em tela cheia

Fundos em tela cheia podem ser alcançados usando um contêiner. Basta definir Forma -> Largura para Largura total da tela. O contêiner se estenderá até as bordas da tela de esquerda a direita.

Mas os conteúdos dentro do contêiner ainda serão limitados pela largura do elemento da página. Você pode fazer com que os conteúdos se estendam até a borda do contêiner definindo Conteúdos -> Largura interna para 100%.

Imagem em tela cheia

Como mostra a captura de tela acima, se você definir Forma -> Largura do elemento de imagem para Cobrir. O elemento de imagem se estenderá até a borda do contêiner, ignorando o preenchimento e o espaço entre colunas do contêiner.