Cómo insertar módulos Divi o filas dentro de otros módulos Divi (sin un complemento)
Publicado: 2020-12-31Si ha sido usuario de Divi durante un tiempo, es posible que se le haya pasado por la mente la idea de insertar un Módulo Divi (o Fila) dentro de otro Módulo. En la mayoría de los casos, si sabe cómo usar Divi de manera competente, este tipo de cosas no son realmente necesarias. Los módulos Divi ya son elementos poderosos repletos de funciones y configuraciones de diseño integradas. Pero, a veces, sería bueno mejorar estas características diseñando dos módulos usando Divi y luego insertando uno en el otro. Un buen ejemplo de esto sería insertar un módulo (como un formulario de contacto) en un módulo de alternancia para que el formulario se muestre al hacer clic en la alternancia.
En este tutorial, vamos a compartir cómo insertar módulos Divi o filas en otro módulo Divi. Para hacer esto, es necesario agregar algunos pequeños fragmentos de JQuery. Una vez que el código está en su lugar, podemos usar Divi Builder para agregar las clases CSS apropiadas para apuntar a los elementos que queremos insertar / mover y el módulo en el que queremos colocarlos.
¡Empecemos!
Vistazo
Aquí hay un vistazo rápido a los ejemplos que crearemos en este tutorial.
Un formulario de contacto dentro de un módulo de alternancia
Un módulo de alternancia y un módulo de botones dentro de un módulo Blurb (columna derecha)
Una fila Divi dentro de un módulo de alternancia
Descarga el diseño GRATIS
Para poner sus manos en el diseño de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Suscríbete a nuestro canal de Youtube
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón Importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Cosas a tener en cuenta
Para este tutorial, el proceso de diseñar todos los módulos que desea usar en este proceso aún se puede realizar visualmente usando la configuración incorporada de Divi Builder, por lo que le dejaremos esa parte a usted. Nos centraremos más en cómo aplicar las clases CSS y HTML correctas a cada elemento Divi para insertar los módulos / filas dentro de otro módulo.
Tenga en cuenta que solo podremos ver el resultado final en una página en vivo, no durante la edición desde el Divi Builder visual. En otras palabras, podemos diseñar los módulos con Divi pero permanecerán separados en el constructor hasta que vea la versión en vivo de la página.
Solo puede insertar módulos o filas dentro de un módulo que tenga la capacidad de agregar texto / html.
Además, como explicaremos más adelante, existen ciertos límites en la cantidad de instancias (módulos o filas que se insertan en otro módulo) que puede tener dentro de una columna o sección. Al insertar módulos en otro módulo, está limitado a un módulo de "destino" (el módulo contendrá los módulos que desea insertar) por columna. Y, al insertar filas en otro módulo, está limitado a un módulo de "destino" por sección. Aunque esta es una limitación en un sentido, le da la opción de tener varias instancias en su página cuando sea necesario.
Parte 1: Cómo insertar módulos Divi en otro módulo
En la primera parte de este tutorial, le mostraremos cómo insertar módulos Divi en otro módulo. Primero, le mostraremos cómo agregar un módulo de contacto dentro de un módulo de alternancia. Luego, le mostraremos cómo agregar un módulo de alternancia y un módulo de botones dentro de un módulo de Blurb.
Ejemplo 1: Inserción de un módulo de formulario de contacto dentro de un módulo de alternancia
Agregar nueva fila
Para comenzar, agregue una nueva fila de una columna a la sección.
Agregar módulo de alternancia (el módulo de destino)
Dentro de la columna, agregue un módulo de alternancia.
Para este ejemplo, queremos insertar un módulo dentro de este módulo de alternancia al que podemos referirnos como nuestro módulo de destino. Técnicamente, el destino real estará dentro del contenido del cuerpo del módulo de alternancia (donde puede agregar texto / HTML). Para designar la ubicación de destino, necesitamos insertar un nuevo div con una clase CSS necesaria que servirá como la ubicación de destino para nuestro módulo portátil (el módulo que queremos insertar).
En la pestaña de contenido de la configuración de alternancia, agregue el siguiente HTML al cuerpo. Asegúrese de hacer clic en la pestaña Texto antes de insertar HTML.
<div class="divi-module-destination"></div>
Agregue el módulo de formulario de contacto (el módulo portátil)
A continuación, debemos agregar el módulo que queremos insertar en el módulo de alternancia. En este ejemplo, vamos a insertar un módulo de formulario de contrato en el cuerpo del módulo de alternancia. Es importante agregar el nuevo módulo "portátil" dentro de la misma columna que el módulo de destino.
Para hacer esto, agregue un nuevo módulo de formulario de contacto directamente debajo del módulo de alternancia.
Haga clic en la pestaña Avanzado debajo de la configuración del Formulario de contacto (de cualquier módulo que desee insertar) y agregue la siguiente Clase CSS:
- Clase CSS: divi-portable-module
Agregar clase de columna
A continuación, debemos agregar una clase personalizada a la columna que contiene ambos módulos. Abra la configuración de la columna y agregue la siguiente clase CSS:
- Clase CSS: columna principal
Agregar el código
El código necesario para que esto funcione es bastante corto y simple. Básicamente, queremos usar JQuery para encontrar cada módulo con la clase "divi-portable-module" con la columna principal (la que tiene la clase "parent-column") y agregar cada uno de esos módulos dentro del div con la clase " divi-module-destination ”.
El código también incluye un fragmento para insertar un módulo de botón en otro módulo y un fragmento para insertar filas Divi en un módulo.
Para agregar el código, agregue un nuevo módulo de código debajo del módulo de formulario de contacto.
Antes de pegar el código necesario, agregue las etiquetas de secuencia de comandos necesarias para incrustar JS en HTML dentro del cuadro Código:
Luego pegue el siguiente código entre las etiquetas del script :
(function ($) {
$(document).ready(function () {
// Option #1: Move Divi Module(s) into a Module
// Limit: One Instance per Column
// Use following code if you want to move
// a module inside another module. Each column with the
// class 'parent-column' will append any module(s)
// with the class 'divi-portable-module' to the div
// with the class 'divi-module-destination'.
// Only one instance of 'divi-module-destination' should
// be added per column.
$('.divi-portable-module').each(function () {
$(this).closest('.parent-column').find('.divi-module-destination').append($(this));
});
// Buttons: Insert Button Module(s) into a Module
// Adding a custom CSS class to a button module
// is applied to the 'a' tag which is a child element
// of the module wrapper. This code makes sure to append
// the entire button module wrapper (the parent element)
// as well. This functionality is the same as option #3 above.
// Siimply use the class 'divi-portable-button' on a button module
// instead of 'divi-portable-module'.
$('.divi-portable-button').parent().each(function () {
$(this).closest('.parent-column').find('.divi-module-destination').append($(this));
});
// Option #2: Move Divi Row(s) into a Module
// Limit: One Instance per Section
// Use the following code if you want to move
// a row inside a module on more than one section
// of a page. Each section with the
// class 'parent-section' will append any row(s)
// with the class 'divi-portable-row' to the div
// with the class 'divi-row-destination'.
// Only one instance of 'divi-row-destination' should
// be added per section.
$('.divi-portable-row').each(function () {
$(this).closest('.parent-section').find('.divi-row-destination').append($(this));
});
});
})(jQuery);
Comprensión de la funcionalidad
Dentro de Divi Builder en el backend, los módulos permanecerán separados. Sin embargo, si ve los resultados en la página en vivo en la interfaz, verá que el formulario de contacto se ha insertado en el módulo Alternar.
Si inspecciona el código en la página en vivo, puede ver que el módulo de formulario de contacto se ha insertado correctamente dentro del div con la clase "divi-module-destination".
Diseñar los módulos
Como mencionamos antes, los módulos permanecerán separados en el Divi Builder de backend. Sin embargo, se seguirán aplicando los estilos que agregue a cada uno. Así que siéntase libre de actualizar los estilos tanto del módulo de destino como del módulo portátil usando Divi Builder.
NOTA: En algunos casos, los estilos del módulo de destino (ahora un módulo principal) pueden aplicarse al módulo insertado. Si este es el caso, debería poder anular ese estilo actualizando la configuración del módulo insertado.
El resultado
Aquí está el resultado final al ver la página en vivo.
Ejemplo 2: Inserción de un módulo de alternancia dentro de un módulo Blurb
Para nuestro siguiente ejemplo, vamos a insertar un módulo de alternancia dentro de un módulo de Blurb. El proceso es el mismo que antes. El fragmento de código limita el uso de un módulo de destino por columna. En otras palabras, puede tener varios módulos portátiles con la clase "divi-portable-module" que se pueden agregar al módulo de destino, pero solo puede tener una instancia del div con la clase "divi-module-destination" por columna.
Para demostrar esto, repitamos el mismo proceso con otro grupo de módulos en otra columna de la misma fila.
Agregar nueva columna a la fila
Primero, agregue una nueva columna a la fila existente.
Agregar clase de columna
Dale a la nueva columna la siguiente clase CSS como hicimos en la primera columna:
- Clase CSS: columna principal
Agregar módulo Blurb (el módulo de destino)
Dentro de la nueva columna, agregue un módulo de propaganda que servirá como nuestro módulo de destino.
Dentro del cuerpo de la propaganda, pegue el siguiente HTML que incluye el mismo div con la clase "divi-module-destination" donde desea que se inserten los módulos portátiles (en este caso, debajo del texto del cuerpo simulado):
<div class="divi-module-destination"></div>
Agregar módulo de alternancia (módulo portátil)
Como queremos agregar un módulo de alternancia a la propaganda, cree un nuevo módulo de alternancia dentro de la misma columna que la propaganda.
Luego agregue la siguiente clase CSS al módulo Toggle para designarlo como el módulo que queremos mover / insertar en la propaganda:
- Clase CSS: divi-portable-module
Resultado
Ahora revise la página en vivo para ver el resultado. La palanca ahora residirá dentro del módulo de propaganda.
Ejemplo 3: Inserción de un módulo de botones dentro de un módulo Blurb
Para el siguiente ejemplo, vamos a insertar un módulo de botón en el mismo módulo de propaganda de nuestro ejemplo anterior. Normalmente, para cualquier otro módulo, repetiríamos el mismo proceso para agregar un nuevo módulo portátil a la propaganda. Pero, debido a que el módulo de botones está construido de manera un poco diferente en el backend, necesitamos agregar una clase diferente al módulo de botones.
Agregar módulo de botones (módulo portátil n. ° 2)
Para hacer esto, agregue un nuevo módulo de botones debajo del módulo de alternancia que ya se está insertando en la propaganda.
Luego, agregue la siguiente clase CSS al módulo de botones:
- Clase CSS: divi-portable-button
El resultado
Ahora mira el resultado en la página en vivo. El módulo Blurb ahora contiene el módulo de alternancia y el módulo de botones.
Y aquí está el fragmento de código correspondiente que se utiliza para insertar el módulo de botón dentro del módulo con el div "destino". La principal diferencia con este fragmento de código es que estamos apuntando al elemento padre (el div del envoltorio del botón detrás de escena) de la clase del botón “divi-portable-button”.
Parte 2: Cómo insertar filas Divi en un módulo
Si desea insertar una fila completa (o filas) dentro de un módulo, el proceso es muy similar a insertar un módulo en otro módulo. Necesitamos agregar la clase "parent-section" a la sección que contiene el módulo de destino y las filas portátiles que queremos insertar. Necesitamos agregar el div con la clase "divi-row-destination" al módulo de destino. Y necesitamos agregar la clase “divi-portable-row” a la (s) fila (s) que queremos insertar en el módulo de destino.
He aquí cómo hacerlo.
Agregar sección
Primero, agregue una nueva sección regular a la página.
En la pestaña avanzada de la configuración de la sección, agregue la siguiente clase CSS:
- Clase CSS: sección principal
Agregar fila para el módulo de destino
Agregue una nueva fila de una columna para contener el módulo de destino.
Agregar módulo de alternancia (el módulo de destino de fila)
Para este ejemplo, vamos a insertar una fila dentro de un módulo Toggle. Por lo tanto, agregue un nuevo módulo de alternancia a la fila.
Dado que el módulo de alternancia es nuestro módulo de destino, abra la configuración para alternar y agregue el siguiente HTML al contenido del cuerpo:
<div class="divi-row-destination"></div>
Crear fila portátil
Ahora que el módulo de destino está en su lugar, agregue una nueva fila debajo de la fila anterior. Esto servirá como la fila portátil que insertaremos en el módulo de alternancia.
Llenar fila con contenido
En este punto, puede completar la fila con cualquier contenido / módulo que desee utilizando Divi Builder. Tenga en cuenta que todo lo que esté dentro de la fila eventualmente se insertará en el módulo de alternancia, ya que reside dentro de la fila.
Agregar clase a la fila
Luego, abra la configuración de la fila y designela como una fila que desea insertar en el módulo de alternancia dándole la siguiente clase CSS:
- Clase CSS: divi-portable-row
Cómo funciona
Como recordatorio, la fila permanecerá separada del módulo al editar el diseño usando Divi Builder en el backend. Pero la funcionalidad está en su lugar para insertar la fila dentro del Módulo de alternancia.
El resultado
Para ver el resultado, consulte la página en vivo y abra el módulo de alternancia. Ahora contiene toda la fila.
Y aquí está el fragmento de código correspondiente que lo hace posible. Observe las clases correspondientes que se utilizan.
Insertar varias filas dentro del módulo
Siempre que mantenga una instancia del módulo de destino (es decir, el div con la clase "divi-row-destination") por sección, puede insertar varias filas en ese destino simplemente dándole la misma clase "divi-portable-row ”.
Por ejemplo, puede agregar otra fila con un módulo de galería encima de la fila con los elementos del menú creados anteriormente. Luego, asigne a la fila la misma clase "divi-portable-row"
Ambas filas con la clase "divi-portable-row" se insertarán en el módulo de alternancia.
Usando un complemento / código corto
Si está buscando un complemento que haga algo similar y brinde más flexibilidad u opciones, puede consultar el complemento Shortcodes for Divi de nuestro mercado que le permite incrustar cualquier diseño Divi en su página utilizando un shortcode. Una vez instalado, el complemento generará un shortcode incrustable para cada diseño que haya guardado en su biblioteca Divi.
Pensamientos finales
En la mayoría de los casos, no debería ser necesario insertar módulos o filas en otros módulos a menos que exista una necesidad especial. Por lo general, puede obtener el diseño / diseño que necesita sin tener que hacer este tipo de cosas. Sin embargo, para aquellos de ustedes que buscan una forma sencilla de hacer esto sin tener que recurrir a un complemento, es de esperar que esta solución sea útil.
Además, ¡piense en todas las aplicaciones posibles!
Espero tener noticias tuyas en los comentarios.
¡Salud!