DudaFlex - visão geral

O que é DudaFlex?

Nota

Esse recurso ainda está em desenvolvimento e será liberado gradualmente para todos os clientes.

DudaFlex é um novo jeito de fazer o design de seções e páginas no Duda. Ele se baseia numa nova tecnologia chamada edição inline e usa layouts flexíveis, como grade CSS, flex, alinhamento aprimorado e outros. O DudaFlex usa pontos de interrupção para dar completa capacidade de resposta e total precisão a qualquer elemento.

O DudaFlex se integra perfeitamente ao editor existente para que os usuários escolham quando e onde usá-lo. Assim, o DudaFlex contém todos os mesmos benefícios do nosso editor, mas com muito mais recursos de design.

Adicione uma seção DudaFlex

Para adicionar uma seção DudaFlex:

  1. Pare o cursor entre as linhas e clique no botão Adicionar seção . As seções aparecerão no painel lateral. Você também pode clicar com o botão direito do mouse para abrir o menu de contexto e depois clicar em Adicionar seção.
  2. No painel lateral, clique em Seções Flex.
  3. Clique na seção Flex a ser adicionada e, no topo da página, clique em Salvar.
  4. O Modo Flex será aberto com a seção a ser editada.

Saiba mais em  Adicione e edite uma seção DudaFlex.

Modo Flex - visão geral

Painel Camadas

Localizado ao lado esquerdo do editor, o painel Camadas mostra os elementos da página (grades, widgets, flexboxes, caixas de texto e outros). Nele, você seleciona, reorganiza e troca o nome dos elementos. O painel Camadas é sempre iniciado com a seção, contendo as grades seguidas por widgets ou recipientes.

layers_panel.png

Além disso, você pode percorrer os elementos das seguintes formas:

  • Selecione um elemento no ponto da grade até o elemento no menu que aparece acima.
    navigate_elements.png
  • Clique na trilha de navegação acima do painel Design.

Painel Design

Localizado no lado direito do editor, o painel Design controla o design do elemento selecionado (recipiente, flexbox, widget). As opções de design são, entre outras, layout, ajuste de tamanho e alinhamento.

design_panel.png

Medidas de tamanho no painel Design

O DudaFlex oferece várias medidas de tamanho.

  • Pixel (px). O tamanho fica igual em cada ponto de interrupção.
  • Largura da viewport (vw). % da largura do elemento quando aparece numa determinada tela. 10 vw equivale a 10% da largura da viewport. 100 vw ocupa 100% da largura da tela. Como padrão, as margens e o tamanho dos widgets são medidos em %.
  • Altura viewport (vh). % da altura do elemento quando aparece numa determinada tela. 10 vh equivale a 10% da altura da viewport no tamanho de cada tela.
  • A. O tamanho é determinado automaticamente pelo conteúdo.
  • Mín. e máx. A menor ou maior medida do elemento. Serve para limitar o ajuste do tamanho do elemento.

Alinhamento

Organizar

Você pode reorganizar objetos sobrepostos tanto no painel Design quanto no painel Camadas; basta arrastar um objeto para cima ou para baixo de outro.

arrange.png

Autoalinhamento x alinhamento do flexbox

No painel Design, o flexbox tem duas configurações de alinhamento automático diferentes.

  • Em Layout, selecione layout Vertical ou Horizontal para criar um eixo para os elementos dentro do flexbox.
  • Em Alinhar no flexbox, selecione como os elementos serão colocados no eixo.
    flexbox_align.png
  • Em Alinhar, selecione como todo o flexbox será alinhado em relação à grade. Você só pode alinhar no eixo contrário.
    flexbox_align2.png
  • Em Alinhar, selecione onde o elemento dentro de um flexbox (como um botão) será alinhado no eixo do layout automático escolhido.
    flexbox_align3.png
PIN

No painel Design, você pode fixar elementos em uma posição específica na célula, de modo que o local não mude em relação à célula quando o tamanho desta for alterado.

Para fixar um elemento em uma posição na célula:

  1. Selecione o elemento e, no painel Design, role até Posição.
  2. Ao lado de Fixar, clique na seta correspondente ao local da célula onde o elemento será fixado.
    pin.png

O elemento ficará fixo nesse local da célula quando o tamanho da grade for alterado.

Ponto de interrupção

Nota

Saiba mais em Tablet responsivo.

Ponto de interrupção é o tamanho ao qual o design se ajusta numa largura específica da tela. Com esses pontos, o design continua funcional à medida que aumenta ou diminui. No DudaFlex, o padrão dos pontos de interrupção é:

  • Desktop (1.025 px por 1.399 px)

  • Desktop largo (a partir de 1.400 px)

  • Tablet (768 px por 1.024 px)

  • Celular (até 767 px)

  • Paisagem no celular (468 px por 767 px)

Para trocar os pontos de interrupção, clique nas diferentes exibições no topo da página.

breakpoints.png

As alterações feitas no ponto de interrupção principal (desktop) afetam os demais pontos. No entanto, se você precisar mudar a posição e o tamanho dos elementos de pontos de interrupção específicos (como no modo "paisagem" do celular), as alterações não afetarão os outros modos. As alterações feitas no ponto de interrupção no modo Celular afetam o ponto de interrupção Paisagem no celular.

Nota

Se você fizer uma alteração estrutural quando estiver num ponto de interrupção que não o principal (desktop), aparecerá um aviso de que a alteração afeta todos os pontos de interrupção.

Esse artigo foi útil?
Usuários que acharam isso útil: 1 de 1

Feedback sobre este artigo

0 comentário

Por favor, entre para comentar.

×

Faça o login como Profissional

O Suporte prioritário por telefone está disponível exclusivamente para profissionais. Acesse a sua conta Pro agora para ver nossos números de suporte internacional.

Registre-se
Não é profissional? Adquira um plano Pro!