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 .
La tecnología Flexbox (llamada "flex" por sus siglas en inglés) es un módulo de diseño CSS para organizar los elementos en secciones y columnas, permitiendo que se flexionen (crezcan/reduzcan) y se alineen perfectamente dentro de un contenedor. Esto te permite diseñar secciones perfectas y responsivas que se adapten a cualquier tamaño de pantalla. Si usas el Classic Editor, puedes entrar en modo flex para diseñar con tecnología flexbox. Si usas el Editor 2.0, por defecto usas tecnología flexbox.
Recomendación
Cursos recomendados de Duda Academy:
-
Basic Principios de Diseño. Aprende sobre los cuatro pilares del diseño (branding, tipografía, color y medios).
-
Tamaño y unidades. Infórmate sobre los diferentes tamaños de unidades en el panel de diseño y cuándo usarlas.
-
Elementos esenciales de la distribución. Aprende sobre columnas y columnas interiores y cómo alinear y dimensionar los elementos dentro de ellas.
-
Diseños con cuadrículas avanzadas. Aprende a construir maquetas complejas con cuadrículas avanzadas.
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 del diseño son diferentes según el elemento que se seleccione. Las propiedades de diseño incluyen la alineación, el diseño, el espaciado, el tamaño, etc., en función del elemento seleccionado.
Para abrir el panel de diseño, haz clic en un elemento mientras estás en modo flexible y luego haz clic en Editar diseño (solo necesitas estar en modo flex si usas el editor tradicional). El panel de diseño se abre en el lado derecho del modo flex para que no interfiera con tu capacidad de ver y editar tu diseño. Luego de cerrar el panel de diseño, puedes abrirlo de nuevo haciendo clic en el icono del panel de 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 presenta 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 ().
Ancho completo
Anteriormente denominado "sangrado completo", el ancho completo solo está disponible para las 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 1920 pixeles. De forma predeterminada, la configuración de ancho completo está desactivada. Para obtener más información sobre los puntos de interrupción, consulte Tamaños de pantalla y dispositivos.
Alineación de contenidos
Permite alinear vertical u horizontalmente varios elementos en una columna o columna interior a la vez. En el editor tradicional, los elementos solo pueden alinear individualmente y horizontalmente. Para más información, ver Alineación y Espaciado.
Distribución
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.
Alinear filas
Permite establecer la alineación de filas dentro de una columna o columna interior. Esta configuración no afecta la alineación de los elementos que están dentro de las filas, solo las filas en sí.
Para aprender sobre el espaciado, vea el siguiente video:
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 los elementos dentro de las columnas internas o las 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 que lo contiene. De forma predeterminada, los valores de margen horizontal y de relleno están vinculados. Si ajusta el valor izquierdo, el valor del lado derecho se actualizará automáticamente para coincidir. Si no desea que los valores estén vinculados, haga clic en el icono de enlace.
Tenga en cuenta que los márgenes en línea para los elementos dentro de columnas o columnas internas se pueden ajustar directamente en el lienzo. Para obtener más información, consulte Exterior y espaciado interno.
El acolchado es el espacio interior del elemento. Haz clic en el margen o número de relleno para escribir un nuevo valor, luego usa el menú desplegable para seleccionar la unidad en la que se mide el espacio (px,%, vh, vw o A). Por defecto, el espaciado horizontal se mide en porcentajes, y el espaciado vertical en pixeles.
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, puede ajustar la altura y el ancho, y los valores máximo y mínimo. 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%, los botones tienen un ancho de 280 px.
En el caso de las secciones, solo se puede 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 de contenido en Tema del sitio. En el caso de los pilares, solo se puede cambiar la anchura y la altura definida por la altura de la sección o por sus elementos interiores. Para Columnas internas y widget puede establecer la altura y el ancho, junto con los valores mínimo y máximo de cada uno. Se puede emplear cualquier tamaño de unidad.
Las propiedades de animación y fondo en el modo flexible son similares al editor tradicional. Para obtener más información sobre las propiedades de animación y fondo, consulte Animaciones y Personalizar fondo.
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. 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.
Anclar
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 las proporciones
Cuando se activa a 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.
Recomendación
Curso recomendado de Duda Academy:
-
Unidades de tamaño. Infórmate sobre los diferentes tamaños de unidades en el panel de diseño y cuándo usarlas.
Porcentaje (%) es una unidad de tamaño dinámico que determina la proporción del contenedor (sección, columna, columna interior 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 el uso de porcentajes cuando se pretende mantener la coherencia del diseño en todos los tamaños de pantalla sin necesidad de 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 conservar los tamaños relativos de los elementos en diferentes dimensiones de la 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 al 50% de ancho 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. Del mismo modo, establecer el relleno entre columnas en 4% garantiza un espaciado uniforme 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, si se asignan 50 Vw a un elemento, se 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.
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.
La jerarquía de elementos sigue una estructura predeterminada: las secciones contienen columnas y las columnas contienen widget. Esta disposición jerárquica garantiza que no se pueda agregar un widget directamente a una sección sin que esté anidada dentro de una columna. Hay varias formas 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 de menú flotante: Los usuarios pueden volver a los contenedores principales mediante 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 volver a su contenedor principal.
-
Barra de pan de 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 información visual, lo que ayuda a 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 agregue una sección, puede agregar, eliminar o reorganizar columnas adicionales, columnas internas o cuadrículas avanzadas para crear el diseño deseado. 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.
-
También puedes crear una sección flexible con IA. Para obtener instrucciones detalladas sobre cómo crear secciones flexibles con IA, consulte Crear una sección flexible con IA.
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, a continuación, haga clic en Seleccionar solo 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 Empezar a crear.
-
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.
Tenga en cuenta que el número máximo de columnas es 8.
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.
Puede 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:
-
Haga clic para seleccionar una columna.
-
En el menú flotante, haga clic en el icono Duplicar . O bien, puede hacer clic con el botón derecho en la columna para abrir el menú contextual y seleccionar Duplicar.
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:
-
Haga clic para seleccionar la columna.
-
En el menú flotante, haga clic en el icono Eliminar . O bien, puede hacer clic con el botón derecho en la columna para abrir el menú contextual y seleccionar Eliminar.
Puede agregar widget a columnas, columnas internas o cuadrículas avanzadas de varias maneras diferentes. Si ya está en modo flexible, 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:
-
Haga clic para seleccionar una columna.
-
En el panel de capas, coloque el cursor sobre la columna, columna interna o cuadrícula avanzada a donde quiera añadir un widget y haga clic en el icono más.
-
Seleccione un widget.
La alineación y el espaciado se pueden usar juntos para ayudarte a lograr tus diseños.
Para obtener más información sobre la alineación, vea el siguiente video:
Al diseñar con Flex, puede ahorrar tiempo alineando varios elementos dentro de la misma sección, columna o columna interior al mismo tiempo.
Para alinear varios elementos:
-
Seleccione la sección, la columna o la columna interior y haga clic en el icono 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 con el botón derecho en la sección, columna o columna interior deseada y seleccione Editar diseño.
-
En la sección de Diseño del panel de diseño, bajo Alineación de contenido, selecciona la alineación 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 (
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 interior o cuadrícula avanzada que desee y seleccione Editar diseño.
-
En la sección Espaciado del panel de diseño, en Espaciado entre elementos, escriba o emplee el control deslizante para establecer el valor porcentual del espacio horizontal o el valor de pixel del espacio vertical que desea que exista entre los elementos en el campo Espaciado entre elementos .
Puede restablecer el relleno de las secciones y las columnas haciendo clic en el icono 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.
Aprenda a crear elementos superpuestos con el siguiente video o siga las instrucciones que aparecen a continuación.
Para crear elementos superpuestos:
-
Haga clic para seleccionar una columna flexible.
-
En el menú flotante o en la columna flexible, haga clic en el icono más (
).
-
En la sección de elementos flexibles, seleccione Cuadrícula avanzada (contenedores con nombre anterior). Para cerciorar de seguir las prácticas recomendadas, 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 hacia 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.
Recomendación
Cursos recomendados de Duda Academy:
-
Elementos esenciales de la distribución. Aprende sobre columnas y columnas interiores y cómo alinear y dimensionar los elementos dentro de ellas.
-
Diseños con cuadrículas avanzadas. Aprende a construir maquetas complejas con cuadrículas avanzadas.
El widget de columna interna se recomienda para:
-
Diseños modulares: Perfectos para crear diseños modulares en los que el contenido fluye de forma lineal, lo que los hace ideales para menús de navegación, tarjetas o diseños tipo lista.
-
Diseño Responsivo: Destaca en la creación de diseños responsivos que se adaptan perfectamente a distintos tamaños de pantalla y dispositivos, cerciorando una alineación y legibilidad óptimas.
-
Contenido dinámico: Adecuado 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 los hacen adecuados para crear diseños anidados complejos. Los diseñadores pueden anidar más columnas internas dentro del contenedor exterior según sea necesario, lo que proporciona flexibilidad y adaptabilidad en la organización de 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: Indispensable para crear diseños intrincados con múltiples filas y columnas, lo que proporciona un control preciso sobre la ubicación y el tamaño de los elementos.
-
Diseños no lineales: Perfecto para diseñar diseños no lineales en los que los elementos deben colocar independientemente de su orden de origen para composiciones creativas y arreglos asimétricos. Esto significa que los elementos se pueden colocar y organizar en función de 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 el reordenamiento de columnas, la expansión de elementos y los espacios de 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 frente a un widget de cuadrícula avanzado?
Las columnas internas son las más adecuadas para diseños modulares, especialmente cuando se necesita un control preciso sobre elementos individuales dentro de una sección o cuando se 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 el control sobre filas o columnas individualmente, ideal para diseños unidimensionales. Advanced Grids permite la manipulación de filas y columnas simultáneamente, proporcionando un control completo 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 del DOM, la eficiencia de la representación, la carga de recursos, la capacidad de respuesta y la minimización de las solicitudes HTTP. Las columnas internas, aunque efectivas, pueden involucrar más elementos HTML anidados, lo que puede conducir a tiempos de representación ligeramente 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 efectiva. 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 dicta cómo se colocan 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 los elementos tanto horizontal como verticalmente. Los requisitos incluyen una sección que actúe como contenedor flexible y una columna que albergue columnas internas con ambos tipos de columnas que actúen como elementos flexibles, que representen el elemento primario y secundario respectivamente.
La cuadrícula avanzada permite la colocación de elementos en direcciones verticales y horizontales. 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 principal o contenedor, haciendo que todos sus elementos secundarios se conviertan en elementos de cuadrícula.