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

Al mostrar múltiples llamadas a la acción en su página, puede ayudar a crear un efecto de desplazamiento interactivo que une diferentes elementos. Una forma de abordar esto es convirtiendo los módulos en elementos fijos mientras se mueven en su contenedor de columna. En el tutorial de hoy, le mostraremos cómo crear un hermoso diseño que maneje esta técnica y también podrá descargar el archivo JSON de forma gratuita.

Hagámoslo.

Avance

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

Escritorio

Tableta y móvil

Descargue el diseño del 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 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.

Descarga los archivos

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.

DESCARGAR

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

¡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 'Equalize Column Heights'. Al hacer eso, 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 de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Relleno superior de la columna 2

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

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

Columna 3 Acolchado superior

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

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

Columna 4 Acolchado superior

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

• 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 de CTA. Inserte algún contenido de su elección.

Enlace

Agrega 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

A continuación, cambie el color de fondo del módulo.

• Color de fondo: #ffffff

Configuración de texto

Vaya 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.

• Nivel de encabezado del título: 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 texto del cuerpo: # 000000
• Tamaño del texto del cuerpo: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Altura de la línea del cuerpo: 1.8em

Configuración de botones

No olvides diseñar también el botón de tu Módulo de 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

• Acolchado 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 poco de relleno superior e inferior personalizado.

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

Frontera

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

• Esquinas redondeadas: 1vw (todas las esquinas)

Sombra de la caja

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

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

Clase CSS

Ahora, para que el efecto adhesivo de desplazamiento 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

Pasemos al siguiente y último módulo que necesitamos en la columna 1, que es un módulo de imagen. Sube una imagen PNG de tu elección.

Alineación

A continuación, cambie la alineación de la imagen.

• Alineación de la 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)
• Acolchado 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 clonar ambos 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 también el contenido de la CTA junto con los colores de fondo del botón.

• Módulo de CTA # 2: # 89ffb4
• Módulo de CTA n. ° 3: # ff89f1
• Módulo de CTA 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 adhesiva

Agregar fila n. ° 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!

<style>
@media only screen and (min-width: 980px) {
.sticky-cta {
position: sticky;
position: -webkit-sticky;
top: 8vw !important;
}

.sticky-image {
position: sticky;
position: -webkit-sticky;
top: 28vw !important;
}
}</style>

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 columna. El uso de la técnica puede resultar en algunos efectos de desplazamiento impresionantes que le permiten enfatizar las diversas llamadas a la acción en su página. ¡También pudo descargar el archivo JSON gratis! 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.