Cómo agregar flechas con botones de esquina animados con el mouse a su diseño con div Div

La forma en que presenta CTA en una página que diseña puede tener un gran impacto en cómo actúan sus visitantes. Y con ella. En el tutorial de hoy, le mostraremos una forma creativa de incluir un impulso a Div. Incluiremos flechas con botones de esquina animados con el mouse para que sea exactamente. Una vez que se aplane una flecha, la dirección de la flecha cambiará con el estilo. ¡Podrá descargar el archivo JSON de este diseño de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, 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!
¡Comencemos a recrear! Agregue una nueva sección especializada Agregue una nueva sección especializada a la página en la que trabaje. Seleccione la siguiente estructura de columnas para esto:
Fondo de gradiente Abra la configuración de la sección y aplique el siguiente fondo de gradiente:

Color 1: # FFF8F5
Color 2: # F9F3EF
Tipo de gradiente: radial
Dirección radial: abajo a la izquierda
Posición inicial: 40%
Posición final: 40%
Dimensión Vaya a la pestaña Diseño de sección y cambie la configuración de tamaño de la siguiente manera:

Igualar las alturas de la columna: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho interno: 90%
Ancho interior máximo: 1580 PX
Extienda luego, acceda a la configuración de espaciado y agregue un relleno recto en la columna 1.

Columna 1 revestimiento derecho: 6%
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido H2 es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Agregue un contenido H2 a su elección.

Configuración de texto H2 Afirará la configuración de texto H2 del módulo de la siguiente manera:

2 Sección de fuentes: Kumbh Sans
Título 2 Fuente de peso: audacia 2 Color de texto: # 08665C
Rúbrica 2 Dimensión de texto:
Escritorio: 75 PX
Tableta: 60 PX
Teléfono: 45 PX
Espacio agregue algunos bordes superior e inferior.
Margen superior: 50 PX

Margen inferior: 50 PX
Agregue el módulo de texto no. 2 en la columna 1 Agregar descripción Contenido Agregue otro módulo de texto debajo del anterior con un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:

Texto de fuente: Kumbh Sans

Color de texto: # 08665C
Tamaño de texto: 16 PX
La altura de la línea de texto: 1.8em
Espaciado Agregue un tamaño de pantalla cada vez menor.
Margen inferior:

Escritorio: /
Tableta y teléfono: 50 px
Agregue la fila # 1 a la columna 2 La estructura de la columna acceso a la segunda columna de la sección. Allí, agregue una primera fila usando la siguiente estructura de columna
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 2
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Configuración Columna 1 Color de fondo Luego abra la configuración de la columna 1 y aplique un color de fondo.
Color de fondo: #CCCCCC

Interruptor de separación a la configuración de separación espinal y use los siguientes valores de reacción:
Revestimiento superior:


Desktop: 100 PX
Tableta y teléfono: 70 PX
Forro izquierdo:
Escritorio y tableta: 8%
Teléfono: 10%
Junta derecha:
Escritorio y tableta: 8%
Teléfono: 10%
Border agregue algunas esquinas redondeadas a la configuración del borde.
Todas las esquinas: 10 pxvizibilidad complete la configuración de la columna a través de la configuración que se visible en la pestaña avanzada.

Desbordamiento horizontal: visible
Desbordamiento vertical: visible

Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido es el momento de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue un contenido de su elección.
Configuración de texto Cambie la configuración de texto del módulo:
Texto de fuente: Kumbh Sans

El peso de la fuente de texto: luz

Color de texto: # 08665C
Tamaño de texto: 30 PX
La altura de la línea de texto: 1em
Se aplica espaciado y un borde inferior.
Margen inferior: 15 PX
Agregue un módulo divisor a la visibilidad de la columna 1 y luego, agregue un módulo divisor. Asegúrese de que la opción “Show Divider” esté activada.

Divisor del espectáculo: si
La línea va a la pestaña Diseño del módulo y cambia el color de la línea.

Color de línea: # FFF8F5
Dimensión Modifique la configuración de tamaño.

Peso del divisor: 2 PX
Altura: 2 PX


Espacio agregue un borde inferior.
Margen inferior: 50 PX
Agregue el módulo de texto no. 2 en la columna 1 Agregar contenido H3 Agregue otro módulo de texto en la columna 1. Use un contenido H3 de su elección.

Configuración de texto H3 Cambiar a la pestaña Diseño del módulo y cambie la configuración de texto H3 de la siguiente manera:
3 Fuentes de fuentes: Kumbh Sans

