Seções DudaFlex são linhas com duas colunas flex padrão que criam um layout básico. Após adicionar uma seção, você pode adicionar, excluir ou reorganizar outras colunas, flexboxes ou grades avançadas para criar o layout desejado. Em seguida, você pode adicionar widgets ao layout.
Este artigo é voltado para usuários que começaram a usar o DudaFlex após 18 de julho de 2022. Para a versão 1.0 DudaFlex, consulte "Adicione e edite uma seção DudaFlex (1.0)"
Adicionar seção
Para adicionar uma seção:
Passe o mouse entre as linhas e clique em +Adicionar seção; ou clique com o botão direito do mouse para abrir o menu de contexto, clique em Adicionar e selecione Seção flex.
No painel lateral, clique em Seções Flex.
Selecione a seção flex desejada.
Clique em Salvar.
Salve a seção
Para salvar uma seção:
- Passe o cursor sobre a seção desejada e clique em Seção flex no canto superior esquerdo da seção.
- Clique em Salvar como seção e, em seguida, clique em Selecionar somente esta linha.
- Digite um nome para a seção, selecione a categoria em que a seção será salva e selecione as permissões para a seção.
- Clique em Começar a criar.
- Clique em Concluído.
Excluir seção
Para apagar uma seção, clique com o botão direito do mouse para abrir o menu de contexto e selecione Apagar; ou clique no ícone de apagar no menu flutuante.
Adicionar Coluna
Após adicionar uma seção ao site, você pode adicionar colunas para conter os widgets na seção. As seções já vêm com colunas, mas você pode adicionar outras.
Quando você adiciona um elemento a uma coluna, a posição é determinada pelas configurações de layout automático. Para alterar a direção do layout automático, abra o painel de design e, na seção Layout, selecione "horizontal" ou "vertical" para o layout automático.
Para adicionar uma coluna:
Clique para selecionar uma coluna existente.
No menu flutuante, clique no ícone de três pontos horizontais (
) e selecione Adicionar coluna; ou clique no ícone de mais na borda esquerda ou direita da coluna.
Duplique uma coluna
Você pode duplicar uma coluna; ela será adicionada à direita do cartão original. Não é possível adicionar colunas que excedam 100% da largura, incluindo espaçamento.
Para duplicar uma coluna:
Clique para selecionar uma coluna.
No menu flutuante, clique no ícone Duplicar. Você também pode clicar com o botão direito do mouse na coluna para abrir o menu de contexto e selecionar Duplicar.
Apague uma coluna
Você pode apagar uma coluna para excluí-la da seção. No entanto, como cada seção deve conter pelo menos uma coluna, você não pode apagar a última coluna da seção.
Para apagar uma coluna:
Clique para selecionar a coluna.
No menu flutuante, clique no ícone Apagar . Você também pode clicar com o botão direito do mouse na coluna para abrir o menu de contexto e selecionar Apagar.
Adicionar widget
Você pode adicionar widgets a colunas, flexboxes ou grades avançadas de várias formas diferentes. Se você já estiver no modo flex, é possível adicionar widgets diretamente do painel lateral - clique em Widgets e selecione o widget desejado.
No editor clássico, não é possível arrastar e soltar o widget na coluna flex pelo painel lateral.
Para adicionar um widget:
- Clique em uma coluna, flexbox ou planilha avançada para selecioná-la.
- Clique no ícone de mais no meio da coluna, flexbox ou grade avançada; ou clique no ícone de mais no menu flutuante.
- Selecione um widget.
Você também pode adicionar widgets pelo painel de camadas.
Para adicionar um widget pelo painel camadas:
- Clique para selecionar uma coluna.
- No painel lateral, clique em Camadas.
- No painel de camadas, passe o cursor sobre a coluna, flexbox ou grade avançada à qual adicionar o widget e clique no ícone de mais.
- Selecione um widget.
Demonstração do Flex
Os vídeos a seguir são demonstrações feitas pelo nosso designer-líder de UI para mostrar como é fácil criar e editar seções no DudaFlex.