Cómo usar Divi en WordPress

Si quieres aprender cómo usar Divi en WordPress paso a paso, en este post te traigo un tutorial muy completo sobre mi herramienta favorita como diseñador web.

¡Empezamos!

Qué es Divi

Antes de entrar en materia, lo primero que quiero hacer es explicarte exactamente qué es Divi.

Divi es un constructor o maquetador visual para WordPress, también conocido como builders y muy similar a otros como Elementor, Thrive, Oxygen o Beaver.

Su objetivo principal es maquetar páginas en WordPress (has leído bien: páginas; después ampliaré esta idea), aunque tiene otras funcionalidades como la posibilidad de crear plantillas o guardar diseños en su biblioteca, puntos que te explicaré a lo largo de este post.

Divi está disponible en dos formatos: como plantilla (premium) para WordPress y también como plugin, lo que permite usarlo con otros temas diferentes.

Como tema premium que es, Divi está disponible en dos modalidades (anual y lifetime) con precios distintos entre ellas. Si quieres saber más al respecto, aquí te respondo todas las dudas que puedas tener sobre la licencia Divi.

Cómo instalar Divi en WordPress

Para empezar a usarlo, el primer paso es instalar Divi, cosa que te explico en este vídeo:

Una vez instalado y activado el tema o plugin (en función de tu preferencia), el siguiente paso configurar todos sus ajustes para empezar a usarlo.

¿Cuáles son los ajustes de Divi?

Te los explico a continuación en sus dos modalidades.

Ajustes Divi (plantilla)

Si eliges instalar Divi como tema, al ser una plantilla premium, incluye infinidad de ajustes. Así que te voy a mostrar los más importantes y los que más se usan.

Cómo ves, los ajustes del tema Divi se organizan en 8 pestañas:

1. General
2. Navegación
3. Constructor
4. Diseño
5. Anuncios
6. SEO
7. Integración
8. Actualizaciones

He resaltado en negrita las que considero más importantes.

Veamos los ajustes más relevantes:

Pestaña General

La primera pestaña es una de las que más opciones incluye. Algunas importantes como:

• Subir el logo de tu web.
• Activar el menú fijo: no desaparece al hacer scroll, sino que siempre está visible.
• Definir la paleta de colores de tu página.
• Configurar la barra lateral tanto en el blog como en los productos de Divi.
• Activar las fuentes de Google (Google Fonts) en tu sitio.
• Definir el número de productos si tienes una tienda online en WordPress: páginas de archivo, categorías, etiquetas, búsqueda, etc.
• Activar el botón de "volver arriba".
• Añadir códigos CSS a Divi para personalizar la web.

Pestaña Constructor

Esta pestaña se divide a su vez en dos apartados, que te recomiendo configurar de esta forma:

➤ Integración de Divi con los diferentes post type de WordPress: aquí puedes activar o desactivar los tipos de contenido en los que se puede usar Divi en tu web. Solo te recomiendo usarlo para maquetar páginas (y en las plantillas de Divi obviamente), pero nunca en entradas o productos.

Por lo tanto, mi consejo es que no maquetes con Divi los artículos del blog o los productos de la tienda.

Si sigues mi recomenación, esta debería ser la configuración a aplicar en esta pestaña.

➤ Avanzado: este apartado corresponde con la integración avanzada de Divi, que te recomiendo dejar configurada así:

Pestaña Integración

Otra de las pestañas más usadas (al menos por mi parte), ya que aquí puedes añadir código personalizado en las diferentes partes de tu web (cabecera, cuerpo y pie de página), tales como scripts, píxeles o integraciones con otras herramientas externas.

Pestaña Actualizacoines

Por último, este es el apartado donde debes introducir las credenciales de Divi, es decir, de la licencia de Elegant Themes, para que tu web esté siempre actualizada.

Además, ofrece la posibilidad de volver a la versión anterior del tema en el caso de que, en el momento de actualizarse, provocara algún tipo de error (creo que nunca me ha pasado).

Ajustes Divi (plugin)

Si decides instalar Divi como plugin y usarlo con otras plantillas para WordPress, también incluye una serie de opciones organizadas en varias pestañas, aunque en versión reducida:

• Actualizaciones: aquí debes introducir las credenciales de tu licencia.
• Configuraciones API.
• Performance.
• Integración: lo mismo que he explicado para Divi plantila; solo dejaría activado el builder para las páginas.
• Avanzado.

Tutorial Divi WordPress

El primer paso para usar Divi es habilitar el constructor visual en la página donde quieras usarlo, algo que puedes hacer de varias formas:

1) Desde el listado de página de WordPress: eliges la página en la que quieras usar Divi y clicas en la opción de "Editar con Divi".

2. En la edición de la página: si entras a la edición de una página, también puedes activar Divi para maquetar su contenido. De hecho, desde aquí es donde puedes elegir qué editor usar: Divi Builder o Gutenberg (el editor de bloques de WordPress).

3. Desde la propia página: la última opción, que es mi preferida, es habilitar el constructor visual desde la propia página que quieres maquetar. Simplemente tienes que clicar en el botón morado que te señalo aquí para usar Divi en dicha página.

Una vez se ha habilitado Divi (tardará unos segundos en cargar), el siguiente paso es elegir una de las 3 opciones que te aparecen:

• Empezar a construir: para diseñar la página desde cero.
• Elegir diseño: para cargar alguno de los layouts de Divi o de los diseños que tengas subidos en tu biblioteca.
• Clonar página existente: para duplicar el diseño alguna de las páginas que ya tengas creadas en tu web también con Divi.

Si la opción que eliges es la segunda, puedes importar alguno de los diseños que incluye Divi, que aparecen organizados por temática (el listado de la izquierda) e incluye packs completos (blog, entrada de blog, landing, páginas de servicios, fichas de productos, etc).

Por otro lado, también puedes cargar alguno de los diseños que tengas guardados en tu biblioteca de Divi.

¿Cómo puedes guardar diseños en la biblioteca?

Hay dos opciones:

1. Que subas un layout que hayas descargado de otra web (en el blog de Elegant Themes, por ejemplo, puedes encontrar muchos diseños listos para ser importados), o que lo hayas adquirido en alguno de los muchos marketplace que existen para Divi.
2. Que importes diseños que has creado y guardado tú mismo en otras páginas. Por ejemplo, si tienes varias páginas de servicios y todas son similares pero solo cambia el contenido, guardar su diseño en la biblioteca de Divi te ahorrará mucho tiempo.

El siguiente paso es empezar a maquetar tu página con Divi, para lo que es importante saber que dispone de 2 tipos de vista:

• El editor visual, que es el que se carga por defecto y con el que puedes ir viendo los cambios y avances de la página en tiempo real.

• La vista wireframe, que te permite ver el diseño con formato de bloques, por decirlo de alguna forma. Si llevas años usando Divi, es muy similar al editor clásico. Esta vista es de mucha utilidad cuando necesitas encontrar algún elemento concreto.

Puedes activar la vista wireframe desde las opciones de la página, en la parte inferior:

Antes de empezar con la maquetación, quiero hablarte de los ajustes de la página, ya que con Divi puedes establecer unos parámetros diferentes en cada página si así lo necesitas.

Estos ajustes de página se activan también desde las opciones inferiores y se organizan en 3 pestañas:

• Contenido: puedes modificar el contenido de la página, añadir un extracto personalizado, subir una imagen destacada, poner un color de fondo y crear una prueba multivariable con Divi Leads.
• Diseño: aquí puedes modificar la separación entre todas las columnas de la página y también configurar el color del texto.
• Avanzado: por último, puedes añadir CSS personalizado, activar o desactivar la generación de CSS estático, así como modificar los ajustes de visibilidad y posición de esta página.

Herramientas de diseño en Divi: secciones, filas y módulos

Llegamos a uno de los puntos clave a la hora de usar Divi, que son sus herramientas de diseño, las que permiten organizar el contenido.

De esta forma, el contenido en Divi se organiza mediante secciones, filas y módulos.

Las secciones corresponden con la estructura principal; las columnas van dentro de las secciones y los módulos se colocan en las filas.

Aquí puedes verlo de forma más visual:

Secciones

Como te decía, la secciones son el contenido base, sobre el que van las filas y los módulos.

Las secciones pueden ser de 3 tipos:

1. Regulares: las estándar y más habituales (son de color azul).
2. Especiales: son las que combinan filas con módulos y se identifican por el color naranja.
3. Ancho completo: ocupan el 100% del contenido y no incluyen filas. Es decir, los módulos se colocan directamente sobre la sección. Se identifican con el color morado.

Aquí puedes ver las 3 clases de secciones en la vista wireframe:

Filas

Las filas son los elementos que se identifican con el color verde y en las que se colocan los módulos. Divi incluye diferentes tipos en función del número y formato de columnas.

Puedes verlas todas aquí:

Módulos

Por último, llegamos a los módulos, que son los elementos que contienen el contenido como tal: texto, imágenes, botones, iconos.

Por defecto, Divi dispone de 37 módulos, además de unos adiciones que aparecen al instalar WooCommerce si lo que quieres es crear una tienda online en WordPress.

Configuración de secciones, filas y módulos

Ahora que ya sabes cómo se estructura Divi, es el momento de ver la configuración de cada uno de sus elementos.

Las secciones, filas y módulos incluyen 3 pestañas donde puedes ajustar y personalizar todo lo que necesites (fondos, anchos, altos, enlaces, posición, etc).

Los 3 elementos se configuran de forma muy similar, aunque en función del tipo de contenido, incorporan algunas características propias.

Veamos la configuración global de cada pestaña.

Pestaña contenido

Aquí es donde debes añadir el contenido específico: textos, imágenes, títulos, vídeos, enlaces, etc. Además, puedes configurar el enlace, fondo y etiqueta de dicho elemento.

Pestaña diseño

Aquí puedes configurar parámetros como el tamaño, separación, bordes, sombras, filtros o animaciones.

Pestaña avanzado

Aquí puedes añadir una clase o ID personalizada, código CSS para modificar dicho elemento, elegir la visibilidad (escritorio, tablet y móvil), así como el puesto, transición o efectos de scroll.

Hasta aquí llega este tutorial en el que te he enseñado cómo usar Divi paso a paso, te he mostrado cada una de sus opciones, ajustes y posibles configuraciones, además de darte unas recomendaciones y consejos a la hora de utilizarlo 😉

Recuerda que, si aún te quedan dudas, puedes probar Divi directamente aquí, y si estás decidido y quieres adquirir tu propia licencia, puedes hacerlo también en la web de Elegant Themes.