Módulos de Divi: la lista completa de 46 módulos y su funcionalidad

Actualizado el 31/05/2021 | Publicado el 18/03/2019 | 25 comentarios

4.275 palabras

17

A menudo hablamos de los módulos de Divi, pero deberíamos hablar de los módulos de Divi Builder.

De hecho, los módulos para construcción de un diseño de página están disponibles desde el Constructor Divi (Visual Builder) y no desde el tema Divi (no confundir el tema Divi con el Divi Builder).

Buenas noticias: esto significa que puedes usar el Constructor Divi con cualquier tema, no sólo con Divi.

Por ejemplo, podrías perfectamente utilizar el Divi Builder con el tema Twenty Nineteen de Automattic (el tema de WordPress de 2019), por ejemplo.

Más información sobre el Constructor Divi.

Tenga en cuenta: Desde Divi 3.29.x, el Divi Builder ha integrado 16 nuevos módulos que sólo encontrarás si utilizas WooCommerce. Con la llegada del WooCommerce Builder de DiviAdemás, se han añadido 16 nuevos módulos a los 46 ya presentes. Ahora puede construir sus fichas de producto con el Constructor Visual.

En este artículo, te propongo descubrir la lista completa de los 46 módulos Divi... Aquí está el programa:

Contenido

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

¿Necesitas dominar Divi? ¡Descubre mi formación que te guiará paso a paso en la comprensión y uso de Divi! Más información sobre la formación en Divi.

¿Qué es un módulo?

Un módulo es un pequeño bloque que se añade a una sección para construir el diseño de una página web (diseño). Así, un diseño es una sucesión de pequeños bloques uno tras otro y/o uno al lado del otro.

Cuando se construye una página con un constructor de páginas, se añaden secciones en las que se añaden módulos.

Los creadores de páginas revolucionaron WordPress: con ellos se podían conseguir diseños "complejos", ya que en aquel momento WordPress sólo ofrecía un editor clásico.

Antes de la WordPress versión 5En el pasado, sólo se podía añadir texto, imágenes, shortcodes y HTML a las páginas del CMS.

Gutenberg nos ha dado recientemente una mayor flexibilidad, pero aún no ha enterrado a los constructores de páginas anteriormente conocidos: Constructor Divi, Elementor o incluso Constructor de castores.

Los módulos son el punto fuerte de los creadores de páginas. Si estos creadores de páginas no ofrecen módulos eficaces o "de moda" , los usuarios pueden recurrir a soluciones de la competencia. Por lo tanto, la cuestión es crucial.

Esta es sin duda la razón por la que el Constructor Divi tiene 46 módulos de forma nativa, mientras que los otros constructores de páginas ofrecen complementos para compensar sus módulos limitados.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

Los módulos Divi difieren según la sección Divi utilizada

Como he dicho, los módulos se insertan en secciones. Divi ofrece 3 tipos de secciones:

  • las secciones "Normal"
  • las secciones de "Especialidad"
  • las secciones de "Pantalla completa".

Dependiendo de las secciones utilizadas, Divi le ofrecerá diferentes módulos.

Las secciones "Normal" y "Especializada " comparten los mismos módulos. Sin embargo, se ofrecen módulos específicos para las secciones de "pantalla completa".

Les modules de Divi diffèrent en fonction des sections
Los módulos de Divi se diferencian según las secciones

Para abreviar la historia:

  • Los módulos 1 a 37 pueden utilizarse en las secciones "Normal" y "Especialidad" (véase la lista en el índice)
  • Los módulos 38 a 46 sólo pueden utilizarse en las secciones "Pantalla completa" (véase la lista en el índice)

Los 46 módulos disponibles para construir sus páginas :

Sin más preámbulos, descubramos la lista de 46 módulos disponibles en el Constructor Divi...

Más información sobre el Constructor Divi.

Módulo 1: Acordeón (Accordion)

module 1 : accordéon

Un acordeón permite añadir contenido que sólo es visible si el usuario hace clic en él. De esta manera, se puede insertar una sucesión de información, haciendo el proceso de lectura más fluido para el usuario.

