Cómo mantener los módulos fijos en su contenedor de columnas con Divi

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Tableta y móvil

Descarga el diseño de contenedor Sticky Column GRATIS

Para poner sus manos en el diseño de contenedor de columna adhesiva gratuito, 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.

Suscríbete a nuestro canal de Youtube

¡Empecemos a Recrear!

Agregar nueva sección

Comience agregando una nueva sección regular a la página en la que está trabajando.

Espaciado

Abra la configuración de la sección y modifique el relleno superior e inferior en diferentes tamaños de pantalla.

• Acolchado superior: 7vw (escritorio), 10vw (tableta), 15vw (teléfono)
• Acolchado inferior: 20vw (escritorio), 7vw (tableta), 10vw (teléfono)

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la sección. También es muy importante  habilitar la opción ‘Ecualizar alturas de columna’. Al hacerlo, creará un espacio vacío en las columnas que permitirá que los módulos fijos se muevan libremente mientras se desplaza hacia abajo en la página.

• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Igualar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Acolchado superior de la columna 2

Abra la configuración de la columna 2 a continuación y agregue algo de relleno superior en el escritorio.

• Relleno superior: 20vw (escritorio), 0vw (tableta y teléfono)

Acolchado superior de la columna 3

Agregue también un valor de relleno superior personalizado a la tercera columna.

• Acolchado superior: 40vw (escritorio), 0vw (tableta y teléfono)

Acolchado superior de la columna 4

Y complete la configuración de la fila agregando un valor de relleno superior a la columna 4 también.

• Acolchado superior: 60vw (escritorio), 0vw (tableta y teléfono)

Agregar CTA a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos en la columna 1 es un Módulo CTA. Inserte algún contenido de su elección.

Enlace

Agregue un enlace al botón también. Hacer esto permitirá que el botón aparezca en el diseño.

• URL del enlace del botón: #

Color de fondo

Cambia el color de fondo del módulo a continuación.

• Color de fondo: #ffffff

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración general del texto.

• Alineación de texto: Centro
• Color del texto: oscuro

Configuración del texto del título

Cambie también la configuración del texto del título.

• Título Nivel de encabezado: H3
• Fuente del título: espectral
• Color del texto del título: #000000
• Tamaño del texto del título: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

Configuración del texto del cuerpo

Junto con la configuración del texto del cuerpo.

• Fuente del cuerpo: Fira Sans
• Peso de la fuente del cuerpo: ligero
• Color del cuerpo del texto: #000000
• Tamaño del cuerpo del texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Altura de la línea del cuerpo: 1,8 em

Configuración de botones

No olvides diseñar también el botón de tu módulo CTA.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Color del texto del botón: #ffffff
• Color de fondo del botón: #444eff
• Ancho del borde del botón: 0px

• Radio del borde del botón: 50vw
• Fuente del botón: Fira Sans

• Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Relleno izquierdo: 3vw (escritorio), 7vw (tableta), 13vw (teléfono)
• Relleno derecho: 3vw (escritorio), 7vw (tableta), 13vw (teléfono)

Espaciado

Luego, vaya a la configuración de espaciado y agregue un relleno superior e inferior personalizado.

• Acolchado superior: 8vw
• Acolchado inferior: 8vw

Borde

Agregue también algunas esquinas redondeadas al módulo.

• Esquinas redondeadas: 1vw (todas las esquinas)

Sombra de la caja

Complete el diseño del módulo agregando una sutil sombra de caja.

• Posición horizontal de la sombra del cuadro: 10px
• Fuerza de desenfoque de sombra de cuadro: 50px
• Color de sombra: rgba(0,0,0,0.08)

Clase CSS

Ahora, para que el efecto de desplazamiento fijo funcione, necesitaremos agregar algunas líneas de código CSS al final de este tutorial. En preparación para eso, agregaremos una clase CSS al Módulo CTA.

• Clase CSS: sticky-cta

Agregar módulo de imagen a la columna 1

Cargar imagen

En el siguiente y último módulo que necesitamos en la columna 1, que es un módulo de imagen. Cargue una imagen PNG de su elección.

Alineación

Cambie la alineación de la imagen a continuación.

• Alineación de imagen: Centro

Dimensionamiento

Asegúrese de forzar el ancho completo en el módulo también.

• Forzar ancho completo: Sí

Espaciado

Complete la configuración del módulo yendo a la configuración de espaciado y agregando algunos valores de espaciado personalizados en diferentes tamaños de pantalla.

• Margen superior: -5vw (tableta y teléfono)
• Margen inferior: -12vw (escritorio), 5vw (tableta y teléfono)
• Relleno izquierdo: 3vw (escritorio), 10vw (tableta), 25vw (teléfono)
• Relleno derecho: 3vw (escritorio), 10vw (tableta), 25vw (teléfono)

Clone ambos módulos tres veces y colóquelos en las columnas restantes

Una vez que haya completado ambos módulos en la columna 1, puede clonarlos tres veces y colocar los duplicados en las columnas restantes de la fila.

Cambiar imágenes

Asegúrese de cambiar la imagen en cada módulo de imagen duplicado.

Cambiar el contenido de CTA y los colores de fondo de los botones

Cambie el contenido de la CTA junto con los colores de fondo del botón también.

• Módulo n.º 2 de CTA: n.º 89ffb4
• Módulo n.° 3 de CTA: #ff89f1
• Módulo de llamada a la acción n.° 4: #ffd389

Agregue la clase CSS a los módulos de imagen en las columnas 1, 2 y 3

Ahora, para asegurarnos de que el efecto adhesivo también funcione en las imágenes, necesitaremos agregar una clase CSS a los módulos de imagen en las columnas 1, 2 y 3.

• Clase CSS: imagen pegajosa

Añadir Fila #2

Estructura de la columna

Lo único que queda por hacer es agregar el código CSS. Para hacer eso, agregue una nueva fila.

Agregar módulo de código con código CSS

Agregue un módulo de código a la fila, inserte el código CSS a continuación y ¡listo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Tableta y móvil

Pensamientos finales

En esta publicación, le mostramos cómo mantener los módulos fijos en su contenedor de columnas. El uso de la técnica puede dar como resultado algunos efectos de desplazamiento sorprendentes que le permiten enfatizar las diversas llamadas a la acción en su página. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.