Editor do Wix Studio: trabalhar com camadas
6 min de leitura
Neste artigo
- A estrutura do painel Camadas
- Selecionar e gerenciar camadas
- Gerenciar uma camada
- Definir uma preferência de seleção de camada
- Renomear camadas
- Reordenar camadas
- Ocultar e mostrar elementos
Gerencie as camadas de uma página enquanto você trabalha nela no Editor do Wix Studio. Aqui você vê todas as seções e elementos, para entender melhor sua hierarquia. O painel Camadas também é útil quando você precisa selecionar um elemento que não consegue encontrar na tela.
![Uma captura de tela do painel Camadas mostrando um elemento específico selecionado em uma página](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/16/083efa0d-8852-4953-927f-de5cac646c68/362fe5c5-9f4a-4597-9764-aba2971ffee8.png)
A estrutura do painel Camadas
O painel Camadas exibe todas as seções na página atual, em uma hierarquia de cima para baixo. Se a página tiver um cabeçalho na parte superior, por exemplo, ela aparece no topo da lista.
Ao aninhar elementos dentro de outros elementos, ele cria uma relação pai/filho entre eles. Por exemplo, elementos de texto dentro de um contêiner são seus elementos filhos. Por sua vez, esse contêiner é filho da seção que o exibe.
O painel Camadas é organizado de acordo com essa lógica de herança, para que você possa clicar em um elemento pai para ver seus elementos filhos. Se a sua página tiver seções master, elas são destacadas em verde.
Use a barra de busca para encontrar rapidamente a camada que você precisa. Você pode digitar o nome ou o ID do elemento.
![Uma captura de tela da barra de busca no painel Camadas no Editor do Wix Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/07/21/cc455d4c-1f1f-4333-a96d-06536e52f19c/92f623e0-8c85-497a-b2b9-7d638ede4415.png)
Selecionar e gerenciar camadas
O painel Camadas é uma maneira útil e rápida de navegar para um determinado elemento na 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. Se você clicar na camada, o Editor leva você diretamente para esse elemento. Mesmo se você fechar o painel nesse momento, sua seleção ainda será salva.
![Um GIF mostrando como a página vai até o elemento da barra de login quando selecionado no painel Camadas](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/16/82b9811e-b1c1-43a6-9710-281492811980/de7dee29-ac2c-423d-b929-b1b7f5746190.gif)
Dica:
Selecione vários elementos mantendo a tecla Shift pressionada enquanto clica neles.
Gerenciar uma camada
Encontrou a camada que você precisa? Nesse painel, você pode executar ações como copiar a camada, movê-la para cima ou para baixo, escolher em quais páginas mostrá-la e muito mais.
Gerencie uma camada com alguma das seguintes opções:
- Clique com o botão direito do mouse no nome da camada.
- Passe o mouse sobre o nome da camada e clique no ícone Mais ações .
![Uma captura de tela do menu de ações disponível para cada camada selecionada no painel](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/16/2dc2206b-95fd-41b3-a92b-035fc4c8cda2/f46bbf43-ba19-4f6e-910b-88ea8a9af2d3.png)
Definir uma preferência de seleção de camada
O Editor do Wix Studio permite que você escolha um caminho padrão para pegar camadas na sua tela. Decida qual elemento é "selecionado" quando você clica em um contêiner pai que tem elementos filho.
- Contêiner pai primeiro: o contêiner pai (por exemplo: caixa contêiner, pilha, etc.) é selecionado quando você clica nele. Em seguida, você pode clicar novamente em qualquer elemento para editá-lo.
- Elemento filho primeiro: o elemento filho específico em que você clica é selecionado, não seu contêiner pai.
Para definir uma preferência de seleção de camada:
- Clique no ícone Wix Studio no canto superior esquerdo.
- Passe o mouse sobre Visualização.
- Passe o mouse sobre Seleção de camada.
- Selecione a opção relevante: Contêiner pai primeiro ou Elemento filho primeiro.
![Definindo uma preferência de seleção de camada no Editor do Wix Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/12/24/83d1869f-9613-4a1a-8db3-e4ab3f69c4c2/deb07ad2-40aa-4046-b1c9-17cc8ce096d1.png)
Renomear camadas
Ao adicionar muitas seções, contêineres e elementos a uma página, pode ser difícil diferenciá-los no painel Camadas. Renomeie as camadas para que elas sejam fáceis de reconhecer. Clique duas vezes na camada relevante para dar um novo nome a ela.
![Um GIF mostrando como renomear uma camada clicando duas vezes sobre ela no painel](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/16/77be3c60-7078-4042-94de-581014c6fe75/f79169d8-eabc-4998-8e01-c878ea99d155.gif)
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 camadas
Com o recurso de arrastar e soltar, você pode reordenar facilmente elementos e seções na página atual. Como o painel Camadas é organizado de cima para baixo, mover elementos também afeta sua localização na página.
Ao trabalhar com elementos sobrepostos, reordená-los também afeta 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.
![Um GIF mostrando a funcionalidade de arrastar e soltar no painel Camadas](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/16/140941a9-88b8-4ed1-940a-ed21063a0381/75d61dd3-efbf-4371-a64d-ccd38bfd74c1.gif)
Ocultar e mostrar elementos
Você pode ocultar rapidamente um elemento do breakpoint atual, diretamente na tela, ao selecionar Não exibir.
![Uma captura de tela da opção para não exibir um elemento tal como ele aparece na tela](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/16/64bf44e7-90ee-43af-b212-ada8620d5db7/e648941e-e9fd-4d37-8a35-9460e0371b8a.png)
No entanto, se você precisar mostrar o elemento, você deve fazer isso no painel Camadas. Um elemento oculto aparece com um ícone Oculto
para que você possa localizá-lo facilmente na lista.Dica:
Ao adicionar um elemento a um breakpoint menor (por exemplo: mobile), ele é sempre oculto em breakpoints maiores (por exemplo: desktop). Seguindo essas etapas, você pode fazer com que o elemento apareça nos breakpoints maiores.
Para mostrar um elemento:
- Clique em Camadas no lado esquerdo do editor.
- Localize o elemento oculto na lista.
- Passe o mouse sobre o elemento e clique no ícone Mais ações .
- Clique em Mostrar.
![Uma captura de tela da opção de mostrar um elemento oculto ao selecioná-lo no painel Camadas](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/16/d6bdb2d3-818e-4ee6-a2e4-95d14bd03949/30116da6-f509-46a9-b9c2-039fc6302157.png)