El panel Esquema le proporciona una vista de árbol de los elementos y clips que hay en su documento. Muestre y oculte el panel Esquema desde el menú Ventana.
La lista de elementos del panel Esquema tiene algunas de las mismas funciones que los elementos de la escena. Por ejemplo, puede hacer clic en los elementos del panel Esquema para seleccionarlos, hacer clic con el botón derecho para ver un menú emergente de comandos específicos del elemento correspondiente y hacer doble clic en los componentes que tienen un cuadro de diálogo de edición para abrir dicho cuadro de diálogo.
Organización
El panel Esquema organiza los elementos de los anuncios HTML5 y de los documentos HTML con páginas según la página del documento en la que se encuentren. Cuando está en el modo de edición de grupo, solo se muestran los elementos que hay en el grupo.
De manera predeterminada, el panel Esquema muestra los elementos en el mismo orden que las capas de la línea de tiempo cuando está en el modo Avanzado. Puede cambiar al orden del DOM en las preferencias de la vista de diseño.
Mostrar u ocultar un elemento: en el panel Esquema, haga clic en la flecha situada junto a un elemento para mostrar u ocultar elementos anidados.
Mostrar u ocultar todos los elementos anidados: haga doble clic en la flecha situada junto a un elemento para mostrar u ocultar todos los elementos anidados correspondientes. También puede mantener pulsada la tecla Ctrl (Windows), o bien ⌘ o Alt (Mac), mientras hace clic en la flecha.
Reordenar elementos: arrastre un elemento al lugar que quiera de la lista. Aparecerá una línea amarilla donde se moverá el elemento. También puede arrastrar un elemento secundario a otro elemento superior.
Anidar elementos: arrastre un elemento dentro de otro para anidarlo dentro de ese elemento superior. Aparecerá un cuadro amarillo alrededor del futuro elemento superior.
Selección
La selección se refleja en la escena, en la línea de tiempo cuando está en el modo Avanzado, y en el panel Esquema, por lo que si se selecciona un elemento en un lugar, también se selecciona en los demás. Google Web Designer cambia a diferentes niveles dentro de elementos anidados o a diferentes páginas, según sea necesario. La etiqueta del elemento superior que se está usando se muestra en amarillo.
Seleccionar un elemento: haga clic en un elemento para seleccionarlo.
Seleccionar varios elementos: puede seleccionar varios elementos si comparten el mismo elemento superior.
- Mantenga pulsada la tecla Ctrl (Windows) o ⌘ (Mac) mientras hace clic en los elementos que quiera añadir a la selección.
- Para seleccionar un conjunto de elementos contiguos, haga clic en el primer elemento, mantenga pulsada la tecla Mayús y haga clic en el último elemento.
Desmarcar un elemento: mantenga pulsada la tecla Ctrl (Windows) o ⌘ (Mac) mientras hace clic en el elemento que quiera quitar de la selección.
Desplazarse dentro de un elemento: haga doble clic en un elemento para acceder a él y, de este modo, convertirlo en el superior. Puede editar sus elementos secundarios o anidar nuevos elementos en él. Si el elemento es un componente con un cuadro de diálogo de edición, al hacer doble clic en él se abre el cuadro de diálogo.
Tipo de elemento y estado
En el panel Esquema se muestra un icono junto a cada elemento para indicar el tipo de elemento, además de su ID, nombre o contenido del texto, si están disponibles. En el panel Esquema también se muestran los siguientes iconos de estado:
- El icono del rombo indica cuándo tiene un elemento un data binding dinámico.
- Las capas guía muestran un icono en el que puede hacer clic para convertirlas en un elemento normal.
- Los elementos ocultos y bloqueados se indican mediante iconos de estado en los que puede hacer clic para mostrarlos o desbloquearlos. Coloque el cursor sobre un elemento visible o desbloqueado para ver los iconos que le permiten ocultarlo o bloquearlo.
Iconos de cada tipo de elemento
Páginas
| Página principal | |
| Página |
Elementos
| Grupo | |
| Div | |
| Imagen | |
| amp-img (imagen dentro de un documento AMP) | |
| Elemento de vídeo | |
| Contenedor de texto | |
| Lista numerada | |
| Lista con viñetas | |
| Enlace |
Formas
| Trazado (dibujada por la herramienta de lápiz) | |
| Rectángulo | |
| Óvalo | |
| Línea |
Componentes
| Componente Gesto | |
| Componente Botón de imagen | |
| Componente Paralaje | |
| Componente Área de pulsación | |
| Componente Tocar para llamar o enviar mensaje de texto | |
| Componente Galería 360° | |
| Componente Galería en carrusel | |
| Componente Navegación por la galería | |
| Componente Galería deslizable | |
| Componente Galería de transiciones | |
| Componente amp-carousel | |
| Componente Audio | |
| Componente Vídeo | |
| Componente YouTube | |
| Componente Visor de modelos 3D | |
| Componente Efecto de imagen | |
| Componente Efectos de partículas | |
| Componente Hoja de sprites | |
| Componente Espiral | |
| Componente Botón | |
| Componente Casilla | |
| Componente Desplegable | |
| Componente Etiqueta | |
| Componente Introducción de números | |
| Componente Botón de selección | |
| Componente Control deslizante | |
| Componente Campo de texto | |
| Componente Añadir a calendario | |
| Componente Intercambio de fechas | |
| Componente Mapa | |
| Componente Street View | |
| Componente Iframe | |
| Componente Valoraciones por estrellas |
Elementos de Fondo
| Forma de fondo Rectángulo | |
| Forma de fondo Óvalo | |
| Forma de fondo Polígono |
Clips
| Clip de audio | |
| Clip de vídeo o clip de imagen |
Iconos de estado
| Tiene un binding dinámico o de variante | |
| Capa guía | |
| Oculto o visible (se muestra al colocar el cursor sobre el elemento) | |
| Bloqueado o desbloqueado (se muestra al colocar el cursor sobre el elemento) |
Filtrado
Puede filtrar la lista de elementos que ve en el panel Esquema. Si un elemento corresponde con un filtro, el elemento superior y otros elementos anteriores también se muestran para que pueda ver dónde se encuentra el elemento filtrado en la estructura del documento.
Para filtrar elementos, haga clic en el espacio que hay junto al icono de la lupa , situado en la parte superior del panel Esquema, y escriba parte de un ID de elemento, el valor de una determinada propiedad, el nombre de una etiqueta o el nombre de un grupo. Los elementos de texto también se podrán filtrar según el texto que contengan. Si introduce el nombre de un recurso, se filtrarán los componentes que lo utilicen.
También puede filtrar elementos por su tipo.
Filtros de tipo de elemento
El panel Esquema incluye filtros que permiten mostrar solo ciertos tipos de elementos, como texto o formas. En la parte superior del panel, haga clic en los iconos de los tipos de elementos que desea ver en Esquema. Si hay varios filtros activos de este tipo, verá elementos que coinciden con cualquiera de los filtros activos.
Iconos de los filtros de tipo de elemento
| Mostrar imágenes y vídeos | |
| Mostrar componentes | |
| Mostrar texto | |
| Mostrar formas |