Cómo crear un CTA llamativo en Divi con unos pocos efectos de desplazamiento simple


Las interacciones sutiles y los efectos de desplazamiento pueden ser útiles para crear un CTA (Llamado a la acción) llamativo. El truco consiste en usar efectos que hagan que su CTA sea más atractiva e intuitiva para que los usuarios tengan más probabilidades de tomar medidas. Y dado que el objetivo final de la mayoría de los CTA es hacer clic en un enlace o botón, es importante optimizar su CTA de una manera que ponga en primer plano esos elementos en los que se puede hacer clic.

En este tutorial, le mostraré cómo usar Divi para optimizar la visibilidad de los CTA utilizando múltiples efectos de desplazamiento. Le mostraré cómo agregar fondos divisores de sección al pasar el mouse por encima para organizar sus CTA para un mejor contraste y legibilidad. Y le mostraré cómo ampliar y mover el CTA al centro de la página al pasar el mouse para que se convierta en el foco principal. Estos efectos de desplazamiento serán útiles para destacar cualquier llamado a la acción y, con suerte, mejorar la experiencia del usuario.

Empecemos.

Vistazo

Aquí hay un vistazo a los llamativos efectos de desplazamiento de CTA que desarrollaremos en este tutorial.

divina llamativos efectos de desplazamiento de cta

divina llamativos efectos de desplazamiento de cta

divina llamativos efectos de desplazamiento de cta

Descargue el diseño llamativo de efectos de desplazamiento de CTA de forma GRATUITA

Para poner sus manos en los diseños de este tutorial, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=0g_Ls0ua-Lo (/ incrustar)

Suscríbase a nuestro canal de Youtube

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, necesitará lo siguiente:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)
  3. Una imagen de fondo que se utilizará en la construcción del diseño. Voy a usar uno de Paquete de diseño veterinario para este tutorial

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Implementación de los llamativos efectos de desplazamiento de CTA en Divi

Para este ejemplo de diseño, comenzaremos con un módulo de llamado a la acción alineado a izquierda o derecha. Luego llevaremos el módulo al centro de la página y lo escalaremos (o ampliaremos) al pasar el cursor sobre la fila. Para hacer que el llamado a la acción se destaque aún más en el estado de desplazamiento de fila, lo organizaremos agregando divisores de sección que se cerrarán detrás del módulo para un mejor contraste.

Aquí te explicamos cómo hacerlo.

Crear la sección y la fila

Primero, cree una sección regular con una fila de una columna.

divina llamativos efectos de desplazamiento de cta

Antes de agregar un módulo, abra la configuración de la sección y actualice lo siguiente:

Agregue una imagen de fondo con el punto focal de la imagen en el lado derecho para que permanezca visible al agregar nuestro módulo a la izquierda.

divina llamativos efectos de desplazamiento de cta

  • Ancho Máx .: 1080px
  • Alineación de sección: centro

divina llamativos efectos de desplazamiento de cta

Eso se encarga de la sección por ahora. Volveremos a la configuración de la sección más adelante para agregar los efectos de desplazamiento del divisor de sección.

A continuación, abra la configuración de la fila y actualice lo siguiente:

  • ancho: 100%
  • ancho máximo: 100%
  • Acolchado: 5% superior, 5% inferior, 35% derecho

divina llamativos efectos de desplazamiento de cta

El relleno derecho es clave para este diseño porque empuja el contenido hacia la izquierda. Volveremos más tarde para agregar nuestras opciones de desplazamiento para mover el contenido de la fila al centro más tarde.

Agregar el Módulo de Llamado a la Acción

Ahora estamos listos para construir el Módulo de Llamado a la Acción, que será el foco principal de nuestro llamativo CTA.

Continúe y agregue un módulo de llamada a la acción a la fila de una columna.

divina llamativos efectos de desplazamiento de cta

Luego actualice la configuración del módulo de llamada a la acción de la siguiente manera:

Contenido

  • Título: Descuento por primera visita
  • Botón: hacer cita
  • URL del enlace del botón: #

divina llamativos efectos de desplazamiento de cta

Diseño

  • Color de fondo: #ffffff
  • Color del texto: oscuro
  • Título de la fuente: Nunito
  • Peso de la fuente del título: negrita
  • Tamaño del texto del título: 36 px

divina llamativos efectos de desplazamiento de cta

  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # 154c87
  • Ancho del borde del botón: 0px
  • Ancho Máx .: 500px
  • Alineación del módulo: centro
  • Esquinas redondas: 10px

divina llamativos efectos de desplazamiento de cta

Una característica clave de este diseño es el ancho máximo de 500 px. Esto asegurará que el módulo no cambie de ancho cada vez que ajustemos el relleno derecho de la fila al pasar el mouse más adelante.

  • Box Shadow: ver captura de pantalla
  • Posición vertical de la sombra de la caja: 30 px
  • Box Shadow Blur Fuerza: 100 px
  • Fuerza de propagación de sombra de caja: -30px

divina llamativos efectos de desplazamiento de cta

Escalando y centrando la llamada a la acción al pasar el cursor sobre la fila

