Cómo reordenar elementos en diferentes puntos de interrupción en Divi 5

El diseño receptivo requiere más que escalar diseños, también requiere controlar cómo se acumula el contenido en los dispositivos. Un diseño que se siente estructurado en el escritorio puede ser un orden confuso en dispositivos móviles, con barras laterales o elementos secundarios que empujan el contenido clave fuera de la vista. Divi 5 aborda esto con su nuevo sistema FlexBox, que introduce estructuras de columnas receptivas prebuidadas y controles de pedido precisos.

En esta publicación, veremos por qué el reordenamiento de elementos es importante, cómo las herramientas FlexBox de Divi 5 lo hacen simple, y caminar por los pasos para reestructurar los diseños en diferentes puntos de interrupción.

Por qué querrías reordenar elementos

Cuando un diseño cambia del escritorio al móvil, el orden de apilamiento no siempre refleja su experiencia prevista. Un diseño de escritorio de tres columnas equilibrado puede colapsar en una pila vertical donde la columna izquierda siempre es lo primero, empujando un formulario de llamadas a la acción, registro o información de contacto, donde los usuarios nunca la pueden ver.

Suscríbete a nuestro canal de YouTube

El sistema FlexBox de Divi 5 soluciona esto permitiéndole reordenar elementos visualmente en cada punto de interrupción. Puede mover un CTA directamente debajo del titular en el móvil, llevar testimonios por encima de una tabla de precios o resaltar la información de contacto antes del contenido largo. En lugar de estar atascado con la lógica de apilamiento predeterminada del navegador, usted decide la jerarquía. Esto garantiza que su contenido más importante siempre aparezca dónde más importa.

Cómo el Flexbox de Divi 5 facilita el reordenamiento

Divi 5 le brinda control directo sobre cómo los elementos acumulan los puntos de interrupción. Puede usar estructuras de columna FLEX preBuida para configurar diseños que se adapten naturalmente, luego ajuste las estructuras de la columna y los órdenes de columna en cada tamaño de pantalla.

Flexbox actúa como un contenedor brillante que se ajusta en función del espacio. En lugar del apilamiento de contenido al azar, controla el orden en cada dispositivo.

Divi 5 también maneja bien los diseños anidados y complejos. Puede cambiar las estructuras de fila, los tamaños de columna y el orden del módulo en cada punto de interrupción sin copiar contenido o codificación.

También administra automáticamente la alineación y el posicionamiento vertical, lo que hace que su contenido se vea útil, totalmente receptivo y no está dispuesto al azar.

Una guía paso a paso para reordenar receptivo en Divi 5

Echemos un vistazo a cómo exactamente puede reordenar elementos en Divi 5 utilizando su nuevo sistema FlexBox. Los pasos a continuación lo acompañan a través de la configuración de estructuras de columna y ajustar el orden en diferentes puntos de interrupción para que sus diseños se mantengan claros y consistentes en cada dispositivo.

1. Configure sus siete puntos de descanso personalizados

Divi 5 te da siete puntos de interrupción en lugar de tres. Puede cambiar cada valor de píxel para que su sitio se vea bien en cualquier dispositivo.

Haga clic en el menú Elipsis en su barra de tareas y busque los interruptores de alternancia de punto de interrupción. Cada uno tiene rangos predeterminados, pero puede cambiar estos números para adaptarse mejor a su audiencia.

Verá teléfono (bajo 767px), teléfono ancho (bajo 860px), tableta (bajo 980px), tableta ancha (bajo 1024px), escritorio (más de 981px), pantalla panorámica (más de 1280px) y Ultra de ancho (más de 1440px).

Después de encenderlos, aparecen pequeños íconos en su barra de tareas. Haga clic en cualquier icono para ver cómo su sitio mira el tamaño de la pantalla de inmediato.

En lugar de hacer clic en cada icono y estar limitado en sus pruebas, puede tomar el borde de su lienzo y arrastrarlo hacia la izquierda o hacia la derecha. Su diseño se encoge o se expande a medida que tira, mostrando cómo su diseño cambia a diferentes anchos.

Arrastre el lienzo a 300px y vea su diseño de escritorio de tres columnas convertirse en una sola pila móvil. Llegue a 1200px y vea su contenido repartido nuevamente. No necesita cambiar los modos de vista previa o cambiar el tamaño de la ventana de su navegador.

2. Acceda a los controles flexibles

Haga clic en el icono de configuración de cualquier fila para abrir el panel de configuración en el lado derecho. Navegue a la pestaña de diseño en la parte superior de este panel. En el menú de diseño, encontrará todos los controles FlexBox de Divi 5. Por defecto, Flex se selecciona bajo estilo de diseño.

Si no se aplica a su diseño existente, puede cambiarlo para flexionarse con un clic.

Desplácese hacia abajo para ubicar el campo Dirección de diseño. Esto determinará el orden y la forma en que aparecen las columnas (lado a lado o por encima y por debajo del otro).

