Nota
Este contenido es relevante tanto para el modo Flex de Classic Editor como para el Editor 2.0. Para identificar la versión actual de tu editor, consulteCómo identificar la versión del editor que usa tu sitio .
La tecnología Flexbox (llamada «flex» para abreviar) es un módulo de diseño CSS para organizar los elementos en secciones y columnas, lo que les permite flexionarse (crecer o encogerse) y alinearse perfectamente dentro de un contenedor. Esto te permite diseñar secciones responsivas con píxeles perfectos que se adaptan a cualquier tamaño de pantallaSi utilizas el editor clásico, puedes acceder al modo flex para diseñar con la tecnología flexbox. Si utiliza el Editor 2.0, utiliza la tecnología flexbox de forma predeterminada
Sugerencia
Cursos recomendados de la Academia Duda:
-
Principios básicos de diseño. Conozca los cuatro pilares del diseño (marca, tipografía, color y medios
-
Tamaño y unidades. Obtenga información sobre las diferentes unidades de tamaño en el panel de diseño y cuándo usarlas.
-
Conceptos básicos de diseño. Obtén información sobre las columnas y las columnas interiores y cómo alinear y ajustar el tamaño de los elementos que contienen.
-
Diseños con cuadrículas avanzadas. Aprenda a crear diseños complejos con cuadrículas avanzadas
El panel de diseño se muestra en el lado derecho del modo flexible y contiene las propiedades de diseño del elemento seleccionado (sección, columna, widget, columna interior o cuadrícula avanzada). Cada elemento tiene propiedades diferentes que se pueden ajustar en el panel de diseño, lo que significa que las propiedades de diseño varían según el elemento que se seleccione. Las propiedades de diseño incluyen la alineación, el diseño, el espaciado, el 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, a continuación, haga clic Editar diseño (solo necesitas estar en modo flex si estás usando el editor clásico). El panel de diseño se abre en el lado derecho del modo flexible para que no interfiera con la capacidad de ver y editar el diseño. Tras cerrar el panel de diseño, puedes volver a abrirlo 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: alineación, diseño, espaciado, tamaño y animación y fondo. A continuación encontrarás una descripción de cada sección y de lo que puedes lograr.
Disponible para elementos individuales dentro de una columna o columna interior. Los elementos individuales de una columna o de una columna interior vertical con diseño automático vertical pueden alinearse a la izquierda, al centro o a la derecha o estirarse horizontalmente para que quepan en el 100% del ancho del contenedor.
Los elementos también se pueden alinear desde el menú flotante haciendo clic en Alinear icono ().
Ajustes preestablecidos
Seleccione de un diseño preestablecido los elementos de una sección. Las opciones incluyen la alineación vertical u horizontal.
Elementos por fila
Si tu contenido ocupa más de una fila, puedes usar el menú desplegable para seleccionar cuántos elementos aparecen por fila.
Los artículos se ajustan
Aparece cuando tiene filas de contenido y le permite definir cómo caben los elementos dentro de las filas. Esto puede resultar útil si tiene un número impar de elementos.
Anchura total
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 del escritorio. Cuando se cambia aEncendido, permite que el contenido abarque todo el ancho de la pantalla. Si se desactiva, el ancho del contenido puede abarcar un máximo de 1920 píxeles. De forma predeterminada, la configuración de ancho total está desactivada. Para obtener más información sobre los puntos de interrupción Tamaños de pantalla y dispositivos.
Alineación de contenido
Le permite alinear vertical u horizontalmente varios elementos de una columna o columna interior a la vez. En el editor clásico, los elementos solo se pueden alinear de forma individual y horizontal. Para obtener más información, consulte Alineación y espaciado.
Alinear filas
Le permite establecer la alineación de las filas dentro de una columna o columna interior. Esta configuración no afecta a la alineación de los elementos dentro de las filas, solo a las propias filas.
Para obtener más información sobre el espaciado, consulta el siguiente vídeo:
Espacio entre elementos
Le permite establecer el espacio entre columnas o widgets una vez y se aplica a todas las columnas de una sección o a todos los widgets de una columna. En el caso de las columnas, si la propiedad de diseño automático se establece en vertical, el espacio entre los widgets se mide en píxeles. Si el diseño automático es horizontal, el espacio entre los widgets se mide en porcentajes. Esta propiedad no es aplicable a los elementos que se encuentran dentro de las columnas interiores ni a 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 interior o cuadrícula avanzada en la que se encuentra. De forma predeterminada, los valores del margen horizontal y del relleno están vinculados. Si ajustas el valor de la izquierda, el valor del lado derecho se actualizará automáticamente para que coincida. Si no desea vincular los valores, haga clic en el icono de enlace.
Tenga en cuenta que los márgenes en línea de los elementos dentro de las columnas o columnas interiores se pueden ajustar directamente en el lienzo. Para obtener más información, consulte Espaciado exterior e interior.
El acolchado es el espacio interior del elemento. Haga clic en el margen o número de relleno para escribir un valor nuevo y, a continuación, utilice el menú desplegable para seleccionar la unidad en la que se mide el espacio (px,%, vh, vw o A). De forma predeterminada, el espaciado horizontal se mide en porcentajes y el espaciado vertical se mide
Por ejemplo, si seleccionas una columna y estableces el relleno izquierdo en 5 px, se añadirán 5 px de espacio entre el borde izquierdo de la columna y el borde exterior de los elementos del interior de la columna. Si, para esa misma columna, estableces el margen izquierdo en 5 px, se añadirán 5 px de espacio entre el borde de la columna y el borde de la sección que la contiene
Restablecer el relleno o el margen
Al hacer clic en el panel de diseño o en el menú flotante, restablece el relleno o los márgenes del elemento seleccionado a cero.
Según el elemento seleccionado, puede ajustar la altura y el ancho, así como 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 las 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 por defecto 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 píxeles
Para las secciones, solo 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 del ancho del contenido en el tema del sitio. En el caso de las columnas, solo puedes cambiar el ancho. La altura está definida por la altura de la sección o por sus elementos internos. En el caso de las columnas interiores y los widgets, puedes establecer la altura y el ancho, junto con los valores mínimo y máximo de cada una. Se puede usar cualquier unidad de tamaño.
Las propiedades de animación y fondo del modo flex son similares a las del editor clásico. Para obtener más información sobre las propiedades de animación y fondo, consulteAñadir animacionesyPersonaliza el fondo.
Nota
Parallax está disponible para todos los widgets y contenedores, y se puede aplicar en todos los tamaños de pantalla. Para activar el paralaje, haga clic en la imagen Editar diseño, desplázate hasta el Antecedentes sección del panel de diseño y abra el Posición de la imagen menú.
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 el diseño en
Alinear
Los elementos individuales de una cuadrícula avanzada se pueden alinear y estirar en cualquier dirección, ya que no están restringidos por el diseño automático.
Pedido
En la sección Disposición del panel de diseño, esta propiedad solo se puede usar cuando hay varios elementos dentro de una cuadrícula avanzada. Permite colocar un elemento seleccionado al frente, hacia adelante, hacia atrás o hacia atrás. Para obtener más información, consulte Cree elementos superpuestos.
Reorganizar el diseño
Le permite seleccionar cómo se organizan las columnas y las filas dentro de la cuadrícula avanzada para crear un diseño.
Personaliza el diseño
Le permite seleccionar cómo se organizan las columnas y las filas dentro de la cuadrícula avanzada para crear un diseño.
Alfiler
Permite definir la posición del elemento dentro de la cuadrícula. Una vez establecido, 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 de cuadrículas avanzadas que se han dividido en columnas o filas para crear un diseño. Muestra dónde se encuentra el elemento en la cuadrícula
Mantenga las proporciones
Cuando se cambia a Encendido, garantiza que los elementos de una cuadrícula avanzada mantengan sus proporciones incluso cuando cambie el tamaño de la cuadrícula.
El widget de imagen también contiene un Mantenga la proporción alternar, que mantiene sus proporciones originales.
Nota
Este contenido es relevante tanto para el modo Flex de Classic Editor como para el Editor 2.0. Para identificar la versión actual de tu editor, consulteCómo identificar la versión del editor que usa tu sitio .
Comprender y utilizar eficazmente las unidades de tamaño es crucial para crear diseños que no solo sean visualmente atractivos, sino que también respondan en varios 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 en el modo Flex del Editor clásico, sirve como centro de control para las propiedades de diseño de los elementos seleccionados, incluidas las secciones, las columnas, los widgets, las columnas interiores y las cuadrículas avanzadas. En este artículo se analizan las unidades de tamaño disponibles en el panel de diseño y se ofrecen ejemplos prácticos de su uso
Además, el Editor 2.0 permite a los usuarios configurar las unidades de tamaño desde el punto de interrupción principal (escritorio), 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 a otros puntos de interrupción. Para obtener más informaciónTamaños de pantalla y dispositivos.
Sugerencia
Curso recomendado de la Academia Duda:
-
Unidades de tamaño. Obtenga información sobre las diferentes unidades de tamaño 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) ocupado por el elemento en varios tamaños de pantalla. Por lo general, el ancho de los elementos flexibles se establece de forma predeterminada en porcentajes. Se recomienda utilizar porcentajes para mantener la coherencia del diseño en todos los tamaños de pantalla sin necesidad de realizar ajustes manuales de píxeles en
Por ejemplo, establecer ambas columnas en un diseño de dos columnas con un ancho del 50% 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 las 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
Por ejemplo, una imagen 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. Por lo tanto, si bien la columna y la imagen pueden parecer más estrechas en los dispositivos móviles que en los ordenadores de escritorio, la imagen mantiene su ancho proporcional. Del mismo modo, si se establece el relleno entre las columnas en un 4%, se garantiza un espaciado uniforme en relación con las columnas y otros elementos de la pantalla, lo que se adapta a los diferentes tamaños
píxeles (px) proporcionan una unidad de medida fija que no se ve afectada por las variaciones del tamaño del dispositivo. Por ejemplo, un botón establecido en 250 píxeles mantiene su tamaño en dispositivos móviles, tabletas y ordenadores de escritorio
Sin embargo, depender únicamente de los píxeles para el tamaño puede dificultar la capacidad de respuesta y requerir ajustes manuales en cada punto de interrupción. Por lo tanto, si bien los píxeles garantizan la coherencia en el tamaño de los elementos, se recomienda utilizar porcentajes para promover el diseño adaptable. Este enfoque minimiza la necesidad de realizar ajustes de píxeles individuales en los puntos de interrupción, lo que agiliza el proceso de diseño y mejora la capacidad
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 una escala proporcional en los diferentes dispositivos. Por ejemplo, al asignar 50 Vw a un elemento se asigna
La altura de la ventana gráfica (Vh) escala dinámicamente los elementos en relación con la altura de la pantalla (ventana gráfica). Por ejemplo, al asignar 25 Vh a un elemento, se reserva un cuarto de la altura de la pantalla para ese elemento. Esto es especialmente beneficioso para los fondos de pantalla completa (100% Vh) o para los elementos que necesitan sincronizarse con la altura de la
La unidad automática se ajusta dinámicamente en función de la altura del contenido, lo que la hace adecuada para bloques de texto y alturas de columnas, lo que garantiza que cambien de tamaño según su contenido. Por lo general, los bloques de texto se configuran de forma predeterminada en unidades automáticas. Esta función permite que los elementos se expandan o contraigan sin problemas, manteniendo un diseño de diseño proporcional.
[en] Fill sets an element to take up the space left over in its container, along its width or height. Use Fill when you want an element to adapt to whatever space is left, instead of a set proportion (%) or the size of its content (A).
[en] For example, in a section with two columns, if one column's width is 50% and the other's is Fill, the second column takes the remaining width. An image with its height set to Fill stretches to the height of the column it's in.
[en] Fill is available on the Width and Height settings for some elements, such as column width and image height, but not on minimum or maximum values. Inner column width doesn't offer it.
El concepto padre-hijo rige la organización de los elementos, y los elementos principales, como encabezados, cuerpos, menús y pies de página, contienen al menos una sección. Cada sección, a su vez, contiene al menos una columna, que sirve de contenedor para varios elementos, como texto, imágenes o widgets, como las columnas internas y las 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 de un elemento principal tiene una configuración de color de fondo específica, es posible que el fondo del elemento principal no refleje esta personalización. Esta estructura jerárquica garantiza un enfoque sistemático de la organización del sitio web, lo que facilita flujos de trabajo de diseño eficientes y una presentación coherente del contenido
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 puedas añadir un widget directamente a una sección sin que esté anidado 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 del lienzo del editor, lo que facilita la identificación y modificación de componentes específicos sin la necesidad de navegar extensamente por los 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 los contenedores principales utilizando las rutas de navegación del menú flotante. Al seleccionar un elemento específico, los usuarios pueden simplemente hacer clic en las rutas de navegación azules de la parte superior del elemento para volver a su contenedor principal
-
Ruta de navegación 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 rutas de navegación. Estas rutas de navegación permiten a los usuarios saltar rápidamente entre las diferentes secciones o elementos del lienzo
-
Panel de capas: Cuando se selecciona un elemento, el panel de capas resalta las capas asociadas a ese elemento. Al mismo tiempo, el editor proporciona comentarios visuales que ayudan a navegar por el lienzo
Las secciones flexibles son filas con dos columnas flexibles predeterminadas que crean un diseño básico. Una vez que añada una sección, puede añadir, eliminar o reorganizar columnas adicionales, columnas interiores o cuadrículas avanzadas para crear el diseño que desee. A continuación, puede añadir widgets a ese diseño
Para añadir una sección:
-
Pase el ratón entre las filas y haga clic +Agregar sección. O bien, haga clic con el botón derecho para abrir el menú contextual y haga clic Agregary, a continuación, seleccione Sección Flex.
-
En el panel lateral, haga clic Secciones flexibles.
-
Seleccione la sección de flexión deseada.
-
Haga clic Guardar.
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, consultaCrea una sección flexible con IA.
Para guardar una sección:
-
Pase el ratón por encima de la sección deseada y haga clic Sección flexible en la esquina superior izquierda de la sección.
-
Haga clic Guardar como seccióny, a continuación, haga clic Seleccione solo esta fila.
-
Escriba el nombre de la sección, seleccione la categoría en la que se guardará la sección y seleccione los permisos para la sección.
-
Haga clic Comience a crear.
-
Haga clic Listo.
Puedes restablecer fácilmente el espaciado y los elementos de una sección a sus estilos de tema. Los elementos que se pueden restablecer incluyen el texto, los botones, las imágenes, los fondos, el ancho y el espaciado de la sección y sus columnas, así como widgets como el acordeón avanzado, las pestañas avanzadas y el repetidor dinámico
Para restablecer el espaciado de las secciones o los elementos de la sección a los estilos del tema, haga clic en la sección para abrir la barra flotante. Haz clic en el icono de los tres puntos y selecciona Restablecer el tema del sitio. Desde aquí, puede hacer clic Restablecer el espaciado entre secciones o Restablecer el estilo de todos los elementos de la sección.
Nota
Se conservan los ajustes específicos del punto de interrupción (tamaño de la pantalla). Esto significa que si restableces el espaciado de las secciones o los elementos a los estilos de tema en el escritorio, los puntos de interrupción para dispositivos móviles y tabletas no se ven afectados
Una vez que hayas agregado una sección a tu sitio, puedes agregar columnas para incluir widgets dentro de la sección. Todas las secciones contienen columnas de forma predeterminada, pero puedes añadir columnas adicionales.
Tenga en cuenta que el número máximo de columnas es 8.
Nota
Al añadir 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.
Para añadir una columna:
-
Haga clic para seleccionar una columna existente.
-
En el menú flotante, haz clic en el icono de los tres puntos horizontales (
) y, a continuación, selecciona Agregar columna. O bien, haga clic en el icono con el signo más situado en el borde izquierdo o derecho de la columna.
Puedes duplicar una columna y se añadirá a la derecha de la tarjeta original. No puede agregar columnas que superen el 100% del ancho.
Para duplicar una columna:
-
Haga clic para seleccionar una columna.
-
En el menú flotante, haga clic en Duplicar icono. O bien, puede hacer clic con el botón derecho en la columna para abrir el menú contextual y seleccionar Duplicar.
Puedes modificar el ancho de una columna arrastrando su borde en el lienzo o configurándolo en el panel de diseño.
Para cambiar el tamaño de una columna:
-
Haz clic para seleccionar la columna.
-
Arrastra uno de los tiradores cuadrados situados en el borde de la columna.
También puedes establecer un ancho exacto en la sección Tamaño del panel de diseño.
El control redondeado situado en el borde de una columna o un widget modifica su margen (espaciado exterior), pero no su tamaño. Para obtener más información, consulta Espaciado exterior e interior.
Nota
El total de las columnas de una sección no puede superar el 100 % de su anchura. Si una columna no puede ampliarse, lo primero que hay que hacer es reducir la anchura de una columna adyacente.
Puede eliminar 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, haz clic en Eliminar icono. O bien, puede hacer clic con el botón derecho en la columna para abrir el menú contextual y seleccionar Eliminar.
Puede agregar widgets a columnas, columnas interiores o cuadrículas avanzadas de varias maneras diferentes. Si ya estás en modo flexible, puedes añadir widgets directamente desde el panel lateral haciendo clicWidgetsy, a continuación, seleccionar el widget deseado.
Nota
Si utiliza el modo flexible en el editor clásico, no puede arrastrar y soltar un widget en una columna flexible desde el panel lateral.
Para añadir un widget:
-
Haga clic en una columna, columna interior o rejilla avanzada para seleccionarla.
-
Haga clic en el icono con el signo más situado en el centro de la columna, la columna interior o la cuadrícula avanzada. O bien, haga clic en el icono con el signo más del menú flotante.
-
Selecciona un widget.
También puedes añadir widgets desde el panel de capas.
Para añadir un widget desde el panel de capas:
-
Haga clic para seleccionar una columna.
-
En el panel de capas, coloca el cursor sobre la columna, la columna interior o la cuadrícula avanzada a la que quieres añadir un widget y haz clic en el icono con el signo más.
-
Selecciona un widget.
La alineación y el espaciado se pueden usar juntos para ayudarlo a lograr sus diseños.
Para obtener más información sobre la alineación, consulte el siguiente vídeo:
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, estirarlo y más.
Para alinear los elementos del panel de diseño:
-
Haga clic con el botón derecho en la sección, columna o columna interna que desee y seleccione Edite el diseño.
-
En la sección Diseño del panel de diseño, en Alineación del contenido, seleccione la alineación vertical y horizontal del contenido que desee.
Al alinear el texto del menú flotante o del panel de diseño, alinea tanto el texto como el div etiqueta.
Si bien 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 demás 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 las columnas de la misma sección flexible o los widgets dentro de una columna, columna interior o cuadrícula avanzada.
Para establecer el espaciado entre los elementos:
-
Haga clic con el botón derecho en la sección, columna, columna interior o cuadrícula avanzada que desee y seleccione Edite el diseño.
-
En el Espaciado sección del panel de diseño debajo Espaciado entre elementos, escriba o utilice el control deslizante para establecer el valor porcentual del espacio horizontal o el valor en píxeles del espacio vertical que desea que exista entre los elementos del Espaciado entre los elementos campo.
Para restablecer el relleno de las secciones y las columnas, haga clic en Restablecer el relleno icono en el menú flotante.
Las secciones flexibles 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, si tienes un diseño más complejo con objetos superpuestos o una composición de estilo libre, necesitas usar una cuadrícula avanzada. Las cuadrículas avanzadas permiten colocar elementos en una composición de estilo libre sin un diseño automático. Por ello, te recomendamos que compruebes tu diseño en
Aprenda a crear elementos superpuestos viendo el siguiente vídeo o siguiendo las instrucciones que aparecen a continuación.
Para crear elementos superpuestos:
-
Haga clic para seleccionar un pilar flexible.
-
En el menú flotante o en la columna flexible, haga clic en el icono con el signo más (
).
-
En la sección de elementos flexibles, seleccione Cuadrícula avanzada (contenedores con los nombres anteriores). Para asegurarse 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 prefabricada de Reorganiza el diseño. O si quieres crear tu propia cuadrícula, usa el Columnasy Filasmenús desplegables desde Personaliza el diseño para añadir columnas o filas.
-
En el menú flotante, haz clic en el icono con el signo más, selecciona los widgets que desees y colócalos 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 a la parte posterior.
Recomendamos comprobar el diseño en cada punto de interrupción cuando utilice cuadrículas avanzadas. Si hay elementos superpuestos, es posible que tengas que ajustar el diseño en determinados
En el diseño web, la elección del sistema de diseño apropiado influye significativamente en la experiencia del usuario, especialmente cuando se integran elementos de diseño de widgets como la columna interna y la cuadrícula avanzada en un sitio.
Sugerencia
Cursos recomendados de la Academia Duda:
-
Elementos de diseño. Una introducción de 2 minutos a las columnas internas y las cuadrículas avanzadas, y a cómo estas contienen y organizan otros widgets.
-
Conceptos básicos de diseño. Obtén información sobre las columnas y las columnas interiores y cómo alinear y ajustar el tamaño de los elementos que contienen.
-
Diseños con cuadrículas avanzadas. Aprenda a crear diseños complejos 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 fluya de forma lineal, 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 sin problemas a varios tamaños de pantalla y dispositivos, garantizando una alineación y una legibilidad óptimas.
-
Contenido dinámico: Ideal para gestionar 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 artículos 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 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 posibilidad de anidar widgets, columnas internas e incluso cuadrículas avanzadas adicionales dentro de su
El widget de cuadrícula avanzado se recomienda para:
-
Estructuras de diseño complejas: Indispensable para crear diseños intrincados con varias filas y columnas, ya 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 posicionarse 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 web responsivo: Si bien requiere una planificación cuidadosa, Advanced Grid proporciona herramientas sólidas para crear diseños adaptables. Los diseñadores pueden definir ajustes de diseño específicos, como el reordenamiento de las columnas, la extensión de los elementos y los espacios en las cuadrículas en diferentes tamaños de ventanas gráficas, lo que garantiza una presentación óptima en
¿Cuándo debo usar un widget de columna interna frente a un widget de cuadrícula avanzado?
Las columnas interiores son las más adecuadas para diseños modulares, especialmente cuando se necesita un control preciso sobre los elementos individuales de una sección o cuando se desea un diseño automático. Sin embargo, ten en cuenta que, si bien las columnas internas mantienen la integridad de las secciones, mover los widgets dentro de ellas es menos flexible en comparación con las cuadrículas avanzadas
Las columnas interiores permiten controlar las filas o columnas de forma individual, lo que resulta ideal para diseños unidimensionales. Las cuadrículas avanzadas permiten manipular tanto las filas como las columnas de forma simultánea, lo que proporciona un control total de toda la estructura de diseño, lo que resulta ideal para diseños bidimensionales
Advanced Grid (CSS Grid) puede tener una ventaja marginal a la hora de gestionar 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, si bien son eficaces, pueden incluir más elementos HTML anidados, lo que puede provocar que los tiempos de procesamiento sean un poco más lentos en comparación con las cuadrículas avanzadas
También puedes usar tanto el widget de columna interna como 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 detallados de la organización del contenido
Comprender las relaciones entre padres e hijos es fundamental para aprovechar las columnas internas y las cuadrículas avanzadas de manera efectiva. En estos sistemas de diseño, la columna que aloja los elementos actúa como elemento principal, mientras que los elementos internos, como los widgets adicionales, se consideran secundarios. Esta relación determina cómo se colocan y alinean los elementos dentro del diseño, lo que garantiza la coherencia y la integridad estructural del diseño web
Es importante tener en cuenta que no siempre es necesario añadir columnas internas. A menudo, una sola columna puede ser suficiente para muchos casos de uso. La columna interior permite colocar fácilmente los elementos horizontal o verticalmente. Los requisitos incluyen una sección que sirva de contenedor flexible y una columna para albergar las columnas interiores. Ambos tipos de columnas sirven como elementos flexibles, representando el elemento principal y el elemento secundario, respectivamente.
Advanced Grid permite colocar elementos tanto en dirección vertical como horizontal. Los requisitos incluyen una sección que sirva de contenedor y una cuadrícula avanzada para declarar el diseño de la cuadrícula en el elemento o contenedor principal, de modo que todos sus elementos secundarios se conviertan en elementos de cuadrícula.