Crear una página web con Divi: los 37 módulos que incluye

En este artículo te voy a hablar sobre mi maquetador de cabecera y te voy a mostrar cómo crear una página web con Divi.

Para ello, voy a hacer un repaso por sus 37 módulos. Te voy a explicar en qué consiste cada uno de ellos y cómo usarlos.

Además, he preparado varios vídeos para mostrarte cómo funciona Divi por dentro y enseñarte algunas de sus funcionalidades destacadas.

Las principales características de Divi

Divi es a la vez un tema y un maquetador visual para WordPress, es decir, está disponible en dos versiones diferentes.

Por una parte, es una plantilla premium de lo más completa (en mi opinión una de las mejores del mercado).

Por otra parte, está disponible en formato plugin, lo cual permite usar su constructor visual en cualquier sitio web creado con WordPress y funciona con cualquier plantilla.

Junto a otros editores visuales, Divi es una herramienta que permite crear páginas web con su sistema arrastrar y soltar (drag drop).

Veamos cuáles son las principales características y funcionalidades de Divi.

Sistema arrastrar – soltar

Como he comentado más arriba, Divi utiliza un sistema que permite arrastrar y soltar sus módulos, filas y columnas para dar forma a tus contenidos.

Además, el maquetador incorpora dos opciones diferentes para manejar sus herramientas:

1) Editor por defecto. Puedes verlo en el siguiente vídeo y consiste en mover sus filas, módulos y columnas.

2) Constructor visual. Permite maquetar páginas y ver su resultado en tiempo real.

Interfaz personalizable

Divi cuenta con una interfaz totalmente personalizable, pues permite ajustar todos los elementos de su constructor en función de tu pantalla y tipo de contenido.

Organización del contenido por secciones, filas y módulos

Con Divi puedes maquetar y organizar todo tu contenido de forma muy sencilla, gracias a su estructura basada en secciones, filas y columnas.

A continuación, te muestro un ejemplo del constructor por de Divi y su resultado final en la web.

Diseño / constructor responsive

Tanto las web que diseñes con Divi como su constructor visual se adaptan a todos los dispositivos.

Además, puedes ver en tiempo real cómo quedan tus diseños tanto en la versión de escritorio, como en tablet y móvil.

Diseñar una página web con Divi: 37 módulos

Mencionadas algunas de sus principales características y funcionalidades, ahora voy a hacer un repaso a los 37 módulos que puedes utilizar para crear una página web con Divi.

#1 Acordeón

El módulo acordeón te permite pulsar en un botón o texto determinado y que se expanda más información. Es un recurso muy visual que hace que se muestre información que previamente está oculta.

Un ejemplo:

#2 Anuncio

El módulo botón es una combinación simple y elegante de texto e imágenes.

Se trata de una forma muy visual de mostrar pequeñas cantidades de información incluyendo iconos.

Es habitual utilizar este módulo en filas para mostrar habilidades o características.

Por último, incluye opciones de color ilimitadas y una selección de más de 300 iconos.

Un par de ejemplos:

#3 Audio

El módulo de audio te permite compartir archivos de audio en tu página.

Es una herramienta muy intersante para entrevistas o podcast, por ejemplo.

Te dejo un ejemplo:

#4 Barra lateral

Divi te permite crear un número ilimitado de áreas listas para widgets a tu gusto.

Las barras laterales se pueden agregar a cualquier página, lo que te permite disponer de sidebars exclusivos para diferentes secciones en su sitio web.

Puedes ver mi sidebar en la parte derecha ?

#5 Blog

El módulo blog te permite añadir tus entradas donde quieras con dos disposiciones diferentes: ancho completo y rejilla (post de tres en tres, como puedes ver en este ejemplo).

En este módulo puedes personalizar todos los elementos que quieras o no mostrar:

• La imagen destacada.
• El título del post.
• Los metadatos: fecha, autor y categoría.
• El resumen a mostrar (excerpt).
• El botón “leer más”.
• Todos los estilos para cada uno de esos elementos: colores, tipografías, bordes, márgenes, etc.

#6 Botón

Este  módulo te permite agregar botones en cualquier lugar de tu página con facilidad.

Usando la configuración de diseño avanzada de Divi, hay innumerables estilos de botones diferentes que puedes crear.

Por supuesto, configurar a tu gusto todos los elementos de los botones: colores, forma, fondo, bordes, efectos, etc.

#7 Búsqueda

Con este módulo puedes insertar un formulario de búsqueda en cualquier parte de tu web (en lugar de limitarte a utilizar el widget de búsqueda de WordPress en su barra lateral y pie de página).

Puedes personalizar tanto el estilo de la barra como el del botón.

#8 Comentarios

El módulo Comentarios hace que sea fácil agregar dejar comentarios en cualquier lugar de tu página.

Esto significa que ya no se limita a que los comentarios se muestren en la parte inferior de tus posts o páginas, sino que puedes tener un control total sobre el orden de los elementos mediante Divi Builder.

También puedes usar la configuración de diseño avanzada de Divi para personalizar el formulario de contacto.

