O "Painel de navegação" exibe uma visualização em árvore dos elementos e clipes do documento. Alterne o painel no menu Janela.
A lista de elementos do "Painel de navegação" tem algumas das mesmas funcionalidades que os elementos no cenário. É possível, por exemplo, clicar em elementos no "Painel de navegação" para selecioná-los ou usar o botão direito do mouse para ver um menu pop-up dos comandos específicos a cada elemento. Você também pode clicar duas vezes em componentes que têm uma caixa de diálogo de edição para abri-la.
Organização
Para anúncios HTML5 e documentos HTML com páginas, o "Painel de navegação" organiza os elementos em cada página do documento. No modo de edição de grupo, você vê somente os elementos do grupo.
Por padrão, o "Painel de navegação" lista os elementos na mesma ordem que as camadas na linha do tempo do Modo avançado. É possível alternar para a ordem do DOM nas preferências da Visualização de design.
Expandir ou recolher um elemento: clique na seta ao lado de um elemento no "Painel de navegação" para mostrar ou ocultar elementos aninhados.
Expandir ou recolher todos os elementos aninhados: clique duas vezes na seta ao lado de um elemento para expandir ou recolher todos os elementos listados. Também é possível manter pressionada a tecla Ctrl (Windows), ⌘ ou Alt (Mac) ao clicar na seta, o que tem o mesmo efeito.
Reorganizar elementos: arraste um elemento para o local onde você quer posicioná-lo na lista. Uma linha amarela será exibida na posição de destino. Também é possível arrastar um elemento filho para um elemento pai.
Aninhar elementos: se você quiser aninhar um elemento em outro, arraste-o sobre o novo elemento pai. Uma caixa amarela aparecerá ao redor desse elemento pai em potencial.
Seleção
A seleção é espelhada no cenário, na linha do tempo do Modo avançado e no "Painel de navegação". Isso significa que selecionar um elemento em um lugar também o seleciona no outro. O Google Web Designer alterna para níveis diferentes de elementos aninhados ou para páginas diferentes, conforme necessário. O rótulo do elemento pai atual é exibido em amarelo.
Selecionar um elemento: clique em um elemento para selecioná-lo.
Selecionar vários elementos: é possível fazer isso quando eles têm o mesmo elemento pai.
- Mantenha pressionada a tecla Ctrl (Windows) ou ⌘ (Mac) ao clicar nos elementos que você quer adicionar à seleção.
- Para selecionar um intervalo de elementos, clique no primeiro elemento e segure a tecla Shift enquanto clica no último.
Desmarcar um elemento: mantenha pressionada a tecla Ctrl (Windows) ou ⌘ (Mac) ao clicar no elemento que você quer remover da seleção.
Navegar por um elemento: clique duas vezes em um elemento para selecioná-lo como pai e navegar pelos itens dele. Você pode editar elementos filho existentes ou aninhar novos elementos no pai. Se o elemento for um componente com uma caixa de diálogo de edição, clicar nele duas vezes a abrirá.
Tipo e status do elemento
Para cada elemento, o "Painel de navegação" exibe um ícone indicando o tipo, além do ID, do nome ou do conteúdo de texto dele, se disponível. O painel também inclui os seguintes ícones de status:
- Um ícone de diamante indica quando um elemento tem uma vinculação dinâmica de dados.
- As camadas de guia exibem um ícone que pode ser clicado para convertê-las em um elemento normal.
- Os elementos ocultos e bloqueados são indicados por ícones de status que podem ser clicados para exibir ou desbloquear o elemento. Passe o cursor sobre um elemento visível ou desbloqueado para ver ícones que permitem ocultar ou bloquear esse item.
Ícones para cada tipo de elemento
Páginas
| Página principal | |
| Página |
Elementos
| Agrupar | |
| Div | |
| Imagem | |
| amp-img (imagem em um documento AMP) | |
| Elemento de vídeo | |
| Contêiner de texto | |
| Lista numerada | |
| Lista com marcadores | |
| Link |
Formas
| Caminho (desenhado pela ferramenta de caneta) | |
| Retângulo | |
| Oval | |
| Linha |
Componentes
| Componente "Gesto" | |
| Componente "Botão de imagem" | |
| Componente "Paralaxe" | |
| Componente "Área de toque" | |
| Componente "Toque para chamar / Enviar mensagem" | |
| Componente "Galeria 360°" | |
| Componente "Galeria carrossel" | |
| Componente "Navegação da galeria" | |
| Componente "Galeria deslizante" | |
| Componente "Galeria com transição" | |
| Componente amp-carousel | |
| Componente "Áudio" | |
| Componente "Vídeo" | |
| Componente "YouTube" | |
| Componente "Visualizador de modelos 3D" | |
| Componente "Efeito de imagem" | |
| Componente "Efeitos de partículas" | |
| Componente "Folha de sprite" | |
| Componente "Espiral" | |
| Componente "Botão" | |
| Componente "Caixa de seleção" | |
| Componente "Lista suspensa" | |
| Componente "Rótulo" | |
| Componente "Entrada numérica" | |
| Componente "Botão de opção" | |
| Componente "Controle deslizante" | |
| Componente "Campo de texto" | |
| Componente "Adicionar à Agenda" | |
| Componente "Troca de data" | |
| Componente "Mapa" | |
| Componente "Street View" | |
| Componente "Iframe" | |
| Componente "Classificação com estrelas" |
Elementos do pano de fundo
| Forma de pano de fundo retangular | |
| Forma de pano de fundo oval | |
| Forma de pano de fundo poligonal |
Clipes
| Clipe de áudio | |
| Videoclipe ou clipe de imagem |
Ícones de status
| Tem uma vinculação dinâmica ou variante | |
| Camada de guia | |
| Oculta/Em exibição (exibido ao passar o cursor) | |
| Bloqueada/Desbloqueada (exibido ao passar o cursor) |
Filtros
É possível filtrar a lista de elementos que você vê no "Painel de navegação". Se um elemento corresponder a um filtro, o elemento pai e os outros ancestrais também serão exibidos para que você possa ver onde o elemento correspondente está na estrutura do documento.
Para filtrar os elementos, clique no espaço ao lado do ícone de lupa na parte superior do "Painel de navegação" e digite o ID de um elemento, o valor da propriedade de nome ou o nome da tag ou do grupo. A correspondência dos elementos de texto também é feita com base no conteúdo de texto deles. Se você inserir o nome de um recurso, verá os componentes que usam esse recurso.
Você também pode usar filtros de tipo de elemento.
Filtros de tipo de elemento
O "Painel de navegação" inclui filtros para mostrar somente determinados tipos de elementos, como texto ou formas. Na parte superior do painel, clique nos ícones dos tipos de elemento que você quer ver no "Painel de navegação". Quando vários filtros estão ativos, você vê os elementos que correspondem a qualquer um dos filtros ativos.
Ícones de filtro de tipo de elemento
| Mostrar imagens e vídeos | |
| Mostrar componentes | |
| Mostrar texto | |
| Mostrar formas |