Cuando se abre un acordeón, se cierra el anterior. Esto es ideal para construir una página de FAQ (Preguntas Frecuentes) o para mejorar parte de su página de ventas.

El módulo Acordeón de Divi es totalmente personalizable: colores, iconos, títulos, esquinas redondeadas, etc.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 2: Llamada a la acción

module 2 : appel à l'action

¿Qué sería de un sitio web sin una CTA (llamada a la acción)? Una llamada a la acción debe hacer que el usuario quiera hacer clic en ella.

Un simple botón a menudo no es suficiente, por lo que el módulo de llamada a la acción de Divi le permitirá añadir un título + texto + botón. Puedes personalizar el fondo con un color atractivo o incluso con una imagen inspiradora.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 3: Audio (Audio)

module 3 : audio

El módulo de audio de Divi es sencillo y elegante. Será necesario o incluso esencial si su blog o sitio está relacionado con la música o si ofrece podcasts.

Podrás añadir una imagen de portada (cubierta del álbum), elegir el color de fondo y varios diseños.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 4: Barra lateral

module 4 : barre latérale

La barra lateral también se conoce como "Sidebar". Esta es una función nativa de WordPress.

Una barra lateral es una ubicación que suele estar en el lado del blog de un sitio de WordPress (en la página del blog y en cada entrada) y muestra tus Widgets (pestaña Apariencias > Widgets).

Sin embargo, la ubicación de la(s) barra(s) lateral(es) depende del tema.

Por ejemplo, el último tema de WordPress (Twenty Nineteen) no tiene barra lateral, así que si quieres añadir una, tendrás que codificarla en un tema infantil.

El Constructor Divi ofrece un módulo de barra lateral: esto significa que puedes añadir una barra lateral donde quieras. Puede colocarlo a la derecha, a la izquierda, en una página, etc.

Podrá personalizar su aspecto pero también cambiar su contenido cada vez que inserte este módulo (lo que no ocurre con una barra lateral clásica).

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo nº 5: Toggle

module 5 : bascule

El módulo Toggle de Divi es muy similar al módulo Módulo acordeón. Añade contenido en pestañas que el usuario puede abrir o cerrar.

La diferencia con el acordeón es que cuando se abre un acordeón, el anterior se cierra automáticamente, mientras que las pestañas Toggle permanecen abiertas a menos que el usuario las cierre.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 6: Blog (bitácora)

module 6 : blog

Mientras que WordPress permite definir una página como "la página para alojar las entradas del blog" (en la pestaña Configuración > Lectura), el módulo Blog de Divi le permitirá añadir una serie de entradas a las páginas de su elección.

Este módulo es muy interesante. Existen algunas opciones de personalización, como la elección de mostrar los elementos en una lista o en una cuadrícula, las categorías que se deben mostrar o excluir, los iconos, etc.

Consulte la documentación oficial | Volver al resumen

plus de ressources pour Divi

Módulo 7: Tienda

module 7 : boutique

El módulo Shop se comporta de la misma manera que el módulo Módulo del blog. En lugar de encontrar los productos de tu tienda sólo en la página de la tienda (página generada y/o sugerida por WooCommerce), podrás mostrar todos o parte de tus productos en cualquier página, ¡o incluso dentro de tus posts (si utilizas el Divi Builder)!

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo nº 8: Botón

module 8 : bouton

¿Qué sería de una página web sin un botón? ¿Sin una llamada a la acción? Indispensable en una página de ventas, por ejemplo, el módulo de botones de Divi le permitirá elegir el color de fondo, el color y el grosor del borde, añadir una animación e incluso un icono. Por no hablar de la forma de las esquinas: cuadradas, redondeadas o completamente redondas.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 9: Mapa

module 9 : carte

El módulo de mapas de Divi le permite mostrar un mapa de Google personalizado. A veces no necesitarás este módulo y podrás simplemente incrustar un mapa usando su URL en unmódulo de texto... ¡pruébalo!

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo nº 10: Búsqueda

module 10 : chercher

