Si hay algo que ha revolucionado los themes de WordPress no son otros que los chicos de Elegant Themes, y más con su archiconocido Divi que, en muy poquito tiempo, se ha conseguido colar no sólo como uno de los más interesantes para este CMS, también de los 10 más utilizados, y es todo un hito.

La verdad es que Divi y todo lo que significan estas cuatro letritas da para mucho, por eso suelen surgir muchas dudas al respecto, y aquí estoy, presentándote esta guía para que comprendas mejor qué es Divi y cómo funciona.

Empezaré contándote qué es y cómo funciona, para luego pasar a cosas más técnicas como los elementos de diseño o Divi Page Builder.

Luego te diré sus ventajas e inconvenientes, hablaré de su velocidad y hasta te voy a dar tutoriales en castellano.

Total, que espero que te guste.

¿Qué es Divi?

Divi es un theme bastante molón de la empresa Elegant Themes, pero tiene muchas diferencias con un theme que podríamos llamar “normal”.

En lugar de ser una plantilla o un conjunto de plantillas, como suele ser lo normal, en el caso de Divi lo que vas a tener a tu disposición son, además de más de 20 conjuntos de páginas distintas a golpe de clic, un editor visual para que personalices tal como quieras tu página.

Y ojo, que tiene tantas opciones que hace que las opciones de personalización se vayan hasta el infinito.

Es tan potente que, con el mismo theme, puedes construir un eCommerce, un blog, una web coporativa, o lo que te dé la real gana.

Y sin tener ni idea de código.

Ese es realmente el puntazo a favor que tiene.

Vaya, ¿es Divi el único theme que hace esto?

No, para nada, hay más themes de este estilo, aunque el único que podríamos decir que es competencia real es otro conocido como Elementor Pro y, quizá, otro llamado Visual Composer.

Cada uno de ellos tiene sus ventajas e inconvenientes y, además, sus detractores y sus aduladores, pero, realmente, los tres son bastante buenos (quizá Divi y Elementor Pro están un paso por delante), pero Divi tiene algo que la competencia no tiene, algo llamado Divi Builder y de lo que te hablaré más adelante.

Características generales de Divi

Sobre Divi podría hablarte durante horas, pero he preferido agrupar las 5 características que, para mí, hacen de Divi un concepto único dentro de WordPress, a ver qué te parecen:

Divi es muy fácil de usar

Lo que más destaca en Divi es que es realmente sencillo de utilizar, tanto que realmente puedes hacer una web bonita y funcional sin tener absolutamente ni idea de código.

Te lo digo por experiencia, yo mismo he montado webs con Divi rápidas, funcionales, con armonía y, lo más importante, sin tocar una línea de código.

Gracias a ello se consigue algo muy importante, que es democratizar un poco más la creación de webs, haciendo mucho más asequible tener una web profesional.

Y eso mola mucho.

Tiene diseños casi infinitos

Divi tiene un montón de posibilidades de diseño, tanto que son casi infinitas.

Esto es debido a que Divi tiene un montón de bloques de diseño distintos, distintas arquitecturas y una personalización al 100% de elementos, haciendo que el límite esté en tu imaginación más que en el maquetador.

Y eso, también mola mucho.

Se adapta al 100% a móvil y Tablet

No es que Divi sea responsive, que lo es, al igual que todo lo que se haga en WordPress desde hace mucho tiempo, es que en Divi puedes elegir qué elementos y cómo mostrar para móvil, Tablet y ordenador.

Así que, si ves que un elemento no cuadra bien en móvil, puedes deshabilitarlo y hacer uno nuevo específico para ello.

Vamos que, si quieres, puedes mostrar al usuario una página distinta según por donde venga.

La clave son los módulos

Si hay una clave dentro de este theme son sin duda los módulos que tiene que te permite diseñar cualquier cosa.

Es tan fácil como elegir un módulo, arrastrar y soltar donde quieras colocarlo, y listo para personalizarlo.

Y sí, todo esto sin tocar código. Nada.

La planificación es lo más importante

Divi es tan potente que, si te lanzas a diseñar algo directamente, lo más normal es que te abrume y te pierdas entre las opciones.

Por eso mi recomendación es que planifiques antes, en tu cabeza o en un papel, como es la página que quieres diseñar y luego te pongas a ello.

