Revisión de Divi Builder: un generador de páginas de WordPress moderno

Divi Builder es legítimamente considerado como uno de los mejores creadores de páginas de arrastrar y soltar del mercado. Este popular complemento de WordPress le permite crear diseños de sitios web complejos y receptivos en minutos sin usar ningún código.

Por lo tanto, incluso si no tiene experiencia en el diseño de sitios web, puede crear hermosos sitios web con Divi Builder e introducir medios enriquecidos en su contenido, como imágenes, texto elegante, videos, formularios, tablas y más.

En este artículo, me gustaría mostrarle cómo puede usar Divi Builder para crear diseños y páginas de sitios web profesionales.

Esto le dará una mejor comprensión de por qué tantos propietarios de sitios web usan este complemento de WordPress.

¿Qué ofrece Divi Builder?

A fines de 2018, WordPress lanzó la versión 5.0 de su software. Este fue un lanzamiento importante, ya que reemplazó el antiguo editor WYSIWYG (Lo que ves es lo que obtienes) con un nuevo editor de bloques de arrastrar y soltar llamado Gutenberg.

Ahora que WordPress viene con un generador de páginas de arrastrar y soltar, es posible que se pregunte por qué alguien quiere comprar una solución de creación de páginas alternativa como Divi Builder.

Me gusta la sencillez del nuevo editor de bloques de WordPress, sin embargo, si lo has usado, sabrás que es una solución básica que tiene muchas restricciones y pocas opciones de personalización.

Por el contrario, las posibilidades con Divi son ilimitadas. Se puede utilizar para crear todo, desde simples diseños de blogs hasta complejas tiendas en línea y sitios web de empresas. Realmente lleva la creación de páginas a un nivel completamente nuevo.

Divi Builder se lanzó en 2015 como una solución de creación de páginas independiente que funciona con cualquier tema de WordPress. Anteriormente, esta funcionalidad solo podía usarse dentro del tema Divi de WordPress, que fue lanzado por Elegant Themes dos años antes.

El complemento se ha ampliado y refinado continuamente a lo largo de los años. Elegant Themes constantemente publica actualizaciones en su blog que detallan correcciones de errores, ajustes y nuevas funcionalidades importantes.

Un buen ejemplo de la evolución de Divi Builder es el constructor visual. En las versiones anteriores de Divi Builder, los diseños personalizados se crearon dentro del editor de WordPress. Más tarde se agregó un "Constructor visual" fácil de usar para ayudarlo a crear diseños en la interfaz de su sitio web.

El constructor visual ha ocupado un lugar central como la interfaz de usuario principal de Divi Builder, sin embargo, aún puede crear diseños en el backend utilizando el generador heredado si lo desea (más sobre esto más adelante).

Divi Builder tiene un sistema de biblioteca que le permite guardar cualquier diseño que cree. Luego puede cargar diseños de su biblioteca cuando los necesite y ajustarlos para que se adapten a la página en la que lo está utilizando.

El complemento viene con más de 1,000 impresionantes diseños prefabricados y se están lanzando más a través del Divi Marketplace oficial y mercados de terceros.

Estos diseños son fantásticos puntos de partida para sus propios diseños personalizados y diseños de sitios web. Soy un gran admirador de ellos, ya que reducen drásticamente el tiempo que necesita para crear un diseño único.

El verdadero punto de venta de Divi Builder es la personalización.

Después de pasar un tiempo aprendiendo cómo funciona Divi Builder, comienza a apreciar lo versátil que es el complemento. Cada elemento de su página se puede ajustar, ya sea estilo, módulos, filas, columnas o cualquier otra cosa.

En pocas palabras, si está en la página, puede cambiarlo.

Divi Builder tiene un gran soporte para WooCommerce; Elegant Themes llama a esta integración "WooBuilder".

Con Divi Builder, puede crear diseños personalizados para páginas de productos y agregar módulos de contenido específicos de WooCommerce. Los diseños prefabricados para tiendas en línea también están disponibles.

Echemos un vistazo más de cerca a cómo funciona Divi Builder...

Lanzamiento del constructor visual