El botón de búsqueda ofrece la funcionalidad de "búsqueda en el sitio". Al añadir este módulo a su diseño, permitirá a sus visitantes buscar su contenido por palabra clave. Además, puede excluir los contenidos inapropiados.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 11: Código (Code)

module 11 : code

A veces tendrá que añadir trozos de código dentro de su contenido. Puede ser HTML, CSS o incluso Javascript. Es el tipo de código que se suele insertar en la cabecera de una página web.

El módulo Code de Divi le permitirá hacer esto fácilmente. Esto puede ser una gran ventaja cuando se quiere diseños de importación/exportación listo para usar con algunas funciones integradas.

Tenga en cuenta que, por razones de seguridad, sólo un usuario con estatus de administrador puede añadir este tipo de código.

Además, para que este código funcione, tendrás que crearlo en un editor de texto y minificarlo (todo en la misma línea / sin saltos de línea).

Para saber más, descubra cómo utilizar el módulo Code.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo nº 12: Comentarios

module 12 : commentaires

El módulo de comentarios de Divi le permite insertar una función de comentarios en cualquier lugar de su página. Esto evita que su lector tenga que desplazarse hasta el final del artículo para dejarle un mensaje. ¿Es una buena idea? Veremos...

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #13: Contadores de barras

module 13 : compteur barre

Este módulo permite mostrar barras de progreso con una animación "lazy-load". Esto es ideal para mostrar las habilidades como una barra de porcentaje. Por ejemplo: WordPress 90%, Javascript 80%, HTML 95%, CSS 95%, etc. El renderizado se optimizará si sus porcentajes son diferentes.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 14: Contador de círculos

module 14 : compteur cercle

Esta es otra forma de mostrar tus habilidades. En lugar de mostrarlos como una barra, este módulo de Divi le permite mostrarlos como un círculo, con el porcentaje en el centro. Una animación de "carga perezosa" permite rellenar el círculo en el sentido de las agujas del reloj.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 15: Contador de números

module 15 : compteur nombre

Esta forma alternativa de mostrar sus habilidades le permitirá mostrar también cualquier otro número. No es necesario utilizar porcentajes.

Por ejemplo, una agencia web podría utilizarlo para mostrar el número de proyectos realizados, el número de clientes, el número de cafés-bus, etc.

Consulte la documentación oficial | Volver al resumen

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 16: Temporizador de cuenta atrás

module 16 : compteur à rebours

El módulo de cuenta atrás proporciona un temporizador visual con cuenta atrás.

Es ideal para crear expectación en una página "próximamente", en el lanzamiento de un producto o para anunciar la próxima apertura de su sitio.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #17: Post Slider

module 17 : curseur de défilement de post

Es una especie de slider que desplaza algunos de sus artículos. Puede establecer el tipo de artículo que se mostrará, la animación automática, la velocidad, etc.

También puede añadir opciones como el efecto de paralaje que da un bonito efecto al deslizador.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #18: Slider de vídeo

module 18 : curseur de défilement de vidéo

El módulo Video Slider permite mostrar un slider de varios vídeos. Al igual que con el deslizador de puestosPodrás ajustar ciertos parámetros para personalizar su visualización.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 19: Presentación de diapositivas

module 19 : diapo

El módulo Slide es simplemente un "Slider". Puedes colocarlo donde quieras y, sobre todo, puedes mezclar imágenes con vídeos.

También puedes activar la opción de parallax que siempre da un efecto muy bonito. En cada diapositiva, puede añadir texto y un botón de llamada a la acción.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #20: Email Optin

module 20 : email optin

El módulo Email Optin ofrece la misma funcionalidad que Bloomel plugin ElegantTheme incluido en la licencia.

Bloom le permite colocar un formulario de registro en lugares estratégicos de su sitio, mientras que el módulo Email Optin le permite colocar este formulario en cualquier lugar de su página.

Es fácil de usar y es compatible con más de 20 proveedores como MailChimp, Aweber, FeedBurner, MailPoet y muchos otros.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 21: Formulario de contacto

module 21 : formulaire de contact

