Cómo impulsar su CTA con un efecto de desplazamiento de "giro ganador"
Publicado: 2020-05-29Siempre es divertido ganar un premio. Es por eso que las empresas comercializan sus productos y servicios en línea regalando cosas gratis. Podría ser un cupón para un postre gratis con su primer pedido o un libro electrónico gratis cuando se suscribe a una lista de correo electrónico. Pero a veces, incluso los obsequios pueden ser ignorados en la web. Agregar un elegante efecto de desplazamiento de "giro ganador" podría ser una excelente manera de darle a su CTA la atención que merece mientras crea una interacción atractiva para los visitantes.
En este tutorial, le mostraremos cómo impulsar sus CTA con un efecto de desplazamiento de "giro ganador" en Divi. A medida que un usuario se desplaza hacia abajo en la página, el premio ganador aparece a la vista para revelar la oferta gratuita de una manera única. Y puede usar esto para promocionar casi cualquier oferta gratuita que se le ocurra.
Empecemos.
Vistazo
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Descarga el diseño GRATIS
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.
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.
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!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón Importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Elegir un diseño prefabricado".
- Seleccione el diseño de la página de inicio de la panadería y haga clic para usar el diseño.
Después de eso, estará listo para comenzar a crear el CTA con un efecto de desplazamiento de "giro ganador" en Divi.
Parte 1: Creación del efecto de desplazamiento "Giro ganador"
Para comenzar, implemente la vista de capas desde el menú de configuración inferior dentro de Divi Builder. Esto ayudará a administrar mejor nuestros elementos de diseño.
Agregar la sección, la fila y las columnas
El diseño prediseñado viene con múltiples secciones con contenido ya. Vamos a agregar una nueva sección a la página donde queremos que resida el CTA. Para este tutorial, agregue una nueva sección regular directamente debajo de la sección denominada "Servicios".
Dentro de la sección, agregue una fila de dos columnas.
Configuración de filas
Antes de agregar módulos, abra la configuración de la fila y actualice lo siguiente:
- Ancho de la canaleta: 1
- Ancho: 94%
- Relleno: 10 píxeles en la parte superior, 10 píxeles en la parte inferior
- Ancho del borde: 1 px
- Color del borde: rgba (0,0,0,0.12)
En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal:
display:flex; align-items: center;
Borde de la columna 1
Una vez que haya terminado la configuración de la fila, abra la configuración de la columna 1 y agregue un borde derecho de la siguiente manera:
- Ancho del borde derecho: 1 px
- Color del borde derecho: rgba (0,0,0,0.12)
Creación de la flecha giratoria y el texto usando un módulo de propaganda
A continuación vamos a crear la flecha giratoria y el texto que servirá como flecha que apunta a la selección ganadora.
Agregar módulo Blurb
Agregue un nuevo módulo de propaganda a la columna de la izquierda.
Contenido publicitario
Luego actualice el contenido de la propaganda con un nuevo título e ícono.
- Título: Ganas un
- Icono: flecha derecha (ver captura de pantalla)
Diseño Blurb
En la pestaña de diseño, actualice lo siguiente:
- Color del icono: # a06d51
- Ubicación de la imagen / icono: Izquierda
- Tamaño de fuente del icono: 80 px (escritorio), 50 px (tableta), 40 px (teléfono)
- Fuente del título: Patua One
- Peso de la fuente del título: negrita
- Tamaño del texto del título: 40 px (escritorio), 25 px (tableta), 20 px (teléfono)
- Espaciado de letras de título: 1px
- Altura de la línea de título: 2em
CSS personalizado de Blurb
A continuación, cambie el orden del contenido de la propaganda para que la flecha esté a la derecha en lugar de a la izquierda agregando el siguiente CSS personalizado al elemento principal:
direction: rtl !important;
Luego, elimine el relleno predeterminado debajo del título de la propaganda agregando este CSS personalizado en el título de la propaganda:
padding-bottom: 0px
Creación de selecciones de premios con varios desenfoques
En la columna de la derecha vamos a agregar nuestras selecciones de premios que girarán y finalmente se decidirán por un ganador. Para ello crearemos y colocaremos 4 módulos de propaganda con un título y una imagen.
Creando Blurb 1
Para crear nuestra primera propaganda en la columna 2, duplique la propaganda de la columna 1 y arrástrela a la columna 2.
Abra la configuración de la propaganda duplicada en la columna 2 y saque el CSS personalizado para el elemento principal:
Esto traerá nuestro ícono de regreso a la izquierda.
Actualizar título e imagen
Luego actualice el título y la imagen de la siguiente manera:
- Título: ¡Galleta GRATIS!
- Imagen: subir imagen (alrededor de 100 px por 100 px)
Diseño Blurb 1
Luego actualice la configuración de diseño de la siguiente manera:
- Ancho de la imagen: 80 px (escritorio), 50 px (tableta), 40 px (teléfono)
- Ancho del contenido: 92%
- Ancho: 100%
Transformar el origen
Vamos a rotar los desenfoques usando la opción de rotación de transformación, por lo que es importante elegir un origen de transformación que tenga sentido para la forma en que se deben rotar los desenfoques. No vamos a rotar el primero, pero esto servirá como una buena plantilla en el futuro.
Actualice el origen de transformación de la propaganda de la siguiente manera:
- Transformar el origen: centro derecho
También debe eliminar la animación de la imagen / icono.
Posición absoluta
Debajo de la pestaña avanzada, ingrese la propaganda y la posición absoluta de la siguiente manera:
- Posición: Absoluto
- Ubicación: centro derecho
Creando Blurb 2
Para crear la segunda propaganda, duplique la propaganda 1.
Anuncio giratorio 2
Luego agregue una rotación de transformación de la siguiente manera:
- Transformar el eje Z de rotación: 25 grados
Verá que la propaganda ahora está rotada fuera del área de visualización de la fila.
Creación y rotación de Blurb 3
Para crear la tercera propaganda, duplique la propaganda 2. Luego actualice la rotación de transformación de la siguiente manera:
- Transformar el eje Z de rotación: 50 grados
Creación y rotación de Blurb 4
Para crear la cuarta propaganda, duplique la propaganda 3. Luego actualice la rotación de transformación de la siguiente manera:
- Transformar el eje Z de rotación: 75 grados
Actualizar el título y las imágenes de Blurb
Una vez que haya terminado de agregar los 4 anuncios, regrese y actualice el título y la imagen de cada uno según sea necesario.
Rotación de desplazamiento de columna
Para agregar el efecto de desplazamiento, vamos a rotar toda la columna que contiene los 4 desenfoques rotados.
Abra la configuración de la columna 2 y actualice lo siguiente:
- Transformar el origen: centro derecho
En la pestaña avanzada, abra la pestaña del efecto de desplazamiento giratorio y actualice lo siguiente:
- Habilitar rotación: SÍ
- Rotación inicial: -75% (al 15%)
Luego actualice el disparador del efecto de movimiento a "Parte superior del elemento".
Actualizar fila con desbordamiento oculto
Ahora vuelva a la configuración de la fila y oculte el desbordamiento del contenido actualizando la siguiente configuración de la fila:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Parte 2: Creación de la CTA del premio
Para esta última parte del tutorial, crearemos un CTA que mostrará información sobre el premio y un botón. Y vamos a agregar un efecto de desplazamiento para mostrar el CTA después de que se complete la animación del "giro ganador". Esto imitará un tipo de efecto sorpresa.
Agregar la fila
Para comenzar, agregue una fila de una columna directamente debajo de la fila que acabamos de crear.
Agregar módulo de texto
Para agregar el contenido de nuestra CTA, vamos a copiar un módulo de texto del diseño prefabricado en la página. Busque y copie el módulo de texto con el título "Comprar en línea".
Luego péguelo en la fila que acaba de crear.
Diseño de texto
Actualice el diseño del texto de la siguiente manera:
- Fuente de texto: PT Sans
- Peso de la fuente del texto: negrita
- Tamaño del texto del texto: 16px
- Altura de la línea de texto: 2em
- Alineación de texto: centro
Agregar botón de llamada a la acción
A continuación, busque el botón en la parte superior del diseño prediseñado y cópielo.
Luego péguelo directamente debajo del módulo de texto.
Efecto de desplazamiento de fila
Para mostrar el CTA después de que el "giro ganador" seleccione el premio, abra la configuración de la fila y actualice el siguiente efecto de desplazamiento:
En la pestaña Fading in and out ...
- Habilitar Fading In y Out: SÍ
- Opacidad inicial: 0% (al 50%)
- Opacidad media: 100% (al 55%)
Resultado final
Pensamientos finales
Con suerte, este efecto de desplazamiento de "giro ganador" le brinda algunas ideas nuevas sobre cómo diseñar un CTA más atractivo en su propio sitio. Construirlo requiere un poco de delicadeza usando las opciones de transformación y los efectos de desplazamiento de Divi. Pero una vez completado, el diseño es realmente fácil de actualizar con su propio contenido único.
Espero tener noticias tuyas en los comentarios.
¡Salud!