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.