Las funciones adaptables no son compatibles con los anuncios AMP HTML. Se pueden usar diseños en varios tamaños en los anuncios de vídeo, los GIFs animados y los anuncios de imagen.
Permite crear páginas flexibles que se adaptan a varios tamaños u orientaciones de viewport, por lo que no es necesario crear varios diseños. Google Web Designer ofrece distintas herramientas para implementar un diseño adaptable.
Los documentos deben tener, como mínimo, dimensiones de página adaptables. También puede crear un diseño fluido definiendo tamaños y posiciones de objeto mediante porcentajes. Si quiere personalizar cada elemento para distintos tamaños o intervalos de tamaños de viewport, utilice media rules.
Los anuncios de imagen no pueden ser adaptables, pero pueden usar el flujo de trabajo adaptable con un diseño en varios tamaños para exportar diferentes tamaños desde un mismo documento.
Dimensiones de páginas adaptables
Hacer que todo el documento sea adaptable
La anchura y la altura de las páginas deben estar al 100 % para que ocupen todo el espacio disponible de la pantalla.
-
Documentos ya creados: en el panel Adaptable, marque la casilla Diseño adaptable.
-
Archivos nuevos: en el cuadro de diálogo para crear archivos, marque la casilla Diseño adaptable al especificar las dimensiones. Esta opción no está disponible para todos los tipos de archivo.
Para que el contenido de la página sea adaptable, puede usar el diseño fluido y media rules.
Diseño fluido
Tamaños y posiciones basados en porcentajes
Visión general de la creación mediante porcentajes
Además de las dimensiones de la página, también puede indicar el tamaño y la posición de los elementos usando porcentajes en lugar de píxeles. Este método permite conservar el tamaño y la alineación de cada elemento en relación con el contenedor superior, incluso cuando cambia ese contenedor.
Al alinear elementos, la opción Diseño fluido de las herramientas de alineación y distribución permite definir fácilmente posiciones usando porcentajes.
Media rules
Anular atributos y estilos CSS para diferentes orientaciones y tamaños
Las media rules permiten que el documento aplique distintos estilos según el tamaño y la orientación de los viewports. Por ejemplo, un teléfono podría mostrar contenido en una sola columna, mientras que un tablet podría mostrar el mismo contenido en dos. Estos cambios, denominados "anulaciones", se aplican cuando se detectan tamaños o intervalos de tamaños especificados.
Puede cambiar entre varios conjuntos de reglas en el panel Adaptable:
- Reglas predeterminadas: seleccione Editar documento base cuando haga cambios en el conjunto de estilos predeterminado o cuando haga cambios que afecten a todos los tamaños de viewport (por ejemplo, al añadir o eliminar recursos, componentes o eventos).
- Media rules: seleccione un tamaño o un intervalo de tamaños específico para anular los estilos y atributos predeterminados de ese tamaño de viewport.
Cuando seleccione una media rule, puede definir estilos y atributos que solo se apliquen a ese tamaño o intervalo de tamaños. Por ejemplo, puede ajustar la posición, el tamaño, la fuente, la visibilidad y las animaciones de un elemento. Google Web Designer también permite anular el contenido de texto, la configuración del ajuste de texto y las propiedades de los componentes.
