As seções flexíveis criam um layout e alinham objetos automaticamente, o que facilita e agiliza o design de seções atraentes. No entanto, quando você tem um design mais complexo com objetos sobrepostos ou uma composição livre, é necessário usar uma grade avançada. As grades avançadas permitem posicionar elementos em uma composição livre sem o layout automático. Por isso, recomendamos que você verifique seu design em todos os breakpoints.
Este artigo é relevante apenas para usuários que começaram a usar o Flex após 18 de julho de 2022.
Para criar elementos sobrepostos:
- Clique para selecionar uma coluna flexível.
- No menu flutuante ou na coluna flexível, clique no ícone de mais (
). - Na seção de elementos flexíveis, selecione Grade avançada (anteriormente chamada de contêineres).
Observação:
Para garantir que você siga as melhores práticas, arraste as bordas da grade avançada para que ela abranja toda a largura da coluna flexível.
- Na seção Layout do painel de design, selecione uma grade predefinida em Reorganizar layout. Ou, se preferir criar sua própria grade, use os menus suspensos Colunas e Linhas em Personalizar layout para adicionar colunas e/ou linhas.
- No menu flutuante, clique no ícone de mais (+), selecione os widgets desejados e organize-os na grade avançada.
- Clique para selecionar um elemento e, na seção Organizar do painel de design, selecione Trazer para a frente, Avançar, Enviar para trás ou Enviar para o fundo.
Recomendamos verificar seu design em cada ponto de interrupção ao usar grades avançadas. Com elementos sobrepostos, pode ser necessário ajustar o design em determinados pontos de interrupção.