Nota
Este contenido es relevante tanto para el modo Flex en el Editor tradicional como para el Editor 2.0. Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Flex es un modo para diseñar secciones con resolución de pixeles perfecta y con capacidades de diseño adicionales. Si está empleando el Editor tradicional, puede ingresar al modo flexible para diseñar. Si está empleando Editor 2.0, empleará flex de forma predeterminada.
El panel de diseño se muestra en el lado derecho del modo flex y contiene las propiedades de diseño para el elemento seleccionado (sección, columna, widget, columna interior o cuadrícula avanzada). Cada elemento tiene diferentes propiedades que se pueden ajustar en el panel de diseño, lo que significa que las propiedades de diseño son diferentes según el elemento seleccionado. Las propiedades de diseño incluyen alineación, disposición, espaciado, tamaño y más, según el elemento seleccionado.
Para abrir el panel de diseño, haga clic en un elemento mientras está en modo flexible y luego haga clic en Diseño . El panel de diseño se abre en el lado derecho del modo flexible para que no interfiera con su capacidad de ver y editar su diseño. O bien, puede hacer clic en el icono Editar diseño en el menú flotante. Luego de cerrar el panel de diseño, puedes volver a abrirlo haciendo clic en el ícono Editar diseño en la esquina superior derecha.
El panel de diseño se compone de 5 secciones: Alinear, Diseño, Espaciado, Tamaño y Animación y Fondo. A continuación se muestra una descripción de cada sección y lo que puede lograr.
Disponible para elementos individuales dentro de una columna o columna interior. Los elementos individuales dentro de una columna o columna interna vertical con diseño automático vertical se pueden alinear a la izquierda, al centro, a la derecha o estirarse horizontalmente para adaptarse al 100 % del ancho de su contenedor.
Los elementos también se pueden alinear desde el menú flotante haciendo clic en el icono Alinear ().
Sangrado completo
Solo está disponible para secciones y solo se puede cambiar desde el punto de interrupción principal desktop . Cuando está activado, permite que el contenido abarque todo el ancho de la pantalla. Cuando está desactivado, el ancho del contenido puede abarcar un máximo de 1200 pixeles. De forma predeterminada, la configuración de sangrado completo está desactivada. Para obtener más información sobre los puntos de interrupción, consulte Tamaños de pantalla y dispositivos.
Alinear elementos
Le permite alinear verticalmente varios elementos en una columna o columna interna a la vez. En el editor tradicional, los elementos solo se pueden alinear de forma individual y horizontal. La alineación vertical es útil porque mantiene la posición de los elementos consistente entre todos los puntos de interrupción sin realizar ajustes adicionales. Para obtener más información, consulte Alineación y espaciado.
Diseño automático
Le permite seleccionar si los elementos dentro de las columnas y las columnas interiores se alinean automáticamente de forma horizontal o vertical. En forma predeterminada, los elementos se alinean verticalmente. Los elementos solo se pueden mover en la misma dirección que la alineación automática del diseño. Por ejemplo, si los elementos están alineados verticalmente, solo se pueden mover los elementos en forma vertical y no horizontal. El diseño automático ayuda a garantizar que su diseño esté optimizado para coincidir con cualquier punto de ruptura.
Envoltura
Disponible para columnas y columnas internas únicamente cuando se selecciona Apilar horizontalmente para el diseño automático. Cuando se configura en Ajustar, permite que los elementos dentro de la columna o Columna interna mantengan sus dimensiones y se ajusten a medida que cambia el ancho de la pantalla.
Alinear filas
Disponible solo para columnas y columnas internas cuando se selecciona Ajustar para el diseño automático. Le permite establecer la alineación de filas dentro de una columna o columna interna. Esta configuración no afecta la alineación de los elementos dentro de las filas, solo las filas mismas.
Espacio entre elementos
Permite establecer el espacio entre columnas o widget una vez y se aplica a todas las columnas de una sección o a todas las widget de una columna. En el caso de las columnas, si la propiedad de diseño automático se establece en vertical, el espacio entre widget se mide en pixeles. Si el diseño automático es horizontal, el espacio entre widget se mide en porcentajes. Esta propiedad no es aplicable a elementos dentro de columnas internas o cuadrículas avanzadas.
Establecer márgenes y relleno
Los márgenes son el espacio entre el borde del elemento y el borde de la sección, columna, columna interna o cuadrícula avanzada en la que se encuentra.
El relleno es el espacio interior del elemento. Haga clic en el número de margen o relleno para escribir un nuevo valor y, a continuación, use el menú desplegable para seleccionar la unidad en la que se mide el espacio (px, %, vh o vw). En forma predeterminada, el espaciado horizontal se mide en porcentajes y el espaciado vertical se mide en píxeles.
Por ejemplo, si seleccionas una columna y estableces el relleno izquierdo en 5 px, agregará 5 px de espacio entre el borde izquierdo de la columna y el borde exterior de los elementos dentro de la columna. Si, para esa misma columna, estableces el margen izquierdo en 5 px, agregará 5 px de espacio entre el borde de la columna y el borde de la sección que la contiene.
Restablecer relleno o margen
Cuando se hace clic en el panel de diseño o en el menú flotante, se restablece el relleno o los márgenes del elemento seleccionado a cero.
Dependiendo del elemento seleccionado, puedes ajustar la altura y el ancho, y los valores máximos y mínimos. En el modo flexible, la altura se puede medir en px, vh, porcentaje y A. Sin embargo, la altura de las columnas flexibles y el espacio entre columnas solo se pueden medir en porcentaje. Para obtener más información sobre las unidades de tamaño, consulte Unidades de tamaño.
Las unidades de tamaño predeterminadas son diferentes para cada elemento. Por ejemplo, de forma predeterminada, los cuadros de texto tienen un ancho del 100% y los botones tienen un ancho de 280 px.
Para las secciones, solo puedes cambiar la altura. El ancho de la sección lo establece el dispositivo, mientras que el ancho del contenido de la sección lo establece la configuración Ancho del contenido en el tema del sitio. Para las columnas, solo se puede cambiar el ancho y la altura, definidos por la altura de la sección o por sus elementos internos. En el caso de las columnas internas y widget puede establecer la altura y la anchura, junto con los valores mínimo y máximo de cada una. Se puede emplear cualquier tamaño de unidad.
Las propiedades de animación y fondo en el modo flex son las mismas que en el editor clásico.
Nota
Parallax está disponible para todos los widget y contenedores, y se puede aplicar en todos los tamaños de pantalla. Para habilitar el paralaje, haga clic en la imagen, seleccione Editar diseño, desplazar hasta la sección Fondo del panel de diseño y abra el menú Posición de la imagen .
La opción de mantener una imagen de fondo estática no está disponible para tabletas, dispositivos móviles y Mac OS debido a una limitación de iOS.
Las cuadrículas avanzadas tienen propiedades de panel de diseño que no están disponibles para otros tipos de elementos, debido a la capacidad de crear composiciones de estilo libre y elementos superpuestos. Le recomendamos que revise su diseño en distintos puntos de ruptura.
Alinear
Los elementos únicos de una cuadrícula avanzada se pueden alinear y estirar en cualquier dirección porque no están restringidos por el diseño automático.
Orden
En la sección Disposición del panel de diseño, esta propiedad solo se puede emplear cuando hay varios elementos dentro de una cuadrícula avanzada. Le permite llevar un elemento seleccionado al frente, hacia adelante, hacia atrás o hacia atrás. Para obtener más información, consulte Crear elementos superpuestos.
Reorganizar el diseño
Permite seleccionar cómo se organizan las columnas y filas en la cuadrícula avanzada para crear un diseño.
Personalizar el diseño
Permite seleccionar cómo se organizan las columnas y filas en la cuadrícula avanzada para crear un diseño.
Alfiler
Le permite definir la posición del elemento dentro de la cuadrícula. Una vez configurado, el elemento permanecerá en la misma posición, incluso cuando cambie el tamaño de la cuadrícula.
Ubicación de la cuadrícula
Disponible para los elementos dentro de cuadrículas avanzadas que se han dividido en columnas o en filas para crear un diseño. Muestra dónde está el elemento en la cuadrícula.
Mantener proporciones
Cuando está activado, garantiza que los elementos dentro de una cuadrícula avanzada conserven sus proporciones incluso cuando cambia el tamaño de la cuadrícula.
El widget de imagen también contiene un botón de alternancia Mantener proporción , que mantiene sus proporciones originales.
Nota
Este contenido es relevante tanto para el modo Flex en el Editor tradicional como para el Editor 2.0. Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Comprender y emplear eficazmente las unidades de tamaño es fundamental para crear diseños que no solo sean visualmente atractivos, sino que también respondan a distintos dispositivos y tamaños de pantalla. El panel de diseño, ubicado en el lado derecho del lienzo del editor en el Editor 2.0 o cuando está en modo Flex en el Editor tradicional, sirve como centro de control para las propiedades de diseño de los elementos seleccionados, incluidas secciones, columnas, widget, columnas internas y cuadrículas avanzadas. Este artículo revisa las unidades de tamaño disponibles en el panel de diseño y ofrece ejemplos prácticos para su uso.
Además, Editor 2.0 permite a los usuarios configurar unidades de tamaño desde el punto de interrupción principal (desktop), lo que garantiza la escalabilidad en todos los tamaños de pantalla. Los usuarios pueden ajustar las unidades de tamaño en los puntos de interrupción de tabletas y dispositivos móviles sin afectar otros puntos de interrupción. Para obtener más información, consulte Tamaños de pantalla y dispositivos.
El porcentaje (%) es una unidad de tamaño dinámica que determina la proporción del contenedor (sección, columna, columna interna o cuadrícula avanzada) ocupada por el elemento en varios tamaños de pantalla. Normalmente, los anchos de los elementos flexibles se establecen de forma predeterminada en porcentajes. Se recomienda emplear porcentajes cuando se desea mantener la coherencia del diseño en todos los tamaños de pantalla sin necesidad de realizar ajustes manuales de pixeles en cada punto de interrupción.
Por ejemplo, establecer ambas columnas en un diseño de dos columnas al 50 % de ancho garantiza que se escalen automáticamente al 50 % en todos los tamaños de pantalla.
Los porcentajes son beneficiosos para preservar los tamaños relativos de los elementos en diferentes dimensiones de pantalla. Esto significa que los elementos se escalan proporcionalmente a su contenedor principal (sección o columna), lo que garantiza la uniformidad en la apariencia del diseño.
Por ejemplo, una imagen configurada con un ancho del 50% dentro de una columna siempre ocupará la mitad del ancho de la columna, independientemente del tamaño de la pantalla. En consecuencia, mientras que la columna y la imagen pueden parecer más estrechas en los dispositivos móviles en comparación con desktop, la imagen mantiene su ancho proporcional. De manera similar, establecer el relleno entre columnas en 4% garantiza un espaciado consistente en relación con las columnas y otros elementos de la pantalla, adaptar a diferentes tamaños de pantalla.
Los píxeles (px) proporcionan una unidad de medida fija que no se ve afectada por las variaciones de tamaño del dispositivo. Por ejemplo, un botón configurado en 250 px mantiene su tamaño en dispositivos móviles, tabletas y desktop.
Sin embargo, depender únicamente de los píxeles para el tamaño puede dificultar la responsividad, lo que requiere ajustes manuales en cada punto de ruptura. Por lo tanto, mientras que los píxeles garantizan la coherencia en el tamaño de los elementos, se recomienda utilizar porcentajes para promover el diseño responsivo. Este enfoque minimiza la necesidad de realizar ajustes individuales de píxeles en los puntos de ruptura, lo que agiliza el proceso de diseño y mejora la responsividad general.
El ancho de la ventana gráfica (Vw) ajusta dinámicamente los elementos en función del ancho de la pantalla (ventana gráfica), lo que garantiza un escalado proporcional en diferentes dispositivos. Por ejemplo, asignar 50 Vw a un elemento asigna la mitad del ancho de la pantalla.
La altura de la ventana (vh) escala dinámicamente los elementos en relación con la altura de la pantalla (la ventana). Por ejemplo, al designar 25 vh a un elemento se reserva una cuarta parte de la altura de la pantalla para ese elemento. Esto es especialmente beneficioso para fondos de pantalla completa (100 % vh) o elementos que necesitan sincronización con la altura de la pantalla.
La unidad automática se ajusta dinámicamente en función de la altura del contenido, por lo que es adecuada para bloques de texto y columnas de gran altura, porque garantiza que se redimensionen en función de su contenido. Normalmente, los bloques de texto tienen unidades automáticas de forma predeterminada. Esta característica permite que los elementos se expandan o contraigan sin problemas y se mantenga un diseño proporcional de la disposición.
En el Editor 2.0, el concepto de padre-hijo rige la organización de los elementos, y los elementos primarios, como encabezados, cuerpos, menús y pies de página, contienen al menos una sección. Cada sección, a su vez, alberga al menos una columna, que sirve como contenedor para varios elementos como texto, imágenes o widget como columnas internas y cuadrículas avanzadas.
Los elementos principales conservan su configuración de diseño, lo que permite un control centralizado sobre su apariencia. Sin embargo, si una sección que está dentro de un elemento principal tiene una configuración de color de fondo específica, es posible que el fondo del elemento principal no refleje esa personalización. Esta estructura jerárquica garantiza un enfoque sistemático para la organización del sitio web y facilita flujos de trabajo de diseño eficientes y una presentación coherente de contenido.
En el Editor 2.0, la jerarquía de elementos sigue una estructura predeterminada: las secciones contienen columnas y las columnas contienen widgets. Esta disposición jerárquica garantiza que no pueda añadir un widget directamente a una sección sin que este esté anidado dentro de una columna. Hay varias maneras de seleccionar un elemento (sección, columna o widget):
-
Selección directa de objetos en el lienzo del editor: los usuarios pueden interactuar directamente con los elementos en el lienzo del editor, lo que facilita la identificación y modificación de componentes específicos sin la necesidad de una navegación extensa a través de paneles o menús. Al seleccionar un objeto, el panel de diseño con todas las opciones de diseño relevantes para ese elemento aparecerá en el panel de diseño de la derecha.
-
Migas de pan del menú flotante: los usuarios pueden volver a navegar a los contenedores principales empleando migas de pan en el menú flotante. Al seleccionar un elemento específico, los usuarios pueden simplemente hacer clic en las migas de pan azules en la parte superior del elemento para regresar a su contenedor principal.
-
Migas de pan en la parte superior del panel de diseño: El panel de diseño también incluye opciones de navegación en la parte superior en forma de migas de pan. Estas migas de pan permiten a los usuarios saltar rápidamente entre diferentes secciones o elementos dentro del lienzo.
-
Panel de capas: cuando se selecciona un elemento, el panel de capas resalta las capas asociadas con ese elemento. Al mismo tiempo, el editor proporciona retroalimentación visual, facilitando la navegación dentro del lienzo.
Las secciones flexibles son filas con dos columnas flexibles predeterminadas que crean un diseño básico. Una vez que agregó una sección, puede agregar, eliminar o reorganizar columnas adicionales, columnas internas o cuadrículas avanzadas para crear el diseño que desee. A continuación, puede agregar widget a ese diseño.
Para añadir una sección:
-
hover entre filas y haga clic en agregar Sección. O bien, haga clic con el botón derecho para abrir el menú contextual, haga clic en agregar y, a continuación, seleccione la sección Flex.
-
En el panel lateral, haga clic en Secciones flexibles.
-
Seleccione la sección de Flex deseada.
-
Haga clic en Almacenar.
Nota
-
La opción de mantener una imagen de fondo estática no está disponible para tabletas y dispositivos móviles debido a una limitación de iOS.
Para guardar una sección:
-
hover sobre la sección deseada y haga clic en Sección flexible en la esquina superior izquierda de la sección.
-
Haga clic en Almacenar como sección y luego en Seleccionar sólo esta fila.
-
Escriba un nombre de sección, seleccione la categoría en la que se guardará la sección y seleccione los permisos para la sección.
-
Haga clic en Iniciar creación.
-
Haga clic en Listo.
Una vez que haya añadido una sección a su sitio, puede agregar columnas que contengan widgets dentro de la sección. Todas las secciones contienen columnas en forma predeterminada, pero usted puede agregar columnas adicionales.
Nota
Cuando se agrega un elemento a una columna, la posición se determina mediante la configuración de diseño automático. Para cambiar la dirección del diseño automático, abra el panel de diseño y en la sección Diseño, seleccione horizontal o vertical para el diseño automático.
Puedes duplicar una columna y se agregará a la derecha de la tarjeta original. No se pueden agregar columnas que superen el 100% de la anchura.
Para duplicar una columna:
Puede borrar una columna para eliminarla de la sección. Sin embargo, cada sección debe contener al menos una columna, lo que significa que no puede eliminar la última columna de una sección.
Para eliminar una columna:
Puede agregar widget a columnas, columnas internas o cuadrículas avanzadas de varias maneras diferentes. Si ya está en modo flex, puede agregar widget directamente desde el panel lateral haciendo clic en widget, luego seleccionando el widgetdeseado .
Nota
Si está empleando el modo Flex en el Editor tradicional, no puede arrastrar y soltar un widget en una columna Flex desde el panel lateral.
Para agregar un widget:
-
Haga clic en una columna, columna interna o cuadrícula avanzada para seleccionarla.
-
Haga clic en el icono más que está en el centro de la columna, columna interna o cuadrícula avanzada. O haga clic en el icono más que está en el menú flotante.
-
Seleccione un widget.
También puede agregar widgets desde el panel de capas.
Para agregar un widget desde el panel de capas:
La alineación y el espaciado se pueden emplear juntos para ayudarlo a lograr sus diseños.
Al diseñar con Flex, puede ahorrar tiempo al alinear varios elementos dentro de la misma sección, columna o columna interna al mismo tiempo.
Para alinear varios elementos:
-
Seleccione la sección, columna o columna interna y haga clic en el ícono de alineación () en el menú flotante.
-
Seleccione la alineación deseada.
El panel de diseño ofrece opciones de alineación adicionales, como cambiar la dirección del diseño automático, el estiramiento y más.
Para alinear elementos desde el panel de diseño:
-
Haga clic derecho en la sección, columna o columna interna deseada y seleccione Editar diseño.
-
En la sección Diseño del panel de diseño, en Alinear elementos, seleccione la alineación de contenido vertical y horizontal deseada.
Al alinear texto desde el menú flotante o el panel de diseño, alinea tanto el texto como el div
tag.
Aunque es posible alinear varios elementos a la vez, a veces solo es necesario cambiar la alineación de un elemento dentro de una columna flexible sin afectar a los otros elementos.
Para alinear un solo elemento:
-
Seleccione el elemento deseado.
-
En el menú flotante, haga clic en el icono de alineación () y seleccione la alineación deseada. O bien, haga clic derecho en el elemento y seleccione Editar diseño. Esto abre el panel de diseño donde puedes seleccionar la alineación desde la sección Alinear.
Espacio entre elementos
Puede establecer la cantidad de espacio horizontal o vertical entre columnas dentro de la misma sección flexible o widgets dentro de una columna, columna interior o cuadrícula avanzada.
Para establecer el espaciado entre elementos:
-
Haga clic con el botón derecho en la sección, columna, columna interna o cuadrícula avanzada deseada y seleccione Editar diseño.
-
En la sección Espaciado del panel de diseño, en Espaciado entre elementos, escriba o use el control deslizante para establecer el valor porcentual del espacio horizontal o el valor en pixel del espacio vertical que desea que exista entre los elementos en el campo Espaciado entre elementos .
Puede restablecer el relleno tanto para las secciones como para las columnas haciendo clic en el ícono Restablecer relleno en el menú flotante.
Las secciones de Flex crean un diseño y alinean automáticamente los objetos, lo que le ayuda a diseñar secciones hermosas de manera fácil y rápida. Sin embargo, cuando tiene un diseño más complejo con objetos superpuestos o composición de estilo libre, debe usar una cuadrícula avanzada. Las cuadrículas avanzadas le permiten colocar elementos en una composición de estilo libre sin un diseño automático. Debido a esto, le recomendamos que verifique su diseño en todos los puntos de ruptura.
Para crear elementos superpuestos:
-
Haga clic para seleccionar una columna flexible.
-
En el menú flotante o en la columna flexible, haga clic en el ícono más ().
-
En la sección de elementos flexibles, seleccione Cuadrícula avanzada (anteriormente denominada contenedores). Para cerciorar de seguir las mejores prácticas, arrastre los bordes de la cuadrícula avanzada para que abarque todo el ancho de la columna flexible.
-
En la sección Diseño del panel de diseño, seleccione una cuadrícula predefinida en Reorganizar diseño. O si desea crear su propia cuadrícula, use los menús desplegables Columnas y filas de Personalizar diseño para agregar columnas o filas.
-
En el menú flotante, haga clic en el icono del signo más, luego seleccione los widgets deseados y organícelos en la cuadrícula avanzada.
-
Haga clic para seleccionar un elemento y, en la sección Organizar del panel de diseño, seleccione Traer al frente, Traer adelante, Enviar hacia atrás o Enviar hacia atrás.
Le recomendamos que compruebe su diseño en cada punto de ruptura cuando use cuadrículas avanzadas. Con los elementos superpuestos, es posible que deba ajustar el diseño en ciertos puntos de interrupción.
En el diseño sitio web, la elección del sistema de diseño adecuado influye significativamente en la experiencia del usuario, especialmente cuando se integran elementos de diseño widget como la columna interior y la cuadrícula avanzada en un sitio.
El widget de columna interior se recomienda para:
-
Diseños modulares: perfectos para crear diseños modulares donde el contenido fluye linealmente, lo que los hace ideales para menús de navegación, tarjetas o diseños tipo lista.
-
Diseño responsivo: se destaca en la creación de diseños responsivos que se adaptan perfectamente a distintos tamaños de pantalla y dispositivos, lo que garantiza una alineación y legibilidad óptimas. En individuo, ofrecen un control preciso sobre el comportamiento de envoltura de cada elemento en el contenedor, lo que garantiza que el contenido permanezca legible y bien organizado.
-
Contenido dinámico: ideal para manejar contenido dinámico que puede variar en longitud o tamaño, lo que permite a los diseñadores controlar el comportamiento y el tamaño de los elementos dentro de un contenedor de forma dinámica.
-
Diseños anidados: las capacidades de anidamiento de columnas internas las hacen adecuadas para crear diseños anidados complejos. Los diseñadores pueden anidar más columnas internas dentro del contenedor externo según sea necesario, lo que proporciona flexibilidad y adaptabilidad a la hora de organizar las jerarquías de contenido. Del mismo modo, Advanced Grid ofrece la capacidad de anidar widget, columnas internas e incluso cuadrículas avanzadas adicionales dentro de su estructura de diseño.
El widget de cuadrícula avanzada se recomienda para:
-
Estructuras de diseño complejas: indispensables para crear diseños complejos con múltiples filas y columnas, proporcionando un control preciso sobre la ubicación y el tamaño de los elementos.
-
Diseños no lineales: perfectos para diseñar diseños no lineales donde los elementos deben posicionar independientemente de su orden de origen para composiciones creativas y arreglos asimétricos. Esto significa que los elementos se pueden colocar y organizar según los requisitos de diseño.
-
Diseño sitio web responsivo: Si bien requiere una planeación cuidadosa, Advanced Grid proporciona tool estables para crear diseños receptivos. Los diseñadores pueden definir ajustes de diseño específicos, como reordenamiento de columnas, expansión de elementos y espacios en la cuadrícula en diferentes tamaños de ventana gráfica, lo que garantiza una presentación óptima en varios dispositivos.
¿Cuándo debo usar un widget de columna interna en lugar de un widget de cuadrícula avanzado?
Las columnas internas son las más adecuadas para diseños modulares, especialmente cuando necesita un control preciso sobre elementos individuales dentro de una sección o cuando desea un diseño automático. Sin embargo, tenga en cuenta que, si bien las columnas internas mantienen la integridad de la sección, mover widget dentro de ellas es menos flexible en comparación con las cuadrículas avanzadas.
Las columnas internas permiten controlar filas o columnas individualmente, lo que resulta ideal para diseños unidimensionales. Advanced Grids permite la manipulación de filas y columnas simultáneamente, lo que proporciona un control integral sobre toda la estructura del diseño, ideal para diseños bidimensionales.
Advanced Grid (CSS Grid) puede tener un beneficio marginal en el manejo de diseños complejos al optimizar la estructura DOM, la eficiencia de renderizado, la carga de recursos, la capacidad de respuesta y la minimización de las solicitudes HTTP. Las columnas internas, si bien son efectivas, pueden involucrar más elementos HTML anidados, lo que potencialmente genera tiempos de renderizado levemente más lentos en comparación con las cuadrículas avanzadas.
También puede usar el widget de columna interna y el widget de cuadrícula avanzada en la misma sección y en todo el sitio para lograr los diseños deseados. Esto implica lograr un equilibrio entre la estructura general del diseño y los detalles más finos de la organización del contenido.
Comprender las relaciones padre-hijo es fundamental para aprovechar las columnas internas y las cuadrículas avanzadas de manera eficaz. En estos sistemas de diseño, los elementos de la carcasa de la columna actúan como padres, mientras que los elementos internos, como los widgetadicionales, se consideran secundarios. Esta relación determina cómo se posicionan y alinean los elementos dentro del diseño, lo que garantiza la coherencia y la integridad estructural de su diseño sitio web.
Es importante tener en cuenta que no siempre es necesario agregar columnas interiores. A menudo, una sola columna puede ser suficiente para muchos casos de uso. La columna interior permite una fácil colocación de elementos tanto de forma horizontal como vertical. Los requisitos incluyen una sección que actúe como contenedor flexible y una columna para albergar columnas internas, con ambos tipos de columnas sirviendo como elementos flexibles, que representan el elemento padre y el elemento hijo respectivamente.
Advanced Grid permite la colocación de elementos tanto en dirección vertical como horizontal. Los requisitos incluyen una sección que actúe como contenedor y una cuadrícula avanzada para declarar el diseño de la cuadrícula en el elemento padre o contenedor, haciendo que todos sus hijos se conviertan en elementos de la cuadrícula.