Vale Sergio, pero ¿cómo funciona Divi?

Ahora que ya has visto más sobre la filosofía de Divi, estoy seguro que quieres saber más acerca de cómo funciona este theme, y aquí te quiero contar cómo está estructurado.

Divi está dividido en lo que podríamos decir que son tres partes diferenciadas:

Opciones del tema de Divi

La primera serían las opciones generales del theme, que serían opciones muy generales entre las que están:

• Las opciones del tema, en las que puedes ver las opciones generales, de anuncios, integraciones o la posibilidad de introducir el código de Analytics, píxeles de Facebook o AdWords entre otras.
• El personalizador de temas. Sirve para cambiar tamaño y tipografías tanto del theme en general como de los distintos ajustes de menú, cabecera o los elementos de diseño.
• La personalización de módulos de diseño. Te permite personalizar todos los elementos de diseño.
• El editor de roles es decir, qué puede ver el administrador, los editores, colaboradores, etc. y qué pueden tocar.
• La biblioteca de Divi, que son tus diseños o los diseños que hayas importado.

Si te estás preguntando cómo se ve esto, sería algo así:

Como ves, un listado de opciones que activar y desactivar, y poco más.

Muy sencillito.

El editor de Divi propiamente dicho

El editor de Divi es lo potente del theme, ya que ahí es donde puedes diseñar tus páginas.

Lo puedes activar tanto en las páginas como en los post y básicamente es el compositor visual de las páginas, por así decirlo.

Podría escribir mucho sobre él, pero es mejor que lo veas.

Para ello he rescatado una captura del editor de una de las webs de un cliente:

Es decir, vas poniendo secciones y le vas metiendo los elementos de diseño.

Tranquilo, que más adelante nos meteremos más en este asunto.

El editor visual de Divi

El tercer punto, que cuelga de este segundo es que, además de de hacer el diseño de tus páginas de esta forma, puedes hacerlo añadiendo elementos en vivo en tu página, y así puedes ver cómo van quedando.

Esta opción en las primeras versiones de Divi valía poco más que para hacer la última revisión, pero en las últimas lo ha mejorado mucho y, tras el lanzamiento del editor Gutemberg para WordPress, ahora es la mayoritaria.

Ejemplos de páginas con Divi

Como esto por ahora puede sonar muy abstracto, te voy a compartir algunos de los diseños que puedes hacer con Divi, para que flipes del todo:

¿Habías pensado alguna vez que podrías hacer esto con un theme?

Elementos de diseño de Divi

A continuación quiero contarte un poquito más sobre los distintos elementos de diseño que tiene Divi en su configuración

Primero dividimos una página en secciones

En el maquetador de la página de Divi, cada vez que queramos hacer un cambio en el diseño, necesitamos hacerlo dentro de una sección.

Esta sección puede ser de anchura fija, de anchura completa o especial.

Diferencias:

• Las de anchura fija son las típicas que tienen todas las webs en las que se ve el fondo y se pueden dividir entre 1 y 4 columnas.

• Las de anchura completa son las que se suelen usar para los sliders o carruseles, es decir, de lado a lado.
• Las especiales son parecidas a las de anchura fija, pero tienen diseños más asimétricos o rarunos.

Es tan sencillo como añadir una sección y arrastrar elementos a cada una de las filas.

Y al final queda algo así:

Filas dentro de las secciones

Como ves en la imagen de arriba, dentro de una misma sección puede haber varios tipos de filas, la primera es a una columna, mientras que la segunda consta de un total de 8 elementos, en columnas de 4.

Cada vez que quiera cambiar el número de columnas o su disposición, me toca añadir una fila nueva.

Los módulos de Divi

Pero claro, a las filas hay que meterles módulos dentro para que hagan algo, ¿cuántos módulos tiene Divi? Pues todos estos:

En el caso que no los veas, tranquilo, que los enumero:

