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

Avance

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

Escritorio

Móvil

Descarga el diseño 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

¡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 columna 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 gradiente: Radial
• Dirección radial: inferior izquierda
• Posición inicial: 40%
• Posición final: 40%

Dimensionamiento

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

• Igualar alturas de columna: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Ancho interior: 90%
• Ancho máximo interior: 1580px

Espaciado

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

• Relleno derecho de columna 1: 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 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:

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

Espaciado

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

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

Agregue el Módulo de Texto #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 del texto: Kumbh Sans
• Color del texto: #08665c
• Tamaño del texto: 16px
• Altura de la línea de texto: 1,8 em

Espaciado

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

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

Agregue la fila n. ° 1 a la columna 2

Estructura de la columna

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

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 del canalón: 2

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

• Relleno superior: 0px
• Relleno 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
• Relleno izquierdo:
  
  • Computadora de escritorio y tableta: 8%
  • Teléfono: 10%
• Relleno derecho:
  
  • Computadora de escritorio y tableta: 8%
  • Teléfono: 10%

Borde

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 contenido de su elección.

Configuración de texto

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

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

Espaciado

Aplique un poco de margen inferior también.

• Margen inferior: 15px

Agregue el 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

Pase 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
• Altura: 2px

Espaciado

Agregue un poco de margen inferior también.

• Margen inferior: 50px

Agregue el Módulo de Texto #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

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

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

Espaciado

Use un poco de margen inferior también.

• Margen inferior: 15px

Agregue el Módulo de Texto #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 del texto: Kumbh Sans
• Color del texto: #08665c
• Tamaño del texto: 16px
• Altura de la línea de texto: 1,8 em

Espaciado

Incluya algo de margen inferior también.

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

Agregue el módulo Blurb a la columna 1

Deje las cajas de contenido vacías

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

Icono predeterminado

Seleccione el icono de flecha siguiente.

Icono de desplazamiento

Cambie el ícono al pasar el mouse.

Añadir enlace

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

Color de fondo flotante

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
• Colocación de imagen/icono: Arriba
• Alineación de imagen/icono: Derecha
• Usar tamaño de fuente de icono: Sí
• Icono Tamaño de fuente: 80px

Configuración del icono de desplazamiento

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

• Icono de desplazamiento Tamaño de fuente: 40px

Dimensionamiento

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

• Ancho: 80px

Espaciado de desplazamiento

Modifique el relleno superior y derecho al pasar el mouse.

• Relleno superior flotante: 25px
• Relleno de desplazamiento derecho: 10px

Borde

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.

• Pasar el cursor por ambos: 130 %

Elemento principal y CSS de imagen de Blurb

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

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

Posición

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

• Posición: Absoluta
• Ubicación: Abajo a la derecha

Reutilizar la columna 1

Eliminar columna 2

Una vez que haya completado la primera columna, puede reutilizarla para la segunda. Para hacer eso, elimine primero 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 Transformar Traducir 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.

• Bien:
  
  • 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 de Blurb.

Fila de reutilización

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

Eliminar 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 receptivo.

• 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

Complete el tutorial cambiando el enlace dentro del Módulo de 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 al pasar el mouse. Este enfoque lo ayuda a mantener una apariencia limpia al diseñar una sección con múltiples CTA. También agrega un nivel adicional 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 regalos de Divi, 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 los beneficios de este contenido gratuito.