Cómo agregar flechas de botón de esquina animadas por desplazamiento a su diseño con Divi

La forma en que presenta su CTA dentro de una página que diseña puede tener un gran impacto en la forma en que sus visitantes actúan. Puede hacerlo de la forma más utilizada, utilizando el formato de botón con copia en el medio, pero también puede ser creativo con él. En el tutorial de hoy, le mostraremos una forma creativa de incluir un llamado a la acción en su diseño Divi. Vamos a incluir flechas de botón de esquina animadas por desplazamiento para ser exactos. Una vez que se coloca una flecha, la dirección de la flecha cambiará junto con el estilo. ¡También podrá descargar el archivo JSON de este diseño de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga The Layout GRATIS

Para poner sus manos en el diseño gratuito, 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!

¡Empecemos a recrear!

Agregar nueva sección de especialidad

Agregue una nueva sección de especialidad a la página en la que está trabajando. Seleccione la siguiente estructura de columnas para ello:

Fondo degradado

Abra la configuración de la sección y aplique el siguiente fondo degradado:

• Color 1: # fff8f5
• Color 2: # f9f3ef
• Tipo de degradado: radial
• Dirección radial: abajo a la izquierda
• Posición inicial: 40%
• Posición final: 40%

Dimensionamiento

Vaya a la pestaña de diseño de la sección y cambie la configuración de tamaño de la siguiente manera:

• Ecualizar alturas de columna: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho interior: 90%
• Ancho máximo interno: 1580px

Espaciado

Luego, vaya a la configuración de espaciado y agregue algo de relleno derecho a la columna 1.

• Columna 1 Relleno derecho: 6%

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido H2

Es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Agregue algo de contenido H2 de su elección.

Configuración de texto H2

Diseñe la configuración de texto H2 del módulo de la siguiente manera:

• Fuente del encabezado 2: Kumbh Sans
• Peso de fuente del encabezado 2: Negrita
• Título 2 Color del texto: # 08665c
• Tamaño del texto del encabezado 2:
  • Escritorio: 75px
  • Tableta: 60px
  • Teléfono: 45px

Espaciado

Agregue un poco de margen superior e inferior a continuación.

• Margen superior: 50 px
• Margen inferior: 50 px

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido de descripción

Agregue otro módulo de texto debajo del anterior con algún contenido descriptivo de su elección.

Configuración de texto

Cambie la configuración de texto del módulo de la siguiente manera:

• Fuente de texto: Kumbh Sans
• Color del texto: # 08665c
• Tamaño del texto: 16px
• Altura de la línea de texto: 1.8em

Espaciado

Agregue un margen inferior también en tamaños de pantalla más pequeños.

• Margen inferior:
  • Escritorio: /
  • Tableta y teléfono: 50px

Agregue la fila n. ° 1 a la columna 2

Estructura de la columna

A la segunda columna de la sección. Allí, agregue una primera fila usando la siguiente estructura de columnas

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Configuración de la columna 1

Color de fondo

Luego, abra la configuración de la columna 1 y aplique un color de fondo de su elección.

• Color de fondo: #cccccc

Espaciado

Pase a la configuración de espaciado de la columna y use los siguientes valores de respuesta:

• Acolchado superior:
  • Escritorio: 100px
  • Tableta y teléfono: 70px
• Acolchado izquierdo:
  • Computadora de escritorio y tableta: 8%
  • Teléfono: 10%
• Acolchado derecho:
  • Computadora de escritorio y tableta: 8%
  • Teléfono: 10%

Frontera

Agregue también algunas esquinas redondeadas a la configuración del borde.

• Todas las esquinas: 10px

Visibilidad

Complete la configuración de la columna configurando los desbordamientos para que sean visibles en la pestaña avanzada.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido

Es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue algún contenido de su elección.

Configuración de texto

Cambie la configuración de texto del módulo:

• Fuente de texto: Kumbh Sans
• Peso de la fuente del texto: Ligero
• Color del texto: # 08665c
• Tamaño del texto: 30px
• Altura de la línea de texto: 1em

Espaciado

Aplique también un margen inferior.

• Margen inferior: 15px

Agregar módulo divisor a la columna 1

Visibilidad

Luego, agregue un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

• Mostrar divisor: Sí

Línea

Vaya a la pestaña de diseño del módulo y cambie el color de la línea.

• Color de línea: # fff8f5

Dimensionamiento

Modifique también la configuración de tamaño.

• Peso del divisor: 2px
• Alto: 2px

Espaciado

Agregue un poco de margen inferior también.

• Margen inferior: 50 px

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido H3

Agregue otro módulo de texto a la columna 1. Use algún contenido H3 de su elección.

Configuración de texto H3

Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H3 de la siguiente manera:

• Fuente del encabezado 3: Kumbh Sans
• Peso de fuente del encabezado 3: Negrita
• Título 3 Color del texto: # 08665c
• Tamaño del texto del encabezado 3:
  • Escritorio: 48px
  • Tableta: 38px
  • Teléfono: 32px

Espaciado

Utilice también un margen inferior.

• Margen inferior: 15px

Agregue el módulo de texto n. ° 3 a la columna 1

Agregar contenido

Agregue el último módulo de texto a la columna 1 con algún contenido descriptivo de su elección.

Configuración de texto

Cambie la configuración de texto en consecuencia:

• Fuente de texto: Kumbh Sans
• Color del texto: # 08665c
• Tamaño del texto: 16px
• Altura de la línea de texto: 1.8em

Espaciado

Incluya también un margen inferior.

• Margen inferior:
  • Escritorio: 200px
  • Tableta y teléfono: 150px

Agregar módulo Blurb a la columna 1

Dejar los cuadros de contenido vacíos

En el último módulo que necesitamos en esta columna, que es un módulo Blurb. Deje los cuadros de contenido vacíos.

Icono predeterminado

Seleccione el icono de flecha a continuación.

Icono de desplazamiento

Cambia el ícono al pasar el mouse.

Añadir enlace

Utilice también un enlace para este módulo.

Colocar el cursor sobre el color de fondo

Luego, agregue un color de fondo flotante.

• Color de fondo flotante: # 08665c

Configuración de iconos predeterminada

Navegue a la pestaña de diseño y cambie la configuración del icono de la siguiente manera:

• Color del icono: #ffffff
• Ubicación de la imagen / icono: parte superior
• Alineación de imagen / icono: Derecha
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 80px

Configuración del icono de desplazamiento

Modifique el tamaño de fuente del icono al pasar el mouse.

• Tamaño de fuente del icono de desplazamiento: 40px

Dimensionamiento

Luego, agregue algo de ancho a la configuración de tamaño.

• Ancho: 80px

Espaciado de desplazamiento

Modifica el relleno superior y derecho al pasar el mouse.

• Relleno superior flotante: 25px
• Relleno de desplazamiento hacia la derecha: 10px

Frontera

Incluya también algunas esquinas redondeadas en la configuración del borde.

• Todas las esquinas: 5px

Escala flotante

Luego, use la opción de escala de transformación al pasar el mouse.

• Desplazar ambos: 130%

Elemento principal e imagen publicitaria CSS

A continuación, navegue a la pestaña avanzada y use la siguiente línea de código CSS para el elemento principal:

cursor: pointer;

Utilice esta línea para el cuadro CSS de Blurb Image:

margin-bottom: 0px;

Posición

Complete la configuración del módulo reposicionándolo en la configuración de posición:

• Posición: Absoluto
• Ubicación: parte inferior derecha

Reutilizar la columna 1

Eliminar la columna 2

Una vez que haya completado la primera columna, puede reutilizarla para la segunda. Para hacer eso, primero elimine la segunda columna.

Clonar columna 1

Luego, clona el primero.

Cambiar el color de fondo de la columna 2

Por supuesto, deberá realizar algunos cambios en la columna duplicada, comenzando con el color de fondo.

• Color de fondo de la columna 2: # f0c7b1

Agregar transformación de traducción a la columna 2

También estamos agregando un valor de traducción de transformación en tamaños de pantalla más pequeños.

• Derecha:
  • Escritorio: /
  • Tableta y teléfono: 50px

Cambiar contenido duplicado

Asegúrese de cambiar todo el contenido duplicado.

Cambiar el enlace del módulo de Blurb

Complete la columna duplicada cambiando el enlace dentro del Módulo Blurb.

Reutilizar fila

Una vez que haya completado la primera fila y sus columnas, puede clonar toda la fila.

Eliminar la columna 2

Elimine la segunda columna dentro de la configuración de la fila.

Cambiar el color de fondo de la columna

Luego, cambie el color de fondo de la columna restante.

• Color de fondo de la columna: # dfe7f2

Agregar margen superior a la fila

Regrese a la configuración general de la fila y agregue un margen superior sensible.

• Margen superior:
  • Escritorio: 50px
  • Tableta y teléfono: 100px

Cambiar contenido duplicado

Luego, cambie todo el contenido duplicado en la columna.

Cambiar el enlace del módulo de Blurb

Completa el tutorial cambiando el enlace dentro del Módulo Blurb. ¡Eso es todo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con sus CTA. Más específicamente, le mostramos cómo agregar flechas de botón de esquina animadas por desplazamiento. Este enfoque le ayuda a mantener una apariencia limpia al diseñar una sección con múltiples CTA. También agrega un nivel extra de interacción. Pudiste 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 aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.