🏅¿Qué es Divi? Guía de Divi Theme para WordPress

Si aún no conoces Divi Theme ya vas tarde. Voy a explicarte qué es Divi WordPress. Divi es una mega plantilla de WordPress que te permite diseñar cualquier cosa que te imagines. Si quieres que tu web tenga un diseño concreto, lo puedes hacer con Divi 4.0 sin mucha dificultad.

Está pensado para gente que no quiera realizar diseños desde cero. Con esta plantilla WordPress no es necesario maquetar en PSD, convertir a HTML, y después integrar el código de WordPress. Eso no es necesario con Divi. Esta mega plantilla te ahorra todo ese trabajo, y eso es porque incluye un constructor visual Drag & Drop o comúnmente llamado como Divi Builder que te permite añadir cualquier tipo de elemento, arrastrarlo y soltarlo donde te parezca dentro de la página que estés diseñando. ¡Y ahora compatible con WooCommerce! Así de simple.

¿Qué es Divi y cómo funciona para crear mi primera web con WordPress?

En este vídeo puedes ver lo fácil que es realizar un diseño web para WordPress con Divi. Puedes crear elementos nuevos en una nueva página de tu web, modificarlos y adaptarlos a tu gusto. En este curso gratuito de Divi puedes ver cómo funciona Divi Builder y verás que te puede facilitar mucho el diseño de tu web o la de tus clientes.

Aquí os dejo un pequeño Curso de Divi sobre Cómo hacer una web con Divi desde cero:

Como puedes ver Divi es muy potente y está muy optimizado para que tu web no pierda rendimiento.

Solo debes saber que Divi es para poder utilizarlo con WordPress. No sirve para otro tipo de Gestor de Contenidos o CMS. Actualmente solo se puede utilizar con WordPress.

Por mi experiencia como Ingeniero Informático en el campo de las Tecnologías de la Información, para mí Divi es lo siguiente.

Divi es:

• Una plantilla WordPress: Divi se instala como tal como una plantilla dentro de WordPress. En la opción de menú de WordPress Apariencia > Temas podrás ver que tienes instalada la Plantilla Divi correctamente. Realmente lo es porque tiene la estructura de cualquier plantilla WordPress. Tiene al menos el fichero style.css que el único fichero indispensable que debe tener una plantilla WordPress para poder funcionar como tal.

• Un constructor: Divi también es un constructor. En la opción de menú de WordPress Entradas y Páginas puedes ver como debajo del título de la entrada te aparece un botón morado Usar el constructor Divi que te permite cambiar de modo a la hora de redactar las Entradas. Si lo pulsas, pasarás de redactar la entrada en modo texto con su botonera wysiwyg de TinyMCE a un nuevo modo más visual donde podrás arrastras y soltar cajas de módulos para diseñar tu Entrada o Página.

Modo tradicional utilizando el editor de WordPress:

Modo avanzado utilizando el Builder de Divi:

Si pulsamos sobre el botón Usar el constructor Divi veremos que cambia la pantalla a esta otra:

Lo primero que deberemos hacer será añadir columnas que definan la estructura de nuestra Landing Page. Tenemos diferentes estructuras prediseñadas disponibles para elegir.

Todo esto es desde la parte del escritorio de WordPress. Pero ya puedes editar desde construir desde la parte delantera en vivo viendo el resultado final:

O pulsando desde la vista previa de la página el botón de Habilitar Constructor Visual que aparece en la barra superior del escritorio WordPress:

Y podrás editar cada elemento de tu página mediante los controles que ves en la imagen. Cada control te permite modificar el diseño de una zona o elemento para adaptarlo a tus necesidades.

Y NO es:

• Un Framework: Podéis leer la definición de Framework en Wikipedia pero básicamente quiere decir que un framework suele ser un conjunto de herramientas que se apoyan en el código base de wordpress para poder realizar las tareas de manera más sencilla. Pero Divi nos ofrece un conjunto de herramientas visuales con las que podemos definir colores, estilos, añadir o quitar elementos gracias a componentes diseñados para tal efecto sin tener que picar nada de código HTML o CSS en nuestra web. Pero para mí, eso no es un framework. Un framework son un conjunto de herramientas software que te permiten codificar una aplicación de manera más sencilla. Siempre hablando en el ámbito de la programación de una aplicación informática. Algunos ejemplos son Spring para Java, Hibernate o JPA para Bases de Datos, Bootstrap para CSS, Symfony para PHP, etc. Por ello que no considere a Divi un framework, ya que un framework está muy orientado al entorno de desarrollo.

