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

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

En este tutorial, le mostraré cómo usar Divi para optimizar la visibilidad de las llamadas a la acción utilizando múltiples efectos de desplazamiento. Le mostraré cómo agregar fondos de división de sección al pasar el mouse para organizar sus llamadas a la acción para un mejor contraste y legibilidad. Y te mostraré cómo agrandar 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 resaltar 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 crearemos en este tutorial.

Descargue GRATIS el llamativo diseño de efectos flotantes de CTA

Para poner sus manos sobre 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 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

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 (constructor visual)
3. Una imagen de fondo que se utilizará en la construcción del diseño. Usaré uno del paquete de diseño de veterinario para este tutorial.

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

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

Para este ejemplo de diseño, comenzaremos con un módulo de llamada a la acción que está alineado a la izquierda o a la 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 la llamada a la acción se destaque aún más en el estado de desplazamiento de la fila, la colocaremos agregando divisores de sección que se cerrarán detrás del módulo para un mejor contraste.

He aquí cómo hacerlo.

Crear la sección y la fila

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

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

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

• Ancho máximo: 1080px
• Alineación de la sección: centro

Eso se encarga de la sección por ahora. Regresaremos a la configuración de la sección más tarde 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%
• Relleno: 5% superior, 5% inferior, 35% derecho

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

Adición del módulo de llamada a la acción

Ahora estamos listos para construir el Módulo de Llamada a la Acción, que será el foco principal de nuestra llamativa CTA.

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

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: #

Diseño

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

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

Una característica clave de este diseño es el ancho máximo de 500px. 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 tarde.

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

Escalar y centrar 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 colocar 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 (flotar): 0% a la derecha

Luego, ajuste el acolchado para la pantalla móvil:

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

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

• Transformar escala (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.

Puesta en escena de la 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 ancho para que el usuario se coloque simultáneamente sobre la sección y la fila sin espacios. Entonces, 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:

Relleno: 0px arriba, 0px abajo

• Estilo de divisor superior (escritorio): ver captura de pantalla
• Estilo de 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 (flotar): 120%
• Flip divisor superior: horizontal

• Estilo de divisor inferior (escritorio): ver captura de pantalla
• Estilo de 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%
• Volteo del divisor inferior: horizontal

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

Ahora veamos el resultado final.

Resultado final

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

Cambiar la posición de la llamada a la acción

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 espacio entre filas.

Desde el lado derecho

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

• Acolchado: 35% a la izquierda
• Relleno (flotar): 0% a la izquierda

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

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 dé a la sección una altura máxima y establezca el desbordamiento en oculto.

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

Luego abra la configuración de la 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 subirlo.

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

Aquí está el resultado ...

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 que se tratan en esta publicación deberían ayudar a crear algunas llamadas a la acción llamativas que se ven geniales, mejoran la experiencia del usuario y, con suerte, conducen a más conversiones.

Para obtener más ideas, consulte nuestra publicación sobre 3 formas en que puede usar las opciones de desplazamiento para enfatizar las llamadas a la acción en Divi y nuestra publicación sobre la creación de llamadas a la acción deslizantes.

Espero tener noticias tuyas en los comentarios.

¡Salud!