Este módulo le ofrece la posibilidad de insertar un formulario de contacto de forma fácil y rápida. No tendrá cientos de posibilidades, pero sí podrá crear campos personalizados.

El Módulo de formulario de contacto es suficiente si sólo quieres que te contacten. La ventaja es que se adapta perfectamente a su página (desde el punto de vista del diseño).

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 22: Galería

module 22 : galerie

Como su nombre indica, el módulo Galería de Divi permite insertar varias imágenes presentadas en forma de galería.

Podrás elegir varias opciones para mejorar el aspecto de la pantalla: añadir un pie de foto, una sombra, hacer las esquinas redondeadas e incluso cambiar el icono hover.

Cuando el usuario haga clic en una foto, ésta se abrirá en un lightbox.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 23: Imagen (Image)

module 23 : image

El módulo de imagen de Divi se parece al módulo de galería. Ofrece los mismos tipos de personalización, salvo que sólo puede insertar una imagen en lugar de varias.

También podrá añadir una animación y un enlace (URL) al destino de la imagen.

Consulte la documentación oficial | Volver al resumen

obtenir Divi - get Divi

Módulo 24: Navegación en el puesto

module 24 : navigation dans les posts

Este módulo permite insertar enlaces de navegación totalmente personalizables.

Por ejemplo, tendrá un botón "anterior" y "siguiente " que permitirá al usuario navegar libremente entre determinadas páginas de categorías o blogs.

Podrá configurar este módulo según varios criterios basados en el contenido o gracias a parámetros avanzados.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 25: Pestañas

module 25 : onglets

El módulo de pestañas de Divi le permite mostrar el contenido como pestañas separadas por divisores. Un poco como en una carpeta.

Puedes nombrar cada pestaña con un título y añadir texto, imágenes, vídeos, shortcodes y mucho más.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 26: Persona

module 26 : personne

El módulo Persona de Divi permite añadir una especie de "tarjeta de identidad" para presentar a una persona.

Es ideal para publicar su perfil o presentar a los miembros de su equipo. Puedes añadir una foto, un texto y enlaces a las redes sociales.

La presentación es bastante básica. Si desea añada su biografía al final de sus artículos, lea este tutorial en su lugar.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 27: Cartera

module 27 : portefeuille

El módulo Divi Portfolio sólo es útil si utiliza Los "proyectos" de Divi.

Los proyectos se comportan como entradas de blog pero en forma de cartera. Esto es ideal si quiere mostrar sus diversos logros.

Así, este módulo mostrará tus últimos logros donde quieras, dentro de tu página. Tendrá acceso a varios ajustes que le permitirán elegir ciertas categorías, mostrar en modo de cuadrícula o pantalla completa, etc.

Si desea cambiar el tamaño de las imágenes de su cartera, lea este artículo detallado.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #28: Cartera Filtrable

module 28 : portefeuille filtrable

El módulo de cartera filtrable ofrece la misma funcionalidad que el módulo Módulo Classic Portfolio Le permite mostrar su proyectos realizados (cartera).

La diferencia es que usted podrá mostrar sus proyectos de manera categorizada en pestañas.

Es ideal si eres diseñador gráfico y tienes mucho trabajo que mostrar, como logotipos, envases, folletos, tarjetas de visita, etc.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 29: Resumen (Blurb)

module 29 : Résumé

El módulo de resumen de Divi (Blurb) es un módulo que se puede utilizar en muchos casos.

Permite añadir tanto texto como imágenes o iconos. Si coloca estos módulos en una línea dividida en 3, 4 o 5 columnas, puede alinear varios iconos/textos para presentar sus servicios o resúmenes que apunten a otras páginas de su sitio (gracias a la inserción de un enlace en este módulo).

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 30: Inicio de sesión

module 30 : Se Connecter

El módulo de inicio de sesión de Divi le permite insertar un formulario de inicio de sesión en cualquier lugar de su página.

Esto es ideal si su sitio tiene una sección a la que sólo pueden acceder los usuarios miembros o ciertos usuarios restringidos.

Consulte la documentación oficial | Volver al resumen