#9 Conmutador

El módulo conmutador es muy similar al de acordeón.

Este te permite pulsar en un botón o texto determinado y que se despliegue más información.

#10 Contador de números

Los contadores de números animados son una forma atractiva y visual de mostrar estadísticas, cifras o datos numéricos.

Las animaciones se activan mediante la carga diferida para que la navegación por la página sea muy atractiva.

#11 Contadores circulares

Muy similar al módulo anterior pero con un diseño circular de los contadores.

Además, puedes incluir o excluir el símbolo de porcentaje.

Su carga progresiva hace que sea muy atractivo mostrar determinados datos o cifras.

#12 Contadores de barra

Estos contadores soy muy similares a los anteriores, pero tienen forma de barra horizontal.

También tienen un carácter muy moderno y sirven para presentar datos o cifras de forma muy atractiva.

#13 Control deslizante de vídeo

Este módulo te permite añadir una colección con varios vídeos en un solo control deslizante, es decir, a modo de slide o carrusel.

Puedes personalizar algunos elementos como el color del botón de deslizar o el tamaño de los vídeos.

#14 Suscripción por email

El módulo de suscripción te permite hacer crecer su lista de Email Marketing de forma sencilla.

Este módulo actualmente admite integración con una gran cantidad de proveedores de email:

#15 Código

Con el módulo de código, puedes añadir HTML y CSS en cualquier parte de tu web. Es muy sencillo.

#16 Deslizador / slider de imágenes

Con este módulo puedes colocar sliders con varias imágenes en cualquier parte de tu web.

Pueden ser grandes, pequeños, de ancho fijo o ancho completo. Los controles deslizantes de Divi admiten fondos de paralaje, así como fondos de vídeo con ancho completo.

¡OJO! Cuidado dónde los colocas. Consumen una gran cantidad de recursos para ser cargados y a día de hoy el usuario de Internet siempre tiene prisa.

Te dejo un par de ejemplos diferentes:

#17 Formulario de contacto

Este módulo te permite insertar formularios de contacto en cualquier parte de tu web.

Puedes personalizar los campos en función de tus necesidades, así como su diseño.

Además, incluye opciones como desplegables o checkboxes, así como verificación antes de enviar para evitar posibles mensajes spam.

Aquí puedes ver un ejemplo de ambos tipos:

#18 Galería

El módulo Galería te permite insertar varias imágenes en modo rejilla o slide.

Te dejo un ejemplo de cada uno de los formatos:

#19 Imagen

Divi hace que sea muy sencillo insertar imágenes en cualquier lugar de tu web.

Todas las imágenes vienen con varios estilos de animación diferentes que hacen que navegar por tu página sea divertido y atractivo.

Además, puedes personalizar elementos como fondos, márgenes, bordes, etc, para hacer tus diseños más interesantes.

Un par de ejemplos:

#20 Iniciar sesión

Este módulo te permite insertar un cuadro de inicio de sesión en cualquira de tus páginas.

Es perfecto si tienes creado y configurado con Divi una academia, curso o membresía.

#21 Llamada a la acción

En el mundo de los negocios, el marketing e Internet en general se han vuelto fundamentales las llamadas a la acción o Call To Action (CTA) para captar la atención del usuario.

Este módulo te permite insertarlas donde quieras. Es perfecto para conseguir suscriptores, descargas o ventas.

Un ejemplo:

#22 Mapa

Este módulo te permite insertar en tu web mapas de Google Maps de forma sencilla.

Es perfecto para negocios y profesionales que quieran mostrar dónde pueden encontrar sus productos / servicios.

#23 Navegación por los mensajes

Con este módulo puedes colocar enlaces automáticos a tus posts anteriores y posteriores para alentar a los lectores a seguir navegando por tu sitio web.

Aparecerán así unos botones del tipo: <anterior / siguiente >

#24 Persona

Con el módulo Persona puedes mostrar a los miembros de un equipo o diferentes autores de un blog de forma muy visual.

Te perite incluir una imagen, nombre, puesto, descripción y enlaces a las principales redes sociales.

#25 Pestañas

Las pestañas son una excelente forma de mostrar la información y mejorar la experiencia del usuario en tu página.

Con Divi puedes crear pestañas que integran dentro de cualquier parte de tu web.

Aquí puedes ver un ejemplo donde las pestañas corresponden a las diferentes categorías de mi blog y un ejemplo de texto + imagen en cada una de ellas.

#26 Portfolios

El módulo Portfolio de Divi te permite mostrar tus diseños, creaciones o trabajos de forma muy ordenada.

Los proyectos pueden organizarse de dos formas: rejilla o ancho complejo.

Un ejemplo con dos de mis últimos trabajos de diseño web en WordPress.

#27 Portfolio filtrable

Es un módulo muy similar al anterior, pero en este caso permite filtrar tu cartera de proyectos.

De este modo, los usuarios pueden seleccionar cualquier categoría incluida en tu porfolio para ver un grupo específico de proyectos.

#28 Post Slider

Este módulo te permite insertar varias entradas en forma de carrusel.