Una vez que el complemento de WordPress Divi Builder se haya activado en su sitio web, verá el botón "Usar Divi Builder" en la parte superior de sus publicaciones, páginas y tipos de publicaciones personalizadas.

También se puede acceder a una pequeña área de configuración desde el editor de WordPress que le permite modificar el ancho de su contenido.

Si ingresa a una publicación o página de blog y hace clic en el botón Divi Builder, verá un mensaje que dice que "Este diseño está construido con Divi".

Debe hacer clic en este botón para iniciar Divi Builder en la interfaz de su sitio web.

Tenga en cuenta, sin embargo, que si deshabilita la configuración del editor visual en la pantalla de su perfil de WordPress, Divi Builder no funcionará.

Si está creando una nueva publicación o página de blog, tiene la opción de usar Divi Builder o el editor de WordPress predeterminado.

Alternativamente, puede iniciar Divi Builder directamente desde la interfaz de su sitio web, desde la barra de administración de WordPress. El enlace "Habilitar Visual Builder" se mostrará en su sitio web si ha iniciado sesión.

Aunque los usuarios de WordPress generalmente usan Divi Builder como reemplazo del editor de WordPress predeterminado, puede funcionar en armonía con el editor de Gutenberg usando Divi Layout Block.

El bloque de diseño Divi se puede insertar en cualquier área de su página y colocarse junto a los bloques del editor de WordPress normales.

Se pueden insertar múltiples bloques de diseño Divi en su contenido. Puede crear diseños completamente nuevos dentro del bloque o cargar diseños guardados previamente desde su Biblioteca Divi.

Como puede ver, Divi Builder complementa increíblemente bien a WordPress al no hacerse cargo de todo su sitio web. Solo tienes que usar Divi Builder cuando lo necesites.

Hermosos diseños de Divi

Cuando se inicia Divi Builder, se le presentan tres opciones.

Puede optar por crear un nuevo diseño desde cero, elegir un diseño prefabricado o clonar una página existente.

Si elige un diseño prefabricado, la Biblioteca Divi se cargará y mostrará todos los diseños prefabricados. No se preocupe si cierra esto accidentalmente, ya que se puede cargar desde el menú principal de Divi Builder en cualquier momento.

En el momento de escribir este artículo, hay más de 1100 diseños disponibles y 149 paquetes de diseño. Los diseños se dividen en 13 categorías: arte y diseño, negocios, comunidad y sin fines de lucro, educación, eventos, moda y belleza, comida y bebida, salud y estado físico, estilo de vida, tienda en línea, servicios, simple y tecnología.

Si lo prefiere, simplemente puede buscar en la biblioteca de diseños prefabricados. También puede ver sus diseños guardados y las páginas existentes desde esta área.

Un paquete de diseño es una colección de diseños que tiene diseños para varias áreas de su sitio web. Por ejemplo, puede incluir un diseño para su página de inicio, uno para su blog, uno para su página de información y otro para su tienda.

Al hacer clic en el botón de demostración, se cargará una vista previa en vivo del diseño. Puede ver demostraciones de todos los diseños en la página Paquetes de diseño Divi.

Si hace clic en "Usar este diseño", Divi Builder comenzará a importar el diseño o el paquete de diseño en cuestión.

Como todas las soluciones de creación de páginas de WordPress, Divi Builder inserta diseños directamente en el área de contenido principal de publicaciones, páginas y tipos de publicaciones personalizadas.

Por lo tanto, si importa un diseño en una publicación de blog, se mostrará una barra lateral a menos que la elimine manualmente. En las páginas, este proceso es más sencillo ya que la mayoría de los temas de WordPress cuentan con una plantilla de página de ancho completo o una plantilla de página de destino que elimina la barra lateral.

Una vez que haya importado un diseño, puede comenzar a personalizar el diseño para hacerlo suyo. Cualquier cambio que realice se puede guardar y reutilizar cuando lo desee.

Los diseños también se pueden categorizar, algo que le resultará útil a medida que crezca su biblioteca de diseños.

El menú de administración principal de Divi tiene enlaces a Divi Theme Builder y Divi Library.