tutoriel débutant pour apprendre à utiliser Divi

Módulo 31: Seguimiento en las redes sociales

module 31 : Suivez-nous sur les Réseaux Sociaux

El módulo de seguimiento de redes sociales le permite añadir hasta 14 iconos de redes sociales.

Lo único que tienes que hacer es configurarlas con los enlaces de tus redes sociales (página de Facebook, cuenta de Twitter, etc.) para que tus usuarios se conviertan en fieles seguidores.

Este módulo puede ser insertado en cualquier parte de su página usando el Constructor Divi.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo nº 32: Divisor

module 32 : Séparateur

El módulo Divisor le permite insertar un espacio entre dos secciones.

Este espacio puede adoptar la forma de una línea, cuyo color y grosor puedes elegir. También puedes decidir si quieres utilizar este espacio en horizontal o en vertical.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 33: Tabla de impresión

module 33 : Tableaux des Tarifs

El módulo de tabla de precios de Divi le permite mostrar sus precios de una manera única y profesional.

Esto es ideal si ofrece sus servicios en 3 paquetes diferentes. Puede destacar una oferta en relación con las demás y comparar los servicios incluidos o excluidos gracias a una visualización diferente.

Podrá elegir la ubicación del icono de la moneda, añadir un sufijo para ofrecer una tarifa de suscripción y un botón de llamada a la acción.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 34: Texto

module 34 : Texte

El módulo de texto Divi es sin duda el módulo más utilizado en un sitio.

Al añadirlo en cualquier parte de tu página, obtendrás un editor de texto similar al que ofrecía WordPress antes de la versión Gutenberg.

Además, tendrás muchas opciones de configuración.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 35: Título de la entrada

module 35 : Titre du poste

El módulo Título del artículo permite mostrar el título del artículo/página en el que se inserta.

Hay opciones para mostrar la imagen destacada (encima o debajo del título), para añadir metas personalizadas, etc. Así, su página tendrá un diseño único.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #36: Testimonio

module 36 : Témoignage

Con el módulo de testimonios de Divi, puede mostrar fácilmente las opiniones de sus clientes de forma original.

Puede añadir el nombre del cliente, el cargo en la empresa, el nombre de la empresa, un enlace a un sitio web, una foto de perfil, etc.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 37: Vídeo

module 37 : Vidéo

El módulo de vídeo de Divi es muy interesante porque permite añadir algo más que un vídeo.

Puede insertar un vídeo disponible en su biblioteca (esto no es realmente recomendable, ya que podría hacer que su sitio web sea más engorroso) o un vídeo alojado en YouTube, por ejemplo (gracias a su enlace).

Además, puedes mostrar una imagen personalizada que cubra tu vídeo mientras esperas a que el usuario haga clic para iniciar la reproducción.

Consulte la documentación oficial | Volver al resumen

plus d'astuces pour Divi

Módulo 38: Mapa de ancho total

module 38 : Carte plein écran

Con el módulo Fullwith Map, podrá insertar un mapa de Google en una sección de pantalla completa (sección púrpura). Al igual que con el módulo de tarjetas deberá estar en posesión de un API Key Google Developerpara poder utilizar este módulo.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo 39: Código de ancho completo

module 39 : Code en pleine largeur

El módulo Fullwidth Code funciona de la misma manera que el módulo Módulo de código pero sólo puede insertarse en una sección Ancho total (sección púrpura).

Este módulo es ideal para desarrolladores o para integrar código de terceros, añadir Javascript, HTML, CSS, etc.

Consulte la documentación oficial | Volver al resumen

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #40: Slider de ancho completo para publicaciones

module 40 : Curseur de défilement des Posts pleine largeur

El módulo Full-Width Post Slider le permite añadir de forma sencilla un slider de sus últimos artículos.

Este módulo sólo puede insertarse en una sección de ancho completo (púrpura) y tiene la misma función que el módulo Scrolling post slider clásico.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #41: Slider de ancho completo

module 41 : Curseur défilement Vidéo pleine largeur

