Cómo mejorar su CTA con un efecto de carrera de “giro ganador”

Siempre es divertido ganar un premio. Por lo tanto, las empresas comercializan sus productos y servicios en línea que ofrecen cosas gratuitas. Podría ser un cupón para un postre de primer pedido gratuito o un libro electrónico gratuito al suscribirse a una lista de correo electrónico. Pero a veces incluso las propinas pueden ignorarse en la web. La adición de un efecto de carrera “ganador” elegante podría ser una excelente manera de prestar la atención que merece, al tiempo que crea una interacción cautivadora para los visitantes. En este tutorial, le mostraremos cómo estimular sus CTA con un efecto de “rotación ganadora” en el Div. A medida que un usuario ejecuta la página, el premio ganador se vuelve para revelar la oferta gratuita de una manera única. Y puede usar esto para promover casi cualquier oferta gratuita que se le ocurra.
Vamos a empezar. Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Elija un aspecto prefabricado”.
Seleccione la apariencia de la página de inicio y haga clic para usar el aspecto.

Después de eso, estará listo para comenzar a crear el CTA con un efecto de “rotación ganadora” en el DIV.

Parte 1: Creación del efecto de desplazamiento de “giro ganador” Para comenzar, implementar las capas del menú de configuración inferior en Divi Builder. Esto lo ayudará a administrar mejor nuestros artículos de diseño. Agregue la sección, la apariencia prefabricada de la sección, el giro y las columnas viene con varias secciones ya contenido. Agregaremos una nueva sección a la página donde queremos vivir. Para este tutorial, agregue una nueva sección habitual directamente debajo de la sección llamada “Servicios”. En la sección, agregue una fila con dos columnas.
Configuración de fila Antes de agregar módulos, abra la configuración de la fila y actualice lo siguiente:

El ancho de la canaleta: 1

Ancho: 94%
Forro: 10 px arriba, 10 px abajo
Ancho fronterizo: 1 PX
Color del borde: RGBA (0.0,0,0.12)
En la pestaña avanzada, agregue los siguientes CSS personalizados al elemento principal: Display: Flex;
Alinine-Ritams: Centro;

Border de la columna 1 Una vez que se completen la configuración de la fila, abra la configuración de la columna 1 y agregue un borde recto de la siguiente manera:
El ancho del borde recto: 1 PX

Color del borde derecho: RGBA (0.0,0,0.12)
Crear la flecha y el texto de la hiladora utilizando un módulo de desenfoque continuará creando la flecha rotativa y el texto que servirá como una flecha que indica la selección ganadora.
Agregue el modo de propaganda Agregue un nuevo módulo de blurb a la columna izquierda.

Blurb Content luego actualice el contenido de la propaganda con un nuevo título e icono.
Título: Ganas un

Icono: flecha derecha (ver captura de pantalla)
Diseño de blurb en la pestaña Diseño, actualice lo siguiente:
Icono de color: # A06D51

Colocación de la imagen / icono: izquierda
Icono de tamaño de fuente: 80 PX (escritorio), 50 px (tableta), 40 px (teléfono)
Fuente del título: Passa One
Título Fuente de peso: Bold
Título Tamaño del texto: 40 PX (escritorio), 25 PX (tableta), 20 PX (teléfono)
Cartas de título Espaciado: 1 PX
Altura de la línea de título: 2em
Bloque CSS Custom Enra, cambie el orden del contenido de la propaganda para que la flecha esté a la derecha en lugar de la izquierda agregando los siguientes CSS personalizados al elemento principal: Dirección: RTL! Importante; Luego elimine el llenado predeterminado debajo del título de la propaganda agregando esta propaganda personalizada del título CSS:
Botero de relleno: 0px

Creando selecciones de múltiples premios de Blurbs en la columna correcta, agregaremos nuestras selecciones de premios que girarán y, finalmente, establecerán un ganador. Para hacer esto, crearemos y posicionaremos 4 módulos de propaganda con un título e imagen. Creación de Blurb 1 Para crear nuestro primer texto en la columna 2, copie el texto en la columna 1 y tírelo a la columna 2.

Abra la configuración del texto duplicado en la columna 2 y elimine CSS personalizado para el elemento principal:

Esto traerá el ícono de vuelta a la izquierda. Actualice el título y la imagen y luego actualice el título y la imagen de la siguiente manera:

Título: ¡Cookie gratis!

Imagen: Cargue la imagen (aproximadamente 100 PX con 100 PX)
Blurb 1 Diseño y luego actualice la configuración de diseño de la siguiente manera:
Ancho de imagen: 80 PX (escritorio), 50 px (tableta), 40 px (teléfono)

Ancho de contenido: 92%
Ancho: 100%
Transforme el origen que rotaremos los borrones utilizando la opción de rotación de transformación, por lo que es importante elegir un origen de transformación que tenga sentido de cómo se debe girar el desenfoque. No giraremos primero, pero esto servirá como una buena plantilla en el futuro.
Actualizar el origen de la transformación para la propaganda de la siguiente manera: Transformar el origen: el centro derecho

También debe eliminar la animación de imagen / icono.
Posición absoluta en la pestaña Avanzada, da una posición y una posición absoluta de la siguiente manera:
Posición: Absoluto
Ubicación: centro derecho

Creando Brurb 2 para crear la segunda propaganda, la propaganda 1 se duplica.
Blurb Rotary 2 luego agregue una rotación de transformación de la siguiente manera:
Eje de transformación de rotación Z: 25 grados

Verá que la propaganda ahora se gira fuera del área de visualización de la fila. Creación y giro de la propaganda 3 Para crear la tercera propaganda, copie la propaganda 2. luego actualice la rotación de transformación de la siguiente manera:

El eje z de la rotación transformada: 50 grados
Creando y girando la propaganda 4 Para crear la cuarta propaganda, copie la propaganda 3. Luego actualice la rotación de transformación de la siguiente manera:

Eje de transformación de rotación Z: 75 grados
Actualice el título y las imágenes de la propaganda después de haber terminado de agregar las 4 borrones, devolver y actualizar el título y la imagen para cada uno según sea necesario.

Columna giratoria Para agregar el efecto de desarrollo, giraremos toda la columna que contiene las 4 borrones girados. Abra la configuración para la columna 2 y actualice lo siguiente:
Origen de giro: el centro derecho

En la pestaña avanzada, abra la pestaña Efecto de desplazamiento rotativo y actualice lo siguiente:

Activar la rotación: si
Rotación de inicio: -75% (a 15%)

Luego actualice el activador del efecto de movimiento en la “parte superior del elemento”.
Actualice la fila con desbordamiento oculto ahora Regrese a la configuración ordinaria y oculte el contenido del contenido actualizando la siguiente configuración de la fila:
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto

Parte 2: Creación del Premio CTA para esta última parte del tutorial, crearemos un CTA que mostrará información sobre el premio y un botón. Y agregaremos un efecto de desplazamiento para mostrar CTA después de la finalización de la animación de “rotación ganadora”. Esto imitará un tipo sobrecargado por efecto. Agregue la fila para iniciar, agregue una fila con una columna directamente debajo de la fila que acabamos de crear. Acuerde un módulo de texto para agregar el contenido de nuestro CTA, copiaremos un módulo de texto del aspecto previo. Busque y copie el módulo de texto con el título “Comprar en línea”.
Luego pégalo en la fila que acabas de crear.
Diseño de texto Actualización de diseño de texto de la siguiente manera:

Texto de fuente: PT Sans

El peso de la fuente de texto: en negrita

Tamaño de texto de texto: 16 PX

Altura de la línea de texto: 2em
Alineación de texto: Centro
Agregue el botón CTA y luego busque el botón en la parte superior de la apariencia premada y copie.
Luego pégalo directamente debajo del módulo de texto.
Efecto en una fila para mostrar CTA después de la “rotación ganadora” selecciona el premio, abra la configuración de la fila y actualice el siguiente efecto de desarrollo: debajo de la pestaña de decoloración dentro y fuera …
Habilitar el desvanecimiento dentro y fuera: Sí

Opacidad inicial: 0% (a 50%)

Opacidad promedio: 100% (al 55%)

Resultados finales Los pensamientos finales esperan que este efecto de desarrollo de “rotación ganadora” le brinde algunas ideas nuevas sobre cómo diseñar un CTA más cautivador en su propio sitio. Su construcción requiere un poco de delicadeza utilizando las opciones de transformación y los efectos de la división. Pero una vez completado, la apariencia es muy fácil de actualizar a su propio contenido único. Espero tener noticias suyas en los comentarios. ¡Suerte!