¿Qué es Divi y cómo funciona? Mega guía de la mejor plantilla wordpress + [DESCUENTO]

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 del tema 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

 

 

 

 

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

El tema Divi para 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á«.

 

 

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

 

El tema 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 Divi y el tema 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.

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.

 

 

 

 

 

 

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 el tema 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.

 

 

 

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

 

 

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.

 

 

 

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.

 

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

 

El tema 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.

 

El tema 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.

 

 

 

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ágina web esté optimizada para dispositivos móviles es su plantilla.

Divi theme es una plantilla totalmente responsive. Es decir, se adapta a cualquier tipo de dispositivo (ordenador, tabletas y móviles). Hoy en día, esta es una característica fundamental.

 

Pero, Divi no se queda aquí. Divi cuenta con un montón de opciones de personalización específicas para optimización móvil como:

i.- Opciones de visualización: todas las secciones, filas y módulos disponen de opciones de visualización tipo escritorio, Tablet y móvil. Con esta herramienta podremos decidir que determinados elementos se muestren en determinados dispositivos y en otros no.

Por ejemplo, podríamos crear un slider de imágenes en la home, que se mostrara en ordenadores y tablets. Pero, que no se mostrara en móviles. Además, podríamos hacer que en el móvil, en su lugar, se mostrara una imagen fija.

Es decir, podríamos establecer si así lo quisiéramos un diseño de home para ordenador, otro totalmente diferente para tablet y otro también diferente para móviles.

 

ii.- Opciones de personalización móvil: en todos los tipos de secciones, módulos y en las filas disponemos de muchas opciones de personalización que podemos ajustar de manera diferente en cada tipo de dispositivo.

Por ejemplo, podríamos añadir tres iconos en una sección y que los iconos se mostraran con  tamaños diferentes, en caso de mostrarse en ordenador, tabletas o móviles.

 

iii.- Previsualización por dispositivo: el Divi para wordpress dispone de una herramienta de previsualización tanto en el builder como en las opciones de configuracion por defecto de diseño de la plantilla, que facilita el diseño en todos los tipos de dispositivos. Podemos alternar la vista previa de trabajo del constructor en tiempo real entre una vista previa para ordenador, tablet o móvil.

 

 

13.- Divi dispone de todas las opciones posibles de Reutilización de diseños y contenido para ahorrar mucho tiempo de trabajo.

 

Una vez que hayamos construido el contenido de una determinada página con Divi, podremos guardarlo en la biblioteca y reutilizarlo en cualquier otra página. Incluso podremos exportar el diseño y cargarlo en otra web diferente que también use la plantilla Divi.

 

Divi dispone de un montón de opciones para poder reutilizar y ahorrar tiempo:

 

i.- Guardar diseños completos y parciales en la biblioteca de Divi: Divi permite guardar páginas completas que hayamos creado en la biblioteca para poder reutilizar dichos diseños en otras páginas. Pero el page builder también permite guardar estructuras más pequeñas como secciones, filas o módulos para poder reutilizarlos en otras páginas

 

 

ii.- Cargar páginas ya creadas: El Divi builder permite, cuando estamos creando una página, sobre escribir su contenido con otra página que ya tengamos creada en WordPress.

 

ii.- Exportar diseños de contenido: Divi también permite exportar el diseño completo de una página que podremos cargar en otra página situada en otros sitio web diferente, pero que también utilice la plantilla Divi o el Divi Builder.

 

 

iii.- Guardar áreas de plantilla del theme builder en la biblioteca de Divi: Divi permite también guardar áreas de una plantilla o templete generado con el Theme builder. Como por ejemplo, guardar un área del header, del footer o del contenido, para luego poder reutilizarlo.

 

iv.- Exportar plantillas o templates con el theme builder: Divi también permite exportar e importar templates completos generados con el Theme builder. Es decir, exportar e importar diseños que incluyan headers o footer personalizados.

 

v.- Guardar opciones de configuración básicas: en caso de no utilizar el theme builder y usar las opciones de personalización básicas de la plantilla para header y footer, Divi también permite guardar estas opciones de diseño para importarlas en otro sitio web realizado con WordPress y la plantilla Divi.

 

 

14.- Integración y opciones de divi con Woocommerce

 

A partir de la versión 3.29 del tema Divi, publicada el 12 de septiembre de 2019, el Divi builder cuenta con una serie de nuevos módulos específicos para Woocommerce.