Divi Theme Builder le permite crear plantillas de página únicas que tienen un encabezado, cuerpo y pie de página definidos.

Puede asignar cualquier diseño a sus plantillas y definir exactamente qué áreas de su sitio web deben mostrarse.

Por ejemplo, puede crear una plantilla para su página de inicio y blog, una para su tienda en línea, otra para las páginas de error 404 y otra para una serie de publicaciones de blog que haya publicado.

Cada diseño que guarde se mostrará en la página principal de la Biblioteca Divi.

Desde esta área, puede acceder a todos los diseños, modificar las categorías de diseño e importar y exportar diseños.

Cuando elija editar un diseño desde la página de diseño principal, su diseño se mostrará en "Vista de estructura alámbrica".

Este modo se asemeja a la apariencia del generador heredado. Si lo desea, puede volver al generador visual de frontend, pero debe encontrar que esta es una excelente manera de ver la estructura de su diseño y realizar algunos cambios rápidos.

La gran colección de diseños prefabricados de Divi Builder lo ayudará a crear diseños fantásticos en minutos. Son un excelente punto de partida para sus propios diseños personalizados y, al navegar por los diseños disponibles, puede obtener más información sobre cómo funciona Divi Builder.

Sin duda, el sistema de plantillas Divi Library y Divi Theme Builder son la columna vertebral de Divi Builder y una de las razones por las que Divi es tan versátil y por las que se pueden crear diseños profesionales con tanta rapidez. Es una característica que aún falta en soluciones alternativas como el editor de bloques predeterminado de WordPress.

La interfaz del constructor visual

Cada generador de páginas de WordPress funciona de manera diferente, por lo tanto, debe dedicar tiempo a familiarizarse con el funcionamiento del generador visual de Divi Builder.

La interfaz principal de Divi Builder se muestra en la parte inferior de cada página. Cuando el menú se ha minimizado, solo se muestra un botón con tres puntos.

Al hacer clic en el botón con tres puntos, se carga la interfaz principal.

Verá que se muestran muchas opciones en el lado izquierdo, medio y derecho de la página.

En el lado izquierdo, hay seis botones. El botón con los tres puntos verticales carga el menú de configuración del constructor visual.

Este menú le permite agregar tres botones adicionales al menú para el modo de desplazamiento, el modo de clic y el modo de cuadrícula. El modo de desplazamiento mostrará opciones para diferentes partes de su página cuando se desplace sobre ellas, mientras que el modo de clic requiere que haga clic en esa parte particular de la página. El menú de cuadrícula muestra todo a la vez.

Hay varias otras opciones aquí para cambiar los modos de visualización predeterminados y habilitar/deshabilitar funciones clave.

Los otros botones en el lado izquierdo del generador visual son para la vista de estructura alámbrica, acercar y alejar su diseño y ver su página en computadoras de escritorio, tabletas y dispositivos móviles.

Todas estas características pueden ayudarlo a ver cómo se construye su página y cómo se ve en muchas situaciones diferentes.

Soy un gran admirador del modo de vista de estructura alámbrica, ya que elimina todos los elementos de diseño y muestra cómo está estructurada la página. Esto es particularmente útil cuando se mueven cosas y se cambia la posición de las cosas.

Hay siete botones en el medio de la interfaz del constructor visual: tres a la izquierda, tres a la derecha y una gran X en el medio que cierra el menú.

El primer botón a la izquierda carga la Biblioteca Divi, el segundo guarda los diseños en su biblioteca y el tercero borra el diseño de la página.

Por otro lado, verá botones para la configuración de la página, el historial de edición y la portabilidad.

El cuadro de configuración de la página le permite cambiar el título de la página, el extracto, la imagen destacada, los colores de fondo, el estilo, las pruebas divididas, la visibilidad y mucho más.

Ser capaz de deshacer y rehacer cambios significa que nunca tendrá que preocuparse por cometer errores. Puede revertir los cambios en cualquier momento y volver a los estados anteriores del diseño actual y para los diseños globales.

El botón de portabilidad también es útil ya que le permite exportar e importar el diseño de su página.

