Divi: tutorial completo del tema y constructor visual de WordPress

Divi es un tema y constructor visual de WordPress creado por Elegant Themes que permite diseñar páginas arrastrando elementos y viendo los cambios en directo, sin escribir código. Incluye cientos de diseños prediseñados, una biblioteca de módulos (textos, imágenes, formularios, botones, galerías) y opciones de estilo para casi todo. Es una de las herramientas más populares para crear webs sin programar.

Lo he usado en proyectos propios y lo he visto en muchas webs ajenas durante mis auditorías, así que te puedo contar sus ventajas con conocimiento y sus problemas sin rodeos. En este tutorial verás cómo instalarlo, cómo configurarlo y cómo construir una web con él, tanto desde cero como a partir de un diseño predefinido, que es la forma que casi siempre recomiendo para empezar.

Lo escribí en 2020 y lo he rehecho en noviembre de 2026. Divi ha cambiado: hay una versión 5 del constructor, reescrita desde cero, que ha ido llegando por fases, y se han incorporado herramientas de inteligencia artificial. Los pasos básicos siguen siendo parecidos, pero te señalo dónde puede variar tu pantalla según la versión que tengas instalada.

Divi, una de las mejores plantillas de WordPress

Divi es uno de los temas con constructor más vendidos, y lleva más de una década en el mercado. Se vende con una suscripción a Elegant Themes que da acceso a Divi, al tema Extra, a plugins como Bloom y Monarch, y al soporte. La suscripción puede ser anual o de pago único de por vida; consulta los precios en su web oficial, porque cambian.

Se apoya en WordPress, el sistema de gestión de contenidos más usado del mundo, y funciona como un tema normal que activas en «Apariencia». Su gran atractivo es el constructor visual: trabajas sobre la página real, haces clic en un elemento y cambias su texto, su color o su tamaño al momento. Puedes ver la documentación oficial del constructor visual si quieres entrar en detalle.

¿Por qué usar Divi de WordPress?

Estos son los argumentos que me parecen más razonables, y los matices que añado a cada uno.

Calidad profesional

Los diseños de Divi tienen un acabado cuidado, con tipografías, espaciados y combinaciones de color razonables. Para quien no es diseñador, es una ayuda real: partir de un buen diseño evita que la web parezca amateur. Lo que ves en los ejemplos está pensado para impresionar, y con pocos cambios se adapta a tu marca.

Personalización ilimitada

Casi todo se puede cambiar: márgenes, bordes, sombras, animaciones, fondos con degradados o vídeo, efectos al pasar el ratón, comportamiento en móvil. Cada módulo tiene decenas de opciones. Esa potencia es una ventaja y también un riesgo: con tantas posibilidades, es fácil acabar con una web recargada y lenta. Mi consejo es contenerse.

Asistencia y soporte

Elegant Themes ofrece soporte a sus suscriptores, documentación extensa, un foro y una comunidad grande. Al ser un producto muy usado, encontrarás tutoriales, plantillas de terceros y profesionales que lo dominan. Esa comunidad es uno de sus mejores activos.

Seguridad

Divi recibe actualizaciones regulares, también de seguridad. Pero la seguridad de tu web no depende solo del tema: hay que mantener WordPress y los plugins al día, usar contraseñas robustas y copias de seguridad. Con Divi, como con cualquier tema, descarga siempre desde la cuenta oficial. Las copias «gratis» que circulan por internet suelen traer código malicioso.

Relación calidad y precio

Una suscripción que incluye tema, constructor y plugins por un precio razonable es, en términos de funciones, buena compra. Pero conviene hacer cuentas a tres años y compararlo con alternativas gratuitas o más baratas. Para quien monta muchas webs, la licencia que permite usarlo en sitios ilimitados es especialmente rentable.

elegantthemes.comQuiero descargar DIVIDescargar

Cómo instalar Divi en WordPress

Necesitas una cuenta de Elegant Themes con suscripción activa.