Diseños gratuitos que puedes descargar diseñados con Divi

Estos son algunos ejemplos que el equipo de Elegant Themes está publicando gratuitamente cada semana para que podamos instalarlo sin problemas de licencia en cualquier sitio web que queramos montar. Son distintos Layouts Divi que va publicando para que tengamos ideas sobre las que apoyarnos para nuestro proyecto.

De momento han publicado diseños de todo tipo. Para webs de Bodas, Restaurantes, Viajes, negocios y un largo etcétera. Todas las semanas publican varias veces nuevos diseños que se pueden usar de forma gratuita cuando queramos.

Aquí os dejo algunos ejemplos, aunque os más abajo os dejo un truco para que podáis acceder a la librería donde están todos los diseños.

Diseño Divi para webs de Restaurantes

Diseño Divi para webs de Viajes

Diseño Divi para webs de Bodas

Diseño Divi para webs de Negocios

Como puedes ver son diseños espectaculares. Solo tienes que echarle imaginación y ponerte a construir tu propia web y cuestión de poco tiempo tendrás resultados tan buenos como estos que ves.

Pero ahora lo tienes más fácil con la Galería de Diseños de Divi que te muestro más abajo, donde podrás hacer búsquedas por tipo de página o diseño para que no tengas que partir de cero en tus diseños. Esta galería de diseños de Divi está integrada dentro del builder de Divi para facilitarte la tarea.

Ventajas e Inconvenientes de Divi

Divi es una plantilla que te sirve para diseñar cualquier cualquier web. El objetivo de usar Divi es crear webs con aspecto profesional, como si fuéramos diseñadores.

Estas son algunas de las VENTAJAS de Divi que te puedo contar por mi experiencia:

• Es muy sencilla de utilizar.
• Está en español y muchos más idiomas.
• Tiene un modo edición en vivo sin que tengas que utilizar la Vista previa para ir viendo cómo queda.
• Permite realizar el diseño para pcs de sobremesa, móviles y tablets. Es totalmente responsive. Puedes hacer que algunos elementos se vean solo en un tipo de dispositivo y en el resto no.
• Puedes realizar diseños profesionales sin conocer HTML o CSS.
• Para usuarios avanzados puedes personalizar el HTML o CSS de cada elemento.
• Dispone de una Biblioteca para poder reutilizar diseños en varias Páginas o Entradas sin tener que diseñarlos nuevamente.
• Permite exportar configuraciones de cualquier elemento en JSON para poder importarlo en otra web o desde el entorno de desarrollo al de producción.
• Es compatible 100% con WooCommerce. Ya permite diseñar la página de Producto WooCommerce directamente con Divi.
• Compatible con CDN CloudFlare.
• Compatible con certificados SSL de Let´s Encrypt.
• Es compatible con PHP 7.

Y estas son algunos de los INCONVENIENTES de Divi que yo le veo todavía a esta plantilla:

• Viene con una plantilla por defecto que en algunos casos no se puede adaptar en principio a nuestro gusto.
• La cabecera a nivel personal es poco personalizable. Con Divi 4 ya puedes personalizar la cabecera de la web 😉.
• El foooter a nivel personal es poco personalizable. Con Divi 4 ya puedes personalizar el pie de la web 😉.
• Es de pago. Pero merece la pena. Abajo te explico cómo comprarla.

Más VENTAJAS de Divi que debes saber:

• Licencia de por vida (busca lifetime access en la web de ElegantThemes si no te lo crees)
• Lo puedes instalar en todas las webs que quieras sin límites. (La licencia te permite usarla con todos tus clientes)
• Es muy segura. Tiene actualizaciones constantes. No se te quedará antigua en un corto plazo de tiempo a no ser que Elegant Themes caiga en bancarrota.
• Hay una gran comunidad de usuarios de Divi en Español.
• Grupos de Facebook recomendados:

Tutoriales de Divi en Español

Y como no, muchos tutoriales de Divi en Español en mi blog. Cada vez que diseño algo nuevo con Divi lo documento en mi Blog para que esté disponible al alcance de cualquiera. Este es mi Divi Blog y aquí tienes algunos tutoriales tan populares como:

• Optimizar el SEO de las imágenes en WordPress con Divi y Gutenberg
• Crear un Child Theme de tu Divi
• Modificar la altura del Slider de Divi
• Diseño personalizalizado del módulo de Blur
• El uso de DashIcons con Divi
• Tengo Divi sin licencia. ¿Cómo la instalo?
• Y muchos más tutoriales de Divi que voy publicando en mi Blog.

Antes de que te descargues mi eBook sobre Cómo actualizar WordPress, que seguro que te interesará, sigue leyendo porque aquí te dejo mi regalo para que puedas conseguir la Plantilla WordPress de Divi a un precio inmejorable.

Prueba la Demo de Divi Gratis

No existe una demo de Divi para descargar y probarla, pero sí puedes entrar en este enlace para probar Divi de forma gratuita. Ahí puedes ver cómo es el constructor de Divi en vivo y poder tocar todo lo que quieras y ver sus tripas. Estoy seguro que cuando lo veas te quedarás sorprendido de la capacidad que ofrece Divi para ayudarte en el diseño web con WordPress.

¿Cómo comprar Divi? [CUPÓN DESCUENTO]

Ya sabéis todo sobre Divi, y seguro que ya estáis casi convencidos de querer comprar esta magnífica plantilla. Pero, ¿cuánto cuesta Divi?. Para serte sincero, yo empecé probando Divi con un teme NULL de esos que hay por ahí rodando porque no sabía que Elegant Themes ofrecía una demo de Divi para probarlo. Puede que la demo la sacarán más tarde y por eso no lo encontré. Pero al final acabé decidiéndome y empecé probando Divi con la licencia de 1 año para ver qué tal me iba y si realmente veía que la podía amortizar y sacarle provecho. Durante ese año empecé a utilizar Divi con mi blog personal, este que estás leyendo, y después la fui utilizando en algunas webs de mis clientes. Ante las buenas impresiones de mis clientes y las mías propias decidí ampliar mi suscripción con la licencia de por vida (lifetime access) que ofrece Elegant Themes. Aunque os parezca mucho dinero, después veréis que es la mejor inversión que podíais haber hecho.

Para comprar Divi solo tenéis que entrar en la web de Elegant Themes y pulsar sobre el botón que veréis que pone Join Today o Sign Up Today. Pero me haríais un favor si entráis desde mi enlace afiliado para Elegant Themes me apremie con una pequeña comisión por haberles recomendado una compra. A vosotros os costará lo mismo. Os animo a utilizar el siguiente enlace para comprarla.

Pero si te fijas, arriba estás viendo los PRECIOS CON DESCUENTO. y Eso solo lo podrás conseguir si entras con mi enlace de aquí abajo. Es un enlace que te permite conseguir la plantilla Divi con un 10% de descuento en la licencia de 1 año, y un 10% de descuento en la licencia de por vida. Solo tenéis que pinchar en la siguiente imagen que te dejo, y sólo con este enlace podrás conseguir tal descuento.

Divi Black Friday 2022

Ya ha llegado Divi Black Friday 2022. Podréis entrar en sorteos y conseguir plugins a mitad a precio etc, etc.

Ya no es posible conseguir el 20% de descuento que había antes. Elegant Themes ha retirado esa oferta.

¡Es la única manera que verás de conseguir un descuento tan grande de la plantilla Divi WordPress!

Ha llegado el Cyber Monday a DIVI con un 25% de descuento:

Divi Summer es la oferta que sacan todos los veranos con un 20% de descuento en la licencia de Divi, un 40% de descuento en Divi Cloud y un 50% en productos de MarketPlace:

Estos son los dos principales motivos por los que decidí comprar Divi y no otra plantilla:

• Yo elegí Divi porque es la única que encontré con licencia de por vida. Solo pagas una vez. No hay pagos anuales.
• Por se actualiza de manera constante y no se queda desactualizada con problemas de seguridad. La seguridad ante todo.

Estos son los motivos principales que deberíamos tener para comprar una plantilla. Me ha pasado que he comprado plantillas profesiones de 69$ o 89$ y después se quedan obsoletas, con problemas de seguridad. Sí, son muy bonitas, pero al final tienes problemas con la web. No la puedes actualizar, y debes cambiar de plantilla. Al final estás metido en problema muy gordo con una plantilla que pensabas en un principio que era buena solo por haberla comprado.

