Com recursos extras de design, o DudaFlex é um modo para projetar seções perfeitas e responsivas de pixel. No DudaFlex, você cria e edita sites com rapidez e ainda utiliza os recursos do editor clássico que você já conhece. Comparado ao editor clássico, o DudaFlex oferece layout automático, alinhamento e distribuição de vários elementos, unidades de tamanho responsivo e mais controle sobre colunas. Com isso, você cria e edita designs responsivos com mais rapidez do que no editor clássico.
Você pode adicionar uma seção flex a um site existente ou criar um novo site com um template flex. Se você usar um template flex, todas as seções serão criadas com flex. O cabeçalho não é feito com flex e, se você adicionar uma nova página, loja, blog ou página de assinatura, eles não serão criados com flex, mas você pode adicionar seções flex a elas.
Este artigo é voltado para usuários que adotaram o DudaFlex a partir de 18 de julho de 2022. Para a versão 1.0 DudaFlex, consulte "Visão Geral do DudaFlex (1.0)".
Para saber mais sobre o DudaFlex, assista ao seguinte vídeo:
Terminologia do Flex
Veja, a seguir, definições da terminologia relacionada especificamente ao Dudaflex.
Modo flex . Nele, você cria e edita seções flex. O modo flex dá acesso aos recursos de design que não estão presentes no editor clássico, e você ainda tem acesso aos recursos do editor clássico.
Seção flex. Linha com colunas flex padrão que criam um layout. Nela, você pode adicionar, excluir ou alterar a ordem das colunas flex. As seções flex podem ser salvas como template para uso futuro.
Coluna flex . Nela, você adiciona widgets. Como a coluna flex tem layout automático, os widgets internos são alinhados automaticamente na vertical ou na horizontal. Por outro lado, não é possível mover livremente os elementos dentro de da coluna flex; você precisa usar as configurações de alinhamento, espaçamento e margem.
Flexbox vertical e horizontal. Recipiente que alinha automaticamente os widgets dentro dele na vertical ou na horizontal. Devido ao layout automático, não é possível mover livremente os elementos dentro de uma flexbox vertical ou horizontal; você precisa usar as configurações de alinhamento, espaçamento e margem.
Grade avançada. Usada para criar composições com formas livres ou elementos sobrepostos. A grade avançada não oferece layout automático nem alinhamento vertical, como a coluna flex. Por isso, recomendamos checar seu projeto em todos os pontos de interrupção.
Ponto de interrupção. Intervalos de pixel que correspondem à largura de diferentes aparelhos, como desktop, tablet e celular. Quando a largura de um aparelho está dentro do intervalo de pixel pré-definido de um ponto de interrupção, o layout do site é ajustado para que o conteúdo e o design sejam otimizados para o tamanho e a orientação do aparelho.
Elementos flex. Uma flexbox horizontal, vertical ou de grade avançada que é colocada dentro de uma coluna flex.
Hierarquia de elementos
No modo flex, as seções flex contêm colunas flex, e as colunas flex contêm widgets. Por ser uma hierarquia padrão, você não pode adicionar nenhum widget à seção flex sem uma coluna flex.
Selecione elementos
São vários os métodos para selecionar um elemento (seção flex, coluna flex ou widget):
Passe o cursor sobre o elemento e clique nele. Ao passar o cursor, procure o contorno azul que indica o elemento que o clique selecionará.
Selecione elementos do painel de camadas. No painel lateral, clique em Camadas. A partir daqui, você pode selecionar qualquer elemento na respectiva seção.
Selecione elementos do painel de design. Clique nas trilhas no painel de design para selecionar um elemento.
Selecione elementos no menu flutuante. Se você já tiver um elemento selecionado, passe o cursor sobre o nome do elemento acima do menu flutuante; aparecerá uma barra de trilha de navegação de elementos flex.
MODO FLEX
Painel Camadas
O painel de camadas aparece ao lado esquerdo do modo flex e mostra os elementos flex na seção selecionada. Os elementos aparecem de acordo com a hierarquia, sendo as seções o nível superior. No painel de camadas, você pode adicionar, selecionar, reorganizar, renomear, ocultar e mostrar elementos em determinados pontos de interrupção.
Painel Design
O painel de design aparece ao lado direito do modo flex e contém os seus controles de design para o elemento selecionado (seção flex, coluna flex ou widget). Dependendo do elemento selecionado, as opções de design são layout, ajuste de tamanho, alinhamento e outros.
Menu flutuante
O menu flutuante aparece ao se selecionar um elemento. Nele, você alterna de elementos, adiciona elementos, abre os painéis de conteúdo ou design, duplica, ajusta, apaga o elemento e muito mais.
PERGUNTAS FREQUENTES
Qual é a diferença entre o DudaFlex e o editor clássico?
Comparado ao editor clássico, o DudaFlex oferece mais capacidades de design para você criar sites responsivos de com mais rapidez e tranquilidade. Confira os recursos de design que o DudaFlex oferece além dos do editor clássico:
Economia de tempo. Como o Flex tem layout automático, o design é otimizado de acordo com os pontos de interrupção.
Alinhamento de conteúdo. Alinha todos os elementos em uma coluna flex ao mesmo tempo. No editor clássico, você tem que alinhar cada elemento separado.
Alinhamento automático. Colunas flex e flexboxes alinham automaticamente os elementos na vertical ou na horizontal.
Número de colunas. No modo flex, você pode adicionar mais de quatro colunas a uma seção com até 100% de largura de tela.
Espaço entre os itens. Você configura o espaço entre os itens uma vez, e ele é aplicado a todos os elementos em uma coluna flex.
Ajuste do tamanho dos elementos. Ajuste o tamanho dos elementos para otimizar a altura da tela em pixels e a largura da tela em porcentagem.
Edição mais rápida. Com os recursos avançados de design do DudaFlex, você pode editar um design existente muito mais rapidamente do que no editor clássico.
Qual é a diferença entre a versão 1.0 e a versão 2.0 do DudaFlex?
Todas as criações com o DudaFlex antes de 18 de julho de 2022 foram na versão 1.0 do DudaFlex. Templates ou seções de equipe criadas antes continuarão a ser editados na versão 1.0 do DudaFlex. Todos os designs criados a partir de agora usarão a versão 2.0 do DudaFlex. Ao editar um template ou seção de equipe criada no DudaFlex 1.0, aparecerá a indicação da versão 1.0 do DudaFlex na barra superior, no nome da seção e no painel de camadas. Desde 18 de julho de 2022, todos os sites novos ou que não usavam o flex estão no DudaFlex versão 2.0 e não têm acesso ao DudaFlex versão 1.0.
A versão 2.0 do DudaFlex é mais simplificada e parecido com o editor clássico do que a versão 1.0. A versão 2.0 traz componentes mais predefinidos para que os usuários criem e editem um design com mais rapidez. Em vez de usar uma planilha para posicionar os objetos, o usuário agora pode adicionar colunas que atuam como layout para posicionar os widgets. Como as colunas têm layout automático, os objetos ficam perfeitos em cada ponto de interrupção, sem necessidade de edição extra.