1. Entra en tu área de miembros y descarga el archivo ZIP del tema Divi.
2. En el escritorio de WordPress, ve a «Apariencia», «Temas» y pulsa «Añadir nuevo».
3. Pulsa «Subir tema», selecciona el ZIP y pulsa «Instalar ahora».
4. Cuando termine, pulsa «Activar».
5. Entra en «Divi», «Opciones del tema», «Actualizaciones» e introduce tu nombre de usuario y tu clave de API para recibir las actualizaciones automáticas.

Antes de instalar en una web que ya funciona, haz una copia de seguridad y prueba en un entorno de pruebas. Cambiar de tema puede alterar el diseño y el rendimiento.

Configuración básica de Divi en WordPress

Tras la instalación, aparece un menú propio llamado «Divi» en el escritorio. Las secciones más importantes son «Opciones del tema», «Personalizador de temas», «Biblioteca de Divi» y «Role Editor».

Opciones del tema

Es el panel central. Se divide en pestañas: «General», «Navegación», «Maquetación», «Publicidad», «SEO», «Integración» y «Actualizaciones». Estos son los ajustes que miro siempre:

• En «General», sube tu logotipo y tu favicon, y elige si quieres que el menú se quede fijo al hacer scroll.
• En «Navegación», decide qué páginas salen en el menú y si se muestran los submenús.
• En «Maquetación», ajusta si los artículos muestran la fecha, el autor y las categorías, según el tipo de web.
• En «SEO», desactiva las opciones de Divi si usas un plugin de SEO, para evitar duplicados. Es una fuente habitual de errores.
• En «Integración», puedes añadir códigos de seguimiento de analítica. Si usas otro plugin para eso, déjalo vacío.

Personalizador

En «Apariencia», «Personalizar», ajustas colores generales, tipografías, tamaños de letra, cabecera y pie de página. Elige una paleta corta de dos o tres colores y una o dos tipografías. Es la base visual de toda la web.

Rendimiento: lo que activo siempre

Divi incluye en «Opciones del tema», «Builder», «Avanzado», opciones para cargar solo el código necesario, minificar CSS y JavaScript y diferir scripts. Actívalas y comprueba que la web sigue funcionando bien. Es el primer paso para que Divi no pese de más.

Crear un portal usando Divi en WordPress

Hay tres formas de construir una página con Divi, y cada una sirve para algo distinto.

Construir de cero

Creas una página, pulsas «Usar el constructor Divi» y empiezas con una sección vacía. Añades filas con la estructura de columnas que quieras y dentro de cada una, módulos. Es la opción más flexible, y la más lenta. La recomiendo cuando tienes claro el diseño y tienes experiencia.

Cada página se estructura en tres niveles: secciones, filas y módulos. Las secciones son bloques grandes con su propio fondo, las filas organizan las columnas, y los módulos son los elementos concretos, como un texto o un botón. Entender esa jerarquía es la clave para dominar Divi.

Elegir un diseño predefinido

Al crear una página, puedes elegir un diseño de la biblioteca. Hay paquetes completos, con todas las páginas de una web para un tipo de negocio, como un restaurante, una consultora o un estudio. Te instala un diseño completo, con imágenes y textos de ejemplo, que luego sustituyes por los tuyos. Es lo más rápido y es lo que yo recomiendo a quien empieza.

Clonar una página existente

Si ya tienes una página con un diseño que te gusta, puedes duplicarla y modificar solo el contenido. Es la opción para mantener coherencia en una web con muchas páginas parecidas, como fichas de servicios o de productos.

Usando la opción «Elegir un diseño predefinido»

Veamos el proceso paso a paso, que es el que más me piden.

1. En «Páginas», pulsa «Añadir nueva» y ponle un título.
2. Pulsa «Usar el constructor Divi». Elige «Elegir un diseño predefinido».
3. En la ventana, navega por los paquetes y elige uno que encaje con tu sector. Pulsa «Usar este diseño».
4. Espera a que se cargue. Verás la página con textos e imágenes de ejemplo.

Eligiendo el diseño de la biblioteca de Divi

