Muy buenas lector.

Divi lleva ya mucho tiempo haciendo ruido, pero en los últimos años está alcanzado cotas increibles.

Yo desde hace mucho tiempo utilizo Divi para WordPress en mis dos blogs y en mi plataforma de cursos online. Sin duda, soy un incondicional de Divi, y como conozco este tema muy pero que muy bien, te he preparado esta mega guía – tutorial sobre el que seguramente es el tema más conocido de WordPress.

Además, más adelante de dejo un Descuento exclusivo.

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

MEGA GUIA TUTORIAL - DIVI

 

 

1.- ¿Qué es Divi para WordPress de Elegant Themes?

 

Divi, en el momento de escribir este post, es la plantilla más utilizada para WordPress en todo el mundo. Pero, también es la más utilizada en España. Todo esto según las estadísticas ofrecidas por builtwith.com

La plantilla Divi de WordPress está por encima de otras plantillas como Avada, Genesis, Enfold, Generate Press, etc.

Y como se suele decir: «Si tanta gente usa Divi, como suele decirse, por algo será«.

 

Divi es la plantilla más usada en España y en el resto del mundo

Porcentaje de uso de las plantillas WordPress más utilizadas en todo el mundo

 

La empresa que ha creado Divi es Elegant Themes Inc., una empresa ubicada en San Francisco en el estado de California (Estados Unidos). El visionario y CEO de Elegant Themes es Nick Roach, un auténtico fuera de serie, que ha llevado a su empresa a lo más alto del mundillo WordPress.

La empresa Elegant Themes ofrece varios productos. Pero, sin duda, Divi es el más conocido.

 

 

2.- Precio de Divi, licencia y que incluye cada plan de Elegant Themes + DESCUENTO

 

La plantilla Divi para WordPress se vende a través de los dos planes que ofrece Elegant Themes. Los dos planes ofrecen las mismas opciones. La única diferencia es que uno de los planes es de renovación anual y el otro es de un solo pago único y a disfrutar de Divi para toda la vida.

Los dos planes ofrecen una licencia para poder realizar TODAS las web que quieras. Es decir, que no tienes que comprar una licencia por cada web que vayas a realizar, como sucede con la plantilla Avada, Flatsome y otras. En el caso de Divi, con contratar un plan podrás usar Divi en todos los sitios web que quieras.

Los dos planes incluyen la plantilla Divi y la plantilla Extra. Así como, los plugins Monarch, Bloom y el plugin Divi Builder.

Ambos planes incluyen soporte y actualizaciones. El plan anual (yearly Access) lo incluye durante un año y el plan para toda la vida (Lifetime Access) lo incluye para siempre.

Los dos planes son:

 

 

2.1.- Plan Anual de Elegant Themes (Yearly Access) | **DESCUENTO**

 

Este plan tiene un precio de 89$ + IVA al año, e incluye soporte y actualizaciones durante un año, la plantilla Divi y Extra y los plugins Monarch, Bloom y Divi builder. Además, de una licencia que te permitirá usar la plantilla en todos los wordpress que quieras.

Soy afiliado de Elegant Themes, y si contratas este plan a través de mi enlace tendrás un 20% de DESCUENTO directo en la compra.

Es decir, de 89$ + IVA se te quedaría en: 70 $ + IVA (que son unos 62 € + IVA)

DESCUENTO DIVI

 

 

2.2.- Plan para toda la vida de Elegant Themes (Lifetime Access) |  **DESCUENTO**

 

Este plan tiene un precio de 249$ + IVA, se paga una sola vez, y te permitirá disfrutar para toda la vida de: soporte y actualizaciones, la plantilla Divi de WordPress y Extra y los plugins Monarch, Bloom y Divi builder. Además, de una licencia que te permitirá usar la plantilla en todos los wordpress que quieras.

Soy afiliado de Elegant Themes, y si contratas este plan a través de mi enlace tendrás un 20% de DESCUENTO directo en la compra.

Es decir, de 249$ + IVA se te quedaría en: 199$ + IVA (que son unos 177 € + IVA)

DESCUENTO DIVI

 

 

3.- Divi incorpora cientos de diseños (layouts) o plantillas para importar y crear rápidamente tu web

 

Un problema habitual en algunas personas no profesionales del diseño web, que realizan su propia web, es que la web no consigue una apariencia profesional en cuanta a diseño. Pero, esto es fácilmente subsanable con los diseños profesionales predefinidos de Divi.

