Si usa el tema Divi o Divi Builder, trabajará regularmente con módulos Divi. Son los bloques de construcción dentro del tema que le permiten agregar elementos de página, diseñarlos, controlarlos y utilizarlos para crear hermosos sitios web.
El problema es que, cuando estás en medio del diseño o tratando de orientarte Divi Builder, es difícil ver exactamente lo que está disponible.
Esta guía completa de los módulos Divi describirá los 46 módulos principales contenidos en Divi. También destacará algunos módulos gratuitos y premium de desarrolladores externos.
Todo para que pueda aprovechar Divi al máximo para sus sitios web o los de sus clientes.
Este artículo es uno de nuestros muchos Reseñas de Divi en la CollectiveRay ha hecho para cubrir los diversos aspectos del tema y el constructor de Divi. Consulte también nuestra lista de ejemplos de uso del tema Divi para crear sitios web asombrosos.
¿Necesitas conseguir Divi a un precio económico? Actualmente tenemos un descuento exclusivo de Elegant Themes:
Obtén Divi con un 10 % de descuento solo en octubre de 2024
Si necesita más motivación para comprar Divi y experimentar con los muchos módulos Divi aquí, una actualización de rendimiento reciente lo hará.
Divi ha revolucionado recientemente su código para que sea más rápido y ligero que nunca.
Como parte de la mejora, Divi redujo el CSS en un 94% e introdujo CSS dinámico que solo carga lo necesario, introdujo estilos inteligentes para reducir los duplicados y reducir el tamaño de los archivos, eliminó el CSS que bloquea la representación, optimizó JavaScript y agregó un marco PHP dinámico para aumentar la eficiencia de las funciones.
Módulos oficiales de Divi
Actualmente hay 46 módulos Divi disponibles.
1. Acordeón
El Accordion agrega un módulo deslizante de acordeón a una página. ¿Sabes cuando ves un cuadro de contenido con un elemento seleccionable y se desliza hacia abajo para revelar más contenido? Eso es un acordeón.
Para Divi, un módulo de acordeón es un elemento seleccionable que contiene contenido. Seleccione la primera línea y se expande para revelar una breve explicación o descripción general. Seleccione la siguiente línea y la primera línea se cierra y la segunda se abre. Es una forma elegante de incluir mucho contenido en un espacio pequeño.
2. audio
El módulo de audio proporciona un reproductor de audio que puede colocar en cualquier lugar de una página. Puede vincular el reproductor a un archivo de audio alojado localmente para que se reproduzca cada vez que un usuario lo seleccione.
En Divi, el módulo de audio es un reproductor de audio simple, pero si conoces un poco de CSS, puedes diseñarlo tú mismo.
3. Contadores de barras
Los contadores de barras son las barras de progreso que ve en los sitios web de Internet. Si se hacen bien, son una medida inmediatamente comprensible de algo y pueden funcionar muy bien en la situación correcta.
Los contadores de barras Divi pueden colorearse, personalizarse para adaptarse a casi cualquier propósito, configurarse manualmente para niveles específicos y utilizarse de diversas formas.
4. Blog
El módulo Divi Blog le permite colocar publicaciones de blog en cualquier lugar de una página. No solo puede colocar estas publicaciones en cualquier lugar, también puede diseñarlas para que se adapten a su tema.
El módulo Divi Blog ofrece total libertad sobre dónde y cómo mostrar las publicaciones de su blog. Ya no está atado a donde WordPress o su tema cree que debería tenerlos con este módulo.
5. Anuncio
El módulo Blurb es un elemento de contenido completo con íconos y animaciones opcionales. Estos son útiles para las descripciones de productos o servicios en las páginas, ya que el aspecto de animación opcional puede agregar un poco de interés a una página.
El módulo Divi Blurb tiene una variedad de íconos, colores y opciones de animación dependiendo de cómo los use. Algunos están contenidos como valores predeterminados dentro del módulo, mientras que otros se pueden implementar con CSS.
6. Botón
El módulo Divi Button proporciona los medios para agregar botones en cualquier lugar de su sitio, en cualquier color y en una amplia gama de formas y tamaños. El diseño se puede controlar en el personalizador de temas y los enlaces y efectos se pueden configurar al mismo tiempo.
Son una extensión simple pero efectiva de las opciones de botones existentes dentro de Divi.
7. Llamado a la acción
Las llamadas a la acción juegan un papel vital en la conversión. Cuanto más convincentes pueda hacerlos, más efectivos podrán ser. Ahí es donde entra en juego este módulo.
El módulo Divi Call to Action proporciona una manera fácil de crear sus propias llamadas a la acción utilizando una combinación de cuadro de CTA, título, contenido y botón para ayudar a aumentar las conversiones en cualquier lugar de su sitio web.
8. Contador circular
El módulo Contador de círculos funciona de manera similar a los Contadores de barras, pero usa un gráfico de círculo completo en su lugar. En lugar de una simple barra, el módulo agrega un círculo completo con áreas cubiertas según el porcentaje que marque como completo.
Circle Counter funciona con el personalizador de temas y se puede personalizar completamente para adaptarse a cualquier tema.
9. código
El módulo Divi Code es un elemento de código personalizado que puede agregar a cualquier página. Acepta códigos cortos, CSS y HTML y puede ayudarlo a lograr una multitud de cosas dentro de una página.
Funcionan de manera similar a los elementos CSS personalizados dentro de los temas, solo que puede colocarlos en cualquier lugar y hacer que hagan casi cualquier cosa, ya que no están limitados por el tema.
10. Comentarios
El módulo de comentarios de Divi le permite agregar un comentario de su blog en cualquier lugar de la página. Por ejemplo, una recomendación o retroalimentación de un comentario de blog puede aparecer en la página de un producto.
En lugar de usar una imagen, puede incluir la cosa real y luego vincularla al comentario principal, que solo aumenta la autenticidad.
11. Formulario de contacto
El módulo Formulario de contacto es útil si no desea utilizar un complemento de formulario de contacto de terceros. Puede implementar un formulario en cualquier lugar de la página y darle estilo con el personalizador de temas.
Puede crear varios formularios, utilizar la validación de campo y la lógica condicional para hacer que cualquier formulario funcione.
12. Temporizador de cuenta regresiva
Los temporizadores de cuenta regresiva se utilizan a menudo para lanzamientos de productos, cuentas regresivas para ofertas especiales o ventas o para generar ansiedad por el tiempo en los lectores.
El módulo Countdown Timer ayuda con eso al permitirle diseñar un temporizador, agregar su propia cuenta regresiva y colocarlo en cualquier lugar de la página.
13. Divisor
Los divisores son formas pequeñas pero importantes de dividir las páginas web y darle a la audiencia un pequeño descanso antes de la siguiente sección. La mayoría de los temas web parecen incluirlos como una ocurrencia tardía, que es donde entra Divi.
El tema Divi tiene divisores, pero el módulo Divisor agrega más.
14. Aceptación de correo electrónico
Los formularios de suscripción de correo electrónico son esenciales para crear listas de correo electrónico y para aumentar la participación. El correo electrónico sigue siendo una herramienta de marketing increíblemente poderosa y el módulo de suscripción de correo electrónico tiene como objetivo ayudar con eso.
Puede crear formularios, suscripciones a boletines y elementos de generación de oportunidades de venta utilizando este módulo y luego vincularlo a su programa de correo electrónico para ayudarlo a administrarlo de manera eficiente.
15. Cartera filtrable
El módulo Portafolio filtrable es ideal para incluir una sección de portafolio atractiva dentro de una página. Puede diseñarlo, configurar sus propias categorías y filtros y crear una cartera completamente interactiva.
Algunos temas de Divi vienen con elementos de portafolio integrados y el Divi Builder los tiene también, pero este módulo agrega aún más.
16. galería
El módulo Divi Gallery hace lo mismo con las galerías. Le permite mostrar imágenes y videos en cualquier lugar de una página.
La galería se puede personalizar completamente e incluir cualquier imagen que desee. Puede establecer el estilo como una cuadrícula o un control deslizante y controlar muchos aspectos de su apariencia desde el personalizador.
17. Imagen
El módulo Divi Image agrega una variedad de opciones al mostrar imágenes en una página. Puede agregar efectos de caja de luz, implementar una carga diferida, agregar animaciones y hacer que sus imágenes realmente se destaquen.
Las imágenes tienen un efecto poderoso en el compromiso y el tiempo en la página, por lo que hacer justicia a sus imágenes tiene mucho sentido. Este módulo puede ayudar con eso.
18. Iniciar sesión
El módulo Divi Login agrega un formulario de inicio de sesión con carácter a las páginas que utilizan el estilo familiar de su tema. El módulo se puede diseñar para que se adapte a la página para que se sienta en el fondo o se destaque y se note.
La página de inicio de sesión registrará automáticamente al usuario en el sitio sin redirigir a la página de inicio de sesión predeterminada de WordPress.
19. Mapa
El módulo Divi Map toma el elemento de mapa estándar y le agrega opciones de personalización adicionales y una integración perfecta en una página. Como los mapas pueden desempeñar un papel fundamental en algunos sitios, ¡este es un complemento muy útil!
Map se integra con Google Maps para resaltar ubicaciones o agregar elementos interactivos. También se puede diseñar para que coincida con su página.
20. Contador de números
El módulo Contador de números es otro dispositivo gráfico para comunicarse con su audiencia. En lugar de utilizar gráficos de barras o círculos, este módulo utiliza números simples para comunicarse.
Funciona de la misma manera que los demás. Ajústelo en el personalizador de temas y colóquelo en cualquier lugar de la página.
21. Persona
El módulo Persona agrega personalidades a su sitio web. Ya sea que desee mostrar a los autores, proporcionar información sobre su equipo o algo más, el módulo Persona es la forma en que lo hace.
Puede agregar una imagen, una copia de la biografía, enlaces de redes sociales y publicarla en cualquier lugar de su sitio web. También hay opciones de personalización si necesita que se ajuste a un tema existente.
22. cartera
El módulo Portfolio se basa en las opciones proporcionadas por Gallery al permitirle exhibir su trabajo de varias maneras. Si eres un autónomo o una pequeña empresa y quieres mostrar tu trabajo, así es como.
El módulo puede trabajar con cuadrículas, diseños de ancho completo, ofrecer filtros de categorías y paginación. También hay algunas personalizaciones que puede aplicar si lo necesita.
23. Navegación posterior
La navegación de publicaciones toma las opciones predeterminadas de lectura siguiente o anterior y las hace más atractivas. Si bien WordPress y muchos temas tienen estas características, la opción Divi agrega aún más utilidad.
El módulo le permite incluir atractivos botones anterior y siguiente en la parte inferior de las publicaciones para permitir que los lectores se abran paso a través de su blog.
24. Deslizador de publicación
El módulo Post Slider es una excelente manera de mostrar las publicaciones de su blog. Utiliza un control deslizante para desplazarse por una serie definida de publicaciones de blog para mostrar su trabajo y atraer clics.
Si bien muchos otros complementos ofrecen enumerar o mostrar publicaciones de blog, un control deslizante puede incluir una imagen colorida y un extracto que seguramente atraerá. También es posible realizar pequeñas personalizaciones con este módulo.
25. Título de la publicación
El módulo Título de la publicación es una adición pequeña pero útil que utiliza el estilo Divi para los títulos de las publicaciones. Muestra el título y también tiene la opción de agregar una imagen destacada y cualquier metadato que desee mostrar también.
El módulo tiene algunas opciones de personalización que puede usar para ajustarlo a un tema, pero los valores predeterminados funcionan lo suficientemente bien para la mayoría de los usos.
26. Tablas de precios
Las tablas de precios son uno de esos elementos que muy pocos temas de WordPress parecen acertar. Divi no es uno de ellos. Las tablas de temas predeterminadas funcionan lo suficientemente bien, pero puede potenciarlas con el módulo Tablas de precios.
Este módulo agrega una tabla personalizable que puede caber en cualquier página. Puede cambiar colores, monedas, número de funciones y efectos según sea necesario.
27. Buscar
La función de búsqueda es otra de esas funciones que normalmente no es ideal. La función de búsqueda predeterminada de WordPress puede ser lenta y pasar por alto lo obvio. Algunos temas incluyen una función de búsqueda que a menudo decepciona. El módulo de búsqueda de Divi cambia todo eso.
Este es un cuadro de búsqueda simple que puede colocar en cualquier lugar y diseñar para adaptarse a su tema. Sencillo, rápido y muy eficaz.
28. tienda
El módulo Divi Shop es una excelente extensión de WooCommerce. Si ya tiene una tienda, este módulo le permite presentar productos en un elemento independiente en cualquier lugar de su sitio. Es una excelente oportunidad para realizar ventas cruzadas o adicionales.
El módulo le permite ordenar productos, diseñar el elemento y realizar algunas personalizaciones en la pantalla también.
29. Barra lateral
El módulo de la barra lateral es uno de los más útiles de todos los módulos de esta lista. Toma una barra lateral estándar y le brinda un control total de cómo se ve, qué presenta y cómo funciona.
El módulo le permite crear barras laterales personalizadas utilizando el personalizador de temas y colocarlas en todas las páginas, algunas páginas o páginas específicas.
30 Control deslizante
Los controles deslizantes pueden ser temas polémicos, pero no hay duda de que pueden ser efectivos si se diseñan correctamente. El módulo Divi Slider hace precisamente eso.
Es un control deslizante simple que puede colocar en cualquier lugar de la página y personalizar para adaptarse al diseño. También puede usar videos, imágenes, controlar el tipo de diapositiva y mucho más.
31. Seguir en las redes sociales
Los botones de seguimiento son otra característica de la página que pocos temas logran acertar. Son una característica tan simple, pero a menudo pueden parecer torpes, no funcionar correctamente o parecer que se han agregado con un complemento.
El módulo de seguimiento de redes sociales es diferente. Agrega algunos íconos atractivos con enlaces y le permite personalizarlos para que se adapten a sus necesidades.
32. fichas
Si el módulo Accordion no es lo que está buscando, quizás el módulo Tabs sí lo sea. Esta es otra forma de presentar una gran cantidad de texto sin sobrecargar la página.
Este complemento le permite crear un elemento de contenido con una serie de pestañas horizontales que pueden incluir copia, imágenes o video.
33. Testimonio
El módulo Testimonial agrega prueba social a una página. Todos sabemos lo importante que es la prueba social y este módulo le permite agregarla en cualquier lugar.
Tiene varias opciones de estilo para encajar el módulo en la página, puede presentar una imagen, algunas copias y enlaces según sus necesidades.
34. Texto
El módulo de texto le permite acceder al editor de texto de WordPress para agregar texto personalizado en cualquier lugar que desee. Es otro complemento menor pero útil que ofrece mucha más libertad en términos de colocación de texto en una página.
35. Alternar
El módulo Divi Toggle funciona de manera similar a Accordion, ya que alterna los cuadros de contenido para que se abran y se cierren. Donde Accordion usa un solo cuadro con múltiples diapositivas, Toggle usa cuadros individuales que cada uno se desliza individualmente.
Es una alternativa útil a Accordion, donde es posible que solo tenga un par de elementos que desee usar o desee que todos los elementos se abran a la vez.
36. Vídeo
Ya puede incrustar video en WordPress, pero debe usar la URL de iFrame completa en la vista de código. El módulo Divi Video guarda todo eso.
El módulo le permite incrustar un video cargado o vinculado en cualquier lugar de una página. También puede configurar una imagen personalizada en lugar del primer fotograma y personalizar el botón de reproducción.
37. Control deslizante de video
El módulo Video Slider toma video y agrega un control deslizante. Puede configurar un video principal y mostrar varios otros debajo y dejar que el control deslizante cambie entre ellos.
El módulo le permite personalizar la primera imagen y el botón de reproducción, usar videos cargados o vinculados y colocarlos en cualquier lugar de una página.
38. Código de ancho completo
El módulo Código de ancho completo funciona con temas Divi de ancho completo y le permite incrustar código en una página conservando el formato. Es un módulo simple pero efectivo que podría ser útil para sitios web instructivos, sitios web para desarrolladores o cualquier otra cosa.
39. Encabezado de ancho completo
El módulo Encabezado de ancho completo le permite crear un encabezado utilizando el ancho completo de la página. Sencillo pero muy eficaz. Puede incluir un título, un subtítulo y una copia junto con hasta dos botones.
40. Imagen de ancho completo
Fullwidth Image es la versión de ancho completo de Image, pero funciona perfectamente en diseños de ancho completo. También tiene las mismas opciones de visualización y personalización.
41. Mapa de ancho completo
El módulo Mapa de ancho completo funciona igual que Mapas pero para páginas de ancho completo. También obtiene la misma compatibilidad, opciones de personalización y facilidad de uso de Google Map que ese módulo.
42. Menú de ancho completo
El menú de ancho completo proporciona un menú personalizado que se extiende a lo largo de una página. Toma el menú estándar de WordPress y lo presenta en un elemento personalizado. A continuación, puede personalizar el menú de la forma habitual.
43. Cartera de ancho completo
Este módulo toma el módulo Portfolio estándar y lo hace funcionar con páginas de ancho completo. Tiene las mismas personalizaciones y características, pero funciona con este diseño.
44. Control deslizante de publicación de ancho completo
El control deslizante de publicación de ancho completo toma el módulo de control deslizante de publicación y lo hace funcionar en todo el ancho de una página. Tiene las mismas opciones de utilidad y personalización que ese módulo, lo que ofrece un control total sobre cómo se ve el usuario.
45. Título de la publicación de ancho completo
El título de la publicación de ancho completo es el mismo que el título de la publicación, pero funciona en todo el ancho. Es algo que imaginamos que usaría con moderación en una página, pero este módulo Divi se asegura de que pueda presentar títulos de ancho completo sin ningún tipo de codificación.
46. Control deslizante de ancho completo
El control deslizante de ancho completo toma el módulo Control deslizante y hace lo mismo. Hace que funcione perfectamente con un diseño de ancho completo. Este es un módulo más útil con control total sobre cómo se ven y se sienten las diapositivas.
Módulos Divi de WooCommerce
WooCommerce está muy bien servido por Divi. Algunos amplían las funciones existentes dentro de las páginas de WooCommerce, mientras que otros le permiten presentar algunos elementos de la tienda en páginas que no son de la tienda.
Vale la pena echarle un vistazo a cada uno si busca más flexibilidad en la forma en que diseña su tienda.
1. Módulo de migas de pan de Woo
Las migas de pan se utilizan con frecuencia en los sitios web para ayudar a la navegación. El módulo Woo Breadcrumb para Divi hace lo mismo para su tienda. Las opciones son simples e incluyen una página de curso, una página actual y un enlace y un separador opcionales.
Es un módulo simple pero efectivo que le permite colocar rutas de navegación descriptivas en la parte superior de la página para ayudar a sus usuarios a navegar.
2. Módulo de título Woo
Este módulo le permite tener un control total sobre los títulos de los productos. Puede cambiar el título, darle estilo y agregar enlaces, fondos y configurar según sea necesario. Se basa en la opción de título predeterminada agregando más herramientas de diseño y algunos espacios avanzados.
Además, cuando actualiza un título con este módulo, puede configurarlo para que se actualice automáticamente en cualquier lugar de su sitio.
3. Módulo de imagen Woo
El módulo de imagen de Woo ofrece un control total sobre las imágenes de los productos en su tienda. Las opciones predeterminadas son buenas, pero esto va más allá. Puede agregar varias imágenes, usar un control deslizante de miniaturas y agregar insignias o capas gráficas para ofertas u otra cosa.
El módulo tiene algunas opciones de personalización que puede usar para diseñar la imagen y luego le permite colocarla en cualquier lugar que desee en cualquier página.
4. Módulo de galería Woo
El módulo de galería de Woo se basa en el módulo de imágenes al incorporar imágenes en una galería de productos. Ofrece opciones similares al módulo Divi Gallery que mencionamos anteriormente y ofrece la oportunidad de diseñar la galería y colocarla en cualquier lugar, en cualquier página.
Las imágenes venden productos, por lo que esta es una excelente opción si la capacidad de imagen predeterminada de WooCommerce no ofrece lo que necesita.
5. Módulo Woo Price
El módulo de precios de Woo amplía los precios y le permite presentar productos y precios en cualquier página, no solo en las páginas de la tienda. Es un elemento personalizable que muestra el precio actual, el precio anterior, el precio de oferta y diseña esos precios para que se ajusten a su tema.
Si bien el complemento estándar de WooCommerce tiene muchas opciones de precios integradas, este módulo va un paso más allá e incluye la capacidad de promocionar en páginas que no son de productos.
6. Módulo Woo Add to Cart
El módulo Woo Add to Cart ofrece un control total sobre la compra real. Con él, puede diseñar el botón Cómpralo ahora de la forma que desee. Desde lo que dice hasta cómo se ve y separe el botón del diseño predeterminado de WooCommerce.
Si, por alguna razón, el precio predeterminado y el diseño de los botones no funcionan para su tema, este módulo ayuda con eso. Puede colocarlo en cualquier lugar, diseñarlo, mostrar una opción de cantidad e incluso una pantalla de stock restante.
7. Módulo de calificación Woo
Las calificaciones lo son todo en el comercio minorista. Los productos altamente calificados venden más que los productos no calificados por un margen significativo. El aumento de reseñas y pruebas sociales puede ser tuyo para controlar con el Módulo de calificación Woo.
Le permite colocar una calificación en una página, mostrar reseñas, mostrar el número y la calificación promedio de esas reseñas y enlaces a ellas. Todas las tiendas deben usar calificaciones y así es como se hace.
8. Módulo de acciones de Woo
El módulo de acciones de Woo hace exactamente lo que dice en la lata. Le permite mostrar un número de stock exacto en la pantalla de su producto. Esto puede ayudar a aumentar la urgencia, lo que a su vez aumenta la conversión.
Puede diseñar cada pantalla para ayudar con esa urgencia resaltando las existencias bajas en rojo o las existencias altas en verde, agregue el texto "Agotado" y colóquelo en cualquier lugar de la página.
9. Módulo Woo Meta
El Woo Meta Module se encarga de pequeños detalles como mostrar SKU, etiquetas, categorías y datos complementarios en una página. Si desea incluir la mayor cantidad de datos posible en las páginas, este módulo le ayudará.
No es un módulo de forma libre, pero puede tomar metadatos internos y mostrarlos para que todos los vean. Sin embargo, puedes diseñar el diseño.
10. Módulo de descripción de Woo
El módulo de descripción de Woo le permite mostrar una descripción de producto para un producto específico en cualquier lugar dentro de un tema Divi.
Es un módulo básico pero utilizable que le permite promocionar productos en páginas de blogs o páginas de servicios y diseñar completamente la apariencia de esa descripción.
11. Módulo de pestañas Woo
El módulo Woo Tabs funciona de manera similar al módulo Divi Tabs. Instala un elemento de contenido con pestañas en una página que puede llenar con cualquier contenido que desee.
Las pestañas pueden resultar útiles para combinar varias fuentes de información en una sola página. Por ejemplo, detalles del producto, especificaciones del producto, opciones de entrega y reseñas dentro de una sola caja con una pestaña para cada uno.
12. Módulo de información adicional de Woo
El módulo de información adicional de Woo es para aquellos que quieren más. ¿Tiene productos con opciones extra? Este es el módulo a utilizar. Por ejemplo, aquí se mostrarían tamaños o colores diferentes.
Puede diseñarlo como desee y colocarlo en una página utilizando el personalizador estándar. Otra adición simple pero valiosa.
13. Módulo de productos relacionados con Woo
El módulo de información adicional de Woo debería necesitar poca introducción. Historias thrive en ventas cruzadas y ventas adicionales y este módulo es cómo lo hace. Puedes agregar un Productos que le pueden interesar sección a una página y agregue información de apoyo según lo desee.
Toda tienda debería utilizar la venta cruzada y, si las opciones estándar de WooCommerce no son suficientes, este módulo funciona perfectamente con Divi.
14. Módulo Woo Upsell
El módulo Woo Upsell hace lo mismo. Puede agregar esto a las páginas de productos o a cualquier página de su sitio para vender productos.
Los productos que aparecen en este módulo serán los que haya configurado como opciones de venta adicional en WooCommerce. Este módulo simplemente le permite colocarlos en cualquier lugar de una página.
15. Módulo de notificación Woo Cart
El Módulo de aviso de Woo Cart es una opción de valor agregado que agrega un aviso simple a la página de un producto notificando al usuario que ha agregado un producto al carrito. Es una interacción simple pero útil que puede diferenciar una gran tienda de una buena.
Las notificaciones pueden ser estilos y con colores y fuentes. La configuración predeterminada usará el color de su tema, pero puede anularlo fácilmente si lo prefiere.
16. Módulo de revisiones de Woo
El módulo de reseñas de Woo le permite colocar reseñas de productos para sus artículos en cualquier página de su sitio. Es útil para las páginas de promoción o las publicaciones de blogs para agregar esa prueba social vital para ayudar a influir en una decisión de compra.
El módulo le permite establecer campos específicos, mostrar recuentos de comentarios e influir en el color y el estilo. Es un módulo útil si promociona en lugares distintos a las páginas de sus productos.
10 de los mejores módulos Divi gratuitos
Existe una amplia gama de módulos Divi gratuitos y no todos son iguales. Creemos que vale la pena probar estos 10 módulos Divi gratuitos.
1. Divi-Tweaker
Divi Tweaker es un módulo muy inteligente que ayuda a acelerar la Divi Builder y WooCommerce, elimina las cadenas de consulta que pueden ralentizar la carga de la página y pueden reemplazar los archivos de temas locales con archivos servidos desde un CDN.
El módulo también agrega algunas características de diseño adicionales para dispositivos móviles y de escritorio, algunas animaciones y efectos, transiciones de página, opciones de diseño y mucho más.
2. Módulo de texto avanzado Divi
Divi Advanced Text Module es un módulo pequeño pero muy útil que amplía las opciones de texto existentes y agrega algunas herramientas útiles. Si trabaja mucho con texto, como lo hacemos nosotros, la capacidad de cambiar el ancho y la altura del elemento de texto marca una gran diferencia cuando intenta perfeccionar el diseño de una página. Este módulo hace eso.
También agrega una herramienta de carga de imágenes que acorta los tiempos de diseño de una manera pequeña pero importante.
3. Divi Slimbuilder
Divi Slimbuilder es ideal si crea páginas de destino o páginas de sitio más largas con la Divi Builder. Cambia el diseño de la ventana principal para que los elementos de la página sean más delgados. También cambia la forma en que se muestran los títulos de las secciones para que todo el proceso de diseño sea mucho más fluido.
Es algo pequeño, pero significa que puede ver mucho más de lo que está sucediendo con la parte posterior del diseño sin tener que desplazarse hacia arriba y hacia abajo.
4. Extensión de tarjetas de artículos
La extensión Article Cards fue aparentemente el primer módulo Divi de Elegant Themes. Es tan útil que todavía existe y sigue siendo popular hoy en día. Es otro módulo modesto que agrega más opciones de estilo al módulo Divi Blog para cambiar la forma en que se muestran las tarjetas del blog.
Los cambios son modestos e incluyen efectos de sombra, colores de fondo, la capacidad de diseñar la cuadrícula del blog y cambiar la posición del título y meta del blog.
5. Paquete de expansión Divi Icon
El Divi Icon Expansion Pack hace exactamente lo que dice que hace. Agrega una serie de iconos dibujados a mano al Divi Builder para que lo utilice en su diseño. Hay cientos para elegir y puede personalizarlos todos para que se adapten a su tema.
Hay una versión gratuita y una premium de este módulo. La prima agrega más íconos y opciones de personalización.
6. Expandir Divi
Expand Divi es otro módulo Divi que se explica por sí mismo. Agrega una variedad de características a Divi, incluyendo Lightbox, una nueva sección de publicaciones relacionadas, nuevos cuadros de autor, nuevo elemento de publicaciones recientes, animador para la precarga de la página, herramientas de Font Awesome y mucho más.
El módulo no se ha actualizado por un tiempo, pero lo probamos en la última versión de WordPress y Divi y funcionó bien.
7. Traje de batalla para Divi
Además de tener un nombre genial, Battle Suit for Divi tiene mucho que ofrecer. Es un módulo de expansión que agrega más opciones de publicación, pie de página, galería e imagen, agrega Lightbox para imagen y video, agrega efectos de imagen, título de publicación y opciones meta y un montón de otras herramientas.
Teniendo en cuenta que se trata de un módulo gratuito, están sucediendo muchas cosas aquí y el módulo hace que todo sea accesible y muy fácil de usar.
8. Código corto Divi simple
Simple Divi Shortcode toma una herramienta muy poderosa en WordPress, códigos cortos y le permite colocarlos en cualquier lugar dentro de otros módulos. Es otra herramienta muy simple que puede marcar una gran diferencia si usa mucho códigos cortos en sus páginas.
Hay una versión gratuita y una premium de este complemento, pero la opción gratuita hace todo lo que probablemente necesite que haga.
9. Extras de Surbma Divi
Surbma Divi Extras agrega algunas características más a Divi que algunos de ustedes pueden encontrar útiles. Una cosa que lo hace destacar es la opción de logotipo de texto. Es posible que no necesite usarlo con frecuencia, pero cuando lo haga, esta herramienta por sí sola hace que valga la pena usar este módulo.
El módulo también agrega opciones de estilo, diseño, menú y pie de página y tiene una opción central vertical muy ordenada para copiar dentro de un módulo. ¡Esta es otra de esas herramientas que pueden ser un verdadero salvavidas!
10. Ventanas emergentes para Divi
Las ventanas emergentes para Divi son muy útiles si desea crear una sola ventana emergente pero no desea utilizar un complemento emergente dedicado para WordPress. Agrega una función en la que puede crear un elemento dentro del constructor y usarlo como una ventana emergente para marketing.
Es una solución simple para un problema grave e ideal para crear ventanas emergentes básicas dentro de una página sin tener que usar o pagar por un complemento de ventanas emergentes.
10 módulos Divi premium
Hay cientos de módulos Divi premium por ahí. Algunas valen la inversión y otras, no tanto. ¡Estos 10 definitivamente valen su dinero!
1. Módulo Divi Carousel 2.0
Divi Carousel Module 2.0 te ayuda a construir carruseles para casi cualquier cosa dentro de Divi. Pueden ser útiles para productos, servicios, testimonios y todo tipo de funciones promocionales. Este complemento hace que sucedan.
Te permite crear tantos carruseles como quieras y guardarlos como plantillas para usar en cualquier lugar. Tienes control total sobre cómo se ven y se sienten y todo el diseño se realiza dentro del constructor. Una excelente opción para pantallas.
2. Divi comercio electrónico
Divi Ecommerce trabaja con Divi y WooCommerce para crear un atajo en la construcción de una tienda en línea. Tiene un par de diseños para usar como plantillas, algunos elementos de página personalizados, contenido de demostración para que pueda comenzar a trabajar rápidamente y todo lo que necesita para construir una tienda básica.
El módulo incluso viene con barras laterales, uso compartido en redes sociales, opciones de diseño de productos, relojes de cuenta regresiva, módulos de productos de tendencia y muchas más opciones. Si no le gusta ninguna de las demostraciones de Divi, este podría ser el módulo para usted.
3. Divi Headers Pack
El proyecto Divi Headers Pack es enorme. Agrega más de 750 nuevos encabezados, algunos funcionales, algunos diseños nuevos. Se sumacanvas opciones de menú, encabezados receptivos, efectos de menú, animaciones de menú y un montón de herramientas para diseñar encabezados.
Este módulo tiene un enfoque muy limitado, pero vale la pena la inversión si tiene problemas para encontrar el encabezado perfecto. Si no lo encuentra aquí, ¡no lo encontrará en ningún lado!
4. Divi Supremo Pro
Divi Supreme Pro incluye una gama de módulos para mejorar su creatividad mientras usa Divi. Los módulos incluyen Gradient Text, Flipbox, Text Divider, Divi Typing, Supreme Button, Facebook Feed y muchos otros.
Hay mucho contenido dentro de este módulo, más de 40 módulos diferentes y 7 extensiones premium. ¡Teniendo en cuenta el precio, Divi Supreme Pro es una ganga!
5. Calendario de eventos Divi
Divi Events Calendar se puede utilizar para crear un sitio web completo de gestión de eventos o para agregar eventos a un sitio estándar. Utiliza el estándar Divi Builder para ayudar a crear eventos y tiene todo lo necesario para diseñarlos y exhibirlos.
Este módulo incluye un calendario, carrusel, feed de eventos y un módulo de página para ayudarlo a crear un sitio web de eventos completamente funcional o una sección de eventos y vale la pena echarle un vistazo.
6. Table Maker
A algunas personas les resultan fáciles las mesas, mientras que a otras les resultan frustrantes. Si estás en el último campo, el Table Maker el módulo es para ti. Le permite incrustar rápidamente una tabla en una página y darle estilo a todo.
Puede agregar imágenes, íconos, textos, botones e incluso contraer filas para dispositivos móviles. Es un complemento muy poderoso que simplifica la tarea de agregar y diseñar tablas a cualquier página y por eso vale la pena comprarlo.
7. Ventana emergente modal Divi
Si desea utilizar ventanas emergentes y las ventanas emergentes para Divi no son suficientes, Divi Modal Popup lo será. Es un módulo rico en funciones que simplifica la creación de ventanas emergentes a partir de la carga de la página, el retraso de tiempo y una variedad de otros activadores.
Más importante aún, puede incluir la gama completa de elementos de la página, colocar su ventana emergente en cualquier lugar, activarla con cualquier elemento de la página y agregar animaciones a la ventana emergente. Si desea aumentar el compromiso con las ventanas emergentes, esto es lo que usa.
8. Ayudante receptivo de Divi
Divi Responsive Helper es una herramienta que le ayuda a ver exactamente cómo se cargará su página en el móvil desde el Builder. También puede cambiar su apariencia, cómo se carga, cambiar el orden de los elementos y controlar completamente cómo se ve su sitio en los dispositivos móviles.
El módulo también incluye una herramienta de reparación automática muy inteligente que puede reequilibrar oraciones o párrafos para que se vean mejor. ¡Eso solo hace que valga la pena la compra!
9. Galería Divi Albañilería
Divi Masonry Gallery es ideal si desea más de una cartera o página de blog. Toma el diseño de mampostería estándar y agrega la capacidad de crear diferentes formas, cambiar columnas, agregar o eliminar espacio, agregar ventanas emergentes modales y configurar una galería específica para dispositivos móviles.
Si está diseñando un sitio web rico en imágenes y desea hacer más con la albañilería, este módulo le permite hacer todo desde la interfaz familiar de Builder.
10. Divi MadMenú
Divi MadMenu agrega más opciones a la sección del menú de Divi Builder. Si la configuración predeterminada no es suficiente, este módulo agrega más. También divide un encabezado en secciones separadas para una fácil personalización.
El módulo le permite controlar cómo funciona el menú en diferentes tamaños de pantalla, establecer diferentes diseños para diferentes dispositivos, agrega elementos Ajax para productos, agrega llamadas a acciones y otros elementos también. Es una forma poderosa de dominar los encabezados.
Si busca funciones adicionales, consulte nuestro artículo sobre Complementos Divi o visite nuestra revisión de DiviFlash.
Cómo desarrollar su propio módulo Divi personalizado
¿Quiere desarrollar su propio módulo Divi? ¿Tiene un problema que no está cubierto por un módulo existente?
Esta parte del artículo está aquí para ayudar.
Vamos a describir los conceptos básicos para desarrollar su propio módulo Divi personalizado. Necesitará conocimientos básicos de PHP para completar esta sección como Divi Builder define módulos como clases PHP.
Primero deberá crear una extensión Divi. Primero debe hacer esto porque su módulo Divi personalizado se implementa dentro de una extensión, tema o tema hijo y la extensión es la más fácil de crear.
Lea esta guía para crear su extensión. Una vez que haya terminado, vuelva aquí para crear su módulo.
Abra su extensión y localice incluye / módulos
Cree un directorio llamado SimpleHeader
Cree un archivo en SimpleHeader y llámelo SimpleHeader.php
Pegue lo siguiente en el archivo y guárdelo
class SIMP_SimpleHeader extiende ET_Builder_Module {
public $ slug = 'simp_simple_header';
public $ vb_support = 'encendido';
función pública init () {
$ this-> name = esc_html __ ('Encabezado simple', 'extensión simple-simple');
}
public function get_fields () {
matriz de retorno
'encabezado' => matriz (
'label' => esc_html __ ('Encabezado', 'extensión simple-simple'),
'type' => 'texto',
'option_category' => 'opción_básica',
'description' => esc_html __ ('Ingrese el encabezado deseado aquí.', 'simp-simple-extension'),
'toggle_slug' => 'contenido_principal',
),
'contenido' => matriz (
'label' => esc_html __ ('Contenido', 'extensión simple-simple'),
'type' => 'tiny_mce',
'option_category' => 'opción_básica',
'description' => esc_html __ ('El contenido ingresado aquí aparecerá debajo del texto del encabezado.', 'simp-simple-extension'),
'toggle_slug' => 'contenido_principal',
),
);
}
render de función pública ($ unprocessed_props, $ content = null, $ render_slug) {
}
}
nuevo SIMP_SimpleHeader;
Si conoce su PHP, verá un encabezado básico que puede ser utilizado por Divi Builder. Verá un encabezado, algo de contenido y antecedentes.
Ahora agregue algo de HTML al archivo para que pueda renderizarse.
Agregue lo siguiente después de 'render de función pública ($ unprocessed_props, $ content = null, $ render_slug) {'
return sprintf
' % 1 $ s
% 2 $ s ',
esc_html ($ this-> props ['header']),
$ this-> props ['contenido']
);
}
}
nuevo SIMP_SimpleHeader;
Su archivo completo debería verse así:
class SIMP_SimpleHeader extiende ET_Builder_Module {
public $ slug = 'simp_simple_header';
public $ vb_support = 'encendido';
función pública init () {
$ this-> name = esc_html __ ('Encabezado simple', 'extensión simple-simple');
}
public function get_fields () {
matriz de retorno
'encabezado' => matriz (
'label' => esc_html __ ('Encabezado', 'extensión simple-simple'),
'type' => 'texto',
'option_category' => 'opción_básica',
'description' => esc_html __ ('Ingrese el encabezado deseado aquí.', 'simp-simple-extension'),
'toggle_slug' => 'contenido_principal',
),
'contenido' => matriz (
'label' => esc_html __ ('Contenido', 'extensión simple-simple'),
'type' => 'tiny_mce',
'option_category' => 'opción_básica',
'description' => esc_html __ ('El contenido ingresado aquí aparecerá debajo del texto del encabezado.', 'simp-simple-extension'),
'toggle_slug' => 'contenido_principal',
),
);
}
render de función pública ($ unprocessed_props, $ content = null, $ render_slug) {
return sprintf
' % 1 $ s
% 2 $ s ',
esc_html ($ this-> props ['header']),
$ this-> props ['contenido']
);
}
}
nuevo SIMP_SimpleHeader;
Si es así, ahora es el momento de crear el React Clase de componente que permite Divi Builder renderizar el módulo.
Cree un archivo y llámelo SimpleHeader.jsx
Pega lo siguiente y guárdalo
// Dependencias externas
importar React, { Componente, Fragmento } de 'react';
// Dependencias internas
importar './style.css';
class SimpleHeader extiende Component {
babosa estática = 'simp_simple_header';
render () {
regreso (
{this.props.content ()}
</div>
);
}
}
exportar SimpleHeader predeterminado;
Navegue a includes / modules / index.js en su archivo de extensión
Agregue y guarde lo siguiente
// Dependencias internas
importar SimpleHeader desde './SimpleHeader/SimpleHeader';
exportar predeterminado [
Encabezado simple,
];
Agregue lo siguiente a SimpleHeader.jsx después
render () {
regreso (
y guárdelo.
{this.props.heading}
El archivo completo ahora debería verse así:
// Dependencias externas
importar React, { Componente, Fragmento } de 'react';
// Dependencias internas
importar './style.css';
class SimpleHeader extiende Component {
babosa estática = 'simp_simple_header';
render () {
regreso (
{this.props.heading}
{this.props.content ()}
);
}
}
exportar SimpleHeader predeterminado;
Abra el style.css de su módulo y agregue
.simp-simple-header-header {
margin-bottom: 20px;
}
Eso es todo para desarrollar su módulo Divi. ¡Todo lo que necesita hacer ahora es probarlo!
Abra la Divi Builder, localice su módulo de Encabezado simple e intente usarlo en una página. Si tiene el código correcto, verá una opción de encabezado simple.
Resumen de módulos Divi
Hemos incluido más de 70 módulos divi gratuitos y premium que cubren todo, desde la creación de ventanas emergentes hasta la adición de características de diseño adicionales para Divi Builder. Algunos son módulos de nicho que no usará con mucha frecuencia, pero algunos son esenciales para un uso eficiente y sin problemas de Divi Builder.
Creemos que representan una muestra representativa de lo que está disponible, lo que funciona y lo que tiene un precio razonable. ¿Qué piensas?
¿Utiliza alguno de estos módulos Divi? ¿Tiene algún módulo para sugerir?
Por favor, deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!
Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.
y muchos más ...