Con Divi ya no tengo esos problemas y puedo quedarme tranquilo de que no se queda desactualizada.

Licencia de Divi

Ya sabes las diferencias entre las dos licencias de Divi, la licencia Developer, y la licencia Lifetime. Pero te preguntarás cómo se instala licencia de Divi.

En ese tutorial te explico cómo instalar la licencia de Divi para poder recibir actualizaciones y tener acceso al foro oficial de Elegantthemes y al soporte oficial de Divi y todos sus plugins.

Si te queda alguna, no dudes en preguntarme en los comentarios.

Plugins de Divi

Con la licencia de Divi tienes acceso a sus 3 potentes plugins: Monarch, Bloom y Divi Builder.

Antiguamente Elegant Themes ofrecía además 57 Themes con diseños específicos, pero ya no están en su línea de mantenimiento y no es recomendable usarlos. Para eso tienes la Galería de Divi Online donde puedes utilizar cualquiera de los +900 diseños que Elegant Themes nos deja utilizar sin ningún tipo de restricción.

Te explico en detalle los 3 Plugins de Divi para qué sirven y en qué te pueden ayudar.

Además de sus tres plugins estrella también puedes tener acceso al MarketPlace de Divi para poder acceder a multitud de plugins para Divi que aumentarán sus funcionalidades exponencialmente.

Monarch

Con el plugin Monarch podrás integrar botones de redes sociales en tu web. En el latera de tu página principal, como pop-up en la esquina inferior derecha (Fly In), debajo de las entradas (inline), como un pop-up en cualquier página (pop-ip), etc. Una vez seleccionado dónde lo quieres mostrar puedes personalizar su diseño: cuadrado, cuadrado con esquinas redondeadas, o redondo. Y muchas más personalizaciones que puedes hacer.

Aquí podéis ver el cuadro de mando de Monarch donde podéis configurar la visibilidad de los iconos de redes sociales en toda la web, el estilo de los iconos, qué redes sociales usar, etc.

Bloom Email Opt-Ins

Con el plugin Bloom Email podrás integrar formularios de suscripción que te permitan captar más visitantes o leads. Estos son algunos ejemplos de los diseños que puedes elegir. Son diseños ya predefinidos que puedes empezar a utilizar desde ya. Después tienes un panel de estadísticas donde puedes realizar un seguimiento de qué formulario te genera más suscripciones.

También puedes realizar pruebas Test A/B mostrando dos diseños diferentes aleatoriamente a los usuarios, para saber cuál atrae más a los usuarios y así hacer un sondeo de cuál es el más rentable. Con el panel de control de Bloom Dashboard podrás controlar todas las estadísticas y hacer un seguimiento de los formularios que son más eficientes.

Con Bloom puedes realizar Test A/B y ver qué formulario capta más la atención y recibe más suscripciones. De esta forma puedes optimizar tu estrategia de marketing y aumentar los seguidores de tu blog.

Divi Builder

Divi Builder es un plugin de Elegant Themes para poder integrar el Constructor de Divi en webs que estén usando otra plantilla que no sea Divi.

Así puedes incluir su constructor en aquellas webs WordPress que no tengan instalado Divi, y así poder maquetar sus Entradas o Páginas con su constructor. De esta manera, podemos decir nuevamente que Divi no es Framework, ya que es un plugin.

• Divi se instala como una plantilla ya que incluye un tema por defecto y además el Divi Builder.
• Divi Builder se instala como un plugin y solo contiene el constructor, viene sin la plantilla por defecto que incorpora Divi.

Aquí puedes ver cómo Divi está instalado como Tema de WordPress.

Novedades de Divi 4.0, la última versión de Divi (Actualizado 2022)

Útimamente los chicos de Elegant Themes se han puesto las pilas y no paran de sacar novedades. Todas las semanas, y cada pocos días, recibo correos con las novedades.  Os voy a hacer un breve inciso en una de las mejoras que os ayudará a optimizar vuestro sitio web. Y se trata de un panel de control pensado más para administradores, porque te da consejos, guías y ayuda para poder optimizar tu Divi y que tu sitio funcione a pleno rendimiento.

La última actualización de Divi más importante es Divi Cloud. Guarda y gestiona tus diseños en la nube de Divi. Conoce más sus funciones en el enlace anterior.

