Editor do Wix Studio: reorganizar elementos pela ordem do DOM

4 min de leitura
Você pode reorganizar e reorganizar elementos em um site do Editor do Wix Studio pela ordem do DOM. Isso pode melhorar a acessibilidade do site, pois garante que os visitantes que usam tecnologias assistivas (como leitores de tela, etc) possam navegar pelo conteúdo do site em sua ordem de exibição.
Neste artigo, confira:
É importante saber:
Organizar os elementos por ordem do DOM é especialmente importante quando você usa ferramentas de layout mais complexas em um site, como pilhas e caixas flexíveis.

A importância da ordem do DOM

Alguns visitantes do site podem usar tecnologias assistivas para navegar nos sites, como leitores de tela e/ou a tecla Tab. A ordem do DOM do site determina a ordem de "leitura" dessas tecnologias.
Uma ordem lógica do DOM é, portanto, importante, pois garante que todos os visitantes possam navegar pelo conteúdo do site. Por exemplo, o menu do site deve vir primeiro, seguido pelo restante dos elementos no cabeçalho, em seguida, o título da página, em seguida, o conteúdo da página, etc.
Quer verificar a ordem do DOM de um site?
Você pode testar a ordem automática do DOM de um site usando a tecla Tab do seu teclado ou um leitor de tela na versão online do site.

Reorganizar automaticamente a ordem do DOM

Você pode reorganizar automaticamente a ordem dos elementos do DOM em uma seção, caixa flexível, pilha ou em uma página inteira. A ordem é otimizada para corresponder à ordem visual dos elementos (da esquerda para a direita e de cima para baixo). 
Dica:
Reorganizar a ordem do DOM de uma página garante que ela seja otimizada e pode melhorar problemas de layout.

De uma página:

  1. Clique em Páginas  no lado esquerdo do Editor.
  2. Selecione a página relevante.
  3. Clique no ícone Mais ações .
  4. Clique em Reorganizar ordem do DOM.
O painel Páginas de um site. O cursor está clicando na opção para reorganizar a ordem do DOM de uma página.

De elementos:

  1. Clique em Camadas  no lado esquerdo do Editor.
  2. Selecione a seção, caixa flexível ou pilha relevante.
  3. Clique no ícone Mais ações .
  4. Clique em Reorganizar ordem do DOM.
O painel Camadas de um site. O cursor está clicando na opção para reorganizar a ordem do DOM de uma seção.

Alterar manualmente a ordem do DOM

A ordem do DOM do site deve ser otimizada. No entanto, se você notou um problema com a ordem do DOM de um site em que está trabalhando, você pode alterá-la manualmente para corresponder à ordem visual dos elementos (da esquerda para a direita e de cima para baixo).

Para alterar a ordem do DOM manualmente:

  1. Clique em Camadas  no lado esquerdo do Editor.
  2. Escolha o que você deseja organizar:
    • Elementos dentro de uma seção: 
      1. Selecione uma seção para abri-la.
      2. Arraste e solte os elementos na posição correta.
    • 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 os passos i-iii com todas as outras seções, de cima para baixo no painel.
O painel Camadas de um site. O cursor está clicando na opção de trazer a seção superior para a frente.

Esse artigo foi útil?

|