Divi Builder, cómo crear páginas con el constructor de Elegant Themes

Divi Builder es el constructor que viene integrado en uno de los mejores temas para WordPress, Divi, aunque también puedes utilizarlo en cualquier otra plantilla. Si quieres saber cómo funciona, ¡lee y no pestañees!

Llámame pesado, pero cuando algo me gusta mucho no puedo parar de hablar de eso.

Me pasó cuando era pequeño con Dragon Ball y me pasa ahora con el tema para WordPress Divi de Elegant Themes.

Si ya te convencí de instalarlo en el enlace que te acabo de poner, entonces lo que te voy a contar en este artículo seguro que te va a interesar.

Si estás a punto de crear tu web y no has decidido aún qué plantilla vas a instalar… ¡corre a echarle un ojo!

Y es que una de las cosas que más me gusta de Divi es que viene con su propio constructor o maquetador de páginas: Divi Builder.

Cuando instalas cualquier otro tema para WordPress, la mayoría de veces tienes que instalarle un plugin tipo Visual Composer para poder crear páginas atractivas, y normalmente estos plugins suelen ser pesados y lastran la velocidad de tu web.

Pero Divi Builder, al estar perfectamente integrado en la plantilla, está muy optimizado y no supone una gran carga para tu web.

Hoy vamos a ver cómo es Divi Builder y qué puedes hacer con él para terminar de convencerte (soy muy insistente, lo sé).

Veremos todos los módulos que tiene, cuáles son sus modos de trabajo, cómo crear páginas de aterrizaje (o landing pages), y más cosillas interesantes que se pueden hacer con él.

¿Are you ready?

GO!

Cómo crear páginas con Divi Builder

Para empezar a trabajar con Divi Builder, hay que crear una nueva página o entrada y pulsar el botón lila “Usar el constructor Divi”.

Hay a quien le molesta que la apariencia del botón y el aspecto del constructos en general no se integre con el aspecto de WordPress, pero a mí personalmente es algo que me importa un mojón bien poco.

Al pulsar este botón, el editor normal de WordPress desaparece para dar paso al constructor de Divi.

Este es el que se conoce como modo back-end de Divi Builder. Es decir, se trabaja desde “detrás de la web”, que es básicamente como creas las páginas y entradas siempre, desde el panel de administración de WordPress.

Para ver los cambios que hagas tendrás que darle al botón “Vista previa” como lo venías haciendo hasta ahora.

Si te fijas, arriba está el botón “Usar Constructor visual”, pulsándolo accedes al modo front-end. En este modo trabajas sobre la parte visible de la web, o lo que es lo mismo, puedes construir la página mientras ves “en directo” cómo van quedando los cambios que haces.

Puedes elegir el modo que más te guste para trabajar, aunque también puedes ir combinándolos según tus necesidades. Si empiezas utilizando uno, no quiere decir que no puedas utilizar el otro sin problemas, lo cual es genial.

Secciones, filas y columnas de Divi Builder

Los elementos “padre” para insertar cualquier objeto son las secciones.

En las secciones podrás añadir tantas filas como quieras, y dentro de las filas podrás añadir tantos módulos como quieras.

Y por supuesto, cada fila la puedes hacer con el número de columnas y tamaños que quieras, de entre las opciones.

Hay tres tipos de secciones:

• Sección estándar: una sección que ocupa el ancho que tienes seleccionado para el cuerpo de la página.
• Sección de anchura completa: una sección que ocupa todo el ancho de la página.
• Sección especial: una sección en la que puedes añadir de una a dos barras laterales y de distintos tamaños.

Esto es un ejemplo de sección (barra lateral azul) con dos filas (barra lateral verde), la primera tiene una columna y la segunda dos columnas.

Como puedes ver, puedes insertar un módulo en cada uno de los espacios de las filas.

¿Y qué son los módulos y qué módulos puedes insertar?

Pueees…

Módulos del constructor Divi

Los módulos son elementos que puedes agregar a tus páginas, como por ejemplo, texto, imágenes, vídeos, sliders, mapas, etc.

Para agregarlos, hay que hacer clic en “Insertar módulo(s)” dentro de las filas, entonces se abrirá una ventana con todos.

Actualmente hay 46 módulos disponibles entre los que puedes elegir:

La verdad es que tiene todos los elementos que se suelen utilizar en el diseño web hoy en día.

Cuando selecciones uno de ellos, podrás elegir entre las opciones de ese módulo en concreto, configurar algunos aspectos de su diseño y agregar código CSS personalizado.

Todos los ajustes son muy intuitivos y sencillos de realizar, sobre todo porque el constructor de Divi está totalmente traducido al castellano, al igual que toda la plantilla.

Guardar en la biblioteca como plantillas

Una vez has acabado de configurar el módulo, puedes hacer dos cosas:

• Guardarlo y añadirlo a la biblioteca.
• Guardarlo y salir del módulo.

La segunda opción es simple, solo guardas los cambios para la página que estás creando.

Con la primera opción, guardas el módulo tal y como lo has creado, con todos los ajustes que has establecido, de manera que lo tendrás disponible para agregarlo tal cual en cualquier otra página o entrada que crees.

Como ves en la imagen, puedes asignarle un nombre, y decidir si quieres guardarlo todo tal cual (ajustes generales, ajustes de diseño y código CSS personalizado) o solo algunos de ellos.

Cuando acabas de configurar y personalizar está la opción “Guardar como global”.

