Editor X: reorganizar elementos por Ordem do DOM

3 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
O Editor X permite que você organize a ordem do DOM dos seus elementos com um único clique. Ao usar ferramentas de layout complexas como pilha, layouters ou repetidores, essa opção garante que os visitantes possam ler seu conteúdo na mesma ordem em que ele aparece na tela. 
Neste artigo, saiba mais sobre:

Sobre a importância da ordem do DOM

A ordem do DOM é usada por tecnologias assistivas para ajudar alguns visitantes a encontrar as informações que precisam. Eles podem estar usando uma ferramenta de leitor de tela ou a tecla Tab no teclado para navegar na sua página. De qualquer forma, a ordem do seu DOM controla a ordem de leitura.
Ao apresentar conteúdo com muitos tipos diferentes de elementos (ex.: texto, mídia, botões), é importante verificar se a ordem do DOM está correta. Dessa forma, os visitantes podem seguir uma sequência lógica e entender completamente do que se trata o seu site.

Reorganizar automaticamente a ordem do DOM

Você pode reorganizar automaticamente a ordem do DOM dos seus elementos em um layouter, repetidor ou pilha. Vamos otimizar a ordem do DOM para refletir a ordem visual, da esquerda para a direita e de cima para baixo.

Para reorganizar a ordem do DOM:

Antes de começar:
Certifique-se de que você está no maior breakpoint. Essa opção não está disponível para breakpoints menores.
  1. Clique em Camadas  na parte superior do Editor X.
  2. Selecione o layouter, o repetidor ou a pilha relevante.
  3. Clique no ícone Mais ações .
  4. Clique em Reorganizar ordem do DOM.
Experimente:
Use uma extensão de leitor de tela no seu site publicado para verificar a ordem automática do DOM.

Organizar manualmente a ordem do DOM

Encontrou algum problema com a ordem do DOM da sua página? Você pode usar o painel Camadas para organizar manualmente suas seções e os elementos dentro delas.
Para que a ordem do DOM corresponda à ordem visual, suas seções devem ser organizadas de cima para baixo. Os elementos dentro dessas seções devem ser organizados ao contrário, de baixo para cima.

Para organizar manualmente a ordem do DOM:

  1. Clique em Camadas  na parte superior do Editor X.
  2. Escolha o que você deseja organizar:
    • Elementos dentro de uma seção: organize os elementos de baixo para cima usando o recurso de arrastar e soltar.  
    • Seções:
      1. Passe o mouse sobre a seção superior e clique no ícone Mais ações .
      2. Clique em Organizar.
      3. Clique em Trazer para frente.
      4. Repita essas etapas com todas as outras seções, indo de cima para baixo no painel.

Esse artigo foi útil?

|