Cómo superponer módulos y filas para crear diseños únicos en Divi

Vistazo

Aquí hay un diseño de formulario de contacto único que crearemos juntos utilizando las técnicas de superposición.

El formulario de contacto de Divi se puede diseñar de muchas maneras creativas utilizando Divi Builder. Una forma única de hacer que su formulario de contacto se destaque es superponerlo con otro contenido. Puede superponer contenido con Divi fácilmente. Pero hoy voy a mostrarte algo que quizás nunca antes hayas visto en Divi.

En este tutorial, le mostraré cómo crear un diseño de formulario de contacto único utilizando estos métodos superpuestos.

Método 1: Módulos superpuestos con módulos

Superponer un módulo con otro módulo es extremadamente simple de hacer. Aquí hay un ejemplo de cómo configurar esto.

Cree una sección regular con una estructura de 2 columnas de la mitad de la mitad. Y luego agregue un módulo a cada una de las columnas.

Para el módulo en la columna izquierda, actualice lo siguiente:

Margen personalizado (escritorio): -20 % a la derecha, 20 % a la izquierda

Margen personalizado (tableta): 0 px a la derecha, 0 px a la izquierda (establecer los márgenes de la tableta hará que las cosas se limpien en el móvil)

Para el módulo de la columna de la derecha, actualice lo siguiente:

Margen personalizado (escritorio): 20 % superior, 20 % derecho, -20 % izquierdo

Margen personalizado (tableta): 0 px superior, 0 px derecho, 0 px izquierdo

Eso es todo.

Según el módulo que esté utilizando, es posible que deba agregar algunos colores de fondo personalizados, relleno, radio de cuadro, etc. para que se vea bien. También puede agregar una sombra de cuadro para crear profundidad al superponer módulos.

Método 2: módulos superpuestos con filas

Es posible que se pregunte por qué necesitaría superponer una fila con un módulo. El motivo es que es posible que desee mover un grupo de módulos como una sola pieza de contenido. Esto es algo común cuando se construyen sitios con Divi. Por ejemplo, la información de contacto en la captura de pantalla a continuación se compone de un módulo de texto, 3 módulos de publicidad y un módulo de seguimiento de redes sociales apilados uno encima del otro para crear un solo bloque de contenido.

Puede crear márgenes y espacios personalizados para que cada uno de los módulos se superponga a otro módulo, pero tendría limitaciones. Agregar un radio de borde a su grupo de módulos sería más difícil. No sería posible agregar box shadow al grupo de módulos como un todo, ya que se vería obligado a establecer un box shadow para cada módulo. Por lo tanto, la forma más sencilla de mover un grupo de módulos es mantenerlos en una fila y mover la fila. De esa manera, puede agregar fácilmente sus estilos de borde y sombras de cuadro a la fila y agregar tantos módulos dentro de su fila como desee.

Lo mejor que he encontrado para superponer un módulo con una fila es usar una sección especial. Una sección de especialidad está perfectamente configurada para esto porque todos los diseños de sección de especialidad tienen un área/columna de barra lateral designada (para módulos) en un lado y un área/columna designada en el otro para filas. Una vez que haya agregado su módulo a la barra lateral y el contenido de su fila en su lugar, puede usar márgenes y espacios personalizados para cambiar la fila o el módulo para superponerse al otro.

Aquí hay un ejemplo de cómo configurar esto.

Cree una sección especializada con una estructura de media columna y con las filas en el lado derecho.

Luego inserte una fila de una columna en la columna de la derecha.

Agregue un módulo (o módulos) a la fila.

Luego agregue un módulo a la columna izquierda de su sección de especialidad.

Actualice la configuración del módulo en la columna izquierda de la siguiente manera:

Margen personalizado (escritorio): -20 % a la derecha, 20 % a la izquierda

Margen personalizado (tableta): 0 px a la derecha, 0 px a la izquierda

Actualice la configuración de la fila en la columna de la derecha de la siguiente manera:

