Editor X: usar o painel Camadas

5 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
Gerencie as camadas da sua página no painel Camadas na barra superior do Editor. Ele exibe todos os elementos da sua página e permite que você os selecione, altere sua ordem, oculte-os e muito mais.
Neste artigo, saiba mais sobre:

A estrutura do painel Camadas

O painel Camadas exibe todas as seções em uma hierarquia, que vai do topo ao final da página. Se a página tiver um cabeçalho na parte superior, ele aparecerá no topo da lista e um rodapé aparecerá na parte inferior.
Ao aninhar elementos dentro de outros elementos em sua página, ele cria uma relação parent/child (pai/filho) entre eles, derivada de HTML e CSS. Por exemplo, os elementos de texto dentro de um contêiner são seus children. Por sua vez, esse contêiner é child da seção que o exibe.
O painel Camadas é organizado de acordo com essa lógica de hierarquia, então você pode clicar em um parent element (elemento pai) para ver os children elements (elementos filho) dentro dele. Se sua página tiver qualquer elemento mestre, ele será destacado em verde.
Observação:
Contêineres e elementos dentro de uma seção são apresentados na ordem Z. Isso significa que se um elemento estiver em cima de outro, ele aparece no topo da lista.
O painel Camadas exibe os elementos da página selecionada. Para ver as camadas de outra página, você precisa selecionar a página desejada no menu dropdown Navegação da página:

Selecionar elementos no painel Camadas

O painel Camadas é uma maneira útil e rápida de navegar para um determinado elemento em sua página. Também é uma ótima maneira de encontrar um elemento. Por exemplo, se você tiver elementos sobrepostos e não conseguir localizar ou selecionar o que precisa.
Quando você passa o mouse sobre uma camada, ela é destacada na página para que você possa encontrá-la facilmente. Se você clicar na camada, o Editor vai diretamente para esse elemento. Mesmo se você fechar o painel nesse momento, sua seleção ainda será salva.
Dica:
Selecione vários elementos segurando a tecla Shift enquanto clica neles.

Gerenciar uma camada a partir do painel

Encontrou a camada que você precisa? A partir desse painel, você pode executar ações como copiar a camada, movê-la para cima ou para baixo no painel, escolher em quais páginas mostrá-la e muito mais.
Gerencie uma camada com uma das seguintes opções:
  • Clique com o botão direito no nome da camada.
  • Passe o mouse sobre o nome da camada e clique no ícone Mostrar mais .
Trabalhando com elementos sobrepostos?
Você pode navegar entre as diferentes camadas diretamente na tela. Clique com o botão direito do mouse no elemento que você precisa e clique em Selecionar uma camada para acessá-lo.

Renomear elementos no painel Camadas

Ao adicionar várias seções, contêineres e elementos à sua página, pode ser difícil diferenciá-los no painel Camadas. Você pode renomear camadas facilmente para garantir que elas sejam fáceis de reconhecer. Clique duas vezes na camada relevante e dê a ela um novo nome na caixa de texto.
Usando o modo avançado?
Exiba IDs de elemento no painel Camadas para identificar facilmente os elementos em seu código. Ative a alavanca Exibir IDs para ver os IDs conforme definido no painel Propriedades.

Reordenar elementos no painel Camadas

Use o painel Camadas para reordenar facilmente os elementos dentro do mesmo parent container (contêiner pai) arrastando-os para cima e para baixo na lista.
Alterar a ordem dos elementos altera a ordem Z. Por exemplo, se você quiser que o texto apareça na parte superior de uma forma, o texto deve estar acima da forma no painel Camadas.

Para reordenar elementos no painel Camadas:

  1. Clique em Camadas  na parte superior do Editor X.
  2. Clique no contêiner com os elementos que você deseja reordenar.
  3. Clique e arraste os elementos relevantes para a posição desejada.

Mostrar elementos no painel Camadas

Qualquer elemento no seu site pode ser oculto no menu que aparece quando você clica com o botão direito. No entanto, para mostrar um elemento, você deve fazê-lo no painel Camadas.
Um elemento oculto aparece com um ícone Oculto no painel Camadas.

Para mostrar um elemento no painel Camadas:

  1. Clique em Camadas  na parte superior do Editor X.
  2. Localize o elemento oculto na lista.
  3. Passe o mouse sobre o elemento e clique no ícone Mais ações .
  4. Clique em Mostrar.
Dica:
Ao adicionar um elemento a um breakpoint menor (por exemplo: celular), ele é sempre oculto em breakpoints maiores (por exemplo: tablet). Seguindo as etapas acima, você pode fazer com que o elemento apareça em outros breakpoints também.

Esse artigo foi útil?

|