Construya sus propios módulos con grupos de módulos Divi 5

¿Quieres crear módulos Divi personalizados sin tocar una línea de código? Con los nuevos grupos de módulos de Divi 5, ahora puede combinar múltiples elementos en un solo diseño reutilizable, todo desde el interior del Visual Builder. No JavaScript. Sin PHP. Simplemente arrastre, caiga y diseñe.

En esta guía rápida, le mostraremos cómo crear sus propios módulos utilizando los nuevos grupos de Divi. Verá específicamente cómo construir desde cero una propaganda, una tabla de precios, testimonios o cualquier otro tipo de módulo que pueda imaginar.

Nota: Divi 5 está listo para usarse en nuevos sitios web, pero aún no recomendamos convertir los sitios existentes en Divi 5. Verá algo de nosotros cuando confiamos en el proceso de actualización.

¿Cuáles son los nuevos grupos de módulos de Divi?

Los grupos, o grupos de módulos, son un nuevo elemento contenedor que combina múltiples módulos y/o filas en una sola unidad dentro de una columna. Esto tiene la ventaja de agrupar múltiples elementos más pequeños y permitirle mover todo el grupo donde lo necesite en la página.

Los grupos de módulos se pueden mover a lo largo de su página sin problemas y se volverán particularmente útiles cuando se liberan la función FlexBox y la función de bucle de bucle. Una vez que se lance The Loop Builder, podrá usar grupos para crear diseños de blog personalizados, menús de pies, galerías de imágenes y más. Entonces, ahora es útil, pero en unos pocos meses, será aún más impresionante de usar.

Las filas anidadas fueron otra característica Divi altamente solicitada que agregamos a Divi 5. Le permiten poner filas dentro de las filas al contenido de su corazón. Aunque el nombre "grupos de módulos" podría hacer que parezca que solo puedes agrupar módulos, lo contrario es cierto. De hecho, puede usar filas anidadas dentro de grupos, lo que abre la oportunidad de construir estructuras de diseño infinitamente anidadas y hacer que formen parte de un grupo reutilizable.

Cómo crear sus propios módulos Divi

Los grupos de módulos le permiten crear sus propios módulos dentro del editor. Puede agrupar módulos y filas anidadas juntas para crear arreglos complejos que se parezcan a algunos de nuestros módulos más grandes.

1. Crea tu propio módulo de propaganda

Nuestro módulo de propaganda incorporado

El módulo de la propaganda es un elemento básico en muchos diseños de divi. Es un módulo de referencia, pero cuando lo descompone, solo tiene algunas cosas que hacen que haga clic. Esos son:

Una imagen/icono, título/encabezado y contenido del cuerpo. Podemos crear un grupo de módulos y colocar estos módulos dentro de él: una imagen o icono, un encabezado y un módulo de texto. Juntos, esos tres módulos pueden reproducir el mismo contenido utilizable en el módulo de la propaganda.

Anatomía de un módulo de propaganda

Creando su propio grupo de módulos de propaganda

Aquí hay un ejemplo de un módulo de propaganda con un icono en el lado izquierdo y una replicación visualmente idéntica del módulo de propaganda usando A:

Grupo, fila interna, columna (1) con un módulo de icono y columna (2) con un módulo de encabezado y texto.

Se enciende la rayos X para ver el esqueleto de cada uno para ver sus similitudes, a pesar de que se construyen de manera diferente.

Lo único especial con este acuerdo es que la primera columna se establece en un ancho del 18%, y el segundo ocupa un ancho del 82% (las opciones de tamaño de columna son nuevas con la actualización de la función de filas anidadas).

Construir sus módulos como este tiene el beneficio adicional de brindarle más opciones de diseño de diseño para cada elemento individual. El módulo de la propaganda facilita la colocación de la imagen/icono, pero tiene sus compensaciones. Use el enfoque que le acerque más al diseño deseado.

2. Cree su propio módulo de tablas de precios

Nuestro módulo de mesa de precios incorporado

Algunos módulos Divi tienen mucho más en cuenta. Ese es el caso con el módulo de tabla de precios. Hay varios campos por tabla de precios como puede ver a continuación.

Anatomía de un módulo de tabla de precios

Creando su propio grupo de módulos de mesa de precios

Si recreamos el módulo de tabla de precios utilizando grupos de módulos y módulos individuales, obtendremos este resultado.

Observe los siete campos de texto/opción separados por tabla. Visualmente, cada tabla tiene tres piezas principales (encabezado, precio y detalles). Hay un par de formas de hacer esto dentro de un grupo, pero a continuación, utilizamos tres filas anidadas para cada una. A partir de ahí, utilizamos módulos de encabezado y texto dentro de cada sección para recrear la tabla de precios.

Lo bueno de usar el módulo de mesa de precios es que maneja la mayor parte del diseño, y obtienes una ventaja. Pero a veces eso significa que es más difícil trabajar cuando desea que se haga cosas específicas con él. Hacer un trabajo adicional para crear este diseño de tabla de precios con módulos más simples nos da más control de diseño y libertad.

3. Crea tu propio módulo testimonial

Nuestro módulo testimonial incorporado

Los módulos de testimonios de Divi son otro que tiene muchas cosas. Incluye hasta cuatro elementos de texto diferentes y un par de opciones de imagen/icono.

Creando su propio grupo de módulos testimoniales

El aspecto más lento de recrear el módulo testimonial es obtener el espacio correcto (especialmente en múltiples puntos de interrupción). Pero una vez que obtienes eso, las cosas son bastante sencillas. A lo largo del diseño del grupo, utilizamos un par de filas y los módulos de icono, imagen, encabezado y texto.

Lo bueno de recrear algunos de estos módulos es que te abras a más posibilidades. Algunos módulos más complicados tienen un diseño obstinado que solo puede manipular CSS extenso. Pero cuando lo construyes tú mismo, tienes más libertad para moverte por muchos de esos subelementos.

Al diseñar así, se abren más posibilidades de diseño. Por ejemplo, puede hacer lo que no es posible (al menos lo que no es fácil) con el módulo testimonial moviendo elementos a posiciones completamente diferentes dentro del diseño de grupo mayor. Si su diseño exige cierta flexibilidad, construir algunas de estas partes puede ayudarlo a lograr la precisión que busca.

También me encanta la idea de que puedas crear un módulo de testimonios personalizado, como el anterior, y usar el próximo bucle de bucle para extraer testimonios de un CPT. Le dará libertad de diseño + la capacidad de construir más rápido con datos y contenido estructurados.

Guarde su módulo personalizado como elemento global

Cuando su nuevo módulo se siente bien, guárdelo como un elemento global para usar en otros lugares de su sitio. Abra el menú Configuración del grupo. Haga clic en la opción " Guardar a la biblioteca ".

Aparecerá un modal donde pueda nombrar su módulo para un uso fácil más adelante. Alternar " Guardar como global " para almacenarlo en la biblioteca Divi. Cualquier cambio que realice posteriormente actualiza cada copia en su sitio.

Su elemento global ahora tendrá un color verde distintivo para ayudarlo a notar que es global.

Puede acceder a todos sus elementos globales guardados y otros elementos de la biblioteca en el tablero> Divi> Biblioteca Divi . Editar un elemento global aquí lo actualizará en todo el sitio. También puede editar elementos globales directamente en las páginas en las que se usan (y actualizará en todo el sitio).

¿Necesita el módulo en cada sitio que construya? Alternar " Guardar en Divi Cloud ". El módulo ahora está en su biblioteca de nubes, listo para cualquier proyecto en cualquier lugar. Los elementos de la biblioteca mantienen las cosas en un sitio, mientras que Divi Cloud viaja con usted de un sitio a otro. Use ambas para acelerar las compilaciones y marcar una mayor consistencia.

Obtener Divi Cloud

Construye algo nuevo hoy

Los grupos de módulos ponen nueva potencia en sus manos. Puede dar forma a los diseños originales y justo lo que necesita. Comience recreando un módulo de propaganda y vea cómo se ajusta el proceso. A medida que se acostumbra a usar Divi de esta manera, se dará cuenta de que crea diseños aún más intrincados porque puede usar los módulos estándar o crear los suyos propios.

Gran parte de lo que se cubrió anteriormente fue posible con Divi antes de que los grupos cayeran, pero facilitan las cosas. Especialmente cuando lanzamos Flex y The Loop Builder, los grupos se convertirán en un elemento básico de su diseño con Divi.

¿Listo para subir de nivel? Tome un sitio nuevo y pruebe su primer módulo personalizado hoy.