Tutorial sobre Divi Builder, el mejor constructor de páginas de WordPress

4 min 19/11/2018

Divi Builder es el mejor constructor de páginas o Page Builders que hay para WordPress, o por lo menos para mi. Y si lo juntas con la plantilla Divi (viene integrado en ella aunque se pueden instalar en cualquier otra) el poder de personalización es muy grande. En este breve tutorial sobre Divi Builder te voy a contar el porque es para mi el mejor constructor de páginas y como empezar a usarlo.

¿Porqué es Divi Builder el mejor constructor de páginas? 

• Es un constructor visual donde puedes ver los cambios que vas haciendo en vivo.
• Es un constructor tipo drag & drop. Puedes mover los distintos módulos, filas o secciones simplemente arrastrando.
• Está perfectamente optimizado para visualización tanto en escritorio, tablet como móvil. Cambiando en un selector obtienes la vista de tu página en cada dispositivo según la vas desarrollando.
• Puedes cambiar los ajustes de cada uno de los elementos con muchas opciones de personalización.
• Te permite guardar el elemento que quieras para utilizarlo fácilmente en cualquier otra página de tu sitio web. Incluso puedes hacer un determinado elemento global de manera que las modificaciones que se hagan en él en una página determinada afecten a todas en las que aparezca.
• Puedes usar alguna de sus 661 diseños, o en los cuales te puedes inspirar.

Seguro que se me olvida alguna virtud de Divi Builder. Son muchas!!

Empezar a usar Divi Builder

Cuando le das a añadir una nueva página te va aparecer la opción «Use Divi Builder». Dependiendo si usas Gutemberg o el editor clásico te aparece en un sitio u otro, pero la verás bien destacando con su color lila.

Una vez le das al botón te abre una nueva ventana dónde te aparecen 3 opciones:

• Build from scratch. Con esta opción empezarás a crear una página desde cero. 
• Choose a premade layout. Podrás elegir unos de los más de 661 prediseños que tiene Divi en exclusiva para ti. Estos prediseños los puedes personalizar completamente a tu gusto. Puedes hacer todos los cambios que desees tanto en contenido, como en colores, formas, tipos de letra, eliminar aquellos elementos que no necesites o usar secciones de distintos diseños. Aquí es dónde entra la creatividad e imaginación de cada uno. A mis clientes, en los planes más económicos, les digo que busquen el diseño que quieran entre toda esta variedad con la que empezar a trabajar y siempre teniendo presente que se pueden personalizar y mucho.
• Clone existing page. Puedes clonar alguna de las páginas que ya tienes hechas para cambiar rápidamente su contenido. Una excelente opción para basarte cuando estás haciendo páginas de distintos servicios, por ejemplo, con un mismo diseño. O cuando haces sitios web multi-idioma, ya que clonas la página a traducir y solo tendrías que cambiar los textos.

Como ves, facilidades te da bastantes.

Estructura de Divi Builder

La estructura básica de Divi la puedes ver perfectamente en la siguiente imagen.

La sección es el elemento donde puede haber distintas filas. Puede haber tantas secciones como necesitemos y cada una de ellas las podemos modificar con determinados ajustes.

Las filas son el contenedor donde irán los elementos de diseño. Pueden tener varias columnas según elijamos con una estructura muy amplia y variable.

Los módulos son los elementos donde pondremos nuestro contenido. Disponemos de una amplia variedad de módulos según las necesidades que tengamos.

Ajustes en cada elemento de Divi Builder

Cada uno de los elementos de Divi Builder, (secciones, filas o módulos) tienen una serie de iconos al poner el ratón encima de ellos para diversas funciones. El primero de ellos es para mover arrastrando a otra posición. El segundo es para los ajustes. Pulsando en el nos abre una ventana emergente con 3 secciones. La primera es el «Contenido» que tendrá distintas opciones de personalización según sea una sección, fila o algún modulo determinado. La segunda sección es «Diseño» que es donde podemos personalizar la parte visual del elemento en cuestión. Y la tercera es «Avanzado» donde podremos poner un Id o Clase determinada o incluso poner CSS directamente que afecte al elemento en cuestión. Esto me parece algo muy bueno para añadir fácilmente CSS a cada elemento. Algo muy interesante que tenemos en esta sección es Visibilidad, que permite deshabilitar la visualización en algún dispositivo (móvil, tablet o escritorio).

Todo esto es muy resumido y generalista, ya que para cada sección tiene sus particularidades, al igual que para cada fila y cada elemento tiene distintas. Pero una vez que se sabe el funcionamiento básico es ir probando!!

Otros iconos que nos aparecen al poner el ratón sobre un elemento determinado es el de duplicar, guardar el elemento en la biblioteca para aprovechar en otra parte del sitio web o el de eliminar. En el caso de las filas  también tenemos uno para cambiar la estructura de las filas.

Ajustes de página

En la parte de abajo de la pantalla del navegador nos aparece un botón lila con 3 puntos.

Pulsando en él se nos despliegan unas series de opciones como podemos ver en la siguiente imagen.

El icono número 1 es para ajustes del propio constructor.

El número 2 es para ver los elementos estructuradados.

El número 3 es para hacer zoom en la página.

Los iconos número 4 son para visualizar la página en formato escritorio, tablet o móvil, y todo sin salir de la propia página en construcción.

En el icono número 5 podemos añadir Prediseños de Divi o alguna página ya hecha, algo como las 3 opciones que nos daba al abrir Divi por primera vez.

El en icono 6 podemos guardar en la biblioteca de nuestro sitio web el diseño de nuestra página.

El número 7 es para cerrar todos estos iconos.

En el icono número 8 podemos establecer ajustes a nivel de página similar a como lo podemos hacer con cada elemento individual.

El número 9 es un historial de los cambios desde que se abrió el constructor.

En el icono 10 tenemos la opción tanto de importar como de exportar todo el diseño de nuestra página en formato Json para reutilizar en otro sitio web distinto al nuestro. 

Y ya el último, o últimos, son para publicar, guardar borrador o guardar según el estado en que se encuentre el diseño.

Conclusión

Como veis desde Divi facilidades nos dan bastantes para trabajar con nuestras páginas. Con un poco de habilidad se puede trabajar muy fácilmente y ahorrarnos mucho tiempo aprovechando la portabilidad o la duplicidad de nuestros diseños. 

Tenemos muchas opciones de personalización y todo sin escribir una sola línea de código. Y en el caso de necesitar hacer ajustes con CSS también nos dan muchas facilidades en sus ajustes avanzados al poder introducir directamente código CSS. 

Por todo esto y más, me gusta Divi Builder.

Espero haber ayudado a haceros una idea de como funciona Divi Builder. Un saludo amigo lector!!