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

Tiempo lectura:
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

0 comentarios

Enviar un comentario

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

Para cumplir con el nuevo RGPD y que tus datos est茅n a salvo, debes leer y aceptar mi pol铆tica de privacidad. Tus datos ser谩n guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

驴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