El módulo de seguimiento de redes sociales 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 quiere 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 sus botones de seguimiento de redes sociales.
En este tutorial, le mostraré algunos efectos únicos de desplazamiento del botón de seguimiento de las redes sociales que pueden sorprenderlo.
¡Échale un vistazo!
Aquí hay un adelanto de los efectos de desplazamiento que crearemos.
Bordes a Puntos
Puntos a las fronteras
Sombras que rebotan 1
Sombras que rebotan 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
Comience a construir los efectos de desplazamiento de la parte 2
Parte 3: Efectos de filtro
Comenzar a construir el efecto de desplazamiento de la parte 3
Parte 4: Iconos grandes con combinación de pantalla y efectos de filtro
Comenzar a construir el efecto de desplazamiento de la parte 4
Empezando
Suscríbete a nuestro canal de Youtube
Para poner en marcha 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. En el modal emergente Cargar desde biblioteca, seleccione el paquete de diseño de desarrollador de aplicaciones. Luego haga clic para usar los botones de seguimiento de Para impulsar el diseño de nuestras 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 para construir en el front-end.
Ahora elimine todas las secciones de la página, excepto la sección que contiene los botones de seguimiento de las redes sociales en la parte inferior de la página.
Esto servirá como plantilla inicial para crear nuestros efectos de desplazamiento.
Guardemos la sección en la Biblioteca Divi para que podamos agregar una versión nueva 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 a partir de la sección prefabricada.
Ahora está listo para comenzar a crear los efectos de desplazamiento.
Empecemos.
Bordes a Puntos
Para este efecto de desplazamiento, agregaremos una sombra de cuadro alrededor del botón que se encoge y se desplaza sobre el botón al pasar el mouse. 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 usa para el icono en su portapapeles (#3b5998). Este color se usará para la sombra del cuadro.
Ahora abra la pestaña de diseño y actualice lo siguiente:
Sombra de cuadro: vea la captura de pantalla
Posición vertical de la sombra de cuadro: 0 px (predeterminado), -46 px (suspender)
Intensidad de desenfoque de sombra de cuadro: 0 px
Intensidad de propagación de sombra de cuadro: 5 px (predeterminado), -16 px (suspender)
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 Box Shadow 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, repite 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 las cajas para cada una de las redes sociales restantes:
Color de sombra de caja 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 Dribble: rgba(234,76,141,0.5)
Color de sombra de 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 cambiando los valores predeterminados y de desplazamiento para la posición vertical de la sombra del cuadro y la fuerza de dispersió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 (al pasar el mouse)
Intensidad de extensión de la sombra del cuadro: -16 px (predeterminado), 5 px (al pasar el mouse)
Deberá actualizar esta nueva configuración de sombreado de cuadro para cada una de las redes sociales restantes. Puede hacer esto manualmente o puede usar el botón derecho del ratón para copiar la posición vertical de Box Shadow y distribuir 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 que rebotan
Para la próxima versión de este diseño y efecto de desplazamiento, vamos a hacer que la sombra del cuadro (punto) de cada uno de los botones comience en la misma ubicación de forma predeterminada. Esto creará una especie de efecto de rebote.
Para comenzar, puede duplicar el diseño de «puntos a los bordes» que creamos 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 (pasar el mouse)
Posición vertical de la sombra del cuadro: -70 px (predeterminado), 0 px (pasar el mouse)
Para la red social Twitter, actualice lo siguiente:
Posición horizontal de la sombra del cuadro: 70 px (predeterminado), 0 px (al pasar el mouse)
Posición vertical de la sombra del cuadro: -70 px (predeterminado), 0 px (al pasar el mouse)
Para la red social Instagram, actualice lo siguiente:
Posición horizontal de la sombra del cuadro: 70 px (predeterminado), 0 px (al pasar el mouse)
Posición vertical de la sombra del cuadro: -70 px (predeterminado), 0 px (al pasar el mouse)
Para la red social Dribble, actualice lo siguiente:
Posición horizontal de la sombra del cuadro: -70 px (predeterminado), 0 px (al pasar el mouse)
Posición vertical de la sombra del cuadro: -70 px (predeterminado), 0 px (al pasar el mouse)
Para la red social Youtube, actualice lo siguiente:
Posición horizontal de la sombra del cuadro: -140 px (predeterminado), 0 px (al pasar el mouse)
Posición vertical de la sombra del cuadro: -70 px (predeterminado), 0 px (al pasar el mouse)
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 pasar el mouse. Para comenzar, asegúrese de estar usando 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 predeterminado que se convierte en el color de la red social.
Para hacer esto, abra el módulo de seguimiento de redes sociales y luego abra la configuración de la red de Facebook. Actualice lo siguiente:
Color de fondo: #333333 (predeterminado), #3b5998 (pasar el mouse)
Luego continúe 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 (moverse)
Color de fondo de Instagram: #333333 (predeterminado), #ea2c59 (moverse)
Color de fondo de Dribble: #333333 (predeterminado), #ea4c8d (moverse)
Color de fondo de Youtube: # 333333 (predeterminado), a82400 (flotar)
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 se haga más grande sin agregar ningún espacio real al botón que alejaría los botones adyacentes al pasar el mouse por encima.
Para hacer esto, abra la configuración de la red de Facebook y agregue los siguientes estilos de sombra de cuadro:
Sombra de cuadro: vea la captura de pantalla
Posición vertical de la sombra de cuadro: 0px
Intensidad de desenfoque de sombra de cuadro: 0px
Intensidad de propagación de sombra de cuadro: 0px (predeterminado), 10px (desplazamiento)
Color de sombra: #3b5998 (debe ser del mismo color que el color de fondo 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 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 ello actualiza lo siguiente:
Color de sombra de cuadro de Twitter: #00aced
Color de sombra de cuadro de Instagram: #ea2c59
Color de sombra de cuadro de regate: #ea4c8d
Color de sombra de cuadro 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 establecidas en 40 px, 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 la red de Facebook y actualice lo siguiente:
Esquinas redondeadas (hover): 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 pasar el mouse. Para comenzar, asegúrese de estar usando 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 saturación e inversión de filtro al pasar el mouse
El uso de la saturación y los efectos de filtro invertido son 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 íconos 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 de redes sociales individuales y actualice las siguientes opciones de filtro :
Saturación: 0 % (predeterminado), 100 % (desplazamiento)
Invertir: 100 % (predeterminado), 0 % (desplazamiento)
Mira el resultado.
#4 Íconos de colores grandes con mezcla de pantalla y efectos de filtro
Para este diseño final de desplazamiento de botón de redes sociales, vamos a comenzar 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.
A continuación, abra la configuración de seguimiento de las redes sociales y elimine la red social de Twitter predeterminada, dejando solo el elemento de la red social de Facebook.
Luego actualice la configuración de seguimiento de las redes sociales de la siguiente manera:
Color de fondo: #ffffff
Alineación de elementos: 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 px en la parte superior, 10 px en la parte inferior, 10 px a la izquierda, 10 px a la derecha
Saturación: 0 % (predeterminado), 100 % (desplazamiento)
Invertir: 100 % (predeterminado), 0 % (flotar)
Guardar ajustes.
Luego, duplique el elemento de la red social de Facebook 4 veces para que tenga un total de 5 botones de redes sociales.
Ahora abra cada uno de los elementos de la red social duplicados y actualice la red social y el color de fondo a #000000.
Guardar ajustes.
Ahora que tenemos el modo de combinació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 flotante.
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 íconos/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.
|
01
02
03
04
05
06
07
08
|
@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 íconos 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 te familiarizas con cómo funcionan los efectos de desplazamiento dentro de Divi. Hasta la próxima, continúe dominando sus habilidades Divi y cree algo hermoso para su próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!