El módulo Scroll Slider de ancho completo sólo cabe en una sección de ancho completo (sección púrpura) y ofrece la misma funcionalidad que el módulo módulo Tobogán clásico.

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #42: Cabecera de ancho completo

module 42 : Entête Plein Écran

El módulo Fullwith Header es el módulo ideal para crear un "Header Hero". Puede añadir una imagen grande, un texto, un logotipo y uno o dos botones de llamada a la acción.

Este módulo sólo puede insertarse en una sección de ancho completo(púrpura).

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #43: Imagen de ancho completo

module 43 : Image en Pleine Largeur

El módulo Full Width Image funciona como el Módulo de imagen clásico. Sólo podrá utilizarlo dentro de una sección de pantalla completa (sección púrpura).

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #44: Menú de ancho completo

module 44 : menu en pleine largeur

Esta es una característica interesante. El módulo de Menú de Pantalla Completa es un módulo que sólo está disponible para las secciones de Pantalla Completa (sección púrpura). Es decir, no hay una "versión clásica " disponible en otros tipos de secciones.

Este módulo le permitirá añadir una nueva navegación a sus páginas, diferente de su navegación principal.

Mejor aún, podría utilizar este módulo para eliminar la navegación principal de su sitio y moverlo más abajo en su página.

Por ejemplo, podría añadir primero un sección "héroe de cabecera". seguido del menú (en lugar de al revés).

Este módulo le permitirá construir diseños originales y fuera de lo común.

De hecho, eso es lo que me propongo hacer en este tutorial: sustituir el menú principal por un menú desplazable.

Consulte la documentación oficial | Volver al resumen

Essayer Divi

Módulo #45: Portafolio de ancho completo

module 45 : Portefeuille Plein Écran

El módulo de cartera a pantalla completa ofrece la misma funcionalidad que el módulo Módulo de cartera clásico. Podrá insertar sus carteras en una sección a pantalla completa (sección púrpura).

Consulte la documentación oficial | Volver al resumen

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Módulo #46: Título de la entrada de ancho completo

module 46 : Titre du poste en pleine largeur

El módulo Full Screen Post Title funciona como el módulo Título del puesto módulo. Sin embargo, al igual que los otros módulos de "pantalla completa", sólo podrá utilizarlo en una sección de pantalla completa (sección púrpura).

Consulte la documentación oficial | Volver al resumen

plus de ressources pour Divi

Alternativas a los módulos de Divi

Acabamos de ver todos los módulos que ofrece el Divi Builder. La lista es impresionante... Sin embargo, puede no ser suficiente dependiendo de las necesidades de su proyecto.

Entonces, ¿cómo se enriquecen los módulos de Divi? Hay muchas soluciones:

  • Añade un plugin/addon para Divi: lee mi artículo que enumera los plugins gratuitos para Divi. Seguro que hay características que buscas y es gratis...
  • Añadir 49 nuevos módulos con Divi Supreme Pro.
  • Utilice un plugin de ShortCode: el shortcodes le permiten añadir contenido muy fácilmente, simplemente copiando y pegando un código que se parece a este [esto es-mi-código corto].
  • ¡Mejor aún! Utilice el Funciones ocultas de Divi para Gutenberg ¡! Son shortcodes preconfigurados que puedes hacer aparecer en cualquier lugar que desees.
  • Desarrollar (o hacer desarrollar) sus propios módulos según sus necesidades: ElegantTheme ha abierto recientemente la posibilidad de desarrollar sus propios módulos. Por supuesto, esto no es para todo el mundo porque hay que dominar muchas tecnologías y lenguajes web para hacerlo, pero un desarrollador experimentado debería ser capaz de hacerlo con facilidad. Especialmente cuando se ve la calidad de la documentación proporcionada por ElegantThemes.
  • Navegue por el mercados dedicados a Divi : hay bastantes marketplaces que ofrecen consejos, tutoriales, layouts, plugins gratuitos o de pago... Los más conocidos son AspenGrove, DiviCake, DiviBooster, DiviSpace, DiviDen, DiviExtended y supongo que todavía hay otros tantos...

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.

