Google Web Designer tiene una amplia área central en la que trabajar en proyectos y editar código. Alrededor, están la barra de herramientas, la barra de opciones de herramientas, la línea de tiempo y un conjunto de paneles con los que puede realizar varias tareas, como modificar elementos y añadir componentes o eventos.
El documento
En el centro de la interfaz de Web Designer, se le mostrará el documento en el que esté trabajando.
Hay dos vistas de documento disponibles:
- La vista de diseño muestra las imágenes, el texto y otros elementos de su documento tal como se mostrarían en un navegador. La escena blanca representa el área visible del anuncio o de la página web.
- La vista de código muestra el código del documento con la codificación por color y el formato adecuados.
La vista de diseño y la vista de código se pueden personalizar en las preferencias.
1. Barra de herramientas 2. Barra de opciones de herramientas 3. Línea de tiempo 4. Paneles 5. Barra de vistas
Barra de vistas
En la barra de vistas puede elegir entre la vista de diseño y la vista de código, obtener una vista previa del documento en un navegador y publicar el anuncio.
Herramientas
La barra de herramientas contiene funciones para crear y manipular elementos en la escena. Entre ellas, se incluyen herramientas para crear texto y elementos sencillos de página, herramientas de selección de color y herramientas 3D.
| Herramienta | Descripción |
|---|---|
Herramienta de selección |
Permite seleccionar y mover objetos en la escena. |
Herramienta de trayectoria de movimiento |
Permite dibujar trayectorias de movimiento curvas sobre las que desplazar elementos animados. No está disponible para los anuncios AMP HTML ni para los anuncios de imagen. |
Herramienta para girar objetos 3D |
Permite girar objetos en tres dimensiones. |
Herramienta para trasladar objetos 3D |
Permite mover objetos en tres dimensiones. |
Herramienta de elemento |
Permite crear etiquetas HTML de cualquier tipo haciendo clic con el ratón y arrastrando en la escena. |
| Herramientas de lápiz, óvalo, rectángulo y línea |
Las herramientas de forma permiten crear dibujos SVG, como figuras básicas, y la herramienta de lápiz, curvas de Bézier. |
Herramienta de texto |
Permite añadir o editar texto. |
Máscaras rectangular, ovalada y poligonal |
Permiten añadir una máscara de ruta de clip a un elemento. |
Herramientas de fondo Rectángulo, Óvalo y Polígono |
Permiten añadir un elemento div con un filtro de fondo. Solo están disponibles para los documentos de imagen y vídeo. |
Herramientas de relleno, trazo y degradado |
Permite cambiar el color de los elementos de un proyecto, como el relleno, el trazo y el relleno gradual. |
Herramienta de cuentagotas |
Permite seleccionar un color de un elemento de la escena. |
Herramienta de rotar escena 3D |
Permite cambiar la vista 3D del proyecto. |
Herramienta de mano |
Permite cambiar la vista de la escena. |
Herramienta de zoom |
Permite ampliar y reducir la creatividad. |
 Color de relleno y color de trazo |
Permite cambiar el color de relleno y de trazo (borde) activo. |
Opciones de herramientas
La barra de opciones de herramientas, situada en la parte superior, muestra las opciones de la herramienta seleccionada. Por ejemplo, cuando se selecciona la herramienta de texto, la barra de opciones de herramientas muestra las opciones de fuente y diseño de texto.
Línea de tiempo
En la línea de tiempo, puede crear animaciones con fotogramas clave. En el Modo rápido, la animación se crea escena a escena, mientras que en el Modo avanzado se puede animar cada elemento por separado.
Paneles
En Paneles se muestran los paneles Color, Propiedades, Texto, Componentes, CSS, Efectos CSS, Adaptable, Eventos, Dinámico, Biblioteca, Validador de anuncios y Esquema. Puede modificar su tamaño, reorganizarlos, combinarlos y cerrarlos. Más información sobre cómo organizar paneles
Pestañas de documentos
Cuando hay varios documentos abiertos, sus nombres de archivo se muestran en pestañas independientes. Puede cambiar de documento haciendo clic en una pestaña, pulsando Ctrl + Tabulador para ir al documento siguiente o Mayús + Ctrl + Tabulador para ir al anterior.
Si en la ventana no caben todas las pestañas de los documentos, puede ver una lista de los documentos abiertos en un menú emergente haciendo clic en el icono Más 