Cómo crear efectos únicos de desplazamiento del botón de seguimiento de redes sociales con Divi

El módulo Social Media Follow de Divi le permite diseñar y agregar fácilmente esos enlaces importantes a sus redes sociales en cualquier lugar de su sitio web. Y si desea ensuciarse las manos con algunos de los poderosos efectos de desplazamiento integrados de Divi, también puede diseñar algunos efectos de desplazamiento creativos para los botones de seguimiento de sus redes sociales.

En este tutorial, le mostraré algunos efectos únicos de desplazamiento del botón de seguimiento de las redes sociales que pueden sorprenderlo.

¡Echale un vistazo!

Vistazo

Aquí hay un adelanto de los efectos de desplazamiento que crearemos.

Parte 1: Mover las sombras de los cuadros para resaltar los botones de seguimiento de las redes sociales

Fronteras a puntos

Puntos a las fronteras

Sombras rebotantes 1

Sombras rebotantes 2

Comience a construir efectos de desplazamiento de la parte 1

Parte 2: Cambio de color, tamaño y forma al pasar el mouse

Cambio de tamaño y color

Cambio de tamaño, color y forma

Empiece a crear efectos de desplazamiento de la parte 2

Parte 3: Efectos de filtro

Comience a construir el efecto de desplazamiento de la parte 3

Parte 4: Iconos grandes con efectos de filtro y fusión de pantalla

Comience a construir el efecto de desplazamiento de la parte 4

Empezando

Suscríbete a nuestro canal de Youtube

Para poner las cosas en marcha para este tutorial, todo lo que realmente necesita es el tema Divi instalado y activo. Luego crea una nueva página y dale un título a tu página. Luego haga clic para usar Divi Builder y seleccione la opción para Usar un diseño prefabricado. Desde el modal emergente Cargar desde biblioteca, seleccione el Paquete de diseño de desarrollador de aplicaciones. Luego haga clic para usar el Para comenzar el diseño de nuestros botones de seguimiento de redes sociales, vamos a usar el diseño de la página de inicio del desarrollador de aplicaciones.

Publique su página y haga clic en el botón Construir en la interfaz.

Ahora elimine todas las secciones de la página, excepto la sección que contiene los botones de seguimiento de redes sociales en la parte inferior de la página.

Esto servirá como una plantilla de inicio para crear nuestros efectos de desplazamiento.

Guardemos la sección en la Biblioteca Divi para que podamos agregar una nueva versión de estos diseños de botones de seguimiento de redes sociales cuando sea necesario.

También puede duplicar la sección varias veces en su página. Esto le permitirá crear diferentes efectos de desplazamiento comenzando con la sección prefabricada.

Ahora está listo para comenzar a crear los efectos de desplazamiento.

Empecemos.

# 1 Sombras de cuadro en movimiento para resaltar los botones de seguimiento de sus redes sociales

Fronteras a puntos

Para este efecto de desplazamiento, vamos a agregar una sombra de cuadro alrededor del botón que se contrae y se desplaza sobre el botón al desplazar el cursor. Para hacer esto, abra el módulo de seguimiento de redes sociales y haga clic para abrir la configuración de la red social de Facebook.

