Divi: Conoce a fondo uno de los temas más famosos de WordPress

Autor: | 2019-04-30T15:25:06+00:00 Fecha: 30/04/2019|Categorías: WordPress|Comentarios: Ningún comentario

De un tiempo a esta parte los maquetadores visuales han cambiado la forma de crear webs con WordPress. Ahora es más fácil que nunca diseñar con herramientas WYSIWYG (lo que ves es lo que consigues).

De entre todos los que han aparecido en los últimos años, hay uno que brilla con luz propia. Divi se ha convertido, probablemente, en el tema multipropósito para WordPress más famoso del mundo.

 

Divi-demos

Qué es Divi y cuáles son sus características

Divi es un tema para WordPress que nació en el año 2013 de la mano de Elegant Themes. Esta empresa comercializaba en aquel momento en torno a 80 temas de todo tipo (magazine, corporativo, blog, etc.) y era razonablemente conocida en el mundillo WordPress por la calidad de los mismos.

Nick Roach, CEO de Elegant Themes, la llevó un paso más allá liderando el proyecto de Divi, el primer tema multipropósito para WordPress que incluiría su propio constructor visual.

Este constructor presentaba la posibilidad de crear en las páginas de tu sitio estructuras de contenido y funcionalidad mediante una innovadora herramienta de arrastrar y soltar secciones, filas, columnas y módulos.

Divi-lienzo

Divi además ofrecía una gestión bastante completa del área de cabecera (logo y navegación) con algunos elementos secundarios como menús, redes sociales y formas de contacto.

El foco de Divi era y es ofrecer a cualquier usuario sin ningún conocimiento de código la posibilidad de diseñar y maquetar su web sin límites.

Y lo cierto es que lo conseguía. Desde las primeras versiones las posibilidades eran enormes y durante todo el tiempo que ha pasado no han dejado de crecer y mejorar.

El bombazo fue tal que desde entonces ET se ha centrado en exclusiva en el desarrollo de Divi y en estos últimos años tan solo han publicado un tema hermano llamado Extra. Este tema es una variación de Divi enfocada a sitios web de tipo magazine.

Durante su evolución ha habido algunos puntos de inflexión como la versión 2.4 que incluyó la biblioteca de plantillas de Divi, la 2.7 con el sistema de test a/b Divi Leads o la versión 3 con el constructor visual en portada.

Si tuviera que destacar otra fecha clave esta sería octubre de 2015. Fue entonces cuando se publicó Divi Builder, el constructor visual en forma de plugin que permitía gozar de las herramientas de Divi en cualquier otro tema para WordPress. Un poco más adelante volveré a hablar de esta herramienta.

Diez años después de su fundación, Elegant Themes cuenta con más de 70 empleados, medio millón de clientes, 5 plugins comerciales y el tema para WordPress más popular, Divi.

¿Cuáles han sido las razones que han encumbrado a Divi como el tema multipropósito más usado del mundo?

 

Estructuras de contenido súper flexibles

Uno de los fuertes de siempre con Divi ha sido el completo sistema de estructuras que ofrece.

Con el tiempo se han ido añadiendo posibilidades con diferentes columnas y anchos flexibles, columnas anidadas y subestructuras combinadas que permiten cubrir casi cualquier rejilla que necesites construir.

Por ejemplo, trabajar con los padding y margin (rellenos y márgenes en CSS) de forma visual es una delicia.

Divi-columnas

 

Decenas de módulos y funciones disponibles para todos

El constructor de Divi dispone de hasta 46 módulos de contenido en el momento de la redacción de este artículo que cubren de sobra las necesidades más habituales con las que vas a encontrarte para diseñar tu web.

Por ejemplo, cuentas con: Reproductores de vídeo y audio, botones, acordeones, sliders (marquesinas), portfolios, desplegables, contadores de barra o circulares, formularios de suscripción y de contacto, galerías de imágenes, herramientas de búsqueda, llamadas a la acción, testimonios, botones sociales… Sencillamente abrumador.

Divi-modulos

 

Diseño visual en portada en tiempo real

