Hoy en Rinopixel le traemos este tutorial  de como crear 4 botones de desplazamiento, Este tutorial es gracias Jason Champagne y nosotros se lo traemos totalmente en español. 

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 de botones de desplazamiento animados 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.

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.

Con los planes de hosting profesional y empresarial de Rinopixel, tendrás DIVI totalmente gratis, puedes adquirir tu plan en https://rinopixel.com/hosting-wordpress/

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.

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á.

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.

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

1. <h1>scroll button animation</h1>

2. &lt;p&gt;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.&lt;/p&gt;

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

Fuente del texto: Karla
Texto Alineación del
texto: Título central Tamaño del texto: 5vw
Color del texto: Claro

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.

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

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

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

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

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

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

ancho: 132 px
Alineación del módulo: centro
Transformar Girar eje Z: 90 grados

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:

01direction: rtl;

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
Retardo de animación : 400 ms Animación de
imagen / icono: de izquierda a derecha

Resultado final

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

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

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

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%
Velocidad de animación Curva:
Repetición de animación lineal : Bucle

Resultado final

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

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.

Luego actualice el contenido del cuerpo con la palabra «desplazamiento».

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

Color de fondo: #ffffff Color del
texto del texto: # 222222
Alineación del texto: centro
Ancho: 50 píxeles
Alineación del módulo: centro
Margen: 0 píxeles inferior Relleno: 20 píxeles
superior, 20
píxeles inferior Esquinas redondeadas 5 píxeles inferior izquierda, 5 píxeles inferior derecha

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.

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 (vea la captura de pantalla)

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:

01margin-bottom: 0px;

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áximo
: 100px Relleno: 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

Índice Z: 10

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

Resultado final

Ahora mira el resultado final.

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.

Agregar el módulo de publicidad

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 Icon: YES
Icon: circle (ver captura de pantalla)

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

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

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

01margin-bottom: 0px;

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».

Luego actualice la siguiente configuración de texto:

Texto Color del texto: #ffffff
Alineación del texto: centro
Ancho: 90 píxeles
Margen: 10 píxeles arriba, -30 píxeles a la izquierda

Actualizar la configuración de la fila 2

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

Ancho: 30 píxeles
Altura: 60 píxeles
Esquinas redondeadas: 16 píxeles
Ancho del borde: 1 píxeles
Color del borde: #ffffff
Estilo del borde : Sólido
Desbordamiento horizontal: visible
Desbordamiento vertical: visible

El resultado final

Ahora veamos el resultado final:

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.

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 seguida por la ID de CSS del elemento al que está saltando.

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

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 obtener más información, consulte algunas cosas interesantes que puede hacer con los 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. 

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.

¡Gracias!

Pin It on Pinterest