Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Guía de WordPress DIVI Builder. Maquetador visual

Categorías:  Autor: Diego C Martin 
divi builder portada

Los maquetadores visuales permiten modificar el diseño de nuestras páginas web y entradas de manera rápida, cómoda y sin necesidad de tener conocimientos en programación. Hoy en día cualquiera puede crear una página web totalmente visual y con los últimos avances en cuanto a diseño y variedad de contenidos sólo aprendiento a manejar alguna de estas maravillosas aplicaciones. En esta ocasión vamos a hablar concretamente de Divi Builder, el maquetador visual de Elegant Themes para WordPress, aunque aquí puedes ver una pequeña comparativa que incluye otras dos de estas herramientas de diseño. La premisa a tener en cuenta a la hora de usar estos maquetadores es que todo lo podemos reubicar fácilmente haciendo ‘drag & drop’ , es decir, arrastrando y soltando con el ratón.

Instalación y ajustes de DIVI Builder

Se instala como cualquier otro plugin de WordPress. Una vez tenemos el archivo comprimido vamos a Plugins –> Añadir nuevo y una vez allí botón ‘Subir plugin’ en la parte superior.

anadir plugin a WordPress

Una vez instalado lo activamos. Veremos que entonces aparece entre los elementos del panel de administración de WordPress un nuevo elemento llamado ‘Divi‘ con 3 subelementos. ‘Opciones de plugin’, ‘Biblioteca de Divi’ y ‘Divi Editor De Funciones’.

Elemento de navegación de DIVI en el panel de administración de WordPress

Opciones

En las opciones sólo encontraremos el lugar dónde configurar las claves de los proveedores de servicios de Mail MarketingMailchimp y Aweber para que los suscriptores sean agregados automáticamente a las listas que tengamos. Si usamos otros proveedores como Mail Relay, tendremos que utilizar los formularios que proveen estos.

Utilizar DIVI en nuestros contenidos

Una vez que tenemos instalado el constructor, en todas las páginas de contenido de nuestro sitio (páginas, entradas, proyectos, …) aparecerá un nuevo botón justo encuma del editor convencional en el que dice “Usar el constructor Divi”. Si lo presionamos, el editor de texto normal será inmediatamente suplantado por Divi. Además, si teníamos algún texto creado ya en el editor habitual, Divi se ocupa de generar por nosotros los elementos necesarios para albergar ese contenido de texto que ya teníamos, quedando de la siguiente manera:

Constructor Divi con elemento de texto automático

Como podemos observar hay tres elementos. Uno azul, que es una sección, uno verde, que es una fila dentro de la sección y uno gris, que es un Módulo de texto dentro de la fila.

Secciones

Podemos dividir el contenido de nuestra publicación por secciones alternando así de diversa manera la colocacion y diseño de los elementos o módulos que agregamos en cada una de ellas.

Sección estándar

En este tipo de sección podemos colocar cualquier tipo de módulo de los que nos provee Divi y tendrá un ancho preestablecido en función de la fila en la que se ecuentre, del tema que estemos usando y del tipo de página, ya que por ejemplo, normalmente en una página de blog tendremos la columna lateral con los widgets a un lado del contenido.

Sección de anchura completa

Como su nombre indica, ocupará todo el ancho de la página. Estas secciones no tienen configuración de filas posible, simplente introducimos módulos unos a continuación de otros y sólo podremos usar ciertos módulos preparados para estas secciones que suelen ser de tipo separador, como vídeos o banners de fondo, colores sólidos con texto, etc.

seccion de anchura completa

Sección especial

Se utiliza como la estándar, aunque aquí tenemos la posibilidad de estructuras más pecualiares simplemente a nivel estético. ¡Creatividad al poder!

secciones especiales Divi

Esto es un ejemplo de sección una vez agregada:

Ejemplo de seccion especial Divi builder

Ajustes de sección

Para acceder a los ajustes hacemos clic sobre las tres líneas horizontales del margen izquierdo.

botón de ajustes en divi builder

Concretamente, si accedemos a los ajustes de la sección encontraremos 2 apartados,  ‘Ajustes generales’ y ‘CSS personalizado’. En el segundo podemos agregar código CSS para estilar de manera adicional el elemento. En los ajustes generales podemos personalizar de manera totalmente visual el diseño de la sección, tal como colocar un color de fondo, imagen de fondo, vídeo de fondo, efecto paralax o incluso agregar un identificador CSS (id) para su uso posterior en el código css adicional que agreguemos.

