Filas anidadas vs secciones especializadas en Divi 5 (y por qué las estamos desaprobando)

Divi ha sido durante mucho tiempo una potencia para construir hermosos sitios web. Las secciones de especialidad extendieron las capacidades de diseño de Divi durante años al permitir estructuras de columnas complejas y anidadas que las secciones regulares no podían manejar. Pero este enfoque llegó con su complejidad y limitaciones, vinculada profundamente al antiguo marco de brevescodos de Divi.

Ahora, Divi 5 viene con filas anidadas, una característica nativa que le permite colocar filas dentro de las columnas en cualquier lugar, dentro de las secciones regulares. Esta característica elimina las limitaciones anteriores y unifica el edificio de diseño bajo un solo tipo de sección flexible. Con filas anidadas, puede construir los mismos diseños complejos y asimétricos que permiten las secciones especializadas, pero de manera más intuitiva.

En esta publicación, discutiremos el alejamiento de las secciones especializadas y cómo las filas anidadas y el sistema de diseño rediseñado de Divi 5 proporcionan una mejor manera de crear diseños complejos. El futuro de Divi está aquí, y es más simple, más flexible y construido para una creatividad ilimitada.

Suscríbete a nuestro canal de YouTube

Divi 5 está listo para usarse en nuevos sitios web hoy.

Una retrospectiva de las secciones especializadas

Se introdujeron secciones especializadas en Divi (2014) para abordar las limitaciones de las secciones regulares. Permitieron estructuras de columnas más complejas, incluidas barras laterales y diseños asimétricos, que eran imposibles con secciones regulares.

El marco basado en los breves de Divi es complejidad de diseño fundamentalmente limitada al restringir la profundidad de anidación e introducir cuellos de botella de rendimiento. Los diseños anidados complejos eran difíciles de construir y propensos a emitir problemas, por lo que no fueron posibles hasta las secciones especializadas.

Sin embargo, introdujeron una complejidad adicional porque las secciones especializadas eran lo suyo (observe el paso de columna adicional y las opciones de CSS para estas secciones). Estos no eran malos, pero definitivamente se comportaron de manera diferente a las secciones regulares, filas y columnas.

Las secciones especializadas agregaron campos de clase/ID de acolchado adicional y CSS que eran necesarios pero incongruentes con el resto de las opciones de constructor.

Las secciones especializadas habilitaron las estructuras de columna pseudo-anidadas agitando las reglas de los códigos cortos, creando lo que no era posible en las secciones regulares.

¿No sería bueno si las secciones regulares fueran lo suficientemente poderosas como para hacer lo que necesitas de ellas?

Filas anidadas y una mejor manera de construir páginas

Con Divi 5, las filas anidadas permiten oficialmente colocar filas (y sus columnas) dentro de otras filas y columnas. Esto significa que puede crear diseños profundamente anidados con columnas y filas ilimitadas entre sí. Elimina la necesidad de secciones especializadas.

Esta nueva característica también agregó opciones de tamaño a las columnas, lo que significa que hay una forma consistente de tamaño y diseñar todos los elementos de contenedores.

Cómo recrear fácilmente una sección especial con filas anidadas

El paquete de diseño de alquiler de scooter (particularmente la sección de héroes de la página de inicio) utiliza una sección especializada para posicionar elementos clave. Sin embargo, en lugar de usar una sección especializada con su configuración única, usaremos filas anidadas para lograr un efecto similar.

Nota: Divi 5 actualmente tiene secciones de especialidad, pero eventualmente estarán en desuso (pero seguirán funcionando y serán duplicables en las páginas donde existen actualmente).

Agregue una sección estándar a su página y establezca el color de fondo en negro (si importó el diseño a su página, tiene la imagen de Circle Dot para usar como imagen de fondo con una posición central superior y un tamaño real).

Establezca el ancho de la sección y el ancho máximo en 100%.

Asegúrese de que la fila dentro de la sección tenga una estructura de dos columnas y una división de 3/5 + 2/5. Además, establezca el ancho de la fila y el ancho máximo en 100%.

Si desea usar otras características nuevas, agregue solo una columna con dos grupos de módulos en el interior. Utilizará opciones de tamaño para los grupos en lugar de confiar en las estructuras de columna predeterminadas de Divi.

La columna izquierda albergará el lado más complicado (en términos de módulos), y la columna derecha albergará la gran imagen destacada.

Agregaremos todos nuestros módulos para tener una idea del diseño. Eso incluye primero un módulo de encabezado o texto, luego una fila anidada (dos columnas de igual ancho), un módulo de imagen en la columna izquierda y un módulo de texto y un módulo de botón en la columna derecha. Realice una copia de seguridad de la fila principal, en la columna derecha, agregue un módulo de imagen.

Solo replicaremos el espacio/dimensionamiento en el escritorio para ilustrar cómo podemos recrear la sección especializada utilizando filas anidadas. Continúe y agregue el contenido y las imágenes (nuevamente, las imágenes están disponibles al importar el diseño en una página en su sitio). También puede modificar el texto y los estilos de color para que coincidan como mejor le parezca. La imagen principal en la columna derecha debe aplicarse como la imagen de fondo, y el módulo de imagen con la imagen de acento a la que llegaremos más adelante.

Para la columna izquierda de la fila directamente debajo de la sección, agregue ~ 10% de acolchado izquierdo para espaciarlo del lado izquierdo (hacerlo de esta manera significa que necesitará cambiar el tamaño de las cosas para cada punto de interrupción).

Ahora, abra la configuración de la columna derecha directamente debajo de la fila principal. Use una imagen de fondo de columna.

El módulo de imagen dentro de esta columna debe tener un filtro> mezcla> superposición establecido en él. En posición avanzada>, la imagen está absolutamente colocada y anclada a la parte inferior izquierda.

Y eso es casi todo para la recreación de la sección especializada (en el escritorio). Dado que utilizamos la estructura de columna preestablecida (columnas 3/5 + 2/5), Divi tiene un tamaño y posicionamiento predeterminado en varios puntos de interrupción que deben abordarse. Puede evitar esto usando una sola columna principal, pero los grupos de módulos para contener el contenido de los lados izquierdo y derecho de esta sección.

Pero al menos en este punto, sabes que es posible anidar filas y recrear secciones especializadas.

Entrar en un nuevo futuro

Divi 5 está cerca de un lanzamiento beta, pero ya hemos hecho esfuerzos significativos para revisar el sistema de diseño de Divi.

• Diseños de FlexBox (próximamente) : ofrecerá más control sobre la alineación y distribución del espacio dentro de las filas.
• Filas anidadas : anidación interminable de estructuras de fila y columna para crear bastante complejidad con el sistema de fila nativo basado en flotadores.
• Dimensionamiento de columna avanzada : controles de tamaño faltantes agregados para anchos y alturas de columna.
• Grupos de módulos : permite agrupar módulos para una gestión y estilo más fácil.
• Variables de diseño : Definir y reutilizar variables globales (colores, fuentes, espacios, imágenes, texto) en todos los elementos y campos.
• Colores relativos con HSL (próximamente) : control de color dinámico y consistente con la marca basado en el tono, la saturación y la ligereza.

Estas características son parte de la reinvención de Divi y son fundamentales para su regreso. Estamos demostrando que la base que construimos en los últimos dos años valió la pena. Podemos construir características que no fueron posibles en D4, y estamos haciendo cada una en cuestión de semanas.

Divi 5 está listo para usarse en nuevos sitios web hoy.

Descargar divi 5learn más sobre divi 5