Si ha sido usuario de Divi durante un tiempo, es posible que se le haya pasado por la cabeza la idea de insertar un Módulo Divi (o Fila) dentro de otro Módulo. En la mayoría de los casos, si sabes cómo usar Divi con soltura, este tipo de cosas no son realmente necesarias. Los módulos Divi ya son elementos poderosos repletos de características 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 fragmentos pequeños de JQuery. Una vez que el código está en su lugar, podemos usar Divi Builder para agregar las clases de CSS apropiadas para apuntar a los elementos que queremos insertar/mover y el módulo en el que queremos colocarlos.
¡Empecemos!
Aquí hay un vistazo rápido a los ejemplos que construiremos en este tutorial.
Un formulario de contacto dentro de un módulo de alternar
Un módulo de alternar y un módulo de botones dentro de un módulo de 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás 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 utilizando la configuración integrada 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 mientras editamos 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 veas 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 que 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 esto es una limitación en cierto 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
Para 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 alternar 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 Alternar (donde puede agregar texto/HTML). Para designar la ubicación de destino, debemos insertar un nuevo div con una clase CSS necesaria que servirá como 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 alternar, agregue el siguiente código HTML al cuerpo. Asegúrese de hacer clic en la pestaña Texto antes de insertar HTML.
|
01
|
<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 en la configuración del formulario de contacto (de cualquier módulo que desee insertar) y agregue la siguiente clase CSS:
- Clase CSS: módulo portátil divi
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
Agrega 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-módulo-destino”.
El código también incluye un fragmento para insertar un módulo de botones 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 script necesarias para incrustar JS en HTML dentro del cuadro Código:
Luego pegue el siguiente código entre las etiquetas del script :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
(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); |
Comprender 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».
Estilo de los módulos
Como mencionamos antes, los módulos permanecerán separados en el backend Divi Builder. Sin embargo, los estilos que agregue a cada uno se seguirán aplicando. Así que siéntete 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 de 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-módulo-portátil» que se pueden agregar al módulo de destino, pero solo puede tener una instancia del div con la clase «divi-módulo-destino « 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
Asigne a la nueva columna la siguiente Clase CSS como hicimos en la primera columna:
- Clase CSS: columna principal
Agregar módulo de Blurb (el módulo de destino)
Dentro de la nueva columna, agregue un módulo publicitario 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):
|
01
|
<div class="divi-module-destination"></div> |
Agregar módulo de alternancia (módulo portátil)
Dado que 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: módulo portátil divi
Resultado
Ahora revisa la página en vivo para ver el resultado. La palanca ahora residirá dentro del módulo de propaganda.
Para el siguiente ejemplo, vamos a insertar un módulo de botón en el mismo módulo de publicidad 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 publicidad. 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 botón debajo del módulo de alternancia que ya se está insertando en la propaganda.
Luego, agregue la siguiente clase CSS al módulo del botón:
- Clase CSS: botón portátil divi
El resultado
Ahora mira el resultado en la página en vivo. El módulo de Blurb ahora contiene el módulo de alternancia y el módulo de botones.
Y aquí está el fragmento de código correspondiente utilizado para insertar el módulo de botón dentro del módulo con el div de «destino». La principal diferencia con este fragmento de código es que estamos apuntando al elemento principal (el div contenedor del botón detrás de escena) de la clase de botón «divi-portable-button».
Parte 2: Cómo insertar filas Divi en un módulo
Si desea insertar una fila (o filas) completa dentro de un módulo, el proceso es muy similar a insertar un módulo en otro módulo. Necesitamos agregar la clase «sección principal» 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.
Aquí está 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:
|
01
|
<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 llenar 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 desígnela como una fila que desea insertar en el Módulo de alternancia dándole la siguiente clase CSS:
- Clase CSS: divi-portable-fila
Cómo funciona
Como recordatorio, la fila permanecerá separada del módulo cuando se edite el diseño con 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-fila-destino») por sección, puede insertar varias filas en ese destino simplemente dándole la misma clase «divi-fila-portable». ”.
Por ejemplo, podría agregar otra fila con un módulo de galería encima de la fila con los elementos del menú creados anteriormente. Luego dale 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 Códigos cortos para Divi de nuestro mercado que le permite incrustar cualquier diseño Divi en su página usando un código corto. Una vez instalado, el complemento generará un código abreviado 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 manera simple de hacer esto sin tener que recurrir a un complemento, con suerte, esta solución será útil.
Además, ¡piensa en todas las aplicaciones posibles!
Espero escuchar de usted en los comentarios.
¡Salud!