De forma genérica, el flujo de trabajo de diseño habitual de una página en WordPress se divide en:

  1. Realizas un ajuste o modificación en el Escritorio de WordPress.
  2. Compruebas mediante la vista previa el cambio realizado en el frontend (la parte visible de tu web).
  3. Si te gusta el cambio, actualizas desde el backend guardando la nueva versión.

Puedes definirla como una experiencia en cierto modo fraccionada.

Divi permite trabajar directamente en el frontend comprobando en tiempo real cómo afecta cada decisión a toda la página. En caso satisfactorio puedes guardar desde ahí mismo la nueva versión.

Divi-edicion-portada

Los módulos se muestran en funcionamiento tal y como son. Si se trata de un formulario, una galería o un botón, eso es lo que verás al editar y no una representación en forma de módulo o un shortcode.

Los filtros y las recientemente añadidas transformaciones (una funcionalidad alucinante) hacen que las posibilidades de modificación visual sean infinitas.

Para los usuarios de las antiguas versiones de Divi puede resultar más cómodo (rápido) seguir trabajando con las representaciones de módulos mediante bloques, la vista wireframe. Esto es útil sobre todo en las primeras fases de diseño y sigue estando disponible en la interfaz.

Divi-vista-wireframe

 

Quick access, accede cómodamente a la configuración de cada detalle

Si puedes echarle algo en cara a Divi es que sus menús y submenús han llegado a ser tremendamente complejos y profundos. Incluso a los que son usuarios avanzados a veces les cuesta encontrar dónde está exactamente el control para modificar un aspecto del diseño en concreto.

Con la inclusión de la funcionalidad Quick Access en Divi se han añadido unos pequeños iconos con forma de pincel que se sobreimpresionan en el módulo que estás editando. Haciendo clic sobre este icono se desplegará en el configurador del módulo exactamente la sección que afecta a ese elemento en concreto.

El personalizador de WordPress ya ofrece una funcionalidad muy parecida desde hace algún tiempo.

Divi-quick-access

 

Plantillas y elementos globales, optimizando la producción

A nadie le gusta hacer trabajos repetitivos. ¿Te imaginas tener que modificar la configuración de un módulo que se encuentra en 10 URLs distintas? ¿O volver a diseñar las misma estructura visual para varias páginas de tu sitio web?

A Divi tampoco le gusta. Por eso ofrece la posibilidad de guardar plantillas de las páginas o configuraciones de módulos y reutilizarlos tantas veces como necesites.

Además puedes crear módulos globales que al ser modificados se actualicen en todas las ocasiones que han sido usados. Si, por ejemplo, has cometido un error en el texto de un botón que usas en todas las páginas de tu web, con corregirlo en una de ellas será suficiente.

Por si esto fuera poco puedes usar plantillas creadas por otras personas. Existe una librería oficial gestionada por Elegant Themes, pero puedes usar cualquiera. De hecho alrededor de esta funcionalidad ha florecido un potentísimo mercado de plantillas de pago en la red listas para usar.

Algunos de los repositorios comerciales más conocidos son: Divi Den, Elegant Marketplace o Divi Layouts.

 

Divi es responsive

Divi adapta por ti el diseño que hayas creado a todos los dispositivos. Si la forma en la que lo hace no te satisface, puedes añadir un diseño exclusivo para escritorio, móvil o tablet.

Puedes definir cómo quieres que se vea cada módulo e incluso eliminarlo de algunas versiones.

Por ejemplo, podrías eliminar un slider de la versión móvil, donde parece tener menos sentido. Esto te permite tener un diseño a medida del dispositivo, perfectamente optimizado.

 

Editor de funciones por rol

Si eres diseñador, desarrollador, implementador, gestor de una tienda o lideras un equipo de autores en un blog esta función te va a encantar. Divi integra un editor que permite definir qué funciones están disponibles para cada rol de usuario.

Por ejemplo, podrías decidir que los autores del blog no pudieran mover, agregar o eliminar módulos, para no modificar accidentalmente un diseño de entradas predefinido por ti.

Si das servicios de WordPress y alguna vez has recibido una llamada de un cliente preocupado porque ha roto el diseño de su web, seguro que sabrás valorar esta función.

 

Test A/B con Divi Leads

Una de las funciones menos conocidas de Divi es la posibilidad de realizar test multivariante sin necesidad de instalar ninguna herramienta extra.

