Introducción de la cuadrícula CSS para Divi 5

Este es uno grande. Construimos el mejor constructor de cuadrículas CSS, y está disponible para Divi 5 hoy. Es mejor que el elementor. Es mejor que los ladrillos. Ya sea que desee dominar la cuadrícula o simplemente usar las nuevas plantillas de cuadrícula de Divi, le encantará esta actualización.

Mira el siguiente video para ver la nueva función en acción.

Cuadrícula CSS para todos

Divi 5 está muy lejos de su predecesor. Hemos estado convirtiendo Divi en una potencia de diseño web, con nuevas características como FlexBox, unidades avanzadas, preajustes y variables de diseño. CSS Grid es el próximo gran paso adelante.

Al mismo tiempo, no queremos que los usuarios existentes se sientan perdidos o enterrados en nuevas configuraciones. Hicimos el equilibrio correcto entre dar a los usuarios avanzados las herramientas necesarias mientras hace que los diseños de la cuadrícula sean accesibles para principiantes.

Plantillas de cuadrícula para cada ocasión

Si nunca ha oído hablar de CSS Grid y no desea aprender los entresijos de los diseños de la red, no se preocupe, no es necesario. ¡Disfruta de las nuevas plantillas de cuadrícula preconstruidas!

La belleza de usar plantillas de cuadrícula es que la cuadrícula se controla a nivel de contenedor, y a medida que agrega nuevos elementos, se ajustan a la cuadrícula automáticamente. Es mucho más intuitivo y desbloquea una nueva variedad de diseños.

Divi tiene plantillas de cuadrícula para cada situación, y aplicarlas al contenido existente es fácil.

Control completo para expertos en cuadrícula

Si eres un experto en red de CSS experimentado, las opciones de cuadrícula de Divi no te detienen. Puede llegar directamente al punto, definir manualmente sus plantillas de cuadrícula de columna y fila, y crear diseños de cuadrícula variados utilizando la edición de compensación, que tocaré más adelante.

Por supuesto, puede renunciar a la interfaz y aplicar reglas de cuadrícula utilizando el panel CSS personalizado también; Lo que sea que funcione mejor para ti.

Opciones de cuadrícula intuitivas para ensambladores web

Si estás en algún punto intermedio, entonces el constructor de cuadrículas de Divi 5 realmente brilla.

Transformamos los parámetros de la cuadrícula CSS en configuraciones para crear cuadrículas verticales u horizontales, personalizar dimensiones de columna y fila, dirección de cuadrícula, alineación de elementos y justificación, y más.

Además, el grupo de opciones de tamaño incluye nuevas opciones de columna y fila que le permiten ajustar el ancho, la altura y la posición de un elemento de cuadrícula individual en la cuadrícula.

Edición de compensación de cuadrícula

Uno de los aspectos más singulares de GRID Builder de Divi 5 es el editor offset, que puede usar para crear patrones de cuadrícula no simétricos repetidos a nivel de contenedor. Déjame darte un ejemplo del mundo real.

Creé una plantilla de blog en el video a continuación usando el bucle de bucle de Divi 5; Cada columna es un elemento de bucle lleno de contenido dinámico. Cuando habilito el estilo de diseño de la cuadrícula en el contenedor principal, las columnas se ajustan automáticamente a la cuadrícula.

Puedo ajustar el número de columnas, ingresar patrones de columna o fila personalizadas, cambiar los tamaños de la brecha y hacer muchas otras cosas.

Además, puedo usar el editor de compensación para aplicar reglas a elementos específicos en la cuadrícula.

En lugar de un patrón de columna estándar que se repite en cada fila, puedo crear patrones de desplazamiento, por ejemplo, que cada cuarto elemento abarca dos columnas, comenzando en el segundo y tercer elemento. Estos patrones de compensación le dan a las plantillas de fila preconstruidas de Divi 5 tanta variedad.

CSS Grid Demos (descarga gratuita)

Puede crear diseños espectaculares usando la cuadrícula CSS que nunca antes antes. Si desea inspiración, mire estos impresionantes diseños que nuestro equipo de diseño creó utilizando la última versión de Divi 5.

Puede descargarlos de forma gratuita y probarlos usted mismo.

Prueba Divi 5 hoy

CSS Grid para Divi 5 está disponible hoy y es una de las muchas características que llegan a Divi este año.

Puede seguirlo a medida que avanzamos a través del lanzamiento final de Divi 5 y más allá, con actualizaciones cada dos semanas. Dependiendo de sus prioridades, puede usar Divi 5 ahora para crear nuevos sitios web o esperar hasta que agregemos más funciones, lo que sea que funcione mejor para usted.

Como se describe en el cronograma original de lanzamiento de múltiples fases de Divi 5, el Alfa Public Public Divi 5 es como "Divi 5 Lite". Falta algunas características y puede no ser adecuada para los sitios web existentes, pero está listo para usarse en nuevos sitios web si prefiere la experiencia a Divi 4.

Queremos que lo pruebes, y si te encanta, úsalo; Cuando a todos les encanta, lo haremos oficial.

¿Has probado los atributos personalizados para Divi 5?

En caso de que se lo haya perdido, recientemente lanzamos los nuevos atributos personalizados, que le permiten agregar cualquier atributo, como Alt, Title, REL y Aria-Label, a elementos y la mayoría de los subelementos.

Divi ha tenido apoyo para atributos específicos, como la clase y la identificación, pero ahora puede agregar cualquier atributo a cualquier elemento. Esto es especialmente importante para la accesibilidad, lo que le permite, por ejemplo, agregar texto alternativo a imágenes y roles y etiquetas a elementos no semánticos como un botón basado en iconos.

Mira este video para ver todos los detalles.

Más actualizaciones de Divi 5 están en camino

2025 es el año de Divi 5 . El tedioso trabajo está detrás de nosotros. Construimos la base súper rápida, y ahora es el momento de que Divi regrese.

Si estás aquí para el regreso de Divi, haznos un gran favor y háganos saber que me gusta este video y dejando un comentario. Significa mucho para nosotros verte animando la división, y es esencial alimentar el algoritmo y correr la voz.

No olvide seguirnos en YouTube y suscribirse al boletín de Divi para que nunca se pierda una actualización. Te veré pronto para otro anuncio de la función Divi 5, que prometo estará a la vuelta de la esquina.