Con Divi tendremos la opción de importar en nuestra web cientos de diseños profesionales a partir de los cuales arrancar nuestro proyecto. Podremos partir de cero, si queremos, o utilizar algún pack realizado por Elegant Themes.

Después, podremos ir modificando ese diseño o plantilla a nuestro gusto, quitando y añadiendo tantas cosas como queramos.

Elegant Theme es la empresa que ofrece un mayor número de diseños o layouts. Además, encontraremos los diseños clasificados según temáticas y tipo de página. En cada pack, tendremos un diseño para página de inicio, servicios, contacto, empresa, etc. Todos los diseños o layouts de un mismo pack tienen una misma línea estética.

Esta herramienta es muy, pero que muy interesante, ya sea para diseñadores web profesionales, como para usuarios nobeles. Fácilmente, nos ayuda a tener un diseño profesional en nuestra web.

 

 

 

 

4.- El Theme builder de Divi de WordPress, la revolución de Divi 4.0

 

A partir de Divi 4.0 la flexibilidad de Divi se amplía a límites insospechados. Divi 4.0 incorpora la herramienta denominada Theme Builder que permite la creación y asignación de templates o plantilla a diferentes elementos de contenido como páginas, entradas de blog, productos Woocommerce, lista de entradas, etc.

Pero, para los usuarios que no quieren complicarse tanto la vida, también conserva las opciones de configuración rápida de la plantilla. Es decir, las opciones por defecto de personalización de header, footer, etc.

Cada template o plantilla dispone de 3 áreas: área de header (situada en la parte superior), área de contenido (situada en la parte central) y área de footer (situada en la parte inferior). Con la herramienta de construcción de Divi, el Divi builder, podremos crear a medida cualquiera de estas áreas de un template.

El Theme builder de Divi nos va a permitir disponer de headers o footers diferentes en distintas páginas, entradas de blog, productos, etc. También nos va a permitir crear una página 404 personalizada, uno o varios diseños para los productos de la tienda, para las entras de blog, etc.

Pero otro elemento muy interesante, es que para los que nos quieren complicarse la vida en demasía, Divi wordpress conserva las opciones rápidas de configuración de la plantilla. Entre las que hay diferentes diseños para el header, footer, estructura de la web, etc.

 

 

Elegant Themes también está creando y publicando de manera gratuita templates o plantillas profesionales para importar al Theme builder.

Aquí tienes más información sobre el Theme builder de Divi
DESCUENTO DIVI

Aquí tienes un ejemplo de cómo crear un footer totalmente personalizado con el Divi Theme builder:

 

 

5.- Gran flexibilidad y opciones de personalización por defecto de Divi

 

Como decía en el apartado anterior, aunque Divi ha incluido opciones avanzadas para conseguir una personalización casi a medida de la web, e incluso la posibilidad de diferenciarla totalmente en cada una de sus página, con diferentes cabeceras y footers, también conserva las opciones básicas de personalización para aquellas personas que prefieren un producto más básico y no utilizar el Theme Builder.

Pues esas son las opciones a las que me refiero en este apartado. También es posible combinar el uso de estas opciones básicas de configuración en determinadas páginas y diseños personalizados con el theme builder en otras páginas.

Todas estas opciones las tienes en: “Divi > Opciones del tema”

CURSO WORDPRESS Y DIVI

 

 

5.1.- Ajustes generales de Divi

 

Opciones situadas en: “Divi > Opciones del tema > Ajustes Generales”

 

Desde aquí podremos establecer opciones generales de configuración como:

i.- Estructura web: El formato de maquetación de la web, box (caja) o normal

ii.- Anchuras: anchura del contenedor de contenidos de la web y de la barra lateral o sidebar

iii.- Tipografía: aunque podremos personalizar estos parámetros de manera específica con el Divi builder. Desde aquí podremos establecer un tamaño general de fuente de texto, tipo de fuente entre las que ofrece Google Fonts, colores de las fuentes y colores de los enlaces.

 

 

5.2.- Opciones de personalización de header de Divi (cabecera)

 

Estas opciones de personalización de header las encontraremos en: “Divi > Opciones del tema > Cabecera y Navegación”

i.- Diseños de header: podremos elegir entre diferentes tipos de estructuras para el header o cabecera.

