Review del plugin Divi Builder. Un poderoso plugin para el diseño web

Los constructores o maquetadores de páginas web drag & drop se han vuelto enormemente populares en los últimos dos años. El tema Divi de Elegant Themes tiene uno de los más poderosos, el Plugin Divi Builder de Elegant Themes. Estos maquetadores permiten a cualquier persona, sin importar su experiencia técnica, crear sitios web hermosos en cuestión minutos.

Tiempo de lectura estimado: 0 minutos

Índice

Una de las razones por las que se han vuelto tan populares es por su facilidad de uso y las interfases que manejan. Simplemente arrastrando y soltando bloques en cualquier área de tu sitio web, puedes crear diseños magníficos, potentes y efectivos a la hora de conseguir beneficios con tu sitio web.

Durante el último año, he usado una poderosa herramienta de maquetación web que ha cambiado totalmente mi perspectiva del diseño web como tal: Estoy hablando del poderoso Divi Builder de Elegant Themes. Puedo decir con toda certeza que esta herramienta es parte del ancla de este proyecto UXDivi, y es sobre la que estaremos trabajando en todos nuestros cursos de diseño web con WordPress enfocados en la experiencia del usuario.

Espero que disfruten este análisis del plugin.

¿Qué ofrece Divi Builder?

Cuando un nuevo producto de WordPress es lanzado, un plugin, un tema, o algun add-ons es inevitablemente esperar que haya errores . Esto ocurre con bastante frecuencia, y sucede porque los desarrolladores se enfocan en comenzar a vender su producto y lo liberan sin hacer las suficientes pruebas en el proceso de desarrollo

Dado que Divi Builder se liberó para usarse en cualquier instalación de WordPress hace apenas unos meses deberíamos esperar que tuviera errores ¿no?

Bueno, en realidad no.

La razón por la que no tienes que preocuparte por los errores en el plugin de maquetación web Divi Builder es porque técnicamente no es un producto nuevo. La funcionalidad de Divi Builder ha sido parte del tema insignia Divi de Elegant Themes desde que fue lanzado a finales de 2013.

Durante los últimos dos años Elegant Themes ha refinado lo que ya era un buen producto en un gran producto añadiendo funcionalidades extras, mejorando la usabilidad del plugin y haciendo actualizaciones constantes de esta fabulosa herramienta.

El Divi Builder cuenta con una interfaz fácil de usar, una gran selección de módulos de contenido, muchos diseños preconfigurados y una lista interminable de opciones para ayudarte a ajustar las cosas y personalizar tu contenido de la manera que desees.

Tal vez lo mejor del Divi Builder es que se puede utilizar con cualquier tema de WordPress. No es necesario utilizar el tema Divi de Elegant Themes para crear páginas hermosas.

La interfaz del Divi Builder

Una vez que el plugin del Divi Builder se ha instalado y activado en tu sitio web, verás una opción en cada página que dirá “Utilizar el Constructor de Divi”

Verás este botón en el editor de entradas, editor de páginas y de proyectos que se agrega al activar Divi Builder.

Cuando se haya abierto el Divi Builder, el botón Divi Builder se reemplazará con una opción para reactivar el editor por defecto de WordPress. Más importante aún, el área de contenido se reemplazará con la interfaz Divi Builder. Además también se activará un botón de color azul a un lado que dirá “Usar el Editor Visual” pero de este botón hablaremos de forma hablaremos más a detalle en otro post.

Cuando empieces a usar el plugin, no tomará ni 15 minutos en acostumbrarse a donde todo está y cómo funciona. Esto es gracias a que una de las últimas actualizaciones del tema Divi con Divi Builder incluye una pequeña guia de entrenamiento para aprender a como usar el constructor (esta opción está habilitada solo para el editor visual).

Pero para ayudarte a apreciar cómo funciona Divi Builder, vamos a dar un paseo a través de la interfaz. Esto te dará una mejor comprensión de cómo el constructor de Divi puede ayudarte a crear hermosas páginas web para tu negocio online.