Esta función se conoce como Divi Leads y te permite crear diferentes versiones de una página o de un módulo para valorar cuál de las dos obtiene mejor rendimiento: más ventas, más formularios, más tiempo de permanencia, etc.

Una vez identificada la versión más rentable, se elimina el experimento y te quedas con la versión ganadora.

Los test A/B son una de las mejores formas de trabajar la UX de una web, algo que puede incluso afectar positivamente a tu posicionamiento en buscadores.

Divi-leads

 

Traducido completamente a español

La comunidad WordPress es muy activa y los temas más populares del repositorio oficial están traducidos a español. Sin embargo Divi no es un tema del repositorio y por tanto su traducción no depende de la organizada comunidad de voluntarios.

Sin embargo Elegant Themes se ha encargado de que Divi esté perfectamente traducido a español y a otros 31 idiomas más.

Ojo, podrás disfrutar del tema en español pero tanto el soporte como toda la documentación oficial está solo disponible en inglés.

 

Soporte de gran calidad

La experiencia con el equipo de soporte de Divi no puede ser más satisfactoria. En los últimos años Elegant Themes ha trabajado por mejorar notablemente esta parte del servicio.

No olvides que Divi es GPL, lo que quiere decir que cualquiera puede pasarte una copia del tema y tú podrías usarla sin problema. El servicio de pago de Divi lo que te aporta es el sistema de actualizaciones automáticas y el soporte técnico (en inglés).

Las actualizaciones automáticas son un plus muy interesante. Divi es un tema que se actualiza con un frecuencia altísima, cuando no es un parche de seguridad es una nueva función. En los foros de soporte son muy receptivos a las peticiones de los usuarios y suelen añadir las funciones más demandadas.

¿Merece la pena pagar pensando en el soporte? Sí, sin duda, son muy buenos. Se trata de uno de los pocos soportes que conozco que ofrecen servicio de personalización.

Si necesitas hacer un ajuste de CSS para cambiar algún aspecto que Divi no permite mediante menús, ellos te entregarán el código que debes usar como CSS adicional en el Personalizador de WordPress.

En internet encontrarás centenares de sitios web que ofrecen snippets de código para modificar multitud de aspectos de Divi. ¿Sabes de dónde han salido muchos de ellos? Efectivamente, del equipo de soporte de Elegant Themes.

 

Divi Builder: Maquetador visual

Como decía más arriba, en 2015 se publicó Divi Builder, el maquetador visual de Divi pero en formato de plugin independiente.

Este plugin permite usar la mayor parte de las funcionalidades de construcción de páginas de Divi sobre (potencialmente) cualquier tema para WordPress. Evidentemente perderás aquellas que son controladas directamente por el tema: navegación, cabecera, pie de página y barras laterales o de widgets.

A parte de eso, con Divi Builder dispondrás de toda la potencia de maquetación visual de Divi: secciones normales y especiales, filas y columnas múltiples y los mismos 46 módulos que el tema premium.

¿Qué temas son los más adecuados para Divi Builder? Pues la gente de Elegant Themes no recomienda ningún tema en concreto pero personalmente no he encontrado mayores problemas con ninguno de los más populares.

El mayor hándicap en este sentido es que el ancho del contenido no sea el más adecuado para las posibilidades de Divi o que no puedas escoger si se muestra la barra lateral o cualquier área de widgets que pueda molestarte.

Divi-Builder-GeneratePress

Un tema muy adecuado para trabajar con este maquetador visual es GeneratePress. Sus amplias posibilidades de configuración visual (en el enlace anterior te describo las más llamativas) hacen que la experiencia de usuario sea muy satisfactoria combinando ambas herramientas.

GeneratePress es muy flexible en cuanto a la estructura de página (incluso en su versión gratuita) y permite lucirse a Divi Builder en todo su esplendor.

El desarrollo y la publicación del plugin Divi Builder respondía a una petición de los usuarios largamente demandada.

Esta demanda provenía no solo de usuarios que querían disfrutar de su potencia como maquetador sobre otros temas. También vino provocada por diseñadores que no querían rehacer su trabajo al cambiar de tema, creadores que habían quedado atrapados en las particularidades de Divi.