ii.- Barra de menú principal: podremos personalizar totalmente el menú principal de la web, en lo que se refiere a colores de fondo, fuente, activos, etc. Así como, tipos de fuente, tamaños, personalización de menús desplegables, etc.

iii.- Barra de menú secundario: de igual manera que el anterior, podremos personalizar la barra y menú que opcionalmente podemos mostrar encima del header o cabecera.

iv.- Personalizar menú flotante: en caso de que tengamos activado el menú flotante, sticky o pegajoso, también dispondremos de un montón de opciones de personalización.

v.- Elementos de cabecera: también podremos mostrar u ocultar elementos de cabecera como: barra de búsqueda, email, teléfono, redes sociales, etc.

 

En el siguiente enlace tienes más información sobre el diseño del header

 

 

 

 

 

5.3.- Opciones de personalización de footer de Divi (pie)

 

Las opciones de personalización del footer las tenemos en: “Divi > Opciones del tema > Pie”

 

Desde aquí tendremos opciones para personalizar:

i.- Diseño: estructura del footer, en cuanto a número y distribución de columnas para los widgets de wordpress. Además, de color de fondo.

ii.- Widgets: desde este apartado podremos personalizar las opciones de diseño relacionadas con los widgets de WordPress que se estén mostrando en el footer.

iii.- Menú inferior: en caso de activar un menú en el footer, cosa que permite de manera opcional la plantilla Divi para WordPress, desde este apartado podríamos personalizar el diseño de dicha barra de menú.

iv.- Barra inferior: aquí podremos personalizar el diseño y contenido de la barra inferior del footer, conocida como barra de créditos.

 

Aquí te dejo un enlace con toda la información sobre cómo crear el footer de la web

 

 

6.- El Divi builder, el constructor integrado en Divi que implementa la magia.

 

La plantilla Divi ya incorpora por defecto el page builder denominado Divi builder. Aunque, si usas otra plantilla también te lo puedes instalar como un plugin.

El Divi builder es la herramienta de construcción de contenidos de Divi. Nos permite crear el contenido de cada una de las páginas de nuestro sitio web, de una manera muy visual e intuitiva. Ahora, con el theme builder + el Divi builder, también podríamos diseñar el header y footer de la web. También, realizar un diseño personalizado para entradas de blog, productos de la tienda, etc.

El Divi builder está por encima de los mejores page builders para wordpress del mercado, en cuanto a funcionalidades y a usabilidad.

El builder de Divi es un page builder visual, con el sistema de bloques Drag and Drop “arrastra y suelta”. También dispone de un modo Wireframe (modo estructural) que podemos alternar de manera instantánea.

Existen otras plantillas que no incluyen page builder y se integran con page builders que existen en el mercado. Por ejemplo, la plantilla Astra Pro no dispone de page builder, pero se integra muy bien con el page builder Elementor.

Pero, está claro que no hay mejor integración que la que viene por defecto, en cuanto a la funcionalidad y optimización de recursos, y esto es una ventaja de Divi respecto a otras plantillas

 

Aquí tienes más info sobre el funcionamiento del Divi builder

 

DESCUENTO DIVI

 

6.1.- La Arquitectura del Divi builder es la que tiene una mayor usabilidad y flexibilidad

 

El Divi builder utiliza una serie de elementos estructurales para la creación de contenidos, que le proporcionan la mayor flexibilidad y usabilidad del mercado:

 

i.- Secciones: las secciones son los contenedores más grandes del constructor. Para construir el contenido de una página de un sitio web, podremos utilizar una sola o varias secciones.

Divi para wordpress incluye 3 tipos de secciones diferentes, con la finalidad de aumentar la flexibilidad arquitectónica de la herramienta. El Divi builder incluye secciones de tipo estándar, de tipo ancho completo (contiene elementos de anchura completa) y especiales.

ii.- Filas y columnas: la sección tipo estándar y especial, utilizan las filas para compartimentar el espacio dentro de la sección. Dentro de una sección se puede incluir una o varias filas. Cada fila estará dividida en una o varias columnas.

iii.- Módulos: los módulos son los elementos estructurales finales, que irán colocados dentro de cada columna.

Dentro de cada columna podremos insertar uno o varios módulos.

 

Elementos estructura del divi builder

Estrucutra del Divi builder

 

 

6.2.- La gran diversidad de módulos del Divi builder

 

Cada módulo del Divi Builder tiene un aspecto y finalidad diferente. Existen módulos para añadir iconos, otros para añadir textos, otros para añadir formularios de contacto, etc.

