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. Te dejo un ejemplo de mi página de servicios de diseño web en Benidorm.

 

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.

Crear una página web con Divi

Crear una página web con Divi

 

 

 

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:

Crear una página web con Divi

 

#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:

Crear una página web con Divi

 

#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:

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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:

  • Aweber
  • MailChimp
  • Campaign Monitor
  • Constant Contact
  • Mad Mimi
  • infusion Soft
  • iContact
  • GetResponse
  • MailPoet
  • FeedBlitz
  • Send in blue
  • OntraPort
  • Emma
  • Sales Force
  • Hubspot
  • Active Campaign

 

 

#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:

Crear una página web con Divi

Crear una página web con Divi

 

#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:

Crear una página web con Divi

 

#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:

Crear una página web con Divi

Crear una página web con Divi

 

#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:

Crear una página web con Divi

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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:

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

#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.

Crear una página web con Divi

#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.


Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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:

Crear una página web con Divi

 

#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:

Crear una página web con Divi

 

#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:

Crear una página web con Divi

 

#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:

Crear una página web con Divi

 

#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:

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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.

Crear una página web con Divi

 

#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í:

Crear una página web con Divi

 

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

Crear una página web con Divi

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:

Crear una página web con Divi

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

Crear una página web con Divi

Crear una página web con Divi

Crear una página web con Divi

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.

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

Crear una página web con Divi

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:

Crear una página web con Divi

 

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.

Crear una página web con Divi

  • 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.

Crear una página web con Divi

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!

 

Acepto la política de privacidad

Responsable: Máximo Camuñas Fernández.
Finalidad: darte acceso a la masterclass y enviarte mis novedades.
Legitimación: tu consentimiento de que quieres entrar en mi comunidad.
Destinatarios: tus datos serán guardados en Mailrelay, mi proveedor de email marketing y que también cumple con el RGPD.
Derechos: tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
Información adicional: Puedes consultar la información adicional y detallada sobre Protección de Datos en mi Política de Privacidad.

You have Successfully Subscribed!

Share This