Divi Responsive Helper

En Divi, lo que cansa del móvil no es la dificultad, es la repetición

Una página de Divi se ve bien en escritorio y en el teléfono aparecen los mismos tres problemas de siempre: secciones con demasiado relleno, columnas que se apilan en el orden equivocado y títulos que dejan una palabra sola en la última línea. Ninguno es difícil. Lo que cuesta es arreglarlo en cada sección, fila y módulo, y repetirlo en la página siguiente.

Divi Responsive Helper, de Pee-Aye Creative, ataca justo eso: convierte en ajuste global lo que antes se corregía a mano, módulo por módulo. Sus opciones se integran en las Theme Options de Divi y en los ajustes de módulos, filas, columnas y secciones que ya conoces.

Lo que se fija una vez para todo el sitio

• Puntos de corte de Divi 5: valores en píxeles y estado activado o desactivado por defecto para Ultra Wide, Widescreen, Desktop, Tablet Wide, Tablet, Phone Wide y Phone, con importación y exportación de la configuración.
• Relleno superior e inferior por defecto de secciones y filas, y ancho y ancho máximo de fila, para cada punto de corte.
• Columnas por fila y orden de apilado en cada punto de corte, por ejemplo la imagen encima del texto en el móvil.
• Columnas y número de elementos por punto de corte en los módulos Blog, Gallery, Portfolio, Filterable Portfolio y Woo Products.
• CSS propio por punto de corte y media queries con nombre, con ancho mínimo y máximo.

El texto y el menú, adaptados a cada pantalla

La tipografía fluida escala títulos y texto entre un tamaño mínimo y uno máximo según el ancho de la pantalla, con los títulos de H1 a H6 en proporción para que no se pierda la jerarquía. El corrector de palabras sueltas sustituye el último espacio de títulos y párrafos por uno de no separación, en todo el sitio o por módulo.

En los menús se puede ocultar un elemento según el dispositivo, usar un menú distinto por dispositivo en el módulo Menu, poner menú hamburguesa en escritorio, plegar submenús en el móvil y fijar un punto de corte propio para el menú.

Para pantallas táctiles trae interruptores sueltos: quitar los efectos hover, activar el parallax o quitar las animaciones en móvil, evitar el scroll horizontal, permitir el zoom con pellizco, un logo propio para móvil en la cabecera por defecto y el color de la barra del navegador.

Theme Builder, Divi 4 y el plugin Divi Builder

No es un constructor ni sustituye a Divi. Añade opciones a lo que ya existe en Divi.

Los controles de menú viven en el módulo Menu. También se aplican a la cabecera por defecto de Divi; esa extensión a la cabecera por defecto no cubre las cabeceras del Theme Builder.

En Divi 4 no hay vista previa en vivo de sus ajustes dentro del constructor visual: los cambios se ven en la web al salir. En Divi 5 sí la hay.

Necesita el tema Divi o Extra. Sus ajustes se configuran en las Theme Options, que el plugin Divi Builder sobre otro tema no tiene, así que esa combinación no está soportada.

Instalarlo y empezar por lo global

Funciona con Divi 4 y Divi 5 con el mismo archivo, y también con el tema Extra. Si pasas de Divi 4 a Divi 5, los ajustes se trasladan a la nueva interfaz.

1. Activa el plugin y fija primero el relleno por defecto de secciones y filas en cada punto de corte.
2. Define las columnas y el orden de apilado de las filas que más se repiten.
3. Activa la tipografía fluida y el corrector de palabras sueltas.
4. Revisa el sitio con la vista previa a distintos anchos y deja los ajustes por módulo solo para las excepciones.

Un menú móvil a medida, o botones flotantes

El producto de base es Divi, tema y constructor visual a la vez. Si lo que necesitas es diseñar el menú móvil desde cero, Divi Pixel trae un constructor de menú móvil hecho con el propio Divi Builder, además de más de cincuenta módulos. Y DiviMenus, pese a su nombre, no toca los menús de WordPress: es un módulo para botones flotantes, rejillas y ventanas emergentes.

Divi 5, Extra y la vista previa

¿Sirve con el tema Extra?

Sí, está soportado.

¿Puedo usarlo con el plugin Divi Builder en otro tema?

No. Sus ajustes dependen de las Theme Options, que solo existen en el tema Divi.

¿Sirven los controles de menú en una cabecera del Theme Builder?

Los del módulo Menu, sí, si la cabecera usa ese módulo. Los ajustes pensados para la cabecera por defecto de Divi no la alcanzan.

¿Cómo veo los cambios en Divi 4?

Saliendo del constructor. Tener el constructor y la web abiertos en dos pestañas ahorra idas y vueltas.