Cada módulos tiene una serie de opciones de configuración específicas y otras opciones comunes al resto de módulos.

 

A continuación, te muestro un listado de los módulos del Divi builder de la sección estándar y especial (excluidos los de Woocommerce, que veremos más adelante). Pero, si quieres ver cada una en detalle y con ejemplos, ve a esta página específica sobre el Divi builder

Módulo Acordeón: Sirve para añadir un acordeón de contenido

Módulo Anuncio: sirve para añadir iconos

Módulo Audio: sirve para añadir un reproductor de audio

Módulo Barra lateral: este módulo sirve para implementar una barra lateral o sidebar.

Módulo Blog: sirve para añadir un bloque con un número definido de entradas de blog, filtradas según diferentes parámetros.

Módulo Conmutador: sirve para añadir un desplegable. Similar al acordeón.

Módulo Contador de número: este módulo sirve para añadir, a modo presentación, un contador gráfico con números.

Módulo Contadores circulares: igual que el anterior, pero en este caso el contador utiliza una barra circular.

Módulo Contadores de barra: igual que el anterior, pro en este caso el contador es de barras horizontales.

Módulo Control deslizante de vídeo: este módulo permite implementar un slider o visualizador de vídeos.

Módulo Correo electrónico Optin: permite crear un formulario de suscripción

Módulo Código: bloque que permite añadir código.

Módulo Deslizador: este módulo permite implementar un slider o visor de imágenes.

Módulo Formulario de contacto: este módulo permite crear, personalizar y añadir un formulario de contacto.

Módulo Galería: permite añadir una galería de imágenes, mucho más visual que el que podemos añadir con Gutenberg o el editor clásico de WordPress.

Módulo Imagen: permite añadir una imagen.

Módulo Iniciar sesión: permite añadir un bloque de inicio de sesión en WordPress.

Módulo Llamada a la acción: permite añadir un call to action a través de un bloque + texto + botón.

Módulo Mapa: permite añadir un mapa de Google

Módulo Persona: permite añadir un bloque típico de miembro de la empresa.

Módulo Pestañas: permite añadir contenido a partir de pestañas o tabs.

Módulo Portfolios: permite listar los proyectos o portfolio de Divi

Módulo Porfolios filtrable: permite listar los proyectos o portfolio de Divi + un filtro por categorías.

Módulo Recomendación: sirve para añadir bloques de recomendaciones de usuarios.

Módulo Seguir a medios sociales: este módulo de Divi de WordPress sirve para añadir iconos de redes sociales.

Módulo Separador: sirve para añadir un separador

Módulo Tablas de precios: sirve para añadir varias tablas comparativas de funcionalidades y precios de diferentes planes o servicios.

Módulo Temporizador de cuenta atrás: este módulo de Divi sirve para añadir un contador que irá desde el número de días, horas, minutos y segundos hacia atrás, hasta llegar a cero.

Módulo Texto: sirve para añadir textos

Módulo Tienda: sirve para mostrar un bloque de productos de la tienda online + Woocommerce, filtrados por diferentes parámetros. Para usar este módulo es necesario tener instalado Woocommerce.

Módulo Título de Publicación: Sirve para añadir un título de post.

Módulo Vídeo: sirve para añadir un vídeo.

Si quieres más info sobre alguno de estos módulos, ve a este post: Divi Builder

 

Todos los módulos disponen de unas opciones de personalización específicas y una serie de opciones generales comunes a todos ellos, como son: Sombreados, fondos con colores, degradados o imágenes, movimientos, bordes, márgenes internos y externos, opciones hover, opciones móvil, etc.

DESCUENTO DIVI

 

 

7.- Impresionantes y vistosas opciones de Divi para separar secciones de la web

 

Las secciones son los contenedores principales que se muestran en una misma página de un sitio web y que sirven para separar contenidos dentro de la misma página. Habitualmente esta separación se realiza poniendo un color de fondo diferente a cada sección o una imagen de fondo.

Pero, en la mayoría de páginas, el cambio de una sección a otra es la misma aburrida línea recta horizontal.

El Divi builder, incluye una opción muy vistosa que nos permite elegir entre un montón de diseños diferentes para separar dos secciones dentro de una misma página. De esta manera, tu web no será la misma web aburrida y predecible y se diferenciará del resto.

 

 

 

8.- Opciones de personalización según dispositivo

 

