Skip to main content

Árvore de elementos

Nem sempre é fácil clicar no elemento certo: ele pode estar escondido atrás de outro, ser muito pequeno ou ficar dentro de um menu. A árvore de elementos mostra a estrutura da página em forma de lista, para você encontrar e entender cada parte.

Abrir a árvore​

  1. Na barra do editor, clique em Elementos.

    Árvore de elementos aberta na lateral esquerda

  2. Botão Elementos: abre e fecha a árvore.

  3. A árvore: cada linha é um elemento da página, com a sua etiqueta (section, div, main…) e o identificador ou as classes dele. A indentação mostra quem está dentro de quem.

  4. Atualizar árvore (↻): recarrega a lista. Use depois de alterar a página ou quando o site mudar sozinho.

  • Clique na setinha ao lado de um elemento para expandir ou recolher o que há dentro dele.
  • Passe o mouse sobre uma linha para ver o elemento destacado na página.
  • Clique em uma linha para selecionar aquele elemento, como se você tivesse clicado nele no site.

Fechar a árvore​

Clique de novo em Elementos, ou na seta no canto da árvore.

Próximo passo​

Com o elemento selecionado, abra o painel de edição pelo lápis da barra rápida.