Estoy hablando del temido efecto lockin.

 

Divi y el efecto lockin

Uno de los aspectos más criticados de Divi desde su popularización ha sido el efecto lockin o lock-in.

Este efecto consiste en que si diseñas una web con Divi, de alguna forma quedas atrapado por su código. Si fuera necesario cambiar de tema, en lugar del bonito diseño original te encontrarás con un montón de shortcodes y código basura.

Divi-lockin

Esto que ves en la captura anterior es lo que muestra una página creada con el tema Divi cuando cambias a otro tema. Terrible ¿verdad?

El problema consiguiente es extraer de la base de datos todo el contenido que deseas conservar y eliminar el código basura propio de Divi. Un trabajo demasiado duro para ser práctico en la mayoría de los casos.

¿Tiene solución el lockin con Divi? A medias, no es especialmente brillante pero ciertas precauciones pueden minimizar los daños. Para ello sigue al pie de la letra estos dos consejos:

1. Nunca utilices Divi para maquetar tus entradas. En cualquier sitio suelen representar la mayor parte del contenido. De esta forma siempre se mostrarán tal cual esté predefinido en el nuevo tema.

Un cambio de tema casi siempre supone una tarea de rediseño de las páginas (el contenido estático más corporativo), pero las entradas raramente se tocan. Si no has usado Divi para crear dichas entradas, el problema será mucho menor. De hecho será similar al de cualquier cambio de tema genérico.

2. Si no queda más remedio, al cambiar de tema instala el plugin Divi Builder. Todo tu contenido volverá a estar visible tal y como lo diseñaste, independientemente del tema que hayas pasado a usar.

Ten en cuenta que esto podría lastrar el rendimiento de tu sitio si no vas a usar Divi Builder para futuros contenidos. He llegado a ver casos de sitios web con Divi Builder y Elementor funcionando en paralelo… Dramático.

 

Dónde comprar Divi

Aunque Divi es GPL no podrás encontrarlo en el repositorio oficial de WordPress. Se trata de un tema comercial (premium) que tan solo puede ser adquirido en la web de Elegant Themes.

Algunos equipos de desarrollo publican versiones limitadas o recortadas de sus temas en una versión gratuita pero Divi no lo hace así.

Para comprar Divi visita la web de Elegant Themes y decide qué tipo de licencia te te merece más la pena adquirir:

  • Licencia anual: 89$/año. Ideal si necesitas Divi solo para tu sitio web y no necesitas «casarte» con Divi de por vida. Si eres implementador y deseas experimentar con Divi también puede ser una buena opción inicial.
  • Licencia de por vida: 249$ en un único pago. Ideal para implementadores WordPress y especialistas en Divi.

Elegant Themes suele publicar algunos descuentos a lo largo del año. Por ejemplo en el Black Friday lanzan ofertas muy atractivas. Es una buena ocasión para saltar de la licencia anual a la de por vida o probar Divi por un precio mucho más económico.

Te habrás fijado en que las licencias no solo dan acceso a Divi, sino a cualquier desarrollo de Elegant Themes: más de 80 temas (que siguen actualizando por motivos de seguridad) y 5 plugins, a día de hoy.

Muchos de esos temas se han quedado obsoletos, pero aún hay un puñado de ellos que siguen siendo perfectamente utilizables. Extra, desde luego es muy interesante y personalmente me encanta, pero también destacan Nexus, Vertex o Foxy.

Respecto a los plugins, además de Divi Builder, podrás disfrutar de Monarch (uno de los mejores plugins de botones para redes sociales) y Bloom (captación de suscripciones por email).

Además de las descargas y las actualizaciones automáticas de temas y plugins, ambas licencias te dan a acceso tanto a los foros de soporte como al chat de soporte.

Los primeros cuentan con una estupenda base de información con casi cualquier duda con la que te puedas encontrar. La mayor parte de los mensajes actuales son respondidos por otros usuarios como tú y por técnicos de soporte que no están atendiendo el chat.

El segundo, el chat de soporte, es una forma directa de conseguir que un técnico te atienda en un plazo que suele rondar las 24h de espera como máximo.