Margen personalizado (escritorio): 20 % superior, 20 % derecho, -20 % izquierdo

Margen personalizado (tableta): 0 px superior, 0 px derecho, 0 px izquierdo

Eso es todo.

Ahora todo lo que tiene que hacer es personalizar la configuración de la fila para agregar un color de fondo, radio de borde, relleno, sombra de cuadro, etc. Y puede agregar más de un módulo dentro de su fila personalizada.

Método 3: filas superpuestas con filas

Superponer una fila con otra fila es un poco más complicado. Necesitamos encontrar una manera de poner dos filas una al lado de la otra. He intentado varias formas de hacer esto en Divi y la mejor manera que he encontrado para hacerlo es creando dos secciones especiales. Dado que cada sección de especialidad tiene una columna de la sección designada para las filas, puede crear una sección con una fila en la columna de la izquierda y luego otra sección debajo con una fila en la columna de la derecha. Después de eso, todo lo que necesita hacer es mover la fila en la sección inferior para superponer la fila en la sección superior.

Técnicamente, también puede hacer esto con dos secciones regulares, pero es más difícil lograr que la ubicación de las filas se represente correctamente en diferentes tamaños de navegador (al menos en mi experiencia). La configuración de dos columnas de la sección de especialidad ayuda a hacer esto sin tener que preocuparse por el CSS personalizado.

Aquí está cómo hacerlo.

Cree una sección especializada con una estructura de media columna y con las filas en el lado izquierdo:

Luego inserte una fila de una columna en la columna de la izquierda.

Agregue un módulo (o módulos) a la fila.

Luego crea otra sección de Especialidad debajo de la actual y dale una estructura de media columna y con las filas en el lado derecho. Inserte una fila de una columna en la columna de la derecha.

Luego agregue un módulo (o módulos) a la fila.

A continuación, debemos agregar márgenes personalizados a cada una de nuestras filas para que se superpongan. Primero, agregue los siguientes márgenes personalizados a la fila en la columna izquierda de la primera sección:

Margen personalizado (escritorio): 15% restante

Margen personalizado (tableta): 0px restante

Guarde la configuración y agregue los siguientes márgenes personalizados a la fila en la columna derecha de la segunda sección:

Margen personalizado (Escritorio): -300 px superior, -15 % a la izquierda (es posible que deba ajustar estos valores según el tamaño de sus filas/módulos. Es posible que también deba agregar un valor negativo a su margen inferior si hay demasiado espacio adicional está debajo de la fila)

Margen personalizado (tableta): 0px arriba, 0px abajo, 0px a la izquierda

Creación de un diseño de formulario de contacto Divi único con filas superpuestas

Ahora que comprende el poder de la superposición, pongamos en práctica estas técnicas creando un diseño de formulario de contacto único. Para este diseño, voy a superponer dos filas usando dos secciones especiales. De esa manera, puede agregar fácilmente módulos adicionales a este diseño con facilidad.

Por cuestiones de tiempo, voy a usar el diseño que creamos en «Filas superpuestas con filas».

Una vez que su diseño esté en su lugar, vaya a la configuración de su sección de la sección de especialidad superior y actualice lo siguiente:

En la pestaña de contenido

Color de fondo: #fd7978

En la pestaña de diseño

Usar ancho personalizado: SÍ

Ancho personalizado: 1350 px

Usar ancho de canalón personalizado: SÍ

Ancho de canalón: 1

Esto nos dará un respiro para nuestro contenido y filas.

Ahora copie el estilo de la sección superior y péguelo también en la sección de abajo.

Para la fila en la columna izquierda de la sección superior, actualice la configuración de la fila de la siguiente manera:

En la pestaña de contenido

Color de fondo: #ffffff

En la pestaña de diseño

Margen personalizado (Escritorio): 20 % izquierdo

Margen personalizado (Tableta): 0 px izquierdo

Relleno personalizado (Escritorio): 10 % Superior, 20 % Derecho, 10 % Superior, 10 % izquierdo

Relleno personalizado (Tableta): 10 % Superior, 10 % Derecha, 10% arriba, 10% izquierda

Esquinas redondeadas de borde: 10px

A continuación, agregue un formulario de contacto a la fila y actualice la siguiente configuración:

Primero agregue un nuevo campo a su formulario con lo siguiente:

ID de campo: servicio

Título: Servicio en el que está interesado

Tipo: Botones de radio

Opción 1: Diseño

Opción 2: Desarrollo

Opción 3: personalización

En la pestaña de diseño de su nuevo campo…

Hacer ancho completo: NO

Guarde las opciones de campo y vuelva a la pestaña de contenido de la configuración del formulario de contacto y actualice lo siguiente:

En la pestaña de contenido…

Título: Envíenos un mensaje

Pantalla Captcha: NO

En la pestaña Diseño…

Nivel de encabezado del título h2

Fuente del título: Karla

Peso de la fuente del título: negrita

Estilo de fuente del título: Mayúsculas (TT)

Color de fondo del campo de formulario: #ffffff

Fuente del campo de formulario: Karla

Tamaño del texto del campo de formulario: 16px

Usar estilos personalizados para el botón: SÍ

Color del texto del botón: #ffffff

Color de fondo del botón: #ff7875

Color del borde del botón: #ff7875

Radio del borde del botón: 5px

Fuente del botón: Karla

Peso de la fuente: negrita

Estilo de fuente: TT

Ingresa esquinas redondeadas: 5 px

Ingresa ancho de borde: 1 px

Ingresa color de borde: #cccccc

En la pestaña Avanzado…

Agregue el siguiente CSS personalizado al cuadro del botón de contacto:

Esto cuadrará su formulario dejando caer el botón un poco.

Guardar ajustes

Ahora está listo para agregar Módulos y editar la fila en la columna derecha de la segunda sección. Primero actualicemos la configuración de la fila de la siguiente manera:

Color de fondo: #444444

En la pestaña Diseño…

Ancho (escritorio): 70 %

Ancho (tableta): 100 %

Margen personalizado (escritorio): -620 px superior, -620 px inferior, 10 % izquierdo

Margen personalizado (tableta): 0 px superior, 0 px inferior, 0 px izquierdo

Relleno personalizado: 15 % superior, 10 % derecha, 15 % inferior, 10 % izquierda

Esquinas redondeadas: 10 px

Sombra de cuadro: [primera selección]

Guardar configuración de fila

A continuación, agregue un módulo de texto a la fila y actualice lo siguiente:

Contenido:

Color del texto: claro

Fuente del texto: Karla

Texto Tamaño del texto: 16 px

Altura de la línea de texto: 1,5 em

Pestaña H2 del texto del encabezado Fuente del encabezado

2: Karla

Peso de la fuente del

encabezado 2: Negrita Tamaño del texto del encabezado 2: 32 px

Espaciado entre letras del encabezado 2: 3 px

Altura de la línea del encabezado 2: 1,1 em

Margen personalizado: 20 px en la parte inferior

Agregue módulos de Blurb para mostrar su información de contacto

Agregue un módulo de publicidad debajo del módulo de texto. Actualice la configuración de la publicidad dándole el título «Dirección» y luego agregue la dirección al cuadro de contenido. Luego seleccione para usar el icono de navegación.

Actualice la configuración de la pestaña de diseño de la siguiente manera:

Color del icono: #ff7875

Ubicación de la imagen/icono: Izquierda

Color del texto:

Icono de uso claro Tamaño de fuente: SÍ

Tamaño de fuente del icono: 20 px

Nivel de encabezado del título: H$

Fuente del

título: Karla Peso de la fuente del título: Negrita

Tamaño del texto del título: 20 px

Fuente del cuerpo: Karla

Tamaño del texto del cuerpo: 16 px

Altura de la línea del cuerpo: 1,5 em

Margen personalizado: 20 px inferior