Panel de navegación del Divi Builder

En el lado izquierdo de este panel de navegación hay opciones para guardar en la biblioteca, cargar desde la biblioteca y vaciar el diseño. Esto permite guardar cualquier diseño que crees y luego cargarlo en cualquier otro momento. Una serie de diseños predefinidos o prediseñados están disponibles en la opción de carga desde la biblioteca (pero hablaré sobre eso más adelante).

En el lado derecho hay un botón de deshacer, un botón de rehacer y un menú desplegable de historial que te permite ver todos los cambios realizados. Puedes utilizar los botones deshacer y rehacer tantas veces como lo necesites. El menú desplegable de historial funciona de manera similar al sistema de revisión de WordPress, es decir, te permite volver a un estado anterior en cualquier momento.

El área debajo del panel de navegación es donde se agregara contenido.

El panel azul en el lado izquierdo de la interfaz es una sección. Dentro de cada sección verás varios paneles verdes. Estos paneles verdes representan filas. Dentro de estas filas verá módulos de contenido gris metidos dentro de columnas.

En otras palabras, los módulos de contenido se colocan dentro de columnas (Gris), que se colocan dentro de filas (Verde), que a su vez se colocan dentro de las secciones (Azul).

Verás una lista de iconos dentro de cada panel. El icono que tiene tres líneas horizontales abre un cuadro de configuración. Si abres el cuadro de ajustes dentro del panel de sección, aparecerá la configuración de las secciones. Del mismo modo, si abre el cuadro de configuración de filas o módulos, aparecerán los cuadros de configuración correspondientes (más información sobre estos ajustes más adelante).

El icono de rectángulo permite clonar secciones, filas y módulos. Si selecciona esta opción, se agregará automáticamente una copia del elemento seleccionado. Es una manera rápida y eficaz de construir una página con elementos comunes.

Dentro del panel de filas, hay once estructuras de columnas diferentes disponibles como puedes ver en la imagen de abajo. Los cuales tienen un diseño estándar de mitades, tercios y cuartos.

En la parte inferior de cada panel hay una opción para eliminar la sección, fila o módulo de contenido en cuestión. Debajo de esta área se encuentran enlaces para agregar secciones, filas y módulos de contenido adicionales.
Si deseas una sección sin filas y columnas, de anchura completa, puedes elegir la opción para agregar una sección de fullwidth.

Ocho módulos de contenido de ancho completo están disponibles para su sección fullwidth.

Otra característica interesante es la sección de bloques especiales. Al seleccionar esta opción, aparecerán nueve diseños diferentes con bloques separados de diferentes formas para conseguir un diseño dinámico y que se adapte a las necesidades de tu blog o sitio web.

Una vez que empiezas a usar el Divi Builder, es muy fácil entender como funciona. Lo que quizás no sea evidente en las capturas de pantalla anteriores es la rapidez con la que se utiliza la interfaz. Todo sucede en un instante, ya sea añadiendo nuevos módulos de contenido, eliminando filas o secciones de clonación. Pero no te preocupes, haré varios videotutoriales donde mostraré precisamente este tema.

Módulos de contenido del Divi Builder

Divi Builder ha sido habilitado para tener diseño Responsive. Esto significa que el diseño y el contenido de tu sitio web se verán muy bien en cualquier dispositivo, ya sea un smartphone, una tableta o un navegador de escritorio.

El plugin se lanzó con cuarenta módulos de contenido. Ocho de estos módulos de contenido están restringidos a secciones de fullwidth.

Hay una gran variedad de módulos. Por mencionar algunos: tablas de precios, formularios de contacto, blog, galerias, Sliders de videos y de imágenes.

Solo tarda un segundo agregar un módulo de contenido a en tu página.