• Acordeón.
• Anuncio.
• Audio.
• Barra lateral.
• Blog.
• Botón.
• Búsqueda.
• Comentarios.
• Conmutador.
• Contador de número.
• Contadores circulares.
• Contadores de barra.
• Control deslizante de vídeo.
• Correo Electrónico Optin.
• Código.
• Delizador.
• Formulario de contacto.
• Galería.
• Imagen.
• Iniciar sesión.
• Llamada a la acción.
• Mapa.
• Navegación por los mensajes.
• Persona.
• Pestaña.
• Portafolio.
• Portafolios filtrable.
• Post Slider.
• Recomendación.
• Seguir en medios sociales.
• Separador.
• Tablas de precio.
• Temporizador de cuenta atrás.
• Texto.
• Tienda.
• Título de la publicación.
• Vídeo.

¡Ahora dime qué cosas no vas a poder hacer con semejante cantidad de elementos!

Es justo por eso, por su cantidad, por lo que te comentaba que lo mejor es hacerse un mapa mental, yo lo suelo incluso llevar a un papel y, a partir de ahí, me pongo a diseñar, pero no antes.

Cómo se configuran estos módulos

Para configurar cualquier módulo lo tienes igualmente sencillo, porque basta con pulsar en la ruedita de configuración en cualquier módulo que quieras modificar y, de ahí, te saldrán las opciones de configuración que tiene.

Te voy a poner un ejemplo en lo que sería el nuevo editor de módulos/bloques de Divi:

Una vez te sale el panel de configuración del módulo, es simplemente ir pinchando y cambiando la información.

Vamos, una maravilla.

El constructor visual de Divi

No quería dejar este punto sin enseñarte un poco más acerca de constructor visual de Divi pero, como es más bien complicado contarte en texto algo que es móvil al 100%, he querido compartir un vídeo.

Está en inglés, pero creo que es más que suficiente para que veas cómo funciona el constructor visual de Divi 3.0 y flipes.

¿Qué es Divi Builder?

Bajo mi humilde punto de vista, Divi Builder es la razón que hace que Divi esté por encima de Elementor Pro y muy por encima de Visual Composer.

Y te preguntarás, ¿qué es lo que hace tan especial esto del Divi Builder y qué tiene que ver con Divi?

Tranquilo, que te cuento más.

Diferencias entre Divi y Divi Builder

Divi es el theme de WordPress, como hay muchos por ahí. Es un theme muy molón con muchas configuraciones, como has podido ver, y hasta ahí todo normal.

Ahora bien, Divi Builder es un plugin que lo que hace es meter el constructor de Divi en cualquier WordPress, sea cual sea el theme, dándote la potencia abrumadora de Divi en cualquier proyecto.

Es decir, que tienes un theme Avada y quieres hacer diseños más chulos para landing pages o para las páginas de tu proyecto. Pues instalas Divi Builder, construyes y listo.

Vale, ¿y qué pasa si cambio de theme?

Imagina que tienes instalado Divi y tienes un montón de páginas diseñadas con el constructor visual.

Si cambias el theme, perderías esos diseños y los tendrías que maquetar de cero, algo que estoy seguro que no te apetece.

Para ahorrarte ese paso, tan sólo tendrías que instalar el plugin Divi Builder, cambiar el theme Divi por el que tú quieras, y tus diseños seguirían estando y funcionando en tu theme nuevo.

Incluso podrías seguir creando diseños nuevos para páginas o post sin ningún problema.

Y esto, que parece algo que no es tan importante, en realidad quita un montón de quebraderos de cabeza y aporta mucha tranquilidad, y esta funcionalidad sólo la tiene Divi, no la competencia.

Un puntazo.

Ventajas e inconvenientes de Divi

A continuación quiero mostrarte lo que son para mí las ventajas más importantes de Divi, pero también sus inconvenientes, que también los hay y no quiero ser imparcial.

Ventajas más importantes de Divi

• Para mí, la principal es la sencillez con la que puedes hacer las cosas.
• Sin duda, que puedes hacer un proyecto profesional sin tener ni idea de código y, además, hacer tantos proyectos como quieras.
• Además, Divi no tiene límite de instalaciones, al comprar el theme, tienes instalaciones infinitas.
• Es un theme totalmente actualizado, como todos los de Elegant Themes, y siempre está a la última en configuración.
• Es totalmente compatible con WordPress 5.0 y con Gutemberg.
• Es compatible con la inmensa mayoría de plugins de WordPress.
• Es responsive y puedes adaptar el contenido al dispositivo.
• Tiene la posibilidad de introducir HTML y CSS en cada módulo de diseño para usuarios avanzados y programadores.
• Tienes una biblioteca con más de 20 diseños predefinidos muy currados.
• Cada semana Elegant Themes lanza un pack nuevo de diseño gratis.
• Es 100% compatible con WooCommerce, es decir, también es válido si quieres crear una tienda online.