Si para probarlo consigues Divi de formas «no oficiales», ten mucho cuidado. Es habitual encontrarse copias con el código modificado para hacer cosas raras en tu sitio web y el riesgo es alto. Como cualquier otro software muy popular, Divi es un buen candidato para los ciberdelincuentes.

La demo online de Divi en la web oficial puede ser una forma segura de experimentar con el maquetador visual.

 

Cómo instalar Divi en WordPress paso a paso

Una vez hayas completado el pago de la licencia que hayas elegido tendrás acceso a tu área de miembro desde la que podrás descargar cualquier producto de Elegant Themes. Por supuesto, Divi entre ellos.

Divi-Elegant-Themes-members-area

Haciendo clic en Download descargarás a tu equipo un fichero comprimido con el tema.

Ahora ve a tu Escritorio de WordPress > Apariencia > Temas y haz clic en el botón Añadir nuevo.

Pulsa ahora Subir tema y selecciona desde tu equipo el fichero comprimido que has descargado de tu área de miembro de Elegant Themes.

Una vez cargado activa tu nuevo tema.

Felicidades, ya eres un usuario más de Divi.

Si prefieres ver cómo hacerlo, las configuraciones básicas postinstalación y una introducción al maquetador visual, échale un vistazo al siguiente vídeo.

 

Cómo crear un tema hijo en Divi paso a paso

Como ya sabrás si sigues este blog, en WordPress siempre es recomendable trabajar con un tema hijo o child theme. De esta manera si modificas alguna plantilla de las páginas, el functions.php o la hoja de estilos de Divi, no perderás dichos cambios al recibir una actualización del tema.

Si solo vas a añadir un poco de código CSS a través del campo CSS adicional del personalizador de WordPress, no es necesario crear un tema hijo. Pero nadie sabe lo que vas a necesitar en un futuro cercano y un tema hijo siempre cubre cualquier situación.

Puedes seguir la guía de Raiola para crear tu tema hijo (bien manualmente bien mediante plugins) o descargar directamente este tema hijo de Divi que he preparado especialmente para la ocasión.

 

Divi con otros plugins

Como no podía ser de otra manera, el equipo de desarrollo de Divi ha tenido especial cuidado en ofrecer la máxima compatibilidad de su tema con los plugins más populares.

De hecho, uno de los módulos de Divi fue creado para añadir código y shortcodes, la herramienta fundamental que usan muchos plugins de contenido.

 

Divi + WooCommerce

Divi-WooCommerce

WooCommerce es el plugin de ecommerce más usado en el ecosistema WordPress. Elegant Themes verifica cada actualización del plugin para evitar cualquier tipo incompatibilidad (se han dado en algunas ocasiones).

Entre los módulos de Divi encontrarás uno en concreto diseñado para funcionar con WooCommerce, llamado Tienda (Shop en la versión en inglés).

Divi-woocommerce

Este módulo te permite añadir una sección que incluya algunos de los productos de tu tienda: recientes, en oferta, destacados, más vendidos, mejor valorados o por categoría. Podrás definir el nº de productos mostrados, las columnas y el orden.

La pestaña de diseño de la configuración afectará aspectos como el color de la etiqueta de en oferta, fuentes, tamaños, colores de superposición, sombras, filtros, etc.

Como ves, se trata de un módulo muy útil para añadir una sección con contenido de la tienda integrada en cualquier página de tu web y no solo en la que WooCommerce crea automáticamente.

Por otra parte una de las peticiones más habituales al equipo de desarrollo de Divi ha sido, desde siempre, la capacidad de editar visualmente la estructura de las fichas de producto.

Lamento decirte que a día de hoy no hay una solución oficial a este tema y el constructor de Divi tan solo está disponible para el contenido encuadrado en la descripción larga.

Es una lástima, sobre todo teniendo en cuenta que Elementor (uno de los principales competidores de Divi) ya lo permite en su versión Pro.

Sin embargo, existen soluciones de otros desarrolladores, como por ejemplo WooCommerce Builder. Este plugin añade 20 nuevos módulos de WooCommerce a Divi y un completo paquete de shortcodes que te permitirán crear tus fichas de producto a medida.

Se trata de un plugin recomendado por la propia Elegant Themes con un coste de licencia anual para un sitio web de 29$.

 