Ajustes de seccion en divi builder

Interesante tener en cuenta también el botón de vista previa con forma de ojo en la parte inferior central para poder previsualizar el resultado de los ajustes realizados. De la biblioteca hablaremos más adelante. Ni que decir tiene que para aplicar los cambios deberamos hacer clic sobre el botón inferior derecho, ‘Guardar y salir’ y para pubicarlos finalmente en el boton ‘Publicar’ o ‘Actualizar’ en la patalla principal de WordPress.

Filas

Cuando agregamos una fila a una sección, automáticamente deberemos seleccionar el númeo y proporción de columnas que tendrá esa fila para colocar módulos en su interior. Podremos escoger entre diversas combinaciones que dependerán del tipo de sección. Estas son algunas de las opciones con las que contamos en una sección estándar:

combinaciones de columnas para insertar en filas Divi builder

Si por ejemplo seleccionamos la primera de la tercera fila, 1/4, 3/4, el resultado es el siguiente:

ejemplo de columnas un cuarto tres cuartos en divi builder2

Podemos agregar múltiples filas con diferentes combinaciones de columnas dentro de una sección.

ejemplo de filas en seccion en divi builder2

Ajustes de fila

Al igual que anteriormente en los ajustes de sección, en los ajustes de fila encontramos las pestañas ‘Ajustes generales’ y ‘CSS personalizado’. en este caso en los ajustes generales disponemos de algunas opciones menos, pero adicionalmente encontramos otra pestaña llamada ‘Ajustes avenzados de diseño’ encontraremos una gran variadad de ellas, para especificar márgenes, fondos y comportamientos incluso de manera indipendiente por cada una de las columnas que formen la fila en cuestión. Con lo que hemos visto hasta aquí y un poco de imaginación se pueden hacer cosas tan elegentes como las que vemos en las demos que podemos encontrar en la página oficial de forma muy rápida y sencilla.

Módulos

El comportamiento de los módulos es muy variado y cada cual se personaliza de una manera dependiendo de su funcionalidad. Para no extendernos demasiado lo veremos en otra publicación, pero para hacernos una idea estos son algunos de los modulos que podemos utilizar:

modulos disponibles en divi builder

La biblioteca de WordPress Divi

La biblioteca de Divi es un elemento indispensable para ahorrarnos trabajo. Básicamente consiste en que podemos guardar cualquier elemento que hayamos configurado en esta biblioteca para su uso posterior.

Podemos gestionar la bilbioteca directamente desde el elemento con el mismo nombre del panel de administración de WordPress en el grupo ‘DIVI’. Allí veremos una pantalla como la de las entradas o páginas en la que encontraremos elementos previamente guardados y editarlos o bien crear nuevos.

Biblioteca de Divi builder

Tampoco es necesario utilizar esto porque cuando editamos los elementos en las entradas o páginas podremos guardarlos en cualquier momento con el botón que mencionábamos anteriormente, a la izquierda de la vista previa del elemento cuando tenemos abierto el cuadro de diálogo de los ajustes.

Reutilizar contenido en la biblioteca

Podemos cargar secciones o páginas completas previamente guardadas desde el panel principal del Constructor Divi y también desde cualquier elemento dentro de los ajustes.

Constructor Divi agregar desde biblioteca

Podemos también cargar los diseños que aparecen en la demo del tema Divi de Elegant Themes, lo cual nos ahorrará mucho trabajo inicial o nos ayudará a comenzar cuando aún somos un poco novatos con la herramienta.

Elementos globales

También podemos guardar como global un elemento. Cuando guardamos un elemento como global, los cambios que hagamos en ese elemento se actualizarán en todas las páginas donde esté publicado. Esto es muy ventajoso si vamos replicar los mismos módulos en diversos lugares como por ejemplo un formulario de contacto.

Guardar elemento global en la biblioteca del constructor Divi

Hasta aquí por el momento. Dudas, críticas y propuestas son siempre bienvenidas.

Más información en la página oficial de los desarrolladores.

Para más información sobre plugins de WordPress te recomiendo este artículo de Pedro Suárez:

Qué es un plugin de WordPress y algunas recomendaciones de plugins imprescindibles.

¡Recibe un cupón de un 10% sólo por darte de alta!

Usaré la info para informarte de novedades y ofertas sobre mis cursos y servicios.

* Más info en el Aviso legal.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram