4 botones de desplazamiento animados para la sección Hero de tu sitio Divi (y cómo crearlos)


Los botones de desplazamiento animados tienen un trabajo simple pero importante: atraer la atención de los usuarios y dirigirlos hacia su página web. Este tipo de botones normalmente se encuentran arriba del pliegue para que un visitante pueda simplemente hacer clic en el botón sin tener que desplazarse a la siguiente sección importante de la página web. De hecho, Divi tiene esta función de botón de desplazamiento incorporada en el módulo de encabezado de ancho completo.

En este tutorial, le mostraré cómo crear botones de desplazamiento animados completamente personalizados en Divi. Entonces, si está buscando una alternativa creativa al botón de desplazamiento incorporado de Divi en el módulo de encabezado de ancho completo, estos diseños animados de botones de desplazamiento lo ayudarán a orientarse en la dirección correcta (literalmente).

Vistazo

Aquí hay un vistazo rápido a los diseños que construiremos juntos.

diseños de botones de desplazamiento animados divi

diseños de botones de desplazamiento animados divi

diseños de botones de desplazamiento animados divi

diseños de botones de desplazamiento animados divi

Descargue el diseño animado de los botones de desplazamiento GRATIS

Para poner sus manos en 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=V-nMdKW2esM (/ incrustar)

Suscríbase a nuestro canal de Youtube

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá tener lo siguiente:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)
  3. Imágenes para ser utilizadas como contenido simulado

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Construyendo la sección de encabezado

Antes de comenzar a diseñar los botones de desplazamiento animados, debemos configurar nuestra sección de encabezado simulado. Como nos vamos a concentrar más en obtener los diseños de botones de desplazamiento animados, vamos a mantener el diseño del encabezado simple con un fondo oscuro. Una vez hecho esto, podemos duplicar la sección para abordar cada nuevo diseño de botón de desplazamiento.

Para comenzar, cree una sección regular con una fila de una columna.

diseños de botones de desplazamiento animados divi

Luego, antes de agregar un módulo, abra la configuración de la sección y agregue un fondo oscuro de la siguiente manera:

Color de fondo: # 222222

Cualquier fondo oscuro funcionará.

diseños de botones de desplazamiento animados divi

Agregar el texto del encabezado

Para crear el texto del encabezado simulado, agregue un nuevo módulo de texto a la fila de una columna.

diseños de botones de desplazamiento animados divi

Luego actualice el contenido del cuerpo con un encabezado h1 justo encima del texto del párrafo predeterminado.

<h1>scroll button animation</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

diseños de botones de desplazamiento animados divi

Luego actualice la configuración de diseño de la siguiente manera:

Fuente de texto: Karla
Texto Alineación de texto: centro
Tamaño del texto del encabezado: 5vw
Color del texto: claro

diseños de botones de desplazamiento animados divi

Este será el diseño básico de la sección que utilizaremos para nuestros diferentes botones de desplazamiento animados.

Diseño animado del botón de desplazamiento n. ° 1: Texto vertical con animación de rebote lento

Con nuestro diseño de sección básico en su lugar, estamos listos para agregar nuestro primer botón de desplazamiento animado. Este botón de desplazamiento consta de un módulo de publicidad que tendrá un icono en el lado derecho. Luego, el texto y el ícono se rotarán verticalmente para que el ícono de la flecha apunte hacia abajo. Después de eso, agregaremos la animación de rebote con una duración lenta.

Aquí te explicamos cómo hacerlo.

Primero, agregue una nueva fila de una columna justo debajo de nuestra fila que contiene el texto del encabezado.

diseños de botones de desplazamiento animados divi

Luego agregue un módulo de propaganda a la fila.

diseños de botones de desplazamiento animados divi

En la configuración de publicidad, elimine el contenido predeterminado del cuerpo y agregue lo siguiente:

Título: desplazamiento
Use el icono: SÍ
Icono: flecha derecha (ver captura de pantalla)

diseños de botones de desplazamiento animados divi

Luego actualice la configuración de diseño de la siguiente manera:

Color del icono: #ffffff
Colocación de imagen / icono: izquierda
Usar tamaño de fuente de icono: SÍ
Tamaño de fuente del icono: 50 px
Estilo de fuente del título: TT
Color del texto del título: #ffffff
Tamaño del texto del título: 14 px
Espaciado entre letras de título: 3px
Altura de la línea de título: 50 px (igual que el tamaño de fuente del icono)

diseños de botones de desplazamiento animados divi

A continuación, debemos darle a nuestro anuncio un ancho establecido y rotarlo verticalmente de la siguiente manera:

ancho: 132px
Alineación del módulo: centro
Transformar Rotar eje Z: 90deg

Ahora todo lo que tenemos que hacer es invertir el orden del contenido de la propaganda para que el icono de flecha esté a la derecha de la propaganda en lugar de a la izquierda. Esto hará que la flecha se muestre debajo del texto vertical según lo previsto. Para hacer esto, necesitamos agregar el siguiente CSS personalizado al elemento principal:

direction: rtl;

diseños de botones de desplazamiento animados divi

Agregar la animación de pulso lento

Para agregar la animación, actualice lo siguiente:

Estilo de animación: rebote
Dirección de animación: abajo
Duración de la animación: 5000 ms
Retraso de animación: 400 ms
Animación de imagen / icono: de izquierda a derecha

diseños de botones de desplazamiento animados divi

Resultado final

Ahora veamos el resultado final para el diseño # 1.

diseños de botones de desplazamiento animados divi

Diseño de botón de desplazamiento animado n. ° 2: Animación de texto de marquesina vertical

Este próximo diseño se basa en el diseño n. ° 1, ya que mantendremos el botón de desplazamiento de texto vertical creado con el módulo de publicidad. La diferencia será la animación. Para este diseño, agregaremos una animación de diapositiva que comienza con el botón de desplazamiento oculto sobre el contenedor de la fila y luego termina con el botón oculto debajo de la fila. Con la animación en bucle, esto creará un efecto de animación de marquesina de texto que llamará la atención del usuario.

Aquí te explicamos cómo hacerlo.

Primero duplica la sección completa del diseño # 1.

Actualizar la configuración de la fila 2

A continuación, actualice la fila de la sección que contiene el módulo de publicidad / botón de desplazamiento de la siguiente manera:

Desbordamiento horizontal: oculto
Desbordamiento vertical: oculto

diseños de botones de desplazamiento animados divi

Actualizar la configuración del módulo Blurb

Para crear la animación de marquesina, primero debemos usar la traducción de transformación para mover el texto publicitario debajo del contenedor de filas (oculto a la vista). Esta será la posición del texto al final de la animación. Actualice lo siguiente:

Transformar Traducir eje Y: 115 px

diseños de botones de desplazamiento animados divi

A continuación, agregue la siguiente configuración de animación:

Estilo de animación: diapositiva
Dirección de animación: abajo
Duración de la animación: 4000 ms
Intensidad de animación: 195%
Opacidad de inicio de animación: 100%
Curva de velocidad de animación: lineal
Repetición de animación: bucle

diseños de botones de desplazamiento animados divi

Resultado final

Ahora veamos el resultado final para el diseño # 3.

diseños de botones de desplazamiento animados divi

Diseño de botón de desplazamiento animado # 3: pestaña de flecha con animación deslizante retrasada

Para este próximo diseño, vamos a combinar un módulo de texto y un módulo de publicidad para crear un diseño único de pestaña de flecha.

Para este diseño comenzaremos con el diseño básico de la sección del encabezado. Por lo tanto, puede duplicar la sección de diseño duplicado # 3 y luego eliminar el módulo de propaganda en la fila 2.

Luego agregue un módulo de texto a la fila de una columna directamente debajo de la primera fila.

diseños de botones de desplazamiento animados divi

Luego actualice el contenido del cuerpo con la palabra "desplazamiento".

diseños de botones de desplazamiento animados divi

Luego actualice la configuración de diseño de la siguiente manera:

Color de fondo: #ffffff
Color del texto del texto: # 222222
Alineación de texto: centro
Ancho: 50 px
Alineación del módulo: centro
Margen: 0px inferior
Acolchado: 20px arriba, 20px abajo
Esquinas redondeadas 5px abajo a la izquierda, 5px abajo a la derecha

diseños de botones de desplazamiento animados divi

Añadir el icono de Blurb

Ahora que el módulo de texto está en su lugar, necesitamos crear el ícono de publicidad directamente debajo de él para completar el diseño de la pestaña de flecha. Para hacer esto, agregue un nuevo módulo de publicidad debajo del módulo de texto.

diseños de botones de desplazamiento animados divi

Luego elimine el título predeterminado y el texto del cuerpo. Luego agregue actualizar lo siguiente:

Use el icono: SÍ
Icono: triángulo de flecha inferior (ver captura de pantalla)

diseños de botones de desplazamiento animados divi

Luego actualice la configuración de la siguiente manera:

Color del icono: #ffffff
Margen: -36px arriba, 0px abajo

Este margen negativo adjuntará la flecha al módulo de texto para un diseño agradable de pestaña de flecha.

Luego agregue el siguiente CSS a la imagen de publicidad para eliminar un margen innecesario debajo del icono.

Blurb Image CSS:

margin-bottom: 0px;

diseños de botones de desplazamiento animados divi

Fila 2 Configuración y animación

Como deseamos agregar la misma animación a los dos módulos que conforman el diseño del botón de desplazamiento, necesitaremos agregar la animación a la fila que los contiene. Actualice la configuración de la fila de la siguiente manera:

Ancho Máx .: 100px
Acolchado: 0px arriba, 0px abajo

Estilo de animación: diapositiva
Dirección de animación: abajo
Duración de la animación: 1200 ms

Fila 1 Color de fondo y sombra de caja

El toque final de este diseño implica agregar un color de fondo a la primera fila directamente encima de la fila del botón de desplazamiento. Y al actualizar el índice Z de esa fila, permitiremos que la animación del botón de desplazamiento aparezca como si se estuviera rompiendo en el encabezado.

Abra la configuración de la fila 1 de la siguiente manera:

Color de fondo: # 222222

