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 para comprar divi 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.