Hoy en día, en el diseño web no es suficiente ya con disponer de un visor para ver cómo se mostraría la página que estamos diseñando en diferentes dispositivos (pc, Tablet y móvil), cosa que incluyen la mayoría de page builders (Divi también).

El Divi builder, también implementa la capacidad, en muchas de las opciones de personalización de secciones, filas y módulos, de personalizar el diseño de diferente manera según sea el dispositivo en el que se vaya a mostrar el contenido.

Por ejemplo, con el Divi builder podremos hacer que un determinado texto tenga un tamaño de fuente diferente según se muestre en un móvil, una Tablet o un ordenador. Lo mismo con la altura del interlineado, etc.

 

 

9.- Elementos avanzados de Divi WordPress, Contenido dinámico

 

Esta es una funcionalidad avanzada de Divi, que permiten muy pocos page builders. Esta funcionalidad nos permite convertir cualquier módulo del Divi builder en un elemento dinámico que extrae la información de la base de datos de WordPress.

Los módulos muestran la información fija (estática) que hemos personalizado en la pestaña de contenido del módulo. Con el contenido dinámico podemos transformar el contenido de cualquier módulo en un contenido dinámico que se actualiza de manera automática cuando se cambia el contenido con el que está sincronizado.

Para el contenido dinámico podremos aprovechar también los campos personalizados de página de WordPress.

En definitiva, esta herramienta nos va a permitir crear diseños de páginas de contenido personalizado.

 

Voy a poner un ejemplo.

Podríamos crear un diseño de página para una web tipo inmobiliaria online. Es decir, nos serviría para crear un diseño de la ficha de vivienda.

Primero crearíamos los campos personalizados necesarios: precio, dirección, nº dormitorios, nº baños, etc. Después crearíamos un diseño de página utilizando esos campos personalizados, a través de módulos dinámicos del Divi Builder.

Esa página creada, nos serviría de modelo para ir subiendo todas las fichas de viviendas de la inmobiliaria.

 

 

10.- Opciones de optimización, rendimiento y velocidad de carga de Divi

 

La plantilla Divi dispone de opciones propias de personalización para la optimización de carga. Además, se integra perfectamente con plugins de caché y optimización de código.

En “Divi > Opciones del tema > General” puedes encontrar opciones como:

i.- Reducir y combinar archivos JavaScript

ii.- Minimizar y combinar archivos CSS

 

Además, como decía, la plantilla Divi para wordpress se integra perfectamente con plugins de Caché como WP Super Caché (que es el que uso habitualmente), WP Fastest Caché y otros.

Yo también suelo utilizar con Divi el plugin Autoptimize que también se integra perfectamente.

A parte de todo esto, siempre ayuda mucho trabajar con una empresa de hosting de calidad para WordPress, y que disponga de servidores potentes, como es el caso de Webempresa. Es la empresa que recomiendo para proyectos WordPress y Woocommerce

 

DESCUENTO WEBEMPRESA

 

 

11.- Opciones para añadir en Divi código CSS, Analytics y otros

 

Vaya por delante, que para utilizar Divi no tienes que saber absolutamente nada de código ni programación. Precisamente, Divi está pensada para poder con una sola herramienta diseñar cualquier tipo de web, con una flexibilidad increíble y sin tener que saber nada de código.

Pero, si quieres introducir código, también puedes hacerlo. La plantilla Divi permite utilizar temas hijo o child themes. Aunque, si solo quieres realizar modificaciones de CSS o añadir código de integración con Analytics, Facebook pixels, etc. Ni te hace falta un tema hijo.

 

La plantilla Divi dispone de ventanas para añadir código CSS como si de un tema hijo se tratara. Es decir, no se elimina al actualizar la plantilla.

Esta ventana la tienes en: “Divi > Opciones del tema > General > CSS Personalizado”

 

También dispone de ventanas para añadir el código de Analytics, Facebook pixel, y otros. Esto te ahorra tener que disponer de un tema hijo, ya que cumple la misma funcionalidad.

Estas ventanas están en: “Divi > Opciones del tema > Integración”

 

Además, todos los bloque del Divi builder, también permiten añadirles código CSS, pues disponen de ventanas para esto.

 

ventana de codigo css general en divi

Ventana de código general css de Divi

 

 

12.- Divi es 100% responsive y tiene un montón de opciones de optimización móvil

 

El elemento en WordPress que hace que una pág