Cómo revelar una columna CTA en un estado pegajoso con div Div

En un momento, al crear un diseño de página, puede llegar a una lista de servicios, cursos o algo similar que desea compartir de manera interactiva. El diseño que usa para el contenido de su lista. Desempeña un papel muy importante en la forma en que sus visitantes digieren el contenido. Y con la mayoría de las listas, también querrá incluir una llamada de acción que conecta los puntos. Si está buscando una forma creativa de hacer esto, le gustará este tutorial. Hoy, le mostraremos cómo revelar una columna CTA en un estado pegajoso con Div. Tan pronto como el CTA llega al final de la columna, el efecto adhesivo se detiene, que ofrece una experiencia sin esfuerzo en la que las personas pueden continuar leyendo los elementos de la lista y decidir actuar cuando quieran, sin tener que correr hacia arriba o hacia abajo para encontrar CTA. . ¡Distribuiremos el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la apariencia de la sección de columna CTA Sticky de forma gratuita para poner sus manos en la apariencia de la sección de columna gratuita, primero deberá descargarla usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Agregue una nueva sección de fondo. Comience agregando una nueva sección a la página en la que trabaja. Abra la configuración de la sección y aplique un color de fondo blanco.
Color de fondo: #ffffff

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Espacio sin agregar módulos, abra la configuración de la fila y aplique un margen más bajo.
Margen inferior: 5%

Agregue un módulo de texto a la columna Agregar contenido H2 Agregue un módulo de texto con un contenido H2 de su elección.

Configuración de texto H2 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H2 en consecuencia:
2 Fuentes de fuentes: Aleata
Título 2 Fuente de peso: Bold
Título 2 Alineación de texto: Centro
Rúbrica 2 Color de texto: # 000000
Rúbrica 2 Dimensión de texto:
Escritorio: 55 PX
Tableta: 40 PX
Teléfono: 30 PX

Agregue el módulo Divisor a la visibilidad de la columna justo debajo del módulo de texto, agregue un módulo Divisor y asegúrese de que se active la opción “Visualización”.
Divisor del espectáculo: si

La línea vaya a la pestaña Diseño del módulo y cambie la configuración de la línea de la siguiente manera: Color de línea: # 3A7A84
Estilo de línea: doble
Dimensión Complete la configuración del módulo cambiando la configuración de tamaño en consecuencia:

Peso del divisor: 10 PX
Ancho: 8%
Alineación del módulo: centro
Altura: 10 PX
Agregue la estructura de la columna de la fila # 2 Continuar agregando otra fila justo debajo de la anterior utilizando la siguiente estructura de columnas:

Dimensión Abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2
Igualar las alturas de la columna: sí
Ancho: 95%
Ancho máximo: 2580 PX
El espacio elimina todas las deflantes predeterminadas y sin fondo.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Configuración Columna 1 Imagen de fondo luego abra la configuración de la columna 1 y aplique una imagen de fondo.

Tamaño de la imagen de fondo: portada
El borde vaya a la pestaña Diseño de la columna y aplique algunas esquinas redondeadas.


Todas las esquinas: 20 PX
Agregue los módulos de blurb a la columna 2 Agregar contenido es el momento de agregar módulos, comenzando con un módulo de blurb en la columna 2. Agregue un contenido de su elección.

Seleccione el icono Seleccione un icono adicional.

El color de fondo luego aplica un color de fondo blanco.

Color de fondo: #ffffff
Icono de configuración Vaya a la pestaña Diseño del módulo y modifique la configuración del icono en consecuencia:

Icono de color: # 3A7A84
Colocación de la imagen / icono: izquierda
Configuración de texto de título Entonces, estilice su configuración de texto de título.


Nivel de encabezado del título: H3
Título de la fuente: Aleda
Título Fuente de peso: Bold
Color de texto del título: # 0000000000 DIMENSIÓN Título del texto:
Escritorio: 35 PX
Tableta: 30 PX
Teléfono: 20 PX
Configuración del texto del cuerpo hace y algunos cambios en la configuración del texto del cuerpo.
Font Corp: Karla

El tamaño del texto del cuerpo:
Escritorio: 17 PX
Tableta: 15 PX
Teléfono: 14 PX
La altura de la línea del cuerpo: 2.5em
La dimensión cambia la configuración de dimensionamiento adicional.
Ancho de contenido: 100%

Espacio y aplique algunos valores de llenado personalizados a la configuración de espaciado.
Revestimiento superior: 20%

