Cómo enfatizar tu botón adhesivo en una hermosa sección de CTA con Divi

Cuando se lanzó la función de opciones fijas de Divi , la publicación de lanzamiento en nuestro blog estuvo acompañada de demostraciones en vivo que muestran la versatilidad de esta nueva función. Para ayudarlo a comprender mejor las opciones adhesivas y comenzar a usarlas en su diseño, le mostraremos cómo recrear uno de los diseños de demostración en vivo en este tutorial. El diseño que estamos recreando se enfoca en enfatizar su botón adhesivo. Es una sección de CTA basada en texto que le permite resaltar su llamado a la acción de una manera hermosa. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

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

Escritorio

Móvil

Descarga el diseño de la sección CTA GRATIS

Para poner sus manos en el diseño de la sección CTA gratuita, 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!

1. Estructura del elemento de construcción

Agregar nueva sección

Color de fondo

Comience agregando una nueva sección a la página en la que está trabajando. Puede ser una página nueva o una existente, pero recomendamos agregarla a una página que ya tenga algo de contenido, de modo que haya suficiente espacio de desplazamiento para que pueda ver cómo cobran vida los efectos. Abra la configuración de la sección y aplique un color de fondo de su elección.

  • Color de fondo: #00965a

Dimensionamiento

Pase a la pestaña de diseño de la sección y aplique una altura máxima. Esta altura máxima nos ayudará a garantizar que la altura de la sección sea limitada.

  • Altura máxima: 100vh

desbordamientos

Dado que aplicaremos algunos efectos de desplazamiento más adelante en el tutorial, también necesitaremos ocultar los desbordamientos de la sección para asegurarnos de que nada sobrepase el contenedor de la sección.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

Agregar nueva fila

Estructura de la columna

Una vez que la configuración de la sección esté en su lugar, agregue una nueva fila usando la siguiente estructura de columna:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y aplique algunas configuraciones de tamaño personalizadas. Esta configuración de tamaño permitirá que el contenedor de filas ocupe todo el ancho de la fila, lo que le da a nuestro diseño un efecto de pantalla completa.

  • Ancho: 100%
  • Ancho máximo: ninguno

Configuración de la columna 2

Espaciado

Abra la configuración de la columna 2 a continuación y aplique algunos valores de relleno personalizados en diferentes tamaños de pantalla.

  • Relleno inferior: 60px
  • Relleno izquierdo:

    • Tableta y teléfono: 5%
  • Relleno derecho:

    • Escritorio: 10vw
    • Tableta y teléfono: 5%

Agregar módulo de texto a la columna 1

Agregar contenido

Es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Agregue contenido de su elección. Para crear exactamente el mismo diseño que en la vista previa de esta publicación, inserte algunas palabras relevantes que ayuden a potenciar el CTA que colocaremos en la columna 2 más adelante en el tutorial. Asegúrate de colocar cada palabra dentro de su propia línea también.

Configuración de texto

Pase a la pestaña de diseño del módulo y cambie la configuración del texto. Notará que estamos usando el ancho de la ventana gráfica como nuestra unidad de tamaño de texto. El uso de la unidad de ancho de la ventana gráfica nos ayudará a mantener el texto receptivo en todos los tamaños de pantalla.

  • Fuente del texto: Work Sans
  • Peso de fuente de texto: Negrita
  • Color del texto: #000000
  • Tamaño del texto: 10vw
  • Altura de línea de texto: 0,2 em

Agregar módulo de texto a la columna 2

Agregar contenido

Vamos a la segunda columna. Allí, agregue un módulo de texto con una copia de llamada a la acción de su elección.

Configuración de texto

Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:

  • Fuente del texto: Work Sans
  • Color del texto: #ffffff
  • Tamaño del texto: 56px
  • Altura de línea de texto: 1,2 em

Dimensionamiento

Asigne también un ancho máximo al módulo de texto.

  • Ancho máximo: 400px

Agregar módulo de botones a la columna 2

Agregar copia

El siguiente y último módulo que necesitamos en nuestro diseño es un módulo de botón en la columna 2. Agregue alguna copia de su elección.

Configuración de botones

Pase a la pestaña de diseño del módulo y diseñe el botón según corresponda:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 16px
  • Color del texto del botón: #000000
  • Color de fondo del botón:

    • Predeterminado: #ffffff
    • Pasar el mouse: rgba (255,255,255,0.7)
  • Ancho del borde del botón: 5px
  • Color del borde del botón: rgba(0,0,0,0)

  • Radio del borde del botón: 5px
  • Fuente del botón: Work Sans
  • Mostrar icono de botón: No

2. Aplicar efectos de desplazamiento y pegajosos

Agregar movimiento vertical al módulo de texto en la columna 1

Ahora que se ha establecido la base de nuestro diseño, ¡es hora de aplicar los efectos de desplazamiento y pegajosos! Abra el módulo de texto en la columna 1 y aplique un movimiento vertical receptivo.

  • Habilitar movimiento vertical: Sí
  • Compensación inicial:

    • Escritorio: 10
    • Tableta y teléfono: 0
  • Desplazamiento medio: 0
  • Compensación final:

    • Escritorio: -10
    • Tableta y teléfono: 0
  • Disparador de efecto de movimiento: Parte superior del elemento

Agregar efecto adhesivo a la columna 2

A continuación, abriremos la configuración de la columna 2 y aplicaremos un efecto adhesivo en el escritorio. Dado que las columnas y los módulos en los tamaños de pantalla más pequeños se colocan uno debajo del otro, en lugar de uno al lado del otro, traeremos de vuelta la configuración adhesiva a «No pegar» en los tamaños de pantalla más pequeños.

  • Posición pegajosa:

    • Escritorio: Stick to Top
    • Tableta y teléfono: No se pegue
  • Desplazamiento superior fijo: 80 px
  • Límite pegajoso inferior: Sección
  • Desplazamiento de los elementos pegajosos circundantes: Sí
  • Estilos predeterminados y fijos de transición: Sí

Agregue un estilo fijo al botón en la columna 2

Ahora que la columna 2 se ha vuelto adhesiva, podremos aplicar un estilo adhesivo a la columna misma y a los módulos dentro de la columna. Sin embargo, los únicos cambios fijos que haremos se centrarán en el botón. Abra el módulo, vaya a la configuración de los botones e invierta el texto y los colores de los botones. ¡Eso es todo! Una vez que guarde el diseño y salga del generador visual, puede ver el hermoso diseño en vivo en su sitio web.

  • Color del texto del botón: #ffffff
  • Color de fondo del botón: #000000

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo recrear uno de los diseños que se usaron como demostración dentro de la publicación de actualización de funciones de opciones adhesivas. Este diseño se enfoca en resaltar su botón adhesivo cambiando el estilo una vez que se habilita el estado adhesivo. ¡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.