¿Qué hace esta opción?

Imagina que guardas un módulo en la biblioteca y lo agregas a 10 páginas más de tu web. Si en algún momento quieres modificarlo, tendrías que ir uno por uno haciendo los cambios.

Marcando el módulo como global, los cambios que realices en uno, se aplicarán al mismo módulo que tienes en el resto de las 9 páginas.

Así que es una opción muy interesante si tienes que agregar el mismo módulo a varias páginas.

Pero los módulos no son los únicos elemento que se pueden guardar en la biblioteca, también se puede hacer con las secciones y las filas.

Puedes guardar cada una de ellas para insertarlas en otras páginas cuando quieras.

Y lo mismo pasa con la página entera.

Cuando has acabado con el diseño de la página y el resultado te ha quedado digno de enmarcar, puedes guardar el diseño de la página como plantilla para utilizarla en otras páginas de tu web, algo que te puede ahorrar mucha faena si tienes que crear varias páginas iguales o similares.

Crear una landing page con con el constructor Divi

Una landing page es una de las páginas que no pueden faltar en una web profesional que quiera captar suscriptores o vender algún producto en concreto.

No todos los temas de WordPress ni todos los plugins maquetadores ofrecen la posibilidad de construirlas, pero los chicos de Elegant Themes están en todo y gracias a Divi y a su constructor podrás hacerlas de la manera más fácil del mundo.

Solo tienes que crear una página nueva y dirigirte a las opciones de “Atributos de página” que aparecen a la derecha de la pantalla.

En el desplegable “Plantilla” tienes que elegir “Blank Page”.

Ya está, eso es todo lo que tienes que hacer para transformar cualquier página en una landing page.

Lo que hace esta opción es eliminar todos los elementos de la plantilla para esa página: el menú, la barra lateral, el pie de página…quedando una página totalmente en blanco donde puedes empezar a crear tu diseño para la landing page.

¿Qué pasa si desinstalo Divi Builder?

Es probable que hayas oído o leído alguna vez sobre “las desgracias” que ocurren cuando desinstalas Divi para utilizar cualquier otro tema. No te voy a mentir, hay gente detractora tanto de Divi como de Divi Builder, pero probablemente no lo hayan probado nunca o no tengan toda la información necesaria.

Voy a tratar de explicarte cuál era el problema, por el cual se extendió el rumor de que si decidías desinstalar Divi, tu web iba a quedar arruinada.

¿Qué pasa cuándo desinstalas este constructor?

Pues que, como pasa con todos los maquetadores de WordPress, pierdes el diseño de las páginas que has diseñado con él. Repito: como pasa con todos los maquetadores.

La diferencia es que Divi Builder funciona a base de shortcodes, y cuando lo desinstalas, tus páginas quedan ilegibles a causa de la cantidad de shortcodes que aparecen en ella.

Con otros maquetadores pierdes todo el diseño de las páginas, pero al menos no queda llena de códigos ilegibles, aunque el resultado es el mismo: tener que rediseñar las páginas si cambias de maquetador.

Y si ocurre lo mismo con Divi Builder que con otros maquetadores, ¿por qué la gente critica sólo al constructor de Divi?

El motivo de esto es que el constructor Divi viene integrado con el tema. Hace unos años, si desinstalabas el tema, no podías utilizar Divi Builder en el nuevo tema que instalaras en tu web, por lo que obligatoriamente tenías que volver a diseñar todas las páginas que habías maquetado con él.

Pero esto hace tiempo que Elegant Themes lo corrigió sacando Divi Builder en forma de plugin, de modo que si decides desinstalar Divi y utilizar otro tema, puedes instalar el constructor de Divi en forma de plugin y no perderías el diseño de las páginas.

Así que, en resumen, tenemos:

• Si utilizas cualquier maquetador y decides cambiarlo por otro, tendrás que rediseñar todas las páginas con el nuevo maquetador.
• Si utilizas el tema Divi y lo único que quieres es cambiar de tema, manteniendo el diseño de tus páginas, puedes instalar el constructor de Divi en el nuevo tema y no pierdes el diseño de tus páginas.

Vamos, exactamente lo mismo que si cambias de un tema a otro pero manteniendo el mismo maquetador.

Así que como ves, Divi Builder no tiene ningún inconveniente que no tenga cualquier otro plugin que sirva para lo mismo.

Conclusión

La conclusión es que Divi Builder no tiene nada que envidiar a otros constructores de WordPress, sino al contrario: tu velocidad de carga será mejor que si utilizaras alguno de ellos al venir integrado con la plantilla.

Tardas muy poco tiempo en hacerte por completo con sus funcionalidades, y una vez lo has hecho, trabajar con él se vuelve realmente sencillo y puedes crear unos diseños muy chulos rápidamente.

En cuanto a su constructor visual, en el que diseñas la página “en directo”, es la solución perfecta para diseños complejos en los que tengas que cuadrar unos elementos con otros y no estar perdiendo el tiempo en esperar a que cargue la vista previa cada dos por tes.

Los cambios se ven al instante y puedes trabajar la versión de escritorio y la de table y smartphone independientemente, para que el diseño de la página se vea bien en cualquier dispositivo.

¿Has probado ya Divi y su constructor? ¿Qué te parece? Si te has quedado con alguna duda acerca de él, no seas tímido, ¡coméntala!

Imagen del artículo: kjpargeter – Freepik