Layout automático em Zero Block
Métodos avançados para organizar elementos em um grupo
Assista ao tutorial em vídeo sobre como usar o recurso Auto Layout em Tilda's Zero Block,
ou leia as instruções detalhadas com capturas de tela abaixo.
ou leia as instruções detalhadas com capturas de tela abaixo.
O Auto Layout é uma ferramenta que permite criar layouts responsivos e organizar elementos de forma eficaz em um grupo.
É particularmente útil para criar elementos de design complexos, como menus de navegação, listas, botões, cartões etc. Independentemente das alterações que você fizer no conteúdo, o layout se adapta automaticamente, reduzindo a necessidade de ajustes manuais.
É particularmente útil para criar elementos de design complexos, como menus de navegação, listas, botões, cartões etc. Independentemente das alterações que você fizer no conteúdo, o layout se adapta automaticamente, reduzindo a necessidade de ajustes manuais.
Como usar o layout automático
Para ativar o Auto Layout, acesse as configurações de Grupo. Certifique-se de que os elementos agrupados estejam definidos como "Objeto" e não como grupo "Lógico". Quando a opção "Object" for selecionada em Group, a seção Auto Layout será exibida abaixo.
Na seção Auto Layout, escolha "Auto" para a configuração Flex. A ativação do Auto Layout fornece acesso a várias configurações que controlam como os elementos reagem às alterações de conteúdo ou tamanho e se alinham dentro do grupo de acordo. Vamos explorar essas configurações e aprender a personalizá-las.
Ajuste da altura e da largura do contêiner usando a configuração Hug
Com o Auto Layout ativado, há duas novas configurações de Grupo que permitem gerenciar a largura e a altura do contêiner com elementos agrupados.
Por padrão, a opção Hug está selecionada, o que torna o tamanho do grupo flexível, ajustando-o com base no tamanho dos elementos dentro do contêiner e no espaçamento entre eles.
Se você redimensionar manualmente o grupo ou definir uma largura ou altura personalizada, a opção Hug mudará automaticamente para Fixed. A opção Fixed significa que o tamanho do grupo é personalizado e não será afetado, mesmo que você altere o espaçamento entre os elementos ou o tamanho deles.
Por padrão, a opção Hug está selecionada, o que torna o tamanho do grupo flexível, ajustando-o com base no tamanho dos elementos dentro do contêiner e no espaçamento entre eles.
Se você redimensionar manualmente o grupo ou definir uma largura ou altura personalizada, a opção Hug mudará automaticamente para Fixed. A opção Fixed significa que o tamanho do grupo é personalizado e não será afetado, mesmo que você altere o espaçamento entre os elementos ou o tamanho deles.
Você pode notar que há outra configuração Hug disponível. Quando ativada, ela recalcula os valores de largura e altura e os define como o mínimo possível para que todos os elementos se encaixem perfeitamente, considerando seu tamanho e o valor definido na configuração Gap (que controla o espaçamento). Se você redimensionar os elementos, o Hug ajustará automaticamente a largura ou a altura de acordo.
Direção
A configuração Direction (Direção) controla o alinhamento dos elementos dentro do grupo. Você tem três opções aqui: Horizontal, Vertical e Wrap (mover para a próxima linha).
Quando a direção Horizontal for selecionada, todos os elementos serão alinhados ao longo do eixo X. Isso é ideal para organizar elementos em uma linha, como ícones, itens de menu ou botões.
Quando a direção Horizontal for selecionada, todos os elementos serão alinhados ao longo do eixo X. Isso é ideal para organizar elementos em uma linha, como ícones, itens de menu ou botões.
Quando a direção Vertical for definida, todos os elementos do grupo serão alinhados ao longo do eixo Y. Isso é particularmente útil ao projetar listas ou elementos de cartão empilhados um abaixo do outro.
Quando a direção Wrap é escolhida, os elementos são alinhados em uma linha com base na largura do contêiner. Se um elemento for muito largo para caber, ele será movido para a próxima linha. Isso pode ser especialmente útil para galerias de fotos, nuvens de tags com várias linhas e para tornar os sites responsivos em diferentes resoluções de tela.
Lacuna
A configuração Gap controla o espaçamento entre os elementos dentro do grupo de acordo com a direção escolhida. Para o alinhamento horizontal, ela ajusta o espaço do eixo X, enquanto para o alinhamento vertical, ela altera o espaço do eixo Y. Quando a direção Wrap é definida, você pode especificar espaços para ambos os eixos.
Observe que, se a opção Hug estiver ativada para a direção escolhida, o ajuste de Gap poderá afetar a largura ou a altura do contêiner.
Observe que, se a opção Hug estiver ativada para a direção escolhida, o ajuste de Gap poderá afetar a largura ou a altura do contêiner.
Alinhar elementos
A configuração Align Elements (Alinhar elementos) ajusta o alinhamento dos elementos em um grupo ao longo do eixo principal - vertical ou horizontalmente - com base na direção escolhida.
Por exemplo, quando a direção Horizontal é selecionada, os elementos são alinhados verticalmente ao centro, à parte superior ou à parte inferior do contêiner. Por outro lado, se a direção Vertical for escolhida, os elementos se alinharão horizontalmente ao centro, à esquerda ou à direita do contêiner. Entretanto, se a opção Hug estiver ativada e todos os elementos tiverem a mesma largura ou altura, o alinhamento não será alterado.
Por exemplo, quando a direção Horizontal é selecionada, os elementos são alinhados verticalmente ao centro, à parte superior ou à parte inferior do contêiner. Por outro lado, se a direção Vertical for escolhida, os elementos se alinharão horizontalmente ao centro, à esquerda ou à direita do contêiner. Entretanto, se a opção Hug estiver ativada e todos os elementos tiverem a mesma largura ou altura, o alinhamento não será alterado.
Justificar o conteúdo
A configuração Justify Content (Justificar conteúdo) oferece opções alternativas de alinhamento, usando um eixo diferente daquele usado em Align Elements (Alinhar elementos). Essa configuração está disponível somente quando a opção Abraço não está selecionada para a largura ou altura ao longo do eixo.
Além do alinhamento básico central ou lateral, há também opções de alinhamento inteligente disponíveis:
A opção Espaço entre distribui uniformemente os elementos dentro do grupo, sem espaço em branco entre eles e o contêiner.
A opção Space Around (Espaço ao redor ) distribui os elementos uniformemente dentro do grupo, garantindo que a distância entre os elementos e o contêiner seja a metade do espaçamento entre os elementos.
A opção Space Evenly (Espaço uniformemente ) distribui os elementos uniformemente dentro do grupo, garantindo que a distância entre os elementos e o contêiner seja igual ao espaçamento entre os elementos.
Além do alinhamento básico central ou lateral, há também opções de alinhamento inteligente disponíveis:
A opção Espaço entre distribui uniformemente os elementos dentro do grupo, sem espaço em branco entre eles e o contêiner.
A opção Space Around (Espaço ao redor ) distribui os elementos uniformemente dentro do grupo, garantindo que a distância entre os elementos e o contêiner seja a metade do espaçamento entre os elementos.
A opção Space Evenly (Espaço uniformemente ) distribui os elementos uniformemente dentro do grupo, garantindo que a distância entre os elementos e o contêiner seja igual ao espaçamento entre os elementos.
Alinhar o conteúdo
A configuração Alinhar conteúdo organiza os elementos dentro do grupo e está disponível somente quando a direção Wrap está selecionada e há várias linhas de conteúdo. Ela alinha verticalmente todas as linhas ao contêiner, a menos que Hug esteja selecionado.
Com Align Content (Alinhar conteúdo), você pode alinhar as linhas normalmente ao centro ou às laterais. De modo semelhante à configuração anterior, você também pode escolher uma das opções de alinhamento inteligente: Space Between (que distribui uniformemente os elementos sem nenhum espaçamento do contêiner), Space Around (que distribui uniformemente os elementos com uma distância do contêiner igual à metade do espaçamento entre os elementos) e Space Evenly (que distribui uniformemente os elementos com uma distância do contêiner igual ao espaçamento entre os elementos).
Com Align Content (Alinhar conteúdo), você pode alinhar as linhas normalmente ao centro ou às laterais. De modo semelhante à configuração anterior, você também pode escolher uma das opções de alinhamento inteligente: Space Between (que distribui uniformemente os elementos sem nenhum espaçamento do contêiner), Space Around (que distribui uniformemente os elementos com uma distância do contêiner igual à metade do espaçamento entre os elementos) e Space Evenly (que distribui uniformemente os elementos com uma distância do contêiner igual ao espaçamento entre os elementos).