Todo lo que tienes que hacer es hacer clic en el enlace “Insertar módulo”. Aparecerá una lista de todos los módulos de contenido en una ventana emergente. También puedes cargar elementos de módulos que hayas guardado anteriormente en tu biblioteca de divi.

Hay dos opciones interesantes disponibles cuando eliges guardar un módulo en la biblioteca: Elementos globales y sincronización selectiva.

Los elementos globales permiten que un elemento aparezca en varias páginas de su sitio web. Un buen ejemplo de cómo esto se puede utilizar es creando un footer personalizado para tu sitio web. Si el módulo está marcado como un elemento global, los cambios que realices se duplicarán en todas las posiciones de tu sitio web donde tengas este módulo. Por lo tanto, no es necesario actualizar el módulo en cada una de las páginas que tengas. Podrás diferenciar cuando un módulo está configurado como elemento global porque tendrá un poco verde manzana (en vez de gris).

La sincronización selectiva se puede utilizar para compartir configuraciones comunes en otras áreas de tu sitio web. Por ejemplo, podría guardar la configuración de diseño de un módulo en particular para su uso en otras partes de su sitio web, sin embargo, el contenido en sí no se sincronizará.

La biblioteca de diseños predefinidos del Divi Builder

Al seleccionar la opción “Cargar desde la biblioteca” en el panel de navegación principal de Divi Builder aparece una caja que le permite cargar elementos que ha guardado de la biblioteca. También puede elegir entre muchos diseños predefinidos.

La versión actual de Divi Builder ofrece treinta y dos diseños predefinidos. Esto te ayudará a crear rápidamente páginas comunes en tu sitio web. Hay diseños para crear casos de estudio, páginas de ventas, página sobre nosotros, lading pages y páginas de compras. Múltiples páginas de inicio también están disponibles.

El sistema de biblioteca de diseños que Divi Builder utiliza no debe ser subestimado. Realmente puede ahorrarte mucho tiempo al construir tu sitio web.

Por ejemplo, si deseas crear una página de contacto, simplemente selecciona el diseño de página de contacto de la biblioteca. Esto evitará que tengas que crear el diseño desde cero.

Precio del Plugin de Divi Builder

Como he mencionado en los post anteriores, el Plugin de Divi Builder se incluye en la compra de la licencia entera de la membrecía anual de Elegant Themes.

Ambos planes otorgan acceso a los ochenta y siete temas de Elegant Themes y 6 plugins de alta calidad. Podrás descargar todos los productos como el super poderoso Divi Theme, el plugin de social media share Monarch, y su famoso plugin para construir listas de correo electrónico Bloom.

Pros

• Tiene una interfaz fácil de usar.
• El sistema para crear layouts funciona muy bien.
• Una buena variedad de módulos de contenido están disponibles.
• Los diseños predefinidos son muy útiles.
• El sistema de la biblioteca abre muchas posibilidades con Divi Builder.
• La membresía de Elegant Themes ofrece una gran relación calidad-precio.

Contras

• No está disponible solo – Se debe comprar una membresía de Elegant Themes.
• Carece de algunos módulos de contenido que están disponibles en otras soluciones.
• La funcionalidad del plugin no se puede ampliar de la misma manera que otras soluciones como Visual Composer o MotoPress Content Editor.

Conclusión

El plugin Divi Builder es, sin duda, una de las mejores soluciones de diseño de páginas web sin tocar código disponible para los usuarios de WordPress en la actualidad. No tiene nada que envidiarle a otros maquetadores visuales como Visual Composer por ejemplo.

Cada constructor de páginas de drag & drop tiene un sistema diferente de funcionamiento. No creo que los sistemas disponibles en otras soluciones sean malos, simplemente creo que Divi es muy práctico y fácil de usar, además de tener una comunidad cada vez más creciente, y ahora en español.

Si estás buscando una manera de crear contenido hermoso y construir páginas en tu sitio web de manera práctica y sencilla, te recomiendo usar Divi Builder. No te decepcionará.