Luego copie el color de fondo que se está usando para el ícono en su portapapeles (# 3b5998). Este color se utilizará para la sombra del cuadro.

Ahora abra la pestaña de diseño y actualice lo siguiente:

Box Shadow: ver captura de pantalla
Posición vertical de la sombra del cuadro: 0px (predeterminado), -46px (desplazamiento)
Fuerza de desenfoque de sombra de caja: 0px
Fuerza de propagación de la sombra de la caja: 5 px (predeterminado), -16 px (desplazamiento)

Para el color de la sombra, pegue el color de fondo (# 3b5998) y disminuya la opacidad en un 50%. Esto le dará una versión más clara del color de fondo del botón.

Color de sombra: rgba (59,89,152,0.5)

Ahora haga clic con el botón derecho en la categoría de estilo de Sombra de cuadro y seleccione Copiar estilos de sombra de cuadro.

Guarde la configuración de la red social de Facebook y luego haga clic derecho en cada una de las redes sociales y seleccione Pegar estilos de elementos para cada una. Esto aplicará los mismos estilos de sombra de cuadro al resto de los botones.

Sin embargo, aún deberá actualizar el color de la sombra del cuadro que es específico para cada uno. Para ello, repita el mismo proceso que hicimos para la red social Facebook. Abra la configuración específica de la red social, copie el color de fondo que se está utilizando, péguelo como el nuevo color de sombra del cuadro y luego disminuya la opacidad en un 50%.

Aquí están los colores de las sombras de los recuadros para cada una de las redes sociales restantes:

Color de la sombra del cuadro de Twitter: rgba (0,172,237,0.5)
Color de sombra de caja de Instagram: rgba (234,44,89,0.5)
Color de sombra de caja de regate: rgba (234,76,141,0.5)
Color de la sombra de la caja de Youtube: rgba (168,36,0,0.5)

Una vez que se actualicen los colores de la sombra del cuadro, verifique el resultado final.

Puntos a las fronteras

Puede revertir fácilmente el efecto de desplazamiento al cambiar los valores predeterminados y de desplazamiento para la posición vertical de la sombra del cuadro y la fuerza de propagación.

Duplique la sección (si desea mantener el diseño de "bordes a puntos") y luego abra la configuración del módulo de seguimiento de redes sociales. Luego abra la configuración de la red social Facebook y actualice lo siguiente:

Posición vertical de la sombra del cuadro: -46 px (predeterminado), 0 px (desplazamiento)
Fuerza de propagación de la sombra del cuadro: -16 px (predeterminado), 5 px (desplazamiento)

Deberá actualizar esta nueva configuración de sombra de cuadro para cada una de las redes sociales restantes. Puede hacer esto manualmente o puede usar el clic derecho para copiar la posición vertical de la sombra del cuadro y extender la fuerza y ​​luego pegarlos en cada una de las redes.

Una vez hecho esto, su diseño final se verá así.

Efecto de sombras rebotantes

Para la próxima versión de este diseño y efecto de desplazamiento, vamos a hacer que el cuadro de sombra (punto) de cada uno de los botones comience en la misma ubicación por defecto. Esto creará una especie de efecto de rebote.

Para empezar, puede duplicar el diseño de "puntos a bordes" que construimos anteriormente. Abra la configuración del módulo de seguimiento de redes sociales y luego abra la configuración de la red social de Facebook. Actualice los siguientes estilos de sombra de cuadro:

Posición horizontal de la sombra del cuadro: 140 px (predeterminado), 0 px (desplazamiento)
Posición vertical de la sombra del cuadro: -70 px (predeterminado), 0 px (desplazamiento)

Para la red social Twitter, actualice lo siguiente:

Posición horizontal de la sombra del cuadro: 70 px (predeterminado), 0 px (desplazamiento)
Posición vertical de la sombra del cuadro: -70 px (predeterminado), 0 px (desplazamiento)

Para la red social Instagram, actualice lo siguiente:

Posición horizontal de la sombra del cuadro: 70 px (predeterminado), 0 px (desplazamiento)
Posición vertical de la sombra del cuadro: -70 px (predeterminado), 0 px (desplazamiento)

Para la red social Dribble, actualice lo siguiente:

Posición horizontal de la sombra del cuadro: -70 px (predeterminado), 0 px (desplazamiento)
Posición vertical de la sombra del cuadro: -70 px (predeterminado), 0 px (desplazamiento)

Para la red social Youtube, actualice lo siguiente:

Posición horizontal de la sombra del cuadro: -140 px (predeterminado), 0 px (desplazamiento)
Posición vertical de la sombra del cuadro: -70 px (predeterminado), 0 px (desplazamiento)

Mira el resultado final.

Si no desea que el punto se muestre inicialmente, puede establecer el color de sombra de cuadro predeterminado en transparente y luego agregar un color de sombra de cuadro al pasar el mouse. Esto le daría un diseño similar al siguiente:

# 2 Cambio de color, tamaño y forma al pasar el mouse

Para esta próxima serie de efectos de desplazamiento, le mostraré cómo cambiar fácilmente el color, el tamaño o la forma de los botones de redes sociales al desplazarse. Para comenzar, asegúrese de estar utilizando una versión nueva de la sección del botón de seguimiento de redes sociales del diseño de la página de inicio del desarrollador de aplicaciones. Si lo guardó en su Biblioteca Divi, ahora sería un buen momento para agregarlo a su página.

Cambio de color

Cambiar el color de un botón de redes sociales al pasar el mouse es bastante sencillo. Para este ejemplo, comencemos con un color de fondo gris oscuro por defecto que se convierte en el color de la red social.

Para hacer esto, abra el módulo Social Media Follow y luego abra la configuración de la red de Facebook. Actualice lo siguiente:

Color de fondo: # 333333 (predeterminado), # 3b5998 (desplazarse)

Luego, continúe con este proceso para actualizar los cuatro colores de fondo de la red social restantes de la siguiente manera:

Color de fondo de Twitter: # 333333 (predeterminado), # 00aced (desplazarse)
Color de fondo de Instagram: # 333333 (predeterminado), # ea2c59 (hover)
Color de fondo de regate: # 333333 (predeterminado), # ea4c8d (flotar)
Color de fondo de Youtube: # 333333 (predeterminado), a82400 (hover)

Aquí está el resultado.

Cambio de tamaño

Para cambiar el tamaño del botón, podemos agregar una sombra de cuadro al pasar el mouse. Esto permite que el botón crezca sin agregar ningún espacio real al botón que empujaría los botones adyacentes al pasar el mouse.

Para hacer esto, abra la configuración de red de Facebook y agregue los siguientes estilos de sombra de cuadro:

Box Shadow: ver captura de pantalla
Posición vertical de la sombra del cuadro: 0px
Fuerza de desenfoque de sombra de caja: 0px
Fuerza de propagación de la sombra del cuadro: 0 px (predeterminado), 10 px (desplazamiento)
Color de sombra: # 3b5998 (debe ser del mismo color que el color de fondo de desplazamiento del botón)

Para acelerar el proceso de agregar el mismo diseño de sombra de cuadro al resto de los botones de la red social, haga clic con el botón derecho en la categoría de sombra de cuadro de la red de Facebook y haga clic en "Guardar estilos de sombra de cuadro".

Guarde la configuración y luego haga clic derecho en cada una de las redes sociales y seleccione "Pegar estilos de elementos".

Ahora todo lo que le queda por hacer es actualizar el color de la sombra del cuadro con el color correcto de la red social que coincida con su color de fondo flotante.

Para hacer esta actualización lo siguiente:

Color de sombra del cuadro de Twitter: # 00aced
Color de sombra de caja de Instagram: # ea2c59
Color de sombra de caja de regate: # ea4c8d
Color de la sombra de la caja de Youtube: # a82400

Aquí esta el resultado final.

Cambiando forma

Para cambiar la forma del botón al pasar el mouse, todo lo que necesita hacer es ajustar la opción "Esquinas redondeadas". Este módulo de seguimiento de redes sociales actualmente tiene las esquinas redondeadas configuradas en 40px, lo que hace que los botones sean circulares. Si queremos cambiarlo a cuadrado, todo lo que necesita hacer es ajustar las esquinas redondeadas a 0px al pasar el mouse.

Para hacer esto, abra la configuración de red de Facebook y actualice lo siguiente:

Esquinas redondeadas (flotar): 4px en las cuatro esquinas

Luego copie los estilos de borde y péguelos en cada red restante.

Aquí está el diseño final.

# 3 efectos de filtro

Para este próximo efecto de desplazamiento, le mostraré cómo usar un par de efectos de filtro para cambiar los colores de los botones de redes sociales al desplazarse. Para comenzar, asegúrese de estar utilizando una versión nueva de la sección del botón de seguimiento de redes sociales del diseño de la página de inicio del desarrollador de aplicaciones. Si lo guardó en su Biblioteca Divi, ahora sería un buen momento para agregarlo a su página.

Efectos de filtro de saturación e inversión al pasar el mouse

El uso de los efectos de saturación y de filtro invertido es una forma simple y poderosa de cambiar el estilo de los botones de sus redes sociales al pasar el mouse. En este ejemplo, le mostraré cómo combinar la saturación y la inversión para crear botones grises con iconos negros que vuelven a su color original al pasar el mouse.

Para hacer esto, abra la configuración del módulo de seguimiento de redes sociales y luego abra cada una de las configuraciones individuales de la red social y actualice las siguientes opciones de filtro:

Saturación: 0% (predeterminado), 100% (desplazamiento)
Invertir: 100% (predeterminado), 0% (desplazamiento)

Mira el resultado.

# 4 iconos de colores grandes con mezcla de pantalla y efectos de filtro

Para este diseño final de desplazamiento del botón de redes sociales, comenzaremos completamente desde cero. Así que cree una nueva sección con una fila de una columna y agregue un módulo de seguimiento de redes sociales a la fila.

Luego abra la configuración de seguimiento de redes sociales y elimine la red social predeterminada de Twitter, dejando solo el elemento de red social de Facebook.

Luego actualice la configuración de seguimiento de redes sociales de la siguiente manera:

Color de fondo: #ffffff
Alineación del artículo: centro
Modo de fusión: pantalla

A continuación, abra la configuración del elemento de la red social de Facebook y actualice lo siguiente:

Color de fondo: # 000000
Margen personalizado: 10 px a la izquierda, 10 px a la derecha
Relleno personalizado: 10 píxeles en la parte superior, 10 píxeles en la parte inferior, 10 píxeles a la izquierda, 10 píxeles a la derecha
Saturación: 0% (predeterminado), 100% (desplazamiento)
Invertir: 100% (predeterminado), 0% (desplazamiento)

Guardar ajustes.

Luego, duplique el elemento de la red social de Facebook 4 veces para que tenga un total de 5 botones de red social.

Ahora abra cada uno de los elementos duplicados de la red social y actualice la red social y el color de fondo a # 000000.

Guardar ajustes.

Ahora que tenemos el modo de fusión de pantalla en efecto, podemos agregar un color de fondo a la columna de la fila que contiene nuestro módulo de seguimiento de redes sociales. Cualquiera que sea el color de fondo que usemos, determinará el color de nuestros íconos de redes sociales y el color de fondo de desplazamiento.

Para hacer esto, abra la configuración de la fila y actualice lo siguiente:

Color de fondo de la columna 1: # 0c71c3

Observe cómo los colores de los iconos han cambiado a este color de fondo.

Ahora mira el resultado hasta ahora.

Para agrandar los iconos / botones, podemos usar un fragmento de CSS personalizado. Para hacer esto, primero debemos agregar una ID de CSS al módulo de seguimiento de redes sociales y luego agregar algo de CSS a la configuración de nuestra página.

Abra el módulo de seguimiento de redes sociales y agregue la siguiente ID de CSS en la pestaña avanzada.

ID de CSS: iconos grandes

A continuación, abra la configuración de su página y agregue el siguiente CSS personalizado.

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

Este código aumenta el tamaño de los iconos a 50 px y la altura y el ancho de los botones a 100 px. La consulta de medios se asegura de que este estilo solo se aplique al escritorio.

Mira el resultado final.

Pensamientos finales

Espero que estos efectos de desplazamiento del botón de seguimiento de las redes sociales le brinden algunas ideas nuevas y frescas sobre cómo capturar a sus visitantes con algunos diseños únicos. La mayoría de estos ejemplos son fáciles de crear, especialmente si se familiariza con el funcionamiento de los efectos de desplazamiento en Divi. Hasta la próxima, continúe dominando sus habilidades Divi y cree algo hermoso para su próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!