¬ŅQu√© es Divi y c√≥mo funciona? La gu√≠a que esperabas

¬ŅQu√© es Divi y c√≥mo funciona? La gu√≠a que esperabas

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on email
Email
¬°Ponme nota!
5/5

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?

Algunas preguntas frecuentes sobre Divi

¬ŅQu√© es un Divi?

Divi es el theme m√°s importante de Elegant Themes, y es lo que se conoce como un Page Builder, es decir, un constructor de p√°ginas que te permite hacer el dise√Īo que quieras en cada una de las URLs de tu site.

¬ŅQu√© es el Divi Builder?

Divi Builder es la extensi√≥n de Divi que te permite incrustarlo en cualquier p√°gina de cualquier theme de WordPress, por eso es tan √ļtil.

¬ŅQu√© es Elegant Themes?

Elegant Themes es la empresa que ha desarollado Divi, llevan muchos a√Īos en el mercado y este es su mejor producto.

¬ŅCu√°nto cuesta Divi?

89$ la licencia anual y 249$ la licencia de por vida de Divi.

Sergio Ramírez

Sergio Ramírez

Me gusta m√°s el Marketing Online que las galletas de chocolate. Poca broma.

3 respuestas

  1. ¬Ņ Te quedas con Divi Builder, o Divi mejor que con Elementor ? Gracias, te he descubierto hoy y estoy ¬ęflipando con tu blog¬Ľ Gracias de nuevo.

    1. Hola, Laura,

      Antes de nada, disculpa la demora y mil gracias por comentar.

      A día de hoy, sin duda, Elementor Pro, les ha pasado de largo y creo que su evolución no va a parar.

      ¬°Un abrazo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.