Inconvenientes de Divi, que también los tiene

• Tiene tantas opciones que, sin planificación, puede apabullar a usuarios principiantes.
• La cabecera y menú no es tan personalizable como el resto.
• Es de pago. Eso sí, cuesta lo mismo que cualquier otro theme profesional y además puedes pagar o bien en formato anual o en formato “para toda la vida” (lifetime), así que es ideal si tienes una agencia, ya que lo puedes usar para todos tus clientes.

¿Cómo es de rápido Divi?

Si has leído información sobre Divi habrás visto por ahí que hay muchos SEOs y programadores que comentan que Divi es bastante lento y que eso puede lastrar el posicionamiento de tu proyecto.

Es cierto que hay proyectos en Divi que son lentos, pero suele ser o bien por no tener un servidor en condiciones o por sobrecargar con un montón de plugins pesados el CMS, y claro, así es lento Divi y cualquier otra cosa.

La realidad es que hay proyectos hechos con Divi o con Divi Builder que van como un tiro, y te voy a poner un ejemplo:

Sí, 0.788 segundos. Flipa.

Tutoriales Divi en español

Ya vamos acercándonos al final de este artículo, pero antes de finalizar me gustaría ofrecerte algún tutorial de Divi en español para que puedas verlos en acción y solventar dudas, a ver qué te parecen.

Por si te lo preguntas, los tutoriales no son míos, estos dos primeros son de Óscar, de Cómo hacer una página:

Y este último de Internet es Rentable:

Además, tienes cientos de vídeos en castellano a lo largo y ancho de YouTube para resolver duras.

¿Cómo compro Divi?

Pues lo tienes muy fácil, tienes dos planes, uno anual y otro con un sólo pago que es válido para toda la vida, así, sin peros.

Los precios son estos que puedes ver aquí:

Como ves, la única diferencia es la duración de la licencia ya que, en ambos casos tendrás acceso a todos los themes y plugins de Elegant Themes con todas sus actualizaciones, soporte Premium e instalaciones ilimitadas.

Si lo quieres comprar, sólo tienes que seguir este enlace y lo tienes.

Por si tienes alguna duda, la licencia “para toda la vida” es más barata a partir de la tercera anualidad, te compensa mucho sobre todo si tienes una agencia con la que construyes webs a empresas.

El resto de Elegant Themes

Si bien es cierto que Divi y su Divi Builder es lo más molón que han hecho los chicos de Elegant Themes, como te comenté más arriba, al comprar la licencia, tanto anual como indefinida, tienes acceso a todos los themes y plugins de Elegant Themes.

Para que te hagas una idea, en total son 87 themes y 2 plugins, y de eso quiero hablarte un poquito más.

Extra, otro theme molón

Además de Divi, otro theme que mola mucho para hacer blogs se llama Extra, es bastante limpio y con muy poca configuración lo tienes listo.

Si quieres algo más, le puedes meter el Divi Builder para según qué páginas, y todo listo.

Es esta maravilla.

Monarch, un plugin molón de comparticiones sociales

Otra pequeña joya que tienes disponible con la suscripción a Elegant Themes es un plugin que se llama Monarch y que personalmente uso un montón.

Es tan sencillo como que te pone los botones de compartición de las principales redes sociales a mano de una forma muy bonita y personalizable.

Si te preguntas como queda, puedes verlo en este mismo blog, ya que lo uso en todos mis proyectos.

Bloom, ideal para captar leads

Por último, también dentro de la suscripción de Elegant Themes tienes Bloom, un plugin muy molón que sirve para capturar emails y llevarlos a un montón de plataformas de email marketing distintas.

Vamos, que te puedes ahorrar la suscripción que tengas con otra plataforma, y sólo por eso ya te merece la pena la suscripción a Elegant Themes.

Mira como funciona:

Bueno, ¿cómo lo ves? ¿Te pasas a Elegant Themes?