Divi es uno de los temas y constructores visuales más populares de WordPress, con más de 2 millones de usuarios activos. Creado por Elegant Themes, permite diseñar páginas web profesionales sin escribir código gracias a su potente editor visual en tiempo real.
¿Qué es Divi y Por Qué Elegirlo?
Divi es un tema premium + constructor visual desarrollado por Elegant Themes desde 2013. Se distingue de otros constructores por ofrecer:
🎨 Editor Visual Real
Editas directamente sobre la página, viendo los cambios en tiempo real sin previsualizaciones.
📦 Todo en Uno
Tema + Constructor + 2000+ plantillas + Extras incluidos en una sola licencia.
♾️ Licencia Lifetime
Pago único de $249 para sitios ilimitados de por vida.
🔧 Sin Código
Personalización completa sin tocar CSS ni PHP.
Divi Theme vs Divi Builder
| Característica | Divi Theme | Divi Builder Plugin |
|---|---|---|
| Tipo | Tema completo | Plugin constructor |
| Uso | Como tema principal | Con cualquier tema |
| Opciones de tema | ✅ Completas | ❌ No incluidas |
| Theme Builder | ✅ Incluido | ✅ Incluido |
| Recomendación | Proyectos nuevos | Webs existentes |
Instalación y Activación de Divi
Paso 1: Obtener Divi
- Visita elegantthemes.com
- Crea una cuenta o inicia sesión
- Ve a Member Area → Downloads
- Descarga "Divi Theme" (archivo .zip)
Paso 2: Instalar en WordPress
- Ve a Apariencia → Temas → Añadir nuevo
- Clic en Subir tema
- Selecciona el archivo
Divi.zip - Clic en Instalar ahora
- Activa el tema
Paso 3: Activar la licencia
- Ve a Divi → Opciones del tema → Updates
- Introduce tu Username de Elegant Themes
- Introduce tu API Key (disponible en Member Area)
- Guarda cambios
El Divi Builder: Interfaz Completa
El Divi Builder es el corazón de Divi. Ofrece dos modos de edición:
Visual Builder (Frontend)
Editas directamente sobre tu página en tiempo real. Es el modo más intuitivo y recomendado para la mayoría de usuarios.
- Clic y arrastra para mover elementos
- Edición de texto inline
- Vista previa instantánea
- Responsive editing integrado
Backend Builder
Interfaz tradicional dentro del admin de WordPress. Más rápido en equipos lentos pero menos visual.
Estructura de Divi
Divi organiza el contenido en tres niveles jerárquicos:
Contenedores principales. Tipos: Regular, Fullwidth, Specialty.
Dividen secciones en columnas. Hasta 6 columnas.
Elementos de contenido: texto, imagen, botón, etc.
Atajos de teclado esenciales
Ctrl + S | Guardar |
Ctrl + Z | Deshacer |
Ctrl + Y | Rehacer |
Ctrl + C | Copiar elemento |
Ctrl + V | Pegar elemento |
P | Cambiar a vista previa |
W | Cambiar modo wireframe |
? | Ver todos los atajos |
Módulos Principales de Divi
Divi incluye más de 40 módulos para crear cualquier tipo de contenido. Los más utilizados:
Módulos de contenido
- Text: Texto enriquecido con editor visual
- Image: Imágenes con lightbox, animaciones y efectos
- Video: YouTube, Vimeo o archivos propios
- Button: Botones CTA personalizables
- Blurb: Icono + título + texto (ideal para servicios)
Módulos de diseño
- Slider: Carruseles de contenido
- Gallery: Galerías de imágenes
- Testimonial: Testimonios de clientes
- Pricing Table: Tablas de precios
- Countdown Timer: Temporizadores
Módulos funcionales
- Contact Form: Formularios de contacto
- Email Optin: Captación de emails
- Social Follow: Iconos de redes sociales
- Search: Barra de búsqueda
- Blog: Listado de entradas
Módulos WooCommerce
Si usas WooCommerce, Divi incluye módulos específicos:
- Woo Products
- Woo Cart
- Woo Checkout
- Woo Breadcrumb
- Woo Gallery, Price, Rating, etc.
Plantillas Prediseñadas
Divi incluye acceso a más de 2000 plantillas organizadas en Layout Packs temáticos.
Cómo usar plantillas
- Edita una página con Divi Builder
- Clic en el icono de carpeta (Load from Library)
- Selecciona Premade Layouts
- Explora los Layout Packs o busca por palabra clave
- Clic en un pack para ver sus páginas
- Selecciona la página que quieras e importa
Layout Packs populares
- Agency: Agencias de marketing
- Business: Empresas corporativas
- Restaurant: Restaurantes y cafeterías
- Lawyer: Abogados y bufetes
- Dental: Clínicas dentales
- Photography: Fotógrafos
- Gym: Gimnasios y fitness
- Online Store: Tiendas WooCommerce
Guardar tus propias plantillas
- Diseña tu página o sección
- Clic en el icono de guardar (Add to Library)
- Ponle un nombre descriptivo
- Selecciona si guardar layout completo o solo sección/fila/módulo
- Ahora está disponible en "Your Saved Layouts"
Opciones del Tema Divi
Accede desde Divi → Opciones del tema para configurar aspectos globales.
Pestaña General
- Logo: Sube el logo de tu sitio
- Fixed Navigation Bar: Menú fijo al hacer scroll
- Color Palette: Colores predefinidos para el builder
- Grab First Post Image: Usar primera imagen como destacada
Pestaña Navigation
- Ocultar/mostrar elementos del menú
- Número de productos en carrito
- Icono de búsqueda en header
Pestaña Builder
- Enable Divi Builder On: Tipos de post donde activar Divi
- Product Tour: Tutorial interactivo
- Classic Editor: Usar editor clásico en vez de Gutenberg
Pestaña Layout
- Ancho del contenido (por defecto 1080px)
- Sidebar layout (derecha, izquierda, sin sidebar)
- Estilos de blog
Pestaña SEO
Divi incluye opciones SEO básicas, pero recomendamos usar un plugin especializado como Rank Math o Yoast.
Pestaña Integration
- Código en <head>
- Código antes de </body>
- Google Analytics / Tag Manager
Pestaña Updates
- Username y API Key para actualizaciones
- Activar Google Fonts
Theme Builder: Headers, Footers y Plantillas
El Theme Builder permite crear plantillas personalizadas para cualquier parte de tu web sin código.
Acceso
Ve a Divi → Theme Builder.
Elementos que puedes crear
- Global Header: Cabecera personalizada para todo el sitio
- Global Footer: Pie de página personalizado
- Global Body: Plantilla de contenido
- Post Template: Diseño de artículos del blog
- Page Template: Diseño de páginas
- Archive Template: Páginas de categorías
- 404 Template: Página de error personalizada
- Search Results: Resultados de búsqueda
Crear un header personalizado
- En Theme Builder, clic en Add Global Header
- Clic en Build Global Header
- Usa los módulos de Divi para diseñar
- Módulos específicos: Menu, Logo, Search, Cart
- Guarda y asigna a todo el sitio o páginas específicas
Asignaciones condicionales
Puedes asignar plantillas diferentes según:
- Tipo de contenido (posts, páginas, productos)
- Categorías o etiquetas específicas
- Páginas individuales
- Autor
- Taxonomías personalizadas
Optimización de Rendimiento en Divi
Divi puede ser pesado si no se configura correctamente. Sigue estos pasos para optimizar la velocidad de tu WordPress.
Configuración interna de Divi
Ve a Divi → Opciones del tema → Performance:
- ✅ Dynamic CSS: Activar (genera CSS solo para módulos usados)
- ✅ Critical CSS: Activar
- ✅ Dynamic JavaScript Libraries: Activar
- ✅ Defer jQuery and jQuery Migrate: Activar
- ✅ Defer Additional Third Party Scripts: Activar
- ✅ Load Dynamic Stylesheet In-line: Activar para páginas pequeñas
Plugin de caché recomendado
Divi funciona bien con la mayoría de plugins de caché:
- WP Rocket (premium, mejor compatibilidad)
- LiteSpeed Cache (gratis en hosting LiteSpeed)
- W3 Total Cache (gratis)
Optimización de imágenes
- Usa formato WebP cuando sea posible
- Activa lazy loading nativo de Divi
- Comprime imágenes con ShortPixel o Imagify
- No subas imágenes de más de 2000px de ancho
Lo que NO debes hacer
- ❌ Usar demasiados módulos por página (+50)
- ❌ Cargar Google Fonts excesivas
- ❌ Animaciones complejas en muchos elementos
- ❌ Sliders con imágenes sin optimizar
Divi vs Elementor: Comparativa
| Aspecto | Divi | Elementor |
|---|---|---|
| Precio anual | $89/año o $249 lifetime | $59-$399/año |
| Sitios incluidos | Ilimitados | 1-1000 según plan |
| Plantillas incluidas | 2000+ | 300+ (Pro) |
| Editor visual | Frontend real | Panel lateral |
| Theme Builder | ✅ Incluido | ✅ Solo Pro |
| Popup Builder | ❌ Requiere plugin | ✅ Incluido Pro |
| Versión gratuita | ❌ No | ✅ Sí (limitada) |
| Curva de aprendizaje | Media | Baja |
| Rendimiento | Medio (mejorado) | Medio |
¿Cuál elegir?
- Elige Divi si: Gestionas múltiples sitios, prefieres licencia lifetime, te gusta editar directamente sobre la página
- Elige Elementor si: Quieres empezar gratis, prefieres panel lateral, necesitas popup builder integrado
Precios de Divi 2026
| Plan | Precio | Sitios | Incluye |
|---|---|---|---|
| Yearly Access | $89/año | Ilimitados | Divi, Extra, Bloom, Monarch + actualizaciones |
| Lifetime Access | $249 único | Ilimitados | Todo incluido para siempre |
¿Qué incluye la membresía?
- Divi Theme: Tema + Builder
- Extra Theme: Tema para blogs/revistas
- Bloom: Plugin de email optin
- Monarch: Plugin de compartir en redes
- 2000+ plantillas
- Soporte premium
- Actualizaciones
Preguntas Frecuentes sobre Divi
¿Divi funciona con Gutenberg?
Sí. Puedes usar Gutenberg para posts y Divi Builder para páginas, o desactivar Gutenberg completamente en las opciones del tema.
¿Puedo usar Divi Builder con otro tema?
Sí. Elegant Themes ofrece el "Divi Builder Plugin" que funciona con cualquier tema WordPress.
¿Qué pasa si cancelo mi suscripción?
Tus webs seguirán funcionando con la última versión instalada. Solo perderás acceso a actualizaciones, soporte y nuevas plantillas.
¿Divi es bueno para SEO?
Divi genera código HTML semántico y compatible con SEO. Para optimización avanzada, combínalo con Rank Math o Yoast SEO.
¿Divi ralentiza WordPress?
Con la configuración de rendimiento activada y un buen plugin de caché, Divi puede conseguir tiempos de carga excelentes. Las versiones recientes han mejorado mucho el rendimiento.