El diseño fluido permite alinear los elementos de forma que se adapten automáticamente la alineación y las proporciones a diferentes tamaños y orientaciones de las páginas. El diseño fluido es especialmente útil en el caso de los documentos adaptables, pero también puede usarse con elementos de tamaño fijo.
Puede utilizar distintas técnicas en Google Web Designer para crear un diseño fluido:
Flexbox (Fluid Layout) - Google Web Designer
Valores determinados mediante porcentajes
Puede definir tamaños y posiciones en porcentajes en lugar de en píxeles para que los elementos permanezcan proporcionales y relativamente alineados entre sí.
Para usar porcentajes en lugar de píxeles, haga clic en píxeles en el campo del panel Propiedades y seleccione % en el menú desplegable.
Si quiere convertir todos los valores de posición y tamaño a porcentajes, haga clic en el botón Utilizar porcentajes .
Puede usar una combinación de valores determinados mediante porcentajes y mediante píxeles en el mismo documento.
Anclaje
La función de anclaje le permite alinear de forma persistente los elementos de un contenedor, incluso si cambia el tamaño, el espacio de relleno o la anchura del borde de un elemento o contenedor. Las propiedades de posición o de traslación que defina desplazarán el elemento desde el punto de origen.
Debe seleccionar un modo de anclaje horizontal y un modo de anclaje vertical. El valor predeterminado es "parte superior izquierda".
Modos de anclaje horizontal
| Modo | Efecto |
|---|---|
| izquierda | El borde izquierdo del elemento se alinea con el borde izquierdo del contenedor. |
| centro | El centro horizontal del elemento se alinea con el centro horizontal del contenedor. |
| derecha | El borde derecho del elemento se alinea con el borde derecho del contenedor. |
Modos de anclaje vertical
| Modo | Efecto |
|---|---|
| parte superior | El borde superior del elemento se alinea con el borde superior del contenedor. |
| mitad | El centro vertical del elemento se alinea con el centro vertical del contenedor. |
| parte inferior | El borde inferior del elemento se alinea con el borde inferior del contenedor. |
Puede seleccionar el modo de anclaje en el panel Propiedades o en la barra de opciones de herramientas cuando la herramienta de selección esté activa.
Flexbox
Flexbox (módulo de diseño de cuadros flexibles de CSS) es una forma de organizar de forma flexible los elementos de un contenedor en filas o columnas. Los elementos pueden ampliarse o reducirse para optimizar el espacio del contenedor, conservando el orden y el espacio especificados.
Puede usar Flexbox y configurar sus propiedades en la pestaña Flexbox del panel Adaptable. Más información sobre cómo usar Flexbox