Buenas prácticas con DIVI

por Ramiro | Jul 31, 2025 | Destacadas, Diseño Web, Tips & Tricks, WordPress

Estas son algunas recomendaciones que aprendí estos últimos años usando DIVI y me han servido para lograr sitios fáciles de actualizar y optimizar.

  1. La base
    • Montar un mockup con todos los elementos: secciones, botones, formularios, etc. Puede ser texto de pruebas.
    • En Customization definir la tipografía, tamaños y el formato de botones y elementos.
    • Definir bien los anchos máximos y las vistas de Tablet / Celular
    • En Divi Options definir la paleta de colores.
  2. Diseño: tratar de usar los módulos base lo mas que se pueda. Divi ofrece muchas opciones para customizarlos y que se vea menos Divi Base como:
    • Uso de fondos / imágenes
    • Ajustar border radius
    • Uso de sombras
    • Animaciones (aunque recomiendo no abusar o ignorarlas por completo por temas de optimización)
    • Uso de masks (ejemplo).
    • Rotación de imágenes y bordes para hacer efectos de marcos. Ejemplo.
  3. Diseño Parte II: si la funcionalidad requiere si o si extras, tratar de usar un mínimo de plugins o considerar algo mas custom.
    • No usar Bold, Italic o Span dentro del contenido salvo que sea estrictamente necesario.
  4. CSS. Por orden.
    • Usar los controles de DIVI / Custom CSS
    • Usar Divi > Theme Options para cosas globales
    • Si el punto 1 se llevó a cabo correctamente, no debería ser necesario muchísima customización de CSS.
  5. Módulos
    • Evitar repetición / Consolidar. Por ejemplo, si vamos a hacer una lista de 10 ítems, no usemos 10 módulos de texto cuando podemos usar uno solo con una lista y un poco de CSS para que se vea igual. Este es un error común y hace que los sitios tengan muchos nodos de HTML lo cual hace que la velocidad de carga y en casos donde hay JS de por medio las cosas se pongan lentas.
  6. Optimización
    • En Theme Options > Builder > Advanced que esten activadas las opciones de generar CSS estático y que se utilice la funcionalidad más reciente de DIVI. Desmarcar Product Tour
    • En Theme Options > General > Performance marcar definitivamente las opciones de Deffer y todo en general ayuda salvo que...
  7. Optimización II
    • Siempre es recomendable usar algún plugin de Cache. En este caso, dependiendo el plugin, leer la documentación y va a recomendar desactivar ciertas cosas que choquen con Divi. En general si el plugin de optimización lo hace, desactivar la misma opción en Divi para que no compitan por los mismos archivos.
    • Importante borrar los cachés cada vez que se hace un cambio grande.
  8. SEO
    • Usar los campos ALT para definir descripciones de las imágenes.
  9. Nombrar las secciones
    • Sobre todo en diseños muy custom y con muchas secciones, es recomendable nombrar las secciones. Si el diseño se vuelve lento o algo rompe el JS, es común ir a la vista de bloques y la navegación se hace mucho más fácil si los bloques / secciones tienen nombre.
  10. Familiarizare con el Theme Builder. Si bien esto es uno de los fuertes de Divi, no todos lo usan y salva tiempo.
    • Secciones que se repiten fuera del Header / Footer pueden guardarse en la Librería de Divi / Divi Library y reusarse de manera rápida en otra página.
    • Lo mismo aplica para filas y módulos.
  11. Minimalismo. Salvo que el diseño tenga un factor wow por la índole del servicio que se ofrece o el objetivo que se quiera lograr, tratar de mantener el minimalismo. Menos es Más en Diseño.

¿Qué plugin de optimización usar?

Es un tema para un post completo. Pero para no dejar esto sin cubrir, casi todos los buenos hosting actuales ofrecen plugins diseñados específicamente para sus configuraciones. Probarlos y hacer ajustes necesarios.

Si eso no ayuda, probar con plugins conocidos. No hay nada escrito en piedra.