Finamiento inferior: 20%
ENLIZACIÓN IZQUIERDA: 10%
Revelaje derecho: 10%
Border, entonces, agregaremos algunas esquinas redondeadas a la configuración del borde.
Todas las esquinas: 20 PX

Box Shadow e incluiremos una sombra de caja sutil.
Poder de poco claro de la sombra de la caja: 50 px

Color de la sombra: RGBA (59,120,130,14)
Continúe la animación eliminando la animación implícita del módulo de la propaganda de la siguiente configuración de animación.
Animación de imagen / icono: sin animación

Blurb Title CSS y complete la configuración del módulo agregando una línea de código CSS al cuadro de título de la propaganda CSS. margen de fondo: 20px;
Clonar el módulo de la propaganda dos veces Después de haber completado el primer módulo de blurb, clona el módulo de la propaganda tan a menudo como necesite.

Cambie el contenido Cambie el contenido de cada módulo duplicado.

Agregue el módulo CTA a la columna 1 Agregar contenido en la columna 1, el único módulo que necesitamos es una llamada a la acción. Agregue un contenido a su elección.

Agregue el botón de enlace Agregar un enlace de botón a continuación.

Los antecedentes de gradiente luego aplican un fondo de gradiente.

Color 1: RGBA (59,120,130,53)

Color 2: # 112730
Tipo de gradiente: lineal
Dirección de gradiente: 161 grados
Configuración de texto de título Cambiar a la pestaña Diseño del módulo y realizar los siguientes cambios en la configuración del texto del título: Título Entilla: H3
Título de la fuente: Aleda

Título Fuente de peso: Bold
Color de texto del título: #ffffff
Título del texto Tamaño:
Escritorio: 50 PX
Tableta y teléfono: 30 px
Configuración del botón Stilet el botón a continuación.
Use estilos personalizados para el botón: Sí
Botón Tamaño de texto:

Escritorio: 20 PX
Tableta: 17 PX
Teléfono: 15 PX
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: Alda
Botón de peso de fuente de fuente: en negrita
Revestimiento superior: 20 px

Finamiento inferior: 20 PX
ENLIZACIÓN IZQUIERDA: 20 PX

Revestimiento derecho: 20 PX
Posición horizontal de la sombra de la caja: 0 px
Box Shadow Posición vertical: 3 PX
Color de la sombra: #ffffff
Dimension Switch a la configuración del tamaño del módulo y aplique los siguientes cambios:
Ancho:
Escritorio: 95%

Tableta y teléfono: 100%
Alineación del módulo: centro
El espacio agregue algunos revestimientos personalizados desde arriba e abajo.
Revestimiento superior: 150 PX
Revestimiento inferior: 150 px

El borde incluye algunas esquinas redondeadas.
Todas las esquinas: 20 PX
Transformar la traducción Complete la configuración del módulo aplicando la siguiente configuración de traducción de transformación:

Derecha:
Desktop: -25px

Tableta y teléfono: 0 PX
Aplique el efecto pegajoso al módulo CTA pegajoso ahora, que todos los elementos están en su lugar, es hora de aplicar el efecto pegajoso. Abra el módulo CTA y aplique la siguiente configuración adhesiva:
Posición pegajosa:
Desktop: quédese en la parte superior

Tableta y teléfono: no pegue
Gap Upper Lipritical: 50 PX
Límite de rubor de abajo: columna
Gap de los elementos circundantes adhesivos: transición predeterminada y dastils pegajosos: sí
Optacidad ahora, cuando el módulo se transforma pegajoso, podemos aplicar estilos adhesivos. Acceda a la configuración del filtro y aplique la siguiente configuración de filtración de opacidad:
Opacidad predeterminada:
Escritorio: 0%
Tableta y teléfono: 100%

Opacidad pegajosa: 100%
Por último, pero no menos importante, cambiaremos la configuración de transición en la pestaña avanzada. ¡Eso es todo!
Duración de transición: 800 ms
Curva de velocidad de transición: fácil
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil
Pensamientos finales En esta publicación, te mostré cómo ser creativo con las opciones pegajosas de Div. Específicamente, le mostré cómo mostrar los elementos en la lista con una columna CTA pegajosa. Este enfoque le permite mostrar visualmente todos los elementos y tener una llamada de acción mientras sus visitantes están preparados a través de servicios, cursos u otros tipos de listas. ¡Podrías descargar el archivo JSON gratis! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.