Ahora estamos listos para comenzar a agregar nuestros llamativos efectos de desplazamiento de CTA. En este punto, queremos lograr dos cosas al pasar el cursor sobre la fila. Primero, queremos mover el CTA al centro. Y luego queremos aumentar la escala del módulo (hacerlo más grande) para hacerlo aún más visible.

Para hacer esto, abra la configuración de la fila y actualice lo siguiente:

  • Relleno (desplazamiento): 0% a la derecha

Luego ajuste el relleno para la pantalla del móvil:

  • Relleno (tableta): 0% correcto
  • Acolchado (teléfono): 5% a la izquierda, 5% a la derecha

divina llamativos efectos de desplazamiento de cta

Para ampliar el CTA, agregue la siguiente propiedad de transformación a la fila al pasar el mouse:

  • Escala de transformación (flotar): 110%

Aunque la propiedad de escala de transformación se aplica a la fila, esto también se aplica indirectamente a todos los elementos secundarios dentro de la fila, incluido el módulo. Por lo tanto, el módulo escalará al 110% al pasar el cursor sobre la fila.

divina llamativos efectos de desplazamiento de cta

Puesta en escena del CTA al pasar el mouse por encima con divisores de sección

Finalmente, estamos listos para agregar divisores de sección para organizar el cta al pasar el cursor sobre la sección / fila. La clave aquí es asegurarse de que la sección y la fila tengan la misma altura y anchura, de modo que el usuario se desplace simultáneamente sobre la sección y la fila sin espacios. Por lo tanto, necesitamos eliminar cualquier relleno de sección. Luego, necesitamos crear un divisor de sección superior e inferior que aumente de altura al pasar el cursor sobre la sección.

Esto es lo que debes hacer.

Abra la configuración de la sección y actualice lo siguiente:

Acolchado: 0px arriba, 0px abajo

divina llamativos efectos de desplazamiento de cta

  • Estilo divisor superior (escritorio): ver captura de pantalla
  • Estilo divisor superior (tableta y teléfono): ninguno
  • Color del divisor superior: rgba (21,76,135,0.61)
  • Altura del divisor superior (predeterminado): 0%
  • Altura del divisor superior (desplazamiento): 120%
  • Tapa divisoria superior: horizontal

divina llamativos efectos de desplazamiento de cta

  • Estilo del divisor inferior (escritorio): ver captura de pantalla
  • Estilo divisor inferior (tableta y teléfono): ninguno
  • Color del divisor inferior: rgba (21,76,135,0.61)
  • Altura del divisor inferior (predeterminado): 0%
  • Altura del divisor inferior (flotar): 120%
  • Divider Bottom Flip: horizontal

divina llamativos efectos de desplazamiento de cta

Para asegurarse de que los divisores no se muestren fuera de la sección, actualice la opción de desbordamiento vertical y horizontal a oculto.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

divina llamativos efectos de desplazamiento de cta

Ahora veamos el resultado final.

Resultado final

divina llamativos efectos de desplazamiento de cta

Y aquí está el diseño en tableta y teléfono.

divina llamativos efectos de desplazamiento de cta

divina llamativos efectos de desplazamiento de cta

Cambiar la posición de la CTA

Si desea cambiar la posición inicial del Módulo de llamada a la acción antes del estado de desplazamiento, puede actualizar fácilmente el espaciado entre filas.

Del lado derecho

Supongamos que desea que el módulo comience a la derecha antes de pasar el mouse por encima. Simplemente actualice la configuración de la fila de la siguiente manera:

  • Relleno: 35% restante
  • Relleno (desplazamiento): 0% restante

divina llamativos efectos de desplazamiento de cta

Deberá actualizar la imagen para tener un punto focal izquierdo. Después de eso, aquí está el resultado.

divina llamativos efectos de desplazamiento de cta

Desde el fondo

O, si lo desea, puede tener la ventana emergente de CTA desde la parte inferior de la fila. Para hacer esto, deberá agregar una altura fija a la sección y luego bajar el módulo con un poco de relleno superior.

Abra la configuración de la sección y dele a la sección una altura máxima y configure el desbordamiento como oculto.

  • Altura máxima (escritorio): 415 px
  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

divina llamativos efectos de desplazamiento de cta

Luego abra la configuración de fila y actualice el relleno para empujar el módulo parcialmente fuera de la vista debajo de la sección. Luego saque el acolchado superior al pasar el mouse para volver a colocarlo.

  • Relleno (escritorio): 25% superior, 5% inferior
  • Acolchado (desplazamiento): 5% superior

divina llamativos efectos de desplazamiento de cta

Aquí está el resultado …

divina llamativos efectos de desplazamiento de cta

Pensamientos finales

Divi hace que sea divertido y fácil agregar todo tipo de efectos de desplazamiento a los diseños de su página web. Los mejores efectos de desplazamiento son aquellos que tienen un propósito y realmente mejoran la experiencia del usuario. Los pocos efectos de desplazamiento simples cubiertos en esta publicación deberían ayudar a crear algunos CTA llamativos que se vean geniales, mejoren la experiencia del usuario y, con suerte, conduzcan a más conversiones.

Para obtener más ideas, consulte nuestra publicación en 3 formas de usar las opciones de desplazamiento para enfatizar los CTA en Divi y nuestra publicación en crear CTA deslizables.

Espero tener noticias suyas en los comentarios.

¡Salud!