Antes de decidirte, mira cómo se ve cada diseño en móvil además de en escritorio. Elige uno con una estructura que se parezca a lo que necesitas: si vas a hacer una web de servicios, que tenga sección de servicios y de contacto. Pensar en la estructura antes que en el estilo ahorra muchas horas de cambios.

Ajustando el encabezado y el pie de página

Con el constructor de temas de Divi, puedes diseñar una cabecera y un pie propios para todas las páginas. Ve a «Divi», «Constructor de temas», crea una plantilla global y diseña la cabecera con logotipo, menú y botón de contacto. Haz lo mismo con el pie, con datos de contacto, enlaces legales y redes. Así tienes coherencia en toda la web y cambias algo una sola vez.

Modificando textos del diseño

Haz clic sobre cualquier texto y escribe encima. Sustituye el contenido de ejemplo por el tuyo, con un título claro y un mensaje directo. Cuida los encabezados: usa un solo H1 por página y organiza el resto con H2 y H3, sin escoger el nivel por el tamaño que tiene en pantalla. Es un error que veo con mucha frecuencia en webs hechas con constructores.

Aplicando formatos personalizados

Cada módulo tiene tres pestañas: contenido, diseño y avanzado. En la pestaña de diseño cambias tipografías, colores, tamaños y espaciados. Un truco útil es guardar los estilos que repitas como «preajustes», para aplicar el mismo formato a otros módulos con un clic. Y si necesitas un cambio global, usa las variables de diseño de Divi, que permiten definir colores y tipografías una vez y cambiarlas en toda la web.

Eliminando elementos del diseño

Pasa el ratón sobre un módulo, fila o sección y pulsa el icono de papelera. Así quitas lo que no necesitas. Elimina sin miedo lo que sobre: los diseños predefinidos traen más secciones de las que necesitas, y una página más corta y directa convierte mejor.

Duplicando elementos del diseño

Para repetir un módulo, como una tarjeta de servicio, pulsa el icono de duplicar y modifica el contenido. Si necesitas el mismo elemento en varias páginas, guárdalo en la biblioteca de Divi y reutilízalo. Si lo cambias en la biblioteca, se actualiza en todas partes si lo has enlazado como elemento global.

Ventajas de usar diseños predefinidos en Divi

• Ahorro de tiempo: partes de una web completa en minutos.
• Coherencia visual: los diseños de un mismo paquete combinan entre sí.
• Aprendizaje: ves cómo está construida cada página y entiendes la estructura.
• Menos errores de diseño: las proporciones y el espaciado ya están cuidados.

Su desventaja: muchas webs acaban pareciéndose entre sí, porque se usan los mismos paquetes. Personaliza al menos colores, tipografías e imágenes, y quita lo que no encaje con tu marca.

elegantthemes.comQuiero descargar DIVIDescargar

Divi AI y otras novedades

Elegant Themes ha incorporado herramientas de inteligencia artificial a Divi, que ayudan a generar textos, imágenes y hasta diseños completos a partir de una descripción. Son cómodas para sacar un primer borrador, pero no sustituyen el criterio editorial. Un texto generado por una herramienta, sin revisar, suele sonar genérico, y Google valora el contenido útil, con experiencia y datos propios. Úsalas como punto de partida y reescribe con tu voz.

Otras novedades que merece la pena conocer son las variables de diseño, que permiten definir colores, tipografías y espaciados globales, y las opciones de rendimiento mejoradas de la versión 5. Si montas una web nueva, empieza por definir esas variables y no las toques cada vez que añadas una sección.

Errores comunes al montar una web con Divi

1. Empezar por el diseño y no por la estructura. Escribe antes el esquema de páginas y los mensajes de cada una.
2. Usar demasiados efectos de animación y vídeos de fondo, que ralentizan la carga en el móvil.
3. Subir imágenes enormes sin optimizar. Reduce el peso antes de subirlas y usa formatos modernos.
4. Dejar los textos de ejemplo del diseño predefinido, con latín incluido, en páginas publicadas.
5. No revisar la versión móvil de cada sección, donde las columnas pueden quedar mal.
6. Duplicar el SEO: activar a la vez las opciones de Divi y las de un plugin de SEO.
7. No hacer copias de seguridad antes de actualizar el tema o el constructor.

