4 botones de desplazamiento animados para la sección Hero de su sitio Divi (y cómo crearlos)
Publicado: 2019-08-08Los botones de desplazamiento animados tienen un trabajo simple pero importante de captar la atención de los usuarios y guiarlos hacia abajo en su página web. Este tipo de botones se encuentran normalmente en la parte superior de la página 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. Por lo tanto, 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 le ayudarán a apuntar en la dirección correcta (literalmente).
Vistazo
Aquí hay un vistazo rápido a los diseños que construiremos juntos.
Descargue el diseño de botones de desplazamiento animados GRATIS
Para poner sus manos sobre 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 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.
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.
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!
Suscríbete 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, necesitará lo siguiente:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Imágenes que se utilizarán para 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. Dado que nos vamos a concentrar más en obtener los diseños de los 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.
<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>
Luego actualice la configuración de diseño de la siguiente manera:
Fuente de texto: Karla
Alineación del texto del texto: centro
encabezado Tamaño del texto: 5vw
Color del texto: claro
Este será el diseño de la sección básica que usaremos para nuestros diferentes botones de desplazamiento animados.
Diseño de botón de desplazamiento animado 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 propaganda que tendrá un icono en el lado derecho. Luego, el texto y el ícono se rotarán verticalmente para que el ícono de flecha apunte hacia abajo. Después de eso, agregaremos la animación de rebote con una duración lenta.
He aquí 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 propaganda, elimine el contenido del cuerpo predeterminado y agregue lo siguiente:
Título: scroll
Usar icono: SÍ
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 de 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 de letras de título: 3px
Altura de la línea de título: 50 px (igual que el tamaño de fuente del icono)
A continuación, debemos darle a nuestra propaganda un ancho establecido y rotarlo verticalmente de la siguiente manera:
ancho: 132px
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:
direction: rtl;
Adición de 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: 5000ms
Retraso de animación: 400 ms
Animación de imagen / icono: de izquierda a derecha
Resultado final
Ahora veamos el resultado final del diseño n. ° 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 en el que mantendremos el botón de desplazamiento de texto vertical creado con el módulo de propaganda. La diferencia será la animación. Para este diseño, vamos a agregar 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 marco de texto que llamará la atención del usuario.
He aquí cómo hacerlo.
Primero duplique toda la sección 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 propaganda / 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 necesitamos usar transform translate para mover el texto de la propaganda debajo del contenedor de la fila (oculto a la vista). Esta será la posición en la que estará el texto al final de la animación. Actualice lo siguiente:
Transformar trasladar eje Y: 115px
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: 4000ms
Intensidad de animación: 195%
Opacidad inicial de la animación: 100%
Curva de velocidad de animación: lineal
Repetición de animación: bucle
Resultado final
Ahora veamos el resultado final del diseño n. ° 3.
Diseño de botón de desplazamiento animado n. ° 3: pestaña de flecha con animación de deslizamiento hacia abajo retardada
Para este próximo diseño, vamos a combinar un módulo de texto y un módulo de propaganda para crear un diseño de pestaña de flecha único.
Para este diseño, comenzaremos con el diseño básico de la sección de encabezado. Por lo tanto, puede duplicar la sección de diseño n. ° 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 "scroll".
Luego actualice la configuración de diseño de la siguiente manera:
Color de fondo: #ffffff
Texto Color del texto: # 222222
Alineación de texto: centro
Ancho: 50px
Alineación del módulo: centro
Margen: 0px inferior
Relleno: 20px superior, 20px inferior
Esquinas redondeadas 5px abajo a la izquierda, 5px abajo a la derecha
Agregar el ícono de Blurb
Ahora que el módulo de texto está en su lugar, debemos crear el ícono de propaganda directamente debajo de él para completar el diseño de la pestaña de flecha. Para hacer esto, agregue un nuevo módulo de propaganda debajo del módulo de texto.
Luego, elimine el título y el texto del cuerpo predeterminados. Luego agregue actualizar lo siguiente:
Usar icono: SÍ
Icono: triángulo de flecha inferior (ver captura de pantalla)
Luego actualice la configuración de la siguiente manera:
Color del icono: #ffffff
Margen: -36px superior, 0px inferior
Este margen negativo adjuntará la flecha al módulo de texto para un bonito diseño de pestaña de flecha.
Luego agregue el siguiente CSS a la imagen publicitaria para eliminar un margen innecesario debajo del ícono.
CSS de la imagen de Blurb:
margin-bottom: 0px;
Configuración y animación de la fila 2
Dado que queremos agregar la misma animación a los dos módulos que componen 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: 1200ms
Color de fondo de la fila 1 y sombra de cuadro
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 estuviera saliendo del 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
Posición vertical de la sombra del cuadro: 80px
Fuerza de desenfoque de sombra de caja: 22px
Fuerza de propagación de la sombra de la caja: -70px
Color de sombra: # 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 n. ° 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 propaganda.
He aquí cómo hacerlo.
Para empezar, puede utilizar la sección de encabezado básica. Luego agregue una nueva fila debajo de la fila 1.
Agregue el módulo Blurb
A continuación, agregue un módulo de propaganda a la fila. Luego, elimine el título y el texto del cuerpo predeterminados.
Después de eso, actualice el icono de la siguiente manera:
Usar icono: SÍ
Icono: círculo (ver captura de pantalla)
Luego actualice la configuración de diseño de la propaganda de la siguiente manera:
Color del icono: #ffffff
Usar tamaño de fuente de icono: SÍ
Tamaño de fuente del icono: 15px
Estilo de animación: diapositiva
Dirección de animación: Abajo
Duración de la animación: 1200ms
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;
Agregar el módulo de texto
A continuación, agregue un nuevo módulo de texto directamente debajo del módulo de propaganda. Luego actualice el cuerpo del texto con la palabra "scroll".
Luego actualice la siguiente configuración de texto:
Color del texto del texto: #ffffff
Alineación de texto: centro
Ancho: 90px
Margen: 10px arriba, -30px a la izquierda
Actualizar la configuración de la fila 2
Ahora actualice la configuración de la fila de la siguiente manera:
Ancho: 30px
Alto: 60px
Esquinas redondeadas: 16px
Ancho del borde: 1 px
Color del borde: #ffffff
Estilo de 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 utilizan 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 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.
- Debe agregar una ID de CSS a la sección o fila a la que desea saltar
- 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 del encabezado que contiene el botón de desplazamiento. Luego, asigne a la nueva sección un ID de CSS en la pestaña avanzada.
Luego, busque 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 almohadilla) y sea seguida inmediatamente por el 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 formas. 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 la descarga gratuita anterior en caso de que quieras verlo.
Pensamientos finales
Los botones de desplazamiento animados como estos son fáciles de construir con Divi. Y se pueden usar 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 tuyas en los comentarios.
¡Salud!