Configuración óptima de PHP para Divi

Desde este panel podemos saber nuestra configuración de PHP y podemos ver si es la óptima o no. Aquí veremos los valores recomendados por Elegant Themes para que tu sitio funcione sin problemas.

Aquí puedes ver algunos valores en rojo, que deberías mejorar. Y puedes mostrar también el resto de valores que SI cumples. Aunque veas estos valores en rojo, ya te digo yo que no es estrictamente necesario. Si tienes un hosting potente como Web Empresa no tendrás problemas de funcionamiento.

Divi Safe Mode

Divi en Modo Seguro o Divi Safe Mode no quiere otra que simular lo que teníamos con el sistema operativo Windows. Una herramienta para administradores para poder desactivar todos los plugins, temas y código personalizado y cargar nuestro sitio en modo seguro para detectar algún problema de funcionamiento.

Es tan potente esta herramienta de Divi que es capaz de hacerlo solo para TU SESIÓN sin afectar a los usuarios conectados de tu web.

Divi Support con Acceso Remoto

Otra de las herramientas de Elegant Themes es el antiguo Acceso Remoto o Remote Access. Antiguamente te tenías que descargar el plugin desde tu panel de cliente, instalarlo, y acordar una cita con un técnico para que analizara tu sitio en caso de problema. Ahora es más sencillo, ya que ya viene integrado dentro del propio tema y no tienes que instalarte ningún plugin adicional. Solo debes habilitarlo cuando necesites el soporte, así evitarás consumo de recursos de tu sitio.

Logs del sistema

Acceso a los logs del sistema sin necesidad de entrar en el panel de tu hosting o por FTP. Ahora puedes consultar los logs de tu WordPress i tienes configurado en tu wp-config.php la variable WP_DEBUG_LOG a true. Así podrás disponer del fichero de log desde esta ventana.

Documentación de Divi integrada dentro de WordPress

Esta es otra de las mejoras que nos ayudan mucho a los diseñadores. Ya no tienes que irte a la web de Elegant Themes a buscar documentación. Desde tu sitio WordPress tienes esta ventana donde tienes acceso directo para buscar documentación de cualquier cosa relacionada con Divi que te pueda ayudar con tus diseños.

Galería de diseños integrado dentro de Divi Builder

Esta es una de las grandes mejoras de Divi de los últimos meses. Una galería integrada donde puedes descargarte todos los diseños de forma gratuita y ponerlos directamente en tus páginas sin tener que irte a la web de Elegant Themes como había que hacer antiguamente.

Así podrás acceder a los más de 1500 diseños que cada día van añadiendo. Puedes buscar por categorías. Y cada diseño tiene su landing page de inicio, su página de contacto, servicios o blog, y muchas más.

Sin duda una gran mejora para encontrar tu diseño ideal para integrarlo en tus webs.

Divi Marketplace

Divi Marketplace es una nueva herramienta de búsqueda que ha implementado Elegant Themes para localizar complementos de pago que queramos integrar dentro de nuestro diseño. En este buscador podemos encontrar de forma centralizada:

• Divi Extensions: consigue módulos extras para tu Divi
• Divi Child Themes: cambia de diseño con un divi child creado por otras personas
• Divi Layouts: encuentra layouts para una página específica

Incluso también puedes convertirte en un Divi Creator y vender tus diseños en dicha plataforma y ganar dinero con ello.

Divi Developer

Con Divi Developer tienes ahora todas las herramientas para poder diseñar tus propios módulos para crear tus propias extensiones y venderlas en el Marketplace de Divi o para poder hacer herramientas personalizadas para tus clientes. Aquí te dejo toda la documentación para hacerte desarrollador de Divi.

¿Es Divi Theme una buena herramienta para mi WordPress?

Espero ya sepas más de qué es Divi. Si antes no lo conocías, seguramente habrás visto un mundo nuevo de WordPress que te abre las puertas a plasmar tu imaginación en muchas webs que seguro veías imposibles de diseñar con tus conocimientos. Realmente no necesitas ser un experto en HTML o CSS, aunque eso ayuda, para diseñar cualquier web que se te ocurra. Al mismo tiempo, siempre tienes disponible muchos ejemplos Divi en la web oficial de Elegant Themes o en la galería que ya tienes integrada 😉.

¡Espero que te guste mi Divi Blog y me dejes tus comentarios abajo!