diseños de botones de desplazamiento animados divi

Índice Z: 10

diseños de botones de desplazamiento animados divi

Box Shadow: ver captura de pantalla
Posición vertical de la sombra de la caja: 80 px
Caja Shadow Blur Fuerza: 22px
Fuerza de propagación de sombra de caja: -70px
Color de sombra: # 222222 (asegúrese de que coincida con el color de fondo)

diseños de botones de desplazamiento animados divi

Resultado final

Ahora mira el resultado final.

diseños de botones de desplazamiento animados divi

Diseño de botón de desplazamiento animado # 4: animación de desplazamiento del mouse

Para este último botón de desplazamiento animado, crearemos una animación de desplazamiento del mouse combinando un módulo de texto y un módulo de publicidad.

Aquí te explicamos cómo hacerlo.

Para comenzar, puede usar la sección básica del encabezado. Luego agregue una nueva fila debajo de la fila 1.

diseños de botones de desplazamiento animados divi

Agregue el módulo Blurb

A continuación, agregue un módulo de propaganda a la fila. Luego elimine el título predeterminado y el texto del cuerpo.

Después de eso, actualice el icono de la siguiente manera:

Use el icono: SÍ
Icono: círculo (ver captura de pantalla)

diseños de botones de desplazamiento animados divi

Luego actualice la configuración de diseño de propaganda de la siguiente manera:

Color del icono: #ffffff
Usar tamaño de fuente de icono: SÍ
Tamaño de fuente del icono: 15 px
Estilo de animación: diapositiva
Dirección de animación: abajo
Duración de la animación: 1200 ms
Repetición de animación: bucle
Animación de imagen / icono: sin animación

Luego agregue el siguiente CSS personalizado a la imagen de Blurb:

margin-bottom: 0px;

diseños de botones de desplazamiento animados divi

Agregar el módulo de texto

A continuación, agregue un nuevo módulo de texto directamente debajo del módulo de publicidad. Luego actualice el texto del cuerpo con la palabra "desplazamiento".

diseños de botones de desplazamiento animados divi

Luego actualice la siguiente configuración de texto:

Color del texto del texto: #ffffff
Alineación de texto: centro
Ancho: 90 px
Margen: 10px arriba, -30px a la izquierda

diseños de botones de desplazamiento animados divi

Actualizar la configuración de la fila 2

Ahora actualice la configuración de la fila de la siguiente manera:

Ancho: 30px
Altura: 60 px
Esquinas redondeadas: 16px
Ancho del borde: 1px
Color del borde: #ffffff
Estilo de borde: sólido
Desbordamiento horizontal: visible
Desbordamiento vertical: visible

diseños de botones de desplazamiento animados divi

El resultado final

Ahora veamos el resultado final:

diseños de botones de desplazamiento animados divi

Agregar funcionalidad de enlace de anclaje

Los enlaces de anclaje son aquellos enlaces que saltan a diferentes secciones de una página. A menudo se usan en sitios web de una página. Podemos usar el mismo concepto para agregar un enlace de anclaje a nuestros botones de desplazamiento para que salten hacia abajo de la página a la sección deseada. Para agregar la funcionalidad de enlace de anclaje a sus botones de desplazamiento animados, hay dos cosas principales que debe hacer.

  1. Debe agregar una ID de CSS a la sección o fila a la que desea saltar
  2. Necesita agregar un enlace de anclaje con la misma ID de CSS a su botón de desplazamiento

Así es como funcionaría esto. Primero, cree una nueva sección debajo de la sección de encabezado que contenga el botón de desplazamiento. Luego, asigne a la nueva sección un ID de CSS en la pestaña avanzada.

diseños de botones de desplazamiento animados divi

Luego, encuentre el elemento / botón de desplazamiento que desea convertir en su enlace de anclaje y agregue una url que comience con un hashtag (o símbolo de libra) y esté inmediatamente seguido por la ID de CSS del elemento al que está saltando.

Por ejemplo, si la ID de CSS de la sección es "sección-2", entonces agregaría "# sección-2" como la URL del enlace.

diseños de botones de desplazamiento animados divi

Recuerde, Divi le permite agregar URL de enlace a cada elemento en Divi, así que siéntase libre de agregar enlaces a toda la fila que contiene el botón de desplazamiento animado.

Para más información, mira algunos cosas geniales que puedes hacer con enlaces de anclaje.

¡Se creativo!

No tenga miedo de combinar diferentes módulos y animarlos de diferentes maneras. De hecho, mientras exploraba nuevas formas de diseñar botones de desplazamiento con Divi, creé una divertida animación de desplazamiento del pulgar que podría usarse para dispositivos móviles. Lo he incluido en el Descarga gratis arriba en caso de que quiera verlo.

diseños de botones de desplazamiento animados divi

Pensamientos finales

Los botones de desplazamiento animados como estos son fáciles de construir con Divi. Y pueden usarse en más lugares que el encabezado si los trata como enlaces de anclaje. Espero que estos diseños lo inspiren a crear un nuevo botón de desplazamiento para su próximo proyecto.

Espero tener noticias suyas en los comentarios.

¡Salud!