Divi y el SEO: lo que conviene saber

Divi no posiciona ni deja de posicionar por sí mismo. Pero hay aspectos técnicos a controlar:

• Velocidad: Divi genera más código que un tema ligero. Activa las opciones de rendimiento, usa imágenes optimizadas y un buen alojamiento. Comprueba las Core Web Vitals, con atención a la métrica de interacción, que es la que más suele fallar en webs con muchos efectos.
• Estructura de encabezados: revisa que cada página tenga un solo H1 y una jerarquía lógica.
• Bloqueo con el constructor: si dejas Divi, el contenido queda con códigos cortos en el texto. Eso complica los cambios de tema. Es la razón por la que no lo recomiendo para webs que vayan a vivir muchos años sin cambios.
• Divi 5: la nueva versión del constructor cambia cómo se guarda el contenido y mejora el rendimiento. Comprueba en la web de Elegant Themes en qué fase está y si tus plugins y diseños son compatibles antes de actualizar una web que funciona.

Si quieres comparar con otras opciones, tengo un artículo con las mejores plantillas de WordPress.

Alternativas a Divi

Divi no es la única opción de constructor visual. Elementor es la más extendida, Bricks destaca por su velocidad, y el editor de bloques de WordPress, con un tema como GeneratePress, ofrece una base más ligera y estable. Para un blog o una web de contenido, mi preferencia es esa última. Para una web corporativa con mucho diseño y poco tiempo, Divi sigue siendo una opción válida.

Mi opinión sobre Divi

Divi es una herramienta potente que cumple lo que promete: te permite montar una web con buen aspecto sin programar. Lo recomiendo para webs de empresa, de servicios o de presentación, hechas por alguien sin conocimientos de diseño y que quiere control visual. No lo recomiendo para proyectos donde la velocidad extrema y la estabilidad a largo plazo son prioritarias, como medios con mucho contenido. Y si lo usas, hazlo con medida: pocas animaciones, pocos efectos, imágenes optimizadas y un buen alojamiento. Si quieres que revise el rendimiento de tu web, mira mi servicio de SEO técnico.

Preguntas frecuentes

¿Divi es gratis?

No. Se incluye en la suscripción de Elegant Themes, anual o de pago único, según la oferta del momento. Hay descargas «gratis» en webs de terceros que no son oficiales y no conviene usar.

¿Divi es bueno para el SEO?

Es suficiente si lo configuras bien: velocidad cuidada, encabezados correctos y buen alojamiento. No es la opción más ligera, así que hay que optimizarlo.

¿Se puede usar Divi con cualquier tema?

El constructor Divi se puede usar como plugin con otros temas, aunque lo habitual es usar el tema Divi completo para aprovechar todas sus funciones.

¿Qué pasa si dejo de usar Divi?

Tu contenido se mantiene, pero el diseño se rompe y verás códigos cortos en los textos. Para evitarlo, valora las alternativas antes de comprometerte con un proyecto largo.

¿Es difícil aprender a usar Divi?

Es sencillo empezar con un diseño predefinido. Dominar todas las opciones lleva más tiempo, pero la comunidad y los tutoriales ayudan mucho.

¿Cuánto tarda en cargar una web hecha con Divi?

Depende del alojamiento, del peso de las imágenes y de los efectos activados. Una web bien optimizada puede cargar con rapidez, pero una cargada de animaciones y de vídeos sufrirá en el móvil. Mide siempre con una herramienta de rendimiento antes de dar la web por terminada, y repite la medición después de cada cambio importante.

¿Puedo usar Divi para una tienda online?

Sí, con WooCommerce. Divi incluye módulos para mostrar productos y para personalizar las páginas de tienda. Para catálogos grandes, vigila el rendimiento y prueba con calma el proceso de compra en móvil.