La liste ultime des 46 modules de Divi
Les modules du Divi Builder
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

25 Commentaires

  1. Berga

    Bonjour,
    Je lis « jusqu’à 14 icônes de réseaux sociaux ». Or dans une autre page, il me semble que vous expliquez comment créer une page enfant pour ajouter une icône de reseau sociale absente de la page parent. Est-ce un ancien article du coup? Le builder permet-il de le faire depuis peu?
    Excusez ces questions de novice, je démarre tout juste et je suis à la lettre votre article « Options du Thème Divi : focus sur l’onglet Général »

  2. Lycia Diaz

    Bonsoir Berga !
    Effectivement cela peut porter à confusion. Le Divi Builder permet d’insérer un module proposant jusqu’à 14 icônes de réseaux sociaux. Toutefois, le Divi Builder n’est pas présent en pied de page (Footer), c’est pourquoi nous devons créer un thème enfant. Donc pour répondre à votre question : ce n’est pas une erreur et on est bien sur deux fonctionnalités différentes. Peut-être que ce nouvel article poura aussi vous aider : https://astucesdivi.com/fonctionnement-divi/
    A bientôt !

  3. Sébastien

    Bonnes explications merci

  4. Lycia Diaz

    Merci Sébastien !

  5. JAvier

    Very interesting Sébastien. However I want to use the post navigation module but I can not find it this module in the last version of Divi. Could you help me, please? Thank you.

  6. Lycia Diaz

    Hola Javier !
    My name is Lycia, no Sébastien (LOL) 😉
    I just checked and the « post navigation module » is still here. I don’t understand why you don’t find it ?!
    Where do you want to insert it ?

  7. Sandra

    Bonjour Lycia,
    Ma demande concerne le module blog. Je suis en train de créer un site et je rencontre un problème que je n’ai jamais eu sur d’autres sites que j’ai réalisés (même version WordPress et Divi et mêmes réglages du module blog).
    Lors de la création d’un article, je choisis une image dans « image mise en avant ». Celle-ci s’affiche bien dans la vignette de l’article sur la page blog mais s’insère aussi automatiquement en grand sur ma page article en dessous du titre et est verrouillée.
    Avez-vous déjà rencontré ce problème ? Est-ce qu’il y aurait un code CSS pour contrer ce problème ?
    Un grand merci pour votre aide.

  8. Lycia Diaz

    Salut Sandra,
    Je ne pense pas que ce soit un bug. C’est un réglage de Divi proposé dans ses options. La réponse est dans cet article au chapitre 1 – pastille n°3 = https://astucesdivi.com/onglet-disposition/
    Si tu désactives l’option « vignette », tu n’auras plus l’image de mise en avant en dessous de ton titre.
    À bientôt
    Lycia

  9. Sandra

    Mais oui, bien sûr ! J’avais complètement oublié ce réglage dans l’option du thème… Un grand merci pour ton aide Lycia ! Bonne journée.

  10. Lycia Diaz

    Super 😉

  11. modestypants

    Bonjour
    Je souhaite utiliser le module Email Option pour que le visiteur inscrit son email afin de reçevoir un email unique de ma part avec un code promo par exemple
    Est ce possible avec module car j’ai renseigné l’API Key , j’ai crée une campagne avec mailchimp mais cela ne fonctionne pas
    PS: mon site n’est pas terminé, j’ai enlevé la maintenance pour que vous puissiez voir
    merciii

  12. Lycia Diaz

    Salut. C’est quoi qui fonctionne pas ? La newsletter ? Le module e-mail optin est sensé récupérer l’email du visiteur et le stocker chez ton provideur. Est-ce que ça ça fonctionne ? Si non, tu dois vérifier tes paramètres je suppose…

  13. Delphine Mauro

    Bonjour, je travaille sur DIVI et je cherche à le rendre responsive. J’ai été dans le customizer et aussi dans les modules mais rien n’y fait mes boutons qui sont dans le header ne s’affichent ni sur tablette ni sur mobile…sans compter les superpositions des écritures ! merci par avance pour votre aide

  14. Sandra

    Bonjour Lycia,
    En ce qui concerne le module Personne, je voudrais que les icônes des réseaux sociaux s’ouvrent dans une autre fenêtre. J’ai vu que c’était possible de le faire pour les icônes dans le footer, mais je n’ai pas trouvé la solution pour ce module.
    Merci par avance pour ton aide.

  15. Lycia Diaz

    Salut Sandra, je ne me suis jamais penchée sur ce module, ce doit être possible, je vais regarder dans les prochains jours

  16. Sandra

    Merci Lycia. Bonne journée.

  17. tarek

    Bonjour,

    Tout d’abord merci pour cet excellent blog et meilleurs voeux pour 2021.

    Je commence à utiliser Divi en vue de la création d’un site de présentation de noms de domaine à vendre.

    J’ai commencé par créer une page avec des rangées de 5 vignettes elles-même créées avec le module « résumé ».

    Jusque là tout va bien puisque j’arrive à indiquer le nom de domaine, le prix et un lien de « contact » dans chaque vignette…

    Sauf que j’aimerais que ces vignettes soient classées par ordre alphabétique sur toute la page y compris lorsque j’en crée une nouvelle à la fin…Car de plus s’y j’insère une vignette au milieu de la page le décalage ne s’opère pas…

    A terme j’aurai plus de 200 vignettes, voire plus sur la page.

    Pour donner une idée la présentation pourrait ressembler à celle du site brandbucket .com dans la catégorie all names par exemple. Sauf que eux ne classent pas par ordre alphabétique et que je n’ai pas forcément besoin que mes vignettes renvoient vers une fiche produit…

    Auriez-vous une idée svp ? peut-être n’ai-je pas utilisé le bon module dès le départ au lieu d’un qui permettrait ce fameux classement…ou peut être faut-il toucher au code ?

    Merci

  18. Lycia Diaz

    Salut Tarek,
    Je ne sais pas trop quoi te conseiller. Car tu pourrais en effet utiliser les Projets de Divi par exemple mais chaque projet ouvrirait sa propre page et surtout, il n’y a pas de moyen de les filtrer par ordre alphobétique, idem pour le module blog. Avec WooCommerce, peut-être que tu pourrais créer tes fiches mais rest aussi à vérifier si on peut les afficher par ordre alphabétique, je ne suis pas sûre. Du coup, j’ai pas trop d’idée. Peut-être un plugin spécialisé ou à faire développer ?
    Désolée 😉

  19. tarek

    Bonjour Lycia,
    Merci pour ton retour. En effet c’est un peu le tirage de cheveux là 🙂
    Du coup je pense me diriger vers Woocommerce car à priori je pourrai trier par ordre alphabétique les vignettes en fonction du « nom du produit ».
    En cliquant dessus le lien redirigera vers la fiche produit dans laquelle j’insérerai un formulaire de contact…
    Du coup dans la page qui regroupera mes produits (page catalogue) aurais-tu une idée de comment ne pas afficher l’image du produit mais juste le nom et le prix…
    Au passage si tu as une idée pour faire disparaitre le bouton « ajouter au panier » dans la fiche produit je suis preneur…
    Je suppose qu’il doit y avoir un code du type « display none » mais là je suis perdu…
    Encore merci…
    Tarek

  20. Lycia Diaz

    Salut Tarek, pour supprimer le bouton d’ajout au panier, je te conseille de construire ta fiche produit avec le thème builder et d’omettre sciemment le module « Woo Add To Cart » : https://astucesdivi.com/modele-fiche-produit-woocommerce/

  21. Sandra

    Bonjour Lycia,
    Je voudrais insérer dans le module accordéon une image. A priori ce module ne le permet pas. Y aurait-il une astuce pour le faire ? Merci pour ton aide.

  22. Gaston Huot

    Quelle magnifique page d’explication en français.

    Que d’informations sur ce site. Merci

    Gaston

    [1 coquille dans le titre du module 33: « Module #33 : Tableau des Tarifs (Princing Table) »]

  23. Lycia Diaz

    Merci Gaston ! Et merci pour la coquille !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.