Estos módulos para Woocommerce, junto a la potencia del Theme Builder, nos van a permitir crear un diseño o plantilla totalmente personalizado para las fichas de producto de nuestra tienda online con Woocommerce.

Pero, no solo eso. Podríamos crear diferentes templates o plantillas para diferentes tipos de productos.

Incluso podríamos crear diseños para las páginas de categorías de la tienda.

 

 

14.1.- Módulos del Divi Builder para Woocommerce

 

Divi ya contaba desde hace mucho tiempo con el módulo “Tienda”. Este es un módulo que permite mostrar bloques de productos de Woocommerce en modo rejilla según diferentes filtros.

Pero, con la versión 3.29 de Divi se añaden los módulos:

 

Módulo Divi Woo BreadCrumb (módulo Woo migas de pan): Módulo para mostrar el breadcrumbs en la ficha de producto.

Módulo Divi Woo Cart Notice (Módulo notificación de añadir al carrito): módulo que muestra el bloque de información tras añadir un producto al carrito con Woocommerce.

Módulo Divi Woo Images (Módulo imagen Woocommerce): módulo que permite añadir la imagen de la ficha de producto.

Módulo Divi Woo Title (Módulo título producto Woocommerce): módulo del título de producto.

Módulo Divi Woo Raiting (Módulo valoraciones): módulo de valoraciones de producto.

Módulo Woo Price (Módulo precio de producto): módulo que muestra el precio en la ficha de producto.

Módulo Divi Woo Description (Módulo Descripción): módulo descripción corta y descripción larga.

Módulo Divi Woo Add to cart (Módulo añadir al carrito Woocommerce): módulo para mostrar el botón de añadir al carrito.

Módulo Divi Woo Meta (Módulo meta información): módulo meta información de la ficha de producto, como la categoría, etiquetas, etc.

Módulo Additional Info (Módulo información adicional): módulo de información adicional.

Módulo Divi Woo Tabs (Módulo pestañas de información): módulo pestañas de información de la ficha de producto.

Módulo Divi Woo Reviews (Módulo valoraciones 2): módulo de valoraciones de producto.

Módulo Divi Woo Gallery (Módulo galería de imágenes): módulo para mostrar las imágenes de la galería de la ficha de producto.

Módulo Divi Woo Stock (Módulo inventario o stock): módulo para mostrar el stock del producto.

Módulo Divi Woo Upsell (Módulo ventas cruzadas): módulo para mostrar los productos asociados.

Módulo Divi Woo Related product (Módulo posts relacionados): módulo para mostrar los productos relacionados.

 

 

 

DESCUENTO DIVI

 

 

14.2.- Plugins para ampliar las funcionalidades de Divi para Woocommerce

 

Otro aspecto importante es que Divi dispone de la mayor comunidad de desarrolladores de complementos comparado con el resto de plantillas del mercado. Esto, hace posible encontrar muchos complementos tipo plugin para el tema Divi.

Existen dos plugins muy interesantes en lo que se refiere a ampliar las funcionalidades de una tienda online realizada con Woocommerce y la plantilla Divi:

 

-> Divi BodyCommerce de Divi Engine

-> Woocommerce builder de Divi Kingdom

 

 

 

15.- Impresionante comunidad y plugins para Divi

 

Ya lo he comentado en el apartado anterior, Divi dispone de una inmensa comunidad de desarrolladores de plugins para ampliar determinadas funcionalidades de la plantilla.

Esta gran comunidad existe porque Divi es una plantilla que gusta, que se utiliza muy abundantemente y porque dispone de facilidades para los desarrolladores para poder trabajar con su API.

 

Divi Booster, es seguramente, uno de los plugins para ampliar las funcionalidades generales de Divi más conocidos en el mercado, pero existen muchos más.

En este post tienes todas las funcionalidades del plugin Divi booster.

 

 

16.- Cómo instalar Divi en WordPress

 

Instalar el tema Divi en WordPress es muy sencillo. Simplemente deberás seguir estos pasos:

a.- Acceder a tu cuente de Elegant Themes

b.- Descargar la platilla Divi en el escritorio de tu ordenador (no descomprimirla)

c.- Acceder a la administración de WordPress

d.- Ir a “Apariencia > Temas”

e.- Hacer clic en el botón “Añadir nuevo”

f.- Hacer clic en el botón “Subir tema”

g.- Hacer clic en “Examinar” y seleccionar la plantilla que tienes en el escritorio. A continuación, haz clic en “Instalar ahora”.

h.- Una vez instalada, tienes que activarla. Desde “Apariencia > temas” pon el puntero del ratón sobre Divi y haz clic en el botón “

 

 

 

