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.
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:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (generador visual)
- 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.
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.
- Ancho Máx .: 1080px
- Alineación de sección: centro
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
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.
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
- Título de la fuente: Nunito
- Peso de la fuente del título: negrita
- Tamaño del texto del título: 36 px
- 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
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
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
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.
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
- 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
- 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
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 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
Deberá 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 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
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
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 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!