Auto Layout In Zero Block
Métodos avanzados para ordenar elementos dentro de un grupo
Vea el tutorial en vídeo sobre cómo utilizar la función de diseño automático en Tilda's Zero Block,
o lea las instrucciones detalladas con capturas de pantalla a continuación.
o lea las instrucciones detalladas con capturas de pantalla a continuación.
Auto Layout es una herramienta que permite crear maquetaciones con capacidad de respuesta y organizar eficazmente los elementos dentro de un grupo.
Resulta especialmente útil para crear elementos de diseño complejos como menús de navegación, listas, botones, tarjetas, etc. Independientemente de los cambios que realices en el contenido, el diseño se adapta automáticamente, reduciendo la necesidad de realizar ajustes manuales.
Resulta especialmente útil para crear elementos de diseño complejos como menús de navegación, listas, botones, tarjetas, etc. Independientemente de los cambios que realices en el contenido, el diseño se adapta automáticamente, reduciendo la necesidad de realizar ajustes manuales.
Cómo utilizar el diseño automático
Para activar el diseño automático, acceda a la configuración del grupo. Asegúrese de que los elementos agrupados están configurados como "Objeto" y no como grupo "Lógico". Una vez seleccionada la opción "Objeto" en Grupo, aparecerá la sección Diseño automático.
En la sección Diseño automático, seleccione "Auto" para el ajuste Flex. La activación del diseño automático proporciona acceso a varios ajustes que controlan la forma en que los elementos reaccionan a los cambios de contenido o tamaño y se alinean dentro del grupo en consecuencia. Exploremos estos ajustes y aprendamos a personalizarlos.
Ajuste de la altura y la anchura del contenedor mediante el ajuste Abrazo
Con la opción Diseño automático activada, hay dos nuevos ajustes de Grupo que permiten gestionar la anchura y la altura del contenedor con elementos agrupados.
Por defecto, está seleccionada la opción Abrazo, que hace que el tamaño del grupo sea flexible, ajustándolo en función del tamaño de los elementos dentro del contenedor y del espaciado entre ellos.
Si cambia manualmente el tamaño del grupo o establece una anchura o altura personalizadas, Abrazo cambiará automáticamente a Fijo. La opción Fijo significa que el tamaño del grupo es personalizado, y no se verá afectado aunque cambies el espaciado entre elementos o su tamaño.
Por defecto, está seleccionada la opción Abrazo, que hace que el tamaño del grupo sea flexible, ajustándolo en función del tamaño de los elementos dentro del contenedor y del espaciado entre ellos.
Si cambia manualmente el tamaño del grupo o establece una anchura o altura personalizadas, Abrazo cambiará automáticamente a Fijo. La opción Fijo significa que el tamaño del grupo es personalizado, y no se verá afectado aunque cambies el espaciado entre elementos o su tamaño.
Es posible que observe que hay otro ajuste Abrazar disponible. Cuando está activado, recalcula los valores de anchura y altura y los ajusta al mínimo posible para que quepan todos los elementos, teniendo en cuenta su tamaño y el valor establecido en el ajuste Gap (que controla el espaciado). Si cambia el tamaño de los elementos, Hug ajustará automáticamente la anchura o la altura en consecuencia.
Dirección
La opción Dirección controla la alineación de los elementos dentro del grupo. Aquí tiene tres opciones: Horizontal, Vertical y Envolver (moverse a la siguiente fila).
Cuando se selecciona la dirección Horizontal , todos los elementos se alinearán a lo largo del eje X. Esto es ideal para organizar elementos en fila, como iconos, elementos de menú o botones. Esto es ideal para organizar elementos en una fila, como iconos, elementos de menú o botones.
Cuando se selecciona la dirección Horizontal , todos los elementos se alinearán a lo largo del eje X. Esto es ideal para organizar elementos en fila, como iconos, elementos de menú o botones. Esto es ideal para organizar elementos en una fila, como iconos, elementos de menú o botones.
Cuando se establece la dirección Vertical, todos los elementos del grupo se alinearán a lo largo del eje Y. Esto resulta especialmente útil al diseñar listas o elementos de tarjeta apilados uno debajo de otro.
Cuando se elige la dirección Envolver, los elementos se alinean en una fila en función de la anchura del contenedor. Si un elemento es demasiado ancho para caber, se moverá a la siguiente fila. Esto puede ser especialmente útil para galerías de fotos, nubes de etiquetas de varias líneas y para hacer que los sitios web respondan a diferentes resoluciones de pantalla.
Brecha
El ajuste Espacio controla el espaciado entre elementos dentro del grupo según la dirección elegida. Para la alineación Horizontal, ajusta la separación del eje X, mientras que para la alineación Vertical, cambia la separación del eje Y. Cuando se establece la dirección Envolver, se pueden especificar separaciones para ambos ejes.
Tenga en cuenta que si la opción Abrazar está activada para la dirección elegida, el ajuste de Separación puede afectar a la anchura o altura del contenedor.
Tenga en cuenta que si la opción Abrazar está activada para la dirección elegida, el ajuste de Separación puede afectar a la anchura o altura del contenedor.
Alinear elementos
La opción Alinear elementos ajusta la alineación de los elementos de un grupo a lo largo del eje principal (vertical u horizontalmente) en función de la dirección elegida.
Por ejemplo, si se selecciona la dirección Horizontal, los elementos se alinean verticalmente en el centro, la parte superior o la parte inferior del contenedor. Por el contrario, si se elige la dirección Vertical, los elementos se alinean horizontalmente hacia el centro, la izquierda o la derecha del contenedor. Sin embargo, si la opción Abrazar está activada y todos los elementos tienen la misma anchura o altura, la alineación no cambiará.
Por ejemplo, si se selecciona la dirección Horizontal, los elementos se alinean verticalmente en el centro, la parte superior o la parte inferior del contenedor. Por el contrario, si se elige la dirección Vertical, los elementos se alinean horizontalmente hacia el centro, la izquierda o la derecha del contenedor. Sin embargo, si la opción Abrazar está activada y todos los elementos tienen la misma anchura o altura, la alineación no cambiará.
Justificar el contenido
El ajuste Justificar contenido proporciona opciones de alineación alternativas, utilizando un eje diferente al de Alinear elementos. Este ajuste sólo está disponible cuando no se ha seleccionado la opción Abrazar para la anchura o la altura a lo largo del eje.
Además de la alineación básica central o lateral, también hay disponibles opciones de alineación inteligente:
La opción Espacio entre distribuye uniformemente los elementos dentro del grupo, sin espacio en blanco entre ellos y el contenedor.
La opción Espacio alrededor distribuye los elementos uniformemente dentro del grupo, asegurando que la distancia de los elementos al contenedor sea la mitad del espacio entre elementos.
La opción Espacio uniformemente distribuye los elementos uniformemente dentro del grupo, asegurando que la distancia de los elementos al contenedor sea igual al espacio entre elementos.
Además de la alineación básica central o lateral, también hay disponibles opciones de alineación inteligente:
La opción Espacio entre distribuye uniformemente los elementos dentro del grupo, sin espacio en blanco entre ellos y el contenedor.
La opción Espacio alrededor distribuye los elementos uniformemente dentro del grupo, asegurando que la distancia de los elementos al contenedor sea la mitad del espacio entre elementos.
La opción Espacio uniformemente distribuye los elementos uniformemente dentro del grupo, asegurando que la distancia de los elementos al contenedor sea igual al espacio entre elementos.
Alinear contenidos
El ajuste Alinear contenido ordena los elementos dentro del grupo y sólo está disponible cuando se selecciona la dirección Envolver y hay varias filas de contenido. Alinea verticalmente todas las filas al contenedor a menos que se seleccione Abrazar.
Con Alinear contenido, puede alinear las filas como de costumbre al centro o a los lados. De forma similar a la configuración anterior, también puede elegir una de las opciones de alineación inteligente: Espacio entre (que distribuye uniformemente los elementos sin ningún espacio desde el contenedor), Espacio alrededor (que distribuye uniformemente los elementos con una distancia desde el contenedor igual a la mitad del espacio entre elementos) y Espacio uniformemente (que distribuye uniformemente los elementos con una distancia desde el contenedor igual al espacio entre elementos).
Con Alinear contenido, puede alinear las filas como de costumbre al centro o a los lados. De forma similar a la configuración anterior, también puede elegir una de las opciones de alineación inteligente: Espacio entre (que distribuye uniformemente los elementos sin ningún espacio desde el contenedor), Espacio alrededor (que distribuye uniformemente los elementos con una distancia desde el contenedor igual a la mitad del espacio entre elementos) y Espacio uniformemente (que distribuye uniformemente los elementos con una distancia desde el contenedor igual al espacio entre elementos).