17.- Cómo actualizar Divi

 

Para actualizar la plantilla Divi, debes haber adquirido alguno de los planes de Elegant Themes. Esto es debido a que tendrás que utilizar la clave API de que dispones en tu cuenta de Elegant Themes.

Para actualizar sigue el siguiente proceso:

a.- Ir a tu cuenta de Elegant Themes

b.- Haz clic en la pestaña “My Account”

c.- Haz clic en API KEYS. Más adelante usaremos los dos datos que ahí aparecen: Your user name y Your API Keys

d.- Accede al panel de administración de tu WordPress

e.- Ve a “Divi > Opciones del tema > Actualizaciones”

f.- Copia tu “user name” y tu “Api keys” desde tu cuenta de Elegant Themes y pégalos cada uno en su campo correspondiente.

g.- Haz clic en guardar cambios

h.- Ve a “Escritorio > Actualizaciones”, selecciona Divi y haz clic en “Actualizar temas”

DESCUENTO DIVI

 

 

18.- Ventajas de Divi para WordPress respecto a otras plantillas

 

Vamos a ver ahora una serie de ventajas del tema divi respecto a la mayoría de plantillas.

i.- Dispone del mejor page builder: el Divi builder es el page builder más intuitivo, flexible y potente del mercado

ii.- Módo Wireframe: el page builder dispone de un modo estructural denominado Wireframe que muy útil en determinadas acciones como desplazar elementos una larga distancia en la pantalla.

iii.- Page builder integrado: no tenemos que calentarnos la cabeza acerca de qué constructor vamos a usar, ya que Divi ya dispone su propio constructor. No puede haber una integración mejor.

iv.- Theme builder: la plantilla Divi es de las pocas que dispone de un Theme builder, lo que aporta una flexibilidad total a la hora de crear templates o plantillas completas para la web.

v.- Licencia: una ventaja de Divi con respecto a otras muchas plantillas es que cualquiera de sus planes permite que utilicemos la plantilla en todas las webs que queramos. NO hay límite.

vi.- Otros plugins y plantilla: con cualquiera de las dos licencias de Elegant Themes, viene incluida la plantilla Extra y los plugins Bloom y Monarch. A parte, de la plantilla Divi de WordPress.

vii.- Módulos Woocommerce: es de las pocas plantillas que incluye tantos módulos específicos para Woocommerce.

viii.- Packs diseños profesionales: la plantilla Divi incluye el mayor pack de diseños profesionales del mercado para reutilizar en tu web, y sin ningún cargo adicional.

ix.- Mejoras continuas: sin duda es la plantilla que más mejoras implementa cada año. El ritmo de implementación de mejoras y nuevas funcionalidades es el más alto del mercado.

x.- Contenido dinámico: es de las pocas plantillas del mercado que incluyen la opción de crear contenido dinámico.

 

 

19.- ¿Para quién está indicado comprar Divi?

 

Divi es una plantilla con muchas funcionalidades pero muy bien estructurada por niveles. Lo que permite que puedas sacarle más o menos partido, según tus necesidades.

a.- Crear una web rápida y profesional: Si quieres hacer algo rápido y sencillo, puedes buscar un pack de plantillas que te guste, cargarlas en tu web, y realizar unas pocas modificaciones, personalizar las opciones por defecto de header y footer, y web lista.

b.- Crear una web elaborada y muy personalizada: Si quieres hacer algo complejo, creando tu propio header y footer. Incluso páginas con diferentes headers o footers, crear tu propio template o plantilla para las fichas de producto, crear tu propia plantilla para las entradas de blog, etc. También puedes hacerlo.

 

Por lo tanto Divi te permite casi cualquier cosa. Tu decides hasta donde quieres llegar.

Entonces, Divi está recomendada tanto para personas no profesionales que quieren hacer una web rápidamente, con un diseño profesional y que no quieren complicarse mucho la vida, como para personas que se dedican al diseño web y quieren sacarle todo el pringue a la plantilla.

En cualquier caso, no está de más adquirir una formación para aprender rápidamente a manejar la plantilla.

Por si te interesa, aquí te dejo un enlace a mi plataforma de cursos online: cursotiendaonline.com donde dispones de cursos wordpress, cursos Divi, curso Elementor, cursos SEO, etc. Etc. Por solo 10€/mes podrás acceder a TODOS los cursos. Además, incluye SOPORTE.

DESCUENTO DIVI + CURSOS REGALO