Divi multilingual: Divi + WPML

Divi-wpml

Si tu sitio web necesita estar disponible en varios idiomas un plugin de multilenguaje es imprescindible para ti.

Este tipo de plugins ofrecen la posibilidad a tus visitantes de ver tu web en varios idiomas distintos mediante un menú, sincronizando todos los contenidos

WPML es una de las soluciones de este tipo más reconocidas y aunque se trata de un plugin con cierta complejidad, se entiende con Divi perfectamente. En Raiola tienes un estupenda guía de WPML para conocer a fondo sus particularidades

El equipo de WPML tiene un vídeo publicado con una guía rápida dedicada en concreto a Divi en su versión 3.

WPML es un plugin premium (el precio oscila entre 29$ y 79$ al año en función de tus necesidades) pero no es la única posibilidad multilenguaje para Divi. Polylang es otro plugin de este tipo y puedes descargártelo gratis del repositorio oficial para probarlo.

Yo lo he usado en varias instalaciones con Divi y funcionan conjuntamente sin problemas siempre que los idiomas con los que trabajes estén entre los 32 disponibles de serie en Divi.

Si no, tendrás que complementarlo con Loco Translate para que las cadenas propias del tema no te salgan en inglés (el idioma por defecto).

 

Plugins para Divi en el repositorio oficial

Divi-repositorio-WP

El éxito de Divi le ha llevado a convertirse en el objetivo de muchos desarrolladores. Al tratarse de un tema premium, muchos de sus complementos son de pago.

Sin embargo en el repositorio oficial existen más de 300 extensiones gratuitas para Divi con todo tipo de funcionalidades y características:

  • Nuevos módulos
  • Mega menús
  • Optimización de carga
  • Accesibilidad
  • Galerías
  • Mesas de luz
  • Imágenes de «antes y después»
  • Plantillas

 

Conclusiones

Si WordPress ha democratizado la publicación de contenidos en internet, los constructores visuales han traído infinitas posibilidades de diseño avanzado a todos aquellos que no tienen conocimientos de CSS.

¿Es esto una ventaja? Indudablemente sí. Hasta hace muy poco todas esas personas estaban limitadas a los diseños que un tema les ofrecía de serie.

Divi-ejemplo

Sin embargo un gran poder conlleva una gran responsabilidad (como le decía el tío Ben a Spiderman). Es fundamental entender las consecuencias de usar Divi, y prácticamente cualquier otro maquetador visual, respecto al efecto lockin que he mencionado antes y al rendimiento.

Se trata de temas y plugins muy pesados que perjudican la velocidad de carga. Usarlos siempre implica realizar algunas labores de optimización, de WPO, para igualar la balanza.

En este mismo sentido un aspecto fundamental en el rendimiento será usar siempre un servicio de hosting de calidad especializado en WordPress (Divi consume muchos recursos).

Si eres un implementador o un diseñador, Divi te permite desplegar sitios web en mucho menos tiempo y, por tanto, con un menor coste. Te ayuda a ser más competitivo con clientes que tienen determinados requerimientos como, por ejemplo, ser capaces de crear sus propios diseños en el futuro.

Pero usar Divi en un sitio corporativo sencillo, en las entradas de un blog o en una web donde la velocidad de carga y el rendimiento del servidor sean críticos, puede ser una mala decisión que lastre el futuro del proyecto.

Es fundamental entender que Divi es un gran producto con un presente muy interesante pero no es la solución para todos los WordPress. No es la respuesta a todas las necesidades.

¿Cuál es tu experiencia con Divi? ¿Te gusta? ¿Lo usas en tus proyectos? Estaría encantado de saber qué te parece a ti este gran tema.

[Total: 16 Promedio: 5]
Pablo Moratinos
Consultor de marketing online, analítica web y UX en mi propia agencia, 3ymedia Comunicación. Pisacharcos y WordPress lover.

Utilizamos cookies propias y de terceros para obtener información estadística, mostrar publicidad personalizada a través del análisis de tu navegación, así como para interactuar en redes sociales. Si continúas navegando, consideramos que aceptas nuestra Política de cookies. ACEPTAR

Aviso de cookies