Los posts se pueden deslizar de forma automática o con los controles deslizantes.

#29 Recomendación

Con el módulo Recomendación puedes incluir testimonios, por ejemplo, de cliente que hayan trabajado contigo.

Este tipo de opiniones son muy valiosas para generar confianza en páginas de venta de un producto / servicio.

Aquí puedes ver un ejemplo:

#30 Seguir en medios sociales

Este módulo te permite incluir los botones de tus redes sociales en cualquier parte de tu web.

Puedes personalizar sus estilos y mostrar hasta 14 redes sociales diferentes.

Aquí puedes ver varios ejemplos con las tres redes que más uso:

#31 Separador

El módulo divisor es una forma sencilla de agregar espacio en cualquier lugar de tu página.

Si alguno de los elementos de tu sitio web necesita espacio o ser dividido, puedes agregar un divisor para darle cierta separación.

Puedes configurar su color, anchura, altura y alineación.

Un ejemplo:

#32 Tabla de precios

Con este módulo es fácil crear tablas de precios para tus productos o servicios.

Puedes crear tablas con los elementos que necesites y controlar los precios y las características de cada una.

Incluso puedes presentar un plan particular para aumentar tus conversiones.

Un ejemplo muy sencillo:

#33 Temporizador de cuenta atrás

Este módulo te permite avisar a tus visitantes cuándo vas realizar un lanzamiento o la fecha de un evento, por ejemplo.

Simplemente tienes que oconfigurar la fecha y la hora para contar hacia hacia atrás

Un ejemplo:

#34 Texto

El módulo texto es uno de los más sencillos y a la vez utilizados.

Con él puedes incluir texto y disponer del editor de entradas de WordPress en cualquier parte de tu web.

#35 Tienda

El módulo tienda funciona si tienes instalado WooCommerce.

Con él puedes añadir tus productos en el lugar de tu web que necesites.

Te permite configurar el orden (productos recientes, destacados, en oferta, mejor valorados, etc.), así como su organización con diferentes tamaños y columnas.

Aquí puedes ver un ejemplo del único servicio que tengo en venta a través de WooCommerce: Tu web en 3 días.

#36 Título de publicación

Con este módulo puedes añadir el título y metadatos de tu último artículo en cualquier parte de tu web.

#37 Vídeo

El módulo Vídeo te permite insertar vídeos en la parte de tu sitio que lo necesites.

Estos pueden estar alojados en tu propio servidor o plataformas externas como YouTube o Vimeo.

Además, puedes configurar una imagen personalizada a modo de portada para que se muestre antes de ser reproducido.

Puedes ver un ejemplo con un vídeo de mi canal de YouTube aquí:

Cómo organizar el contenido en Divi

Ahora que ya sabes cuáles son los 37 módulos que tienes disponibles para crear una página web con Divi, te voy a explicar cómo puedes organizar el contenido.

A la hora de maquetar tus páginas con Divi, el constructor permite ordenar la información en función de diferentes tamaños y tipos de secciones.

Como he explicado más arriba, con Divi puedes organizar tus diseños por secciones, filas y módulos.

Están disponibles son siguientes tipos de secciones.

#1 Sección de anchura completa

Esta sección permite añadir al diseño cualquier elemento con ancho completo.

Los módulos que incluye la sección de anchura completa son los siguientes:

En este caso, no están disponibles los 37 módulos que he enumerado en el epígrafe anterior, sino una selección de los más utilizados:

• Slide de imágenes
• Código
• Slide de artículos
• Imagen
• Mapa
• Menú (es el único módulo que no aparece junto a los otros 37)
• Porfolio
• Título de página
• Título de artículo

#2 Sección estándar

La sección estándar de Divi es la que permite incluir todos los 37 módulos que he explicado más arriba.

En cuanto a la organización de esta sección, el contenido se puede ordenar por filas y cada una de ellas puede tener un formato diferente.

Estos son algunos de las filas que puedes utilizar a la hora de crear una página web con Divi.

Como puedes ver, las filas se dividen en columnas y las opciones que presenta Divi son múltiples.

#3 Sección especial

La sección especial incluye unos formatos extras para organizar el contenido de manera diferente.

Con una combinación de filas y columnas, permite insertar los siguientes tipos de diseño:

Secciones para crear una página web con Divi: 2 extras

Esas tres son las secciones principales que se puedes utilizar en Divi para crear una página web, pero no quería pasar por alto dos extras que considero muy interesantes:

• Módulos, filas y secciones globales. Divi permite crear elementos globales, es decir, que los puedes guardar en tu biblioteca para usarlos en diferentes páginas. Si haces algún cambio en ese elemento global, se sincroniza y modifica en todas las páginas donde lo estés usando.

• Añadir desde biblioteca. Otra funcionalidad muy interesante de Divi es que permite guardar módulos, filas y secciones en tu biblioteca y usarlos en cualquiera de tus páginas.

Hasta aquí este repaso por cada uno de los módulos de Divi, así como por sus diferentes formas de organización y maquetación del contenido.

¡Espero que te sea muy útil si vas a crear una página web con Divi!