Cómo usar Divi en WordPress

En este artículo te dejo un completo tutorial sobre qué Divi, cómo usar Divi en WordPress, cómo instalar Divi y cómo configurarlo.
Cómo usar Divi en WordPress, qué es Divi y cómo instalar Divi

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.

Tutorial Divi WordPress: instalar Divi (ajustes)

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:

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.

Tutorial Divi WordPress: instalar Divi (ajustes)

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

Tutorial Divi WordPress: instalar Divi (ajustes)

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.

Tutorial Divi WordPress: instalar Divi (ajustes)

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".

Tutorial Divi WordPress

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).

Tutorial Divi 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.

Tutorial Divi WordPress

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

Tutorial Divi WordPress
  • 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).

Tutorial Divi WordPress

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

Tutorial Divi WordPress

¿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.
Tutorial Divi WordPress
  • 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.
Tutorial Divi WordPress

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

Tutorial Divi WordPress

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:

Tutorial Divi WordPress
  • 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.
Tutorial Divi WordPress
Tutorial Divi WordPress
Tutorial Divi WordPress

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:

Tutorial Divi WordPress

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:

Tutorial Divi WordPress
  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:

Tutorial Divi WordPress

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í:

Tutorial Divi WordPress

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.

Tutorial Divi WordPress
módulos de Divi por defecto
Tutorial Divi WordPress
módulos especiales para WooCommerce

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.

Tutorial Divi WordPress
Tutorial Divi WordPress
Tutorial Divi WordPress

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.

Summary
🥇 Cómo usar Divi en WordPress
Article Name
🥇 Cómo usar Divi en WordPress
Description
En este artículo te dejo un completo tutorial sobre qué Divi, cómo usar Divi en WordPress, cómo instalar Divi y cómo configurarlo.
Author
Publisher Name
Max Camuñas
Publisher Logo

Elegant Themes

4 Comentarios

  1. Victor

    Hola Max. ¿Qué tal?

    Me gustaría hacerte una pregunta y estaría muy agradecido de tu respuesta.

    En este post comentas que no recomiendas usar el constructor de Divi para maquetar las entradas, pero... ¿Y el "constructor de temas"? ¿Crear una plantilla desde cero para las entradas, en tu opinión, tampoco lo aconsejarías?

    Muchas gracias anticipadas
    Saludos
    Victor

    Responder
    • Max Camuñas

      Hola, Víctor.

      Por supuesto, el generador de temas sí. Como bien dices, puedes crear una plantilla para todas las entradas.

      Saludos

      Responder
  2. Luis Alberto Sánchez Pérez

    Hola Max.

    Perdona mi pregunta de novato. Al comprar divi puedo utilizarlo aunque mi plan de wordpress sea un simple plan personal?, tendré activas todas las opciones de personalización de divi?.

    Saludos, muchas gracias.

    Responder
    • Max Camuñas

      Hola, Luis Alberto.

      ¿A qué te refieres con un plan de WordPress personal?

      Saludos

      Responder

Enviar un comentario

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

[Información Básica sobre Protección de Datos] Responsable: Máximo Camuñas Fernández. Finalidad: moderar y responder comentarios. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@maxcf.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.