Ahora duplique este módulo de publicidad dos veces y actualice el contenido (título, contenido e ícono) de cada módulo para incluir información para un número de teléfono en una publicidad y una dirección de correo electrónico en la otra.

A continuación, agregue un módulo de seguimiento de redes sociales debajo de la última publicidad de la fila. Agregue tantas redes sociales como desee asegurándose de eliminar el color de fondo de cada una para que solo se muestre el ícono blanco.

Eso es todo. Veamos el resultado.

¡Hacer más!

El diseño que acabamos de crear se puede utilizar para cualquier contenido que desee. Debido a que estas son filas superpuestas, puede usar Divi Builder para agregar cualquier módulo a cada una de las filas y actualizar la configuración de cada módulo. Es posible que deba ajustar un poco el espaciado, pero eso no debería ser demasiado difícil. Cosas bastante poderosas.

Cómo cambiar el orden superpuesto

De forma predeterminada, el primer elemento de la página siempre se colocará detrás del elemento que le sigue si los dos se superponen. Es por eso que el contenido de la derecha siempre se superpondrá al contenido de la izquierda.

Puede cambiar esto fácilmente con una línea de CSS personalizado. Vaya a la sección (o fila) que contiene su primera columna (la de la izquierda) y, en la pestaña avanzada, ingrese el siguiente CSS en el cuadro denominado «Elemento principal de la columna 1»:

La razón por la que esto funciona es porque todas las columnas tienen el índice z: 9 como valor predeterminado. Aumentar el número a 10 apilará el elemento uno encima del otro. Esto solo funcionará a nivel de columna.

Si está superponiendo dos módulos dentro de una fila de dos columnas, deberá agregar este CSS personalizado al Elemento principal de la columna 1 en la pestaña Avanzado en la configuración de Fila.

Si está utilizando una sección especial para superponer un módulo y una fila, deberá agregar este CSS personalizado a la columna 1 Elemento principal en la pestaña Avanzado en la configuración de la sección.

Si está utilizando dos secciones especiales para superponer dos filas, solo las agregará a la sección superior.

Para el ejemplo del formulario de contacto que creamos, observe cómo la fila del formulario de contacto se superpone a la fila derecha cuando agrego «z-index: 10» a la pestaña avanzada de configuración de la sección superior en la columna 1 Elemento principal:

Hacer que los diseños superpuestos sean receptivos

Debe asegurarse de utilizar métodos superpuestos que se reproduzcan bien en todos los dispositivos y tamaños de navegador. Para hacer esto, use una combinación de valores porcentuales y valores de píxel al configurar sus márgenes personalizados. En general, usaría valores porcentuales para los márgenes izquierdo y derecho (para que se ajusten bien al ancho del navegador) y un valor de píxel específico para los márgenes superior e inferior.

También debe asegurarse de establecer los márgenes personalizados para cada dispositivo específico para que los márgenes se muestren bien en tabletas y teléfonos inteligentes. Una buena regla general es cambiar los márgenes personalizados que haya establecido para el escritorio a 0px para la tableta (los dispositivos de teléfono inteligente heredarán la configuración de la tableta automáticamente).

Descargue estos ejemplos superpuestos

Si desea descargar estos ejemplos superpuestos para ayudar a lanzar diseños futuros, haga clic en 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 bondades de Divi y un paquete de 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.

El archivo de descarga se llama “Overlapping-Content-Examples.zip”. Una vez que descargue y descomprima el archivo, tendrá dos archivos json. El primero contiene las tres plantillas superpuestas de esta publicación. El segundo contiene el diseño del formulario de contacto superpuesto de esta publicación.

Pensamientos finales

Puede crear diseños creativos y únicos utilizando estos métodos superpuestos con Divi Builder. Estas combinaciones de espaciado pueden ser una verdadera revelación si recién está comenzando con Divi. Y, por supuesto, no está limitado a la «superposición». Puede usar estas técnicas para colocar elementos de la forma que desee en una página web.

Entonces, ¡adelante!

Espero escuchar de usted en los comentarios.