A la derecha de la interfaz de Divi Builder, verá un botón de búsqueda, un botón de ayuda y un botón para guardar su diseño.

Divi le permite buscar a través de modos de visualización, configuraciones, documentación y más. Al hacer clic en un resultado de búsqueda, se cargará inmediatamente la función.

La caja Divi Builder Helper también es increíblemente útil. Muestra varios tutoriales en video y muestra una referencia a los atajos de teclado.

Estos accesos directos se pueden utilizar para acelerar el proceso de creación de diseños. Hay accesos directos para deshacer y rehacer cambios, guardar su diseño, cambiar los modos de visualización, copiar módulos y más.

Elegant Themes tiene una guía detallada sobre Visual Builder que explica cómo funciona todo.

Es una referencia fantástica, pero cuando usas Divi por primera vez, te recomiendo que cargues un diseño prefabricado para que puedas jugar con todo. Le ayudará a ver cómo se une todo.

Filas, columnas, módulos y más

La belleza de los creadores de páginas es que puede completar cada parte de su página con muchos tipos diferentes de contenido. Esto incluye mapas, tablas, imágenes, videos, widgets y más.

En algunos creadores de páginas de WordPress, estos diversos tipos de contenido se denominan bloques. En otros, se les llama elementos.

Divi los llama Módulos .

Desafortunadamente, Elegant Themes es un poco inconsistente en su nombre. Dentro de Divi Builder, se denominan módulos, pero en su material de marketing y documentación, verá muchas referencias a bloques en lugar de módulos.

Hay más de 40 módulos de contenido en Divi Builder y cada uno contiene docenas de opciones de personalización para ayudarlo a dar forma a lo que muestra el módulo.

Los módulos deben colocarse dentro de columnas y filas.

Si está comenzando un diseño de página con un lienzo en blanco, verá un botón verde con un símbolo más en la página.

Cuando pasa el cursor sobre esto, verá una opción para agregar una nueva fila. El contorno azul que se muestra alrededor de la fila se denomina sección. Puede agregar tantas filas y columnas como desee a las secciones.

Para decirlo de otra manera, los módulos se colocan dentro de las columnas, las columnas se encuentran dentro de las filas y las filas se colocan dentro de las secciones.

Cuando pasa el cursor sobre la sección, verá botones para mover la sección, acceder a la configuración de la sección, duplicar la sección, guardar la sección en la biblioteca y eliminar la sección.

Verá estos mismos botones en la parte superior izquierda de las filas y columnas también. Asegúrese de explorar todas las opciones aquí, ya que le dará una mejor comprensión de cómo controla dónde se coloca el contenido y cómo se le da estilo.

Si hace clic en los tres puntos al final del menú, se revelan una docena de configuraciones adicionales.

Cuando agrega una nueva fila en Divi Builder, también debe seleccionar la estructura de columna que desea para la fila.

Puede cambiar fácilmente cuántas columnas se muestran más tarde si decide estructurar las cosas de manera diferente. También puede arrastrar y soltar columnas en el área principal del lienzo hasta que encuentre la estructura que desea.

Una vez que haya seleccionado una estructura de filas y columnas, aparecerá el cuadro "Insertar módulo" y podrá seleccionar un módulo de contenido para su diseño.

Cuando se ha seleccionado un módulo, aparecerá su cuadro de configuración.

El nivel de personalización disponible para cada módulo de contenido es asombroso. Puede definir cada aspecto de su diseño, incluidos colores, espaciado, transiciones, CSS personalizado, posición, efectos y más.

Las opciones que se muestran en el cuadro de configuración cambiarán según el módulo que se seleccione.

Los diseños prefabricados pueden ahorrarle tiempo, pero si desea aprovechar al máximo Divi Builder y hacer que sus diseños sean únicos, deberá explorar el cuadro de configuración para módulos, columnas, filas y secciones. Esto le da control total sobre el estilo y la posición de todo en su página.

Si agrega una tonelada de módulos, columnas, filas y secciones a una página, es posible que algunas áreas de la página se sientan un poco abarrotadas. Por ejemplo, hay ocasiones en las que pasa el cursor sobre un módulo para cargar su configuración y también se muestran las configuraciones para la fila y la sección.

Cuando esto sucede, recomiendo cambiar a la vista de estructura alámbrica ya que todo se muestra en un formato más limpio.

Es difícil mostrar exactamente qué tan flexible es Divi Builder usando texto e imágenes.

Por lo tanto, lo animo a que pase un tiempo en la página de demostración oficial de Divi para ver por sí mismo lo que puede hacer este complemento de WordPress.

Uso del Generador heredado

Elegant Themes ha convertido al constructor visual en el método predeterminado para usar Divi Builder, sin embargo, aún puede crear diseños directamente dentro del editor de WordPress si lo desea.

Divi ahora llama al editor de fondo "Legacy Builder".

Para usarlo, debe ingresar a la sección avanzada de la página de opciones del complemento Divi Builder, deshabilitar la última experiencia de Divi Builder y habilitar el editor clásico.

Encima del generador heredado hay botones para volver al editor estándar de WordPress y construir en la interfaz.

Aquellos de ustedes que han usado Divi durante años estarán familiarizados con el generador heredado que se muestra debajo. Los nuevos usuarios notarán que se parece al modo de vista de estructura alámbrica del constructor visual.

En la parte superior de la interfaz hay una opción de importación y exportación que le permite hacer una copia de seguridad y restaurar los diseños de Divi Builder. Junto a eso hay un menú de configuración que presenta pruebas divididas y una gran cantidad de opciones de estilo y configuraciones de CSS.

Debajo hay enlaces para guardar en la biblioteca, cargar desde la biblioteca y borrar el diseño. Por otro lado, encontrará botones para deshacer cambios, rehacer cambios y ver un historial de cambios.

Se pueden insertar fácilmente nuevas filas y columnas en su página.

También puede agregar secciones de ancho completo y secciones especiales donde las columnas abarcan varias filas.

Dado que el generador heredado se muestra directamente en el editor de WordPress, no puede obtener una vista previa de los cambios en su diseño en tiempo real, pero esto significa que hay más espacio para crear diseños y agregar módulos.

Prefiero esta configuración al estructurar la página, ya que se siente menos apretada que el constructor visual.

El generador heredado sigue siendo una forma eficiente de crear diseños personalizados, ya que puede mover cualquier parte de la página usando la función de arrastrar y soltar.

Para algunos usuarios de Divi, esta sigue siendo su forma preferida de crear contenido y diseñar páginas. Puedo ver por qué muchos todavía usan este modo, ya que una vez que comprende cómo funciona, crear nuevos diseños es rápido y tiene pocas distracciones.

Configuración del complemento Divi Builder

La gran mayoría de las configuraciones de personalización se pueden encontrar dentro de la interfaz principal de Divi Builder, sin embargo, se pueden encontrar algunas configuraciones adicionales en el menú principal de administración de Divi.

Además de Divi Theme Builder y Divi Library, verá la página principal de opciones del complemento Divi Builder, un editor de roles y el centro de soporte.

La página de opciones del complemento se divide en cuatro secciones: Actualizaciones, Configuración de API, Integración de tipo de publicación y Avanzado.

Deberá ingresar su nombre de usuario y clave API de Elegant Themes para recibir actualizaciones automáticas para Divi Builder.

Para usar el bloque de contenido de Google Maps, deberá ingresar su clave API de Google en la sección de configuración de la API. Google Fonts también se puede desactivar desde esta sección.

Divi Builder le permite seleccionar exactamente con qué tipos de publicaciones usa el creador de páginas. Por ejemplo, puede deshabilitar Divi Builder en el tipo de publicación de su galería.

Se puede encontrar una gran cantidad de otras configuraciones en la sección avanzada, como la minificación de Javascript y CSS y la desactivación del recorrido del producto Divi Builder.

Como se señaló anteriormente, aquí también es donde habilita la interfaz del generador heredado y reemplaza el editor de bloques de WordPress (Gutenberg) con el Editor clásico.

El editor de roles de Divi le permite especificar exactamente qué pueden y no pueden hacer los diferentes roles de usuario.

Puede definir si los usuarios pueden acceder a la página de opciones, al generador de temas, a la interfaz principal de Divi Builder, a la biblioteca de diseño y más.

Por ejemplo, podría permitir que los colaboradores accedan a Divi Builder y a los diseños al escribir publicaciones de blog, pero restringirles el acceso a la página de opciones del complemento.

La última página en el menú de administración de Divi es el "Centro de ayuda y soporte de Divi Builder".

Se muestra un informe del sistema en la parte superior de la página que destaca si tiene la configuración de alojamiento adecuada para Divi Builder. Recomiendo consultar esta página si tiene problemas con Divi. Por ejemplo, las importaciones de diseños podrían estancarse porque los recursos son limitados.

Como había activado Divi Builder en mi sitio web de prueba de WordPress, recibí algunas advertencias acerca de que la configuración de mi alojamiento no era óptima.

Aquí también hay opciones para dar acceso remoto a Elegant Themes y chatear directamente con soporte.

Una variedad de tutoriales de Divi Builder también están vinculados desde esta página.

Además de los tutoriales escritos, hay tutoriales en video para ayudarlo a comenzar, usar diseños prefabricados y usar la biblioteca Divi.

La página de soporte también tiene una opción de modo seguro y una lista de errores generados por WP_DEBUG_LOG .

Divi Builder es una solución fácil de usar, pero si eres nuevo en el complemento, te recomiendo que sigas algunos de los tutoriales proporcionados después de jugar con la interfaz de Divi Builder. Le dará una buena comprensión de lo que Divi Builder puede hacer y le mostrará algunas características y trucos interesantes que puede haberse perdido.

¿Cuánto cuesta Divi Builder?

Elegant Themes tiene una de las políticas de precios más sencillas y justas del mundo de WordPress.

Puede comprar una membresía de Elegant Themes anualmente o como una tarifa única. Ambos planes le brindan acceso a todos los productos de Elegant Themes y le permiten usarlos en tantos sitios web como desee.

Cuesta $ 89 por año comprar una licencia anual y $ 249 comprar la licencia de acceso de por vida.

Si elige la licencia anual, puede continuar usando los productos de Elegant Themes después de que su licencia haya expirado. Sin embargo, no recibirá soporte ni actualizaciones una vez que su membresía haya expirado.

La licencia de acceso de por vida tiene sentido si planea usar los productos Elegant Themes durante más de dos años.

Todas las licencias vienen con una garantía de devolución de dinero de 30 días sin preguntas y puede cancelar su membresía en cualquier momento.

Divi Builder es solo una parte del paquete de membresía de Elegant Themes.

Una membresía también le da acceso al versátil tema Divi. Este es un excelente tema de WordPress para usar si eres fanático de Divi Builder, ya que la funcionalidad de creación de páginas está integrada directamente en el tema.

La membresía de Elegant Themes también incluye el hermoso tema Extra de WordPress para revistas, un diseño que funciona con Divi Builder.

También se incluye en la membresía el complemento de WordPress para marketing por correo electrónico y generación de prospectos Bloom y el complemento de WordPress para compartir en las redes sociales Monarch.

Elegant Themes tiene una de las mejores áreas de soporte en el mundo de WordPress. Su amplia área de documentación tiene tutoriales detallados escritos y en video para todos sus productos, pero si aún no está seguro de algo, puede abrir un ticket de soporte para obtener ayuda.

Pensamientos finales

Espero que todos hayan disfrutado de esta mirada detallada a Divi Builder.

Este complemento de WordPress sigue siendo una de las mejores soluciones de creación de páginas de arrastrar y soltar del mercado, logrando un gran equilibrio entre usabilidad, funciones y configuraciones avanzadas. La inclusión de miles de diseños profesionales de alta calidad es la guinda del pastel.

Una membresía de Elegant Themes también continúa brindando una excelente relación calidad-precio. Por lo tanto, aquellos de ustedes que quieran usar Divi Builder obtendrán acceso a cuatro temas y complementos de WordPress más avanzados.

Si desea ver Divi Builder en acción, consulte el área de vista previa de Divi Builder y la página de demostración de Elegant Themes.

Gracias por leer.

Kevin