Título 3 Fuente de peso: Bold

Rúbrica 3 Color de texto: # 08665C
Rúbrica 3 Dimensión de texto:
Escritorio: 48 PX
Tableta: 38 PX
Teléfono: 32 PX
Espaciado Use un margen inferior.
Margen inferior: 15 PX
Agregue el módulo de texto no. 3 en la columna 1 Agregar contenido Agregue el último módulo de texto en la columna 1 con un contenido de descripción.

Configuración de texto Cambie la configuración de texto en consecuencia: Fuente Texto: Kumbh Sans
Color de texto: # 08665C

Tamaño de texto: 16 PX

La altura de la línea de texto: 1.8em
El espacio incluye un margen inferior.
Margen inferior:
Escritorio: 200 PX
Tableta y teléfono: 150 PX

Agregue los módulos de blurb a la columna 1 Deje los cuadros de contenido vacíos hasta el último módulo que necesitamos en esta columna, que es un módulo de propaganda. Deje las cajas de contenido vacías.
Icono predeterminado Seleccione el siguiente icono de flecha.
El icono coloca el cursor cambia el icono al cursor.
Agregue un enlace Use un enlace para este módulo.

Coloque el cursor en el color de fondo y luego, agregue un color de fondo con el mouse.

Coloque el cursor en el fondo del color: # 08665C

Configuración predeterminada para los iconos Explore la pestaña de diseño y cambie la configuración del icono de la siguiente manera:

Icono de color: #ffffff

Colocación de la imagen / icono: arriba
Alineación de imágenes / iconos: derecho

Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 80 PX
Coloque el cursor en la configuración del icono Cambie el tamaño de la fuente del icono al cursor.
Dimensión de fuente de icono de ciervo: 40 PX
Dimensión Entonces, agregue un ancho a la configuración de tamaño.
Ancho: 80 PX

La distancia con el mouse cambia el revestimiento superior y derecho al cursor.
Cubra la parte superior del flotador: 25 PX

Coloque el cursor a la derecha: 10 px
El borde incluye algunas esquinas redondeadas en la configuración del borde.

Todas las esquinas: 5 PX
Escala con el mouse luego, use la opción para transformar la escala en el flotador.
Coloque el cursor en ambos: 130%

El elemento principal y la imagen de la imagen CSS luego navegue por la pestaña avanzada y use el siguiente código CSS para el elemento principal: Cursor: Pointer; Use esta línea para el cuadro de imagen de la propaganda CSS: Bottom de margen: 0px; Posición Complete la configuración del módulo reposicionándola en la configuración de posición:
Posición: Absoluto

Ubicación: el lado derecho
Reutilización de la columna 1 Eliminar la columna 2 Después de haber completado la primera columna, puede reutilizarla para la segunda. Para esto, elimine primero la segunda columna.

Clon Columna 1 Luego clon primero.

Cambie el color de fondo de la columna 2 Por supuesto, deberá realizar algunos cambios en la columna duplicada, comenzando con el color de fondo.
Columna 2 Color de fondo: # F0C7B1
Agregar transformación Translate a la columna 2 Agregamos un valor de traducción y dimensiones de pantalla más pequeñas.

Derecha:

Escritorio: /

Tableta y teléfono: 50 px
Cambie el contenido duplicado Asegúrese de cambiar todo el contenido duplicado.

Cambie el enlace del módulo de propaganda Complete la columna duplicada cambiando el enlace dentro del módulo de propaganda.
Reutilizar la fila Después de haber completado la primera fila y sus columnas, puede clonar toda la fila.
Elimine la columna 2 Lear la segunda columna de la configuración de la fila.
Cambie el color de fondo de la columna luego, cambie el color de fondo de la columna restante.

Color de fondo de columna: # DFE7F2

Agregue el margen superior en una fila de retorno a la configuración promedio general y agregue un margen superior receptivo.

Margen superior:

Escritorio: 50 PX

Tableta y teléfono: 100 px
Cambie el contenido duplicado y luego, cambie todo el contenido duplicado en la columna.

Cambie el enlace del módulo de la propaganda, complete el tutorial cambiando el enlace dentro del módulo de propaganda. ¡Eso es todo! Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, te mostré cómo ser creativo con tu CTA con mayor precisión, te mostré cómo agregar los botones de la esquina con el mouse. Este enfoque lo ayuda a mantener un aspecto limpio al diseñar una sección CTA múltiple. Se agrega un nivel adicional de interacción. Puede descargar el archivo JSON de forma gratuita. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación! Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.