Diseñar una página web con Divi es como construir una casa con piezas de Lego: todo encaja, pero hay que saber por dónde empezar. Lo bueno es que no necesitas ser arquitecto (ni programador). La verdad es que Divi te lo pone fácil, pero también tiene sus cosillas que hay que tener en cuenta para no meter la pata hasta el fondo. En este artículo voy a contarte cómo diseñar tu web con Divi desde cero, con ejemplos reales, trucos y sí, con alguna que otra anécdota personal (porque anda que no he roto cosas probando cosas en Divi…).
¿Qué es Divi y por qué usarlo?
Divi es un tema y constructor visual de WordPress desarrollado por Elegant Themes. Es uno de los más populares y versátiles del mercado, y lo puedes usar tanto para crear webs sencillas como proyectos más complejos.
A ver, ¿por qué elegir Divi y no otro como Elementor o Gutenberg? Pues porque:
- Todo es visual: ves lo que estás haciendo en tiempo real.
- Tiene muchas plantillas prediseñadas.
- Es muy flexible y puedes personalizar casi cualquier cosa.
- No necesitas saber código. O sea, si sabes, mejor, pero no es obligatorio.
De hecho, en muchos proyectos de clientes he pasado de Gutenberg a Divi porque “esto no me cuadra”, “no me sale igual que en la demo” o “quiero mover este texto más a la derecha” y no hay forma. Con Divi, lo mueves y punto.
Antes de empezar: páginas vs entradas en WordPress
Este es un clásico. Mucha gente se lía con esto al principio.
- Las páginas son para contenido fijo: inicio, servicios, contacto, etc.
- Las entradas son para el blog: artículos, novedades, noticias…
En un proyecto típico (por ejemplo, el de una agencia de marketing como la del vídeo que acompaña este post), harás páginas como:
- Inicio
- Servicios
- Quiénes somos
- Contacto
Y luego si tienes blog, crearás entradas dentro de categorías (por ejemplo: SEO, diseño web, herramientas Divi…).
Crear una página en Divi paso a paso
1. Añadir nueva página
Ve al panel de WordPress > Páginas > Añadir nueva. Ponle un nombre (por ejemplo: “Inicio”) y guárdala como borrador.
2. Usar el Divi Builder
Haz clic en “Usar Divi Builder” y te aparecerán tres opciones:
- Construir desde cero
- Elegir diseño prediseñado
- Usar IA
💡 Consejo real: Al principio, lo más práctico es usar un diseño prediseñado. Te ahorra un montón de tiempo, y solo tienes que cambiar textos e imágenes.
Por ejemplo, si buscas “marketing” en las plantillas, encontrarás opciones ya listas para agencias, portfolios, páginas de contacto, etc.
Cómo funciona el editor visual de Divi
Aquí viene la magia (y también los errores típicos). A ver, Divi se organiza en tres niveles:
- Secciones (color azul): como bloques grandes. Imagínatelos como “habitaciones” de tu web.
- Filas (verde): dentro de las secciones, puedes poner una, dos o más columnas.
- Módulos (gris): donde va el contenido real: textos, imágenes, botones, formularios…
Lo más importante: la vista móvil
De verdad, revisa siempre cómo se ve tu página en móvil. En serio. No es broma.
Más del 80% de los usuarios navegan desde el móvil. Así que, aunque en escritorio te quede precioso, si en el móvil se ven los textos cortados, botones torcidos o títulos enormes… mal asunto.
Haz clic en el icono del móvil y ajusta tamaños y márgenes si hace falta.
Editar textos, títulos y jerarquía H1, H2, H3
Este punto es clave, sobre todo para SEO y accesibilidad.
- Solo debe haber un H1 por página (el título principal).
- Usa H2 para secciones importantes.
- Usa H3 si dentro de una sección quieres subdividir más.
Ejemplo:
htmlCopiarEditar<h1>Agencia de Marketing Digital</h1>
<h2>Qué ofrecemos</h2>
<h3>Diseño Web</h3>
<h3>SEO</h3>
<h3>Publicidad SEM</h3>
En Divi, esto se elige dentro del módulo de Texto o Título en la ruedita de configuración.
💡 Error común: Mucha gente pone varios H1 porque le gusta cómo se ve el tamaño. Pero eso puede perjudicarte en SEO. Si quieres que se vea más grande, cambia el tamaño, no la etiqueta.
Personalización básica: textos, botones, enlaces
Cada módulo tiene su ruedita de configuración. Por ejemplo, en un botón puedes cambiar:
- El texto: “Pide presupuesto”
- El enlace: tu página de contacto
- El estilo: colores, bordes, sombras…
Y se puede duplicar fácilmente. Si has hecho algo que te gusta, lo duplicas y lo arrastras a otra parte. Muy útil.
💡 Anécdota personal: una vez me pasé media hora diseñando un bloque de servicios con fondo degradado y animaciones… y luego descubrí que podía guardar ese módulo en la biblioteca de Divi y reutilizarlo. ¡Un salvavidas!
Añadir nuevas secciones con módulos
Puedes crear secciones desde cero:
- Clic en el “+” azul
- Elige tipo de sección (regular, especial o de ancho completo)
- Añade filas y columnas
- Añade módulos: texto, imagen, botón, icono, galería, testimonios…
Por ejemplo:
Sección de servicios
- Una fila con 3 columnas
- En cada columna:
- Título (H2): Diseño Web
- Texto: «Creamos webs atractivas y funcionales.»
- Imagen o icono
Esto lo puedes hacer en 3 minutos. Y si quieres mover los bloques, solo arrastras.
Guardar cambios y publicar
Cuando termines de editar, tienes varias opciones:
- Guardar como borrador: si quieres seguir más tarde.
- Publicar: si ya está lista.
- Salir del Visual Builder para ver cómo queda todo.
¡Ojo! Si no te gusta un cambio que has hecho, puedes volver atrás con el icono del reloj y recuperar una versión anterior. Es un salvavidas cuando tocas algo sin querer.
Establecer tu página de inicio
Esto es algo que se olvida mucho:
- Ve a Ajustes > Lectura
- Marca “Tu página de inicio muestra: una página estática”
- Elige “Inicio” como página de inicio
Y si no quieres que Google la indexe mientras estás editando la web, marca la opción de “Disuadir a los motores de búsqueda de indexar este sitio”. Pero acuérdate de desmarcarla cuando lo tengas todo listo, ¿eh?
Crear una segunda página: “Servicios”
Para crear una página de servicios, repites el proceso:
- Nueva página: “Servicios”
- Usar Divi Builder
- Construir desde cero o con plantilla
- Poner un H1: “Servicios de marketing”
- Añadir módulos para cada servicio
Y lo mismo de antes: revisa bien la vista móvil, jerarquía de títulos, botones con enlaces…
Módulos útiles de Divi para tu web
Algunos módulos que puedes usar y que suelen quedar muy bien:
- Acordeón: para preguntas frecuentes (FAQ)
- Botones: para llamadas a la acción (CTA)
- Galería: para portfolios
- Testimonios: muy útiles si tienes clientes
- Separadores: para dar aire entre secciones
- Tablas de precios: si vendes paquetes o servicios
Explora los módulos poco a poco. Divi tiene más de 40, y puedes lograr resultados muy pro sin plugins extra.
Consejos finales (basados en errores reales 🙈)
- No pongas 5 tipos de letra diferentes. Queda caótico.
- Cuidado con los colores chillones. Lo que a ti te parece “creativo” puede resultar agresivo.
- No olvides optimizar imágenes. Si no, la web tardará un siglo en cargar.
- Usa siempre la vista móvil. Insisto porque es la que más importa hoy en día.
- Haz copias de seguridad. Una vez borré toda una página sin querer y no tenía backup… en fin, cosas que se aprenden por las malas.
En resumen
Diseñar una página web con Divi es fácil si sabes cómo empezar. Y una vez lo pillas, es hasta divertido. Puedes crear una web profesional en poco tiempo, y lo mejor es que tienes control total sin tocar código.
Así que si estás empezando, lo mejor es:
- Usar plantillas prediseñadas
- Editar títulos, textos y enlaces
- Revisar todo bien en móvil
- Guardar versiones y publicar
Y si tienes cualquier duda, es cuestión de probar, borrar, volver atrás, duplicar y experimentar. Total, para eso está Divi.