A continuación se presentan las opciones de contenido de Justify para controlar la alineación y la distribución. Mientras tanto, las opciones de alineación de elementos aparecen justo debajo de las opciones de posicionamiento.

3. Estructura de diseño de ajuste fino para cada tamaño de pantalla

Sus controles Flexbox ahora están activos, pero los diseños de escritorio pueden necesitar ajustes estructurales para pantallas más pequeñas. Un diseño de tres columnas podría funcionar maravillosamente en un escritorio, pero volverse abrumador y lleno de gente en una tableta, lo que requiere una cuadrícula de 2 × 2, aún más en un dispositivo móvil donde solo hay espacio para una cuadrícula.

Afortunadamente, los iconos del dispositivo en la parte superior derecha de sus controles le permiten obtener una vista previa de su diseño en diferentes pantallas y ajustar la configuración de FlexBox para cada punto de interrupción. Esto le permite ajustar el diseño para que se vea bien y funcione bien en cada dispositivo.

Cambie al punto de interrupción de la tableta y haga clic en el botón Cambiar la estructura de la columna. En lugar de la configuración actual, elija un diseño simétrico 2 × 2. Esto instantáneamente hace que la vista sea menos abrumadora al mostrar menos cartas en cada fila. Ajuste los espacios verticales y horizontales según sea necesario para un aspecto equilibrado. Luego seleccione la columna CTA, establezca su clase de columna en el ancho completo debajo de la configuración del tamaño y seleccione "crecer para llenar".

Su versión de tableta ahora muestra dos cartas simultáneamente, manteniendo esa apariencia uniforme. El botón de llamada a la acción se encuentra bien en la fila en la parte inferior, haciéndolo destacar, similar al diseño de su escritorio. Esta actualización ayuda a crear una experiencia más limpia y acogedora que evite la sensación desordenada de demasiadas opciones llenas de gente.

Para dispositivos móviles, use la opción Cambiar estructura de columna para cambiar a una estructura de una sola columna. En los controles FlexBox, configure la dirección de diseño en la columna reversa. Ajuste la brecha a lo que se ve mejor para su contenido.

4. Reorden las columnas a través de los puntos de interrupción

El uso de valores de pedido es una excelente manera de decidir manualmente el orden de los elementos infantiles de sus contenedores flexibles (a menudo columnas) en varios tamaños de pantalla. La pestaña de pedido en la configuración de la fila le da a cada columna un número que le dice al navegador: "Muestre esta columna en la posición 1, esta en la posición 2", y así sucesivamente. Los números más bajos aparecen primero, y los números más altos aparecen los últimos. Simple como eso.

Incluso puede usar el orden "0" o números negativos como "-1" para obligar al contenido específico a aparecer primero, independientemente de otros valores.

Cada punto de interrupción admite su propio sistema de pedido, lo que le brinda un control completo sobre el posicionamiento de elementos en los dispositivos.

Echemos un vistazo a un ejemplo práctico: en el escritorio, seleccione la columna 1 y establezca su orden en 1. Seleccione la columna 2 y establezca su orden en "2" y haga lo mismo para el resto de las columnas (s). Su diseño de escritorio fluye naturalmente de izquierda a derecha, terminando con un llamado a la acción.

Personalizar el pedido en tabletas y móviles

Ahora, cambie al punto de interrupción de la tableta usando el dispositivo alternar. Y cambie los pedidos de la columna:

Establezca la columna 6 (llamada a la acción) en "3" para que aparezca en la fila central. Deje las columnas 1 y 2 como está, columna 3 como 4 y el resto como se desee. Los usuarios de tabletas ven su llamado a la acción inmediatamente después de la propuesta de valor, seguido de los detalles de respaldo.

Luego, cambie a móvil usando el dispositivo alternar. Cambie la orden de la columna CTA a "3" y deje las dos primeras columnas como está. Haga que el resto del orden de la columna sea similar a la disposición de la tableta.

El orden de origen subyacente de su contenido permanece igual, pero el CTA se mueve de la última posición a la tercera sin afectar el diseño de escritorio. De esta manera, puede controlar cómo aparecen las secciones en diferentes puntos de interrupción sin duplicar o reestructurar su contenido.

Controle cómo todo se acumula con Divi 5

El nuevo sistema FlexBox de Divi 5 le brinda un control preciso sobre cómo se acumula el contenido en los dispositivos. Con siete puntos de descanso personalizables y escala de lienzo en vivo, puede obtener una vista previa y ajustar los diseños en cualquier tamaño de pantalla en tiempo real.

En lugar de confiar en el orden de apilamiento predeterminado del navegador, usted decide exactamente dónde aparecen barras laterales, CTA y contenido clave. Flexbox le permite mantener la jerarquía y la claridad en cada dispositivo sin soluciones o código adicionales.