Cómo usar Divi en WordPress, qué es Divi y cómo instalar Divi
Cómo usar Divi en WordPress, qué es Divi y cómo instalar Divi

Cómo usar Divi en WordPress

27/10/2021

Elegant Themes

27/10/2021
Tiempo lectura:

Elegant Themes

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 usar Divi: 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.

Cómo usar Divi: instalar Divi (ajustes)

‚ě§ Avanzado: este apartado corresponde con la integraci√≥n avanzada de Divi, que te recomiendo dejar configurada as√≠:

Cómo usar Divi: 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.

Cómo usar Divi: 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.

Cómo usar Divi


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

Cómo usar 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.

Cómo usar Divi

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

Cómo usar Divi
  • 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).

Cómo usar Divi

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

Cómo usar 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:

Cómo usar Divi

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:

Cómo usar Divi
  • 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:

Cómo usar Divi

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:

Cómo usar Divi
  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:

Cómo usar Divi

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

Cómo usar Divi

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.

Cómo usar Divi
módulos de Divi por defecto
Cómo usar Divi
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.

Cómo usar Divi
Cómo usar Divi
Cómo usar Divi

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

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.

¬ŅNecesitas una p√°gina web, blog, landing o tienda online?
¬°PIDE TU
PRESUPUESTO!
ÔźĎ

Dise√Īa
tu web

Ôáľ

Dise√Īa
tu imagen

ÔĄĶ
Impulsa
tu proyecto
ÔÄā

Optimiza
y posiciona

masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guía

PARA DISE√ĎAR LOGOTIPOS MEMORABLES

GU√ćA para dise√Īar logotipos memorables