Con Divi y sus opciones adhesivas integradas, puede diseñar fácilmente un módulo de seguimiento de redes sociales fijo que mantendrá esos íconos de redes sociales en primer plano a medida que el usuario se desplaza hacia abajo en la página. Además, al agregar un estilo personalizado al módulo en el estado fijo, podemos crear transiciones de diseño únicas al activar el estado fijo en el desplazamiento. Entonces, si está buscando un control completo sobre el diseño de sus botones de seguimiento de redes sociales, ¡este tutorial es para usted!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Uso de un diseño de página de destino prefabricado
Para comenzar, necesitamos algún contenido de página simulado antes de diseñar el módulo de seguimiento de redes sociales fijo. Para ello, abra el menú de configuración y haga clic en el icono Cargar desde biblioteca. En la ventana emergente Cargar desde la biblioteca, busque y seleccione el diseño de la página de destino del diseñador de moda. Luego haga clic en el botón verde «Usar este diseño».
Crear la sección
Agregue una nueva sección regular al diseño.
Luego mueva la nueva sección a la parte superior de la página (o donde desee agregar sus enlaces de seguimiento de redes sociales).
Abra la configuración de la sección y actualice el color de fondo para que coincida con el diseño de la siguiente manera:
- Color de fondo: #fff9f2
En la pestaña de diseño, actualice el relleno de la sección:
- Relleno: 10px arriba 10px abajo
Crear la fila
Dentro de la sección, agregue una fila de una columna.
Abra la configuración de fila y actualice el tamaño y el espaciado de la siguiente manera:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
- Relleno: 0px arriba, 0px abajo
Una vez que la sección y la fila estén en su lugar, agregue un nuevo módulo de seguimiento de redes sociales a la fila.
Actualización de la configuración del módulo
Abra la configuración del módulo de seguimiento de redes sociales. Lo primero que debemos hacer es agregar una posición fija al módulo utilizando las Opciones fijas de Divi . En la pestaña Avanzado, actualice lo siguiente:
- Posición pegajosa: Stick to Top
Una vez que la posición fija esté en su lugar, podrá orientar el estilo del módulo en el estado fijo (muy parecido a lo que puede hacer con el estado flotante). Esto se puede hacer pasando el cursor sobre una opción y haciendo clic en el icono de la miniatura.
En la pestaña de diseño, actualice lo siguiente:
- Alineación del módulo: Centro
- Color del icono: #000 (escritorio), #fff (pasar el mouse), #fff (pegajoso)
- Ancho: 100%
- Ancho máximo: 100%
- Relleno: 20 px arriba, 12 px abajo, 10 px a la izquierda, 10 px a la derecha
Configuración de redes sociales
Una vez que la configuración del módulo esté lista, ahora podemos centrar nuestra atención en el estilo de los íconos de redes sociales individuales. Para hacer esto, primero diseñaremos un icono de red social. Luego duplicaremos la red social para crear las demás.
Ya debería tener dos redes sociales en la pestaña de contenido de forma predeterminada. Elimine uno de ellos y haga clic para editar el que queda.
En Configuración de redes sociales, seleccione una Red social y actualice los colores de fondo para los estados de escritorio, flotante y permanente.
- Red Social: TikTok (o la que quieras)
- Fondo: transparente (escritorio), #fe2c55 (flotar), #000 (adhesivo)
CONSEJO: El color de fondo cambiará automáticamente para coincidir con la marca de la red social. Puede copiar este color y agregarlo como color de fondo de estado flotante para el icono. Esto mostrará el color de fondo predeterminado de la red social al pasar el cursor sobre el icono.
Ahora puede alternar entre las pestañas para ver el color de fondo de los tres estados (escritorio, flotante y fijo).
A continuación, vamos a darle al icono una bonita forma ovalada y un borde para que coincida un poco mejor con el diseño. En la pestaña de diseño, actualice lo siguiente:
- Esquinas redondeadas: 50%
- Ancho del borde: 1px
- Color del borde: #000 (escritorio), transparente (pasar el mouse)
En este momento, el icono tiene forma de círculo. Para lograr una forma más ovalada, podemos agregar más relleno a la derecha y a la izquierda. También podemos crear más espacio entre los iconos añadiendo márgenes derecho e izquierdo. Asegúrese de actualizar también el espaciado en la pantalla de la tableta y el teléfono.
- Margen (escritorio): 15 px a la izquierda, 15 px a la derecha
- Margen (adhesivo): 0px a la izquierda, 0px a la derecha
- Margen (teléfono): 0px a la izquierda, 0px a la derecha
- Relleno (escritorio): 16 px a la izquierda, 16 px a la derecha
- Relleno (tableta): 14 px a la izquierda, 14 px a la derecha
- Relleno (teléfono): 0px izquierda, 0px derecha
Ahora que hemos completado el diseño de la primera red social, podemos duplicar el ícono para crear más. Para hacer esto, abra la configuración del módulo de seguimiento de redes sociales y haga clic en el icono duplicado en el elemento de la red social. Para este ejemplo, creemos 4 más.
Ahora, todo lo que tenemos que hacer es actualizar cada uno de los nuevos elementos de la red social con una nueva red social. Debido a que esto cambiará el color de fondo, también deberá actualizar el color de fondo para cada uno.
Para hacer esto, abra la configuración de la segunda red social y actualice lo siguiente:
- Red Social: Facebook
- Color de fondo: transparente (escritorio), #3b5998 (hover)
Continúa el mismo proceso para actualizar el resto de las redes sociales.
Resultado final
Ahora veamos el resultado final en la página en vivo.
Para un diseño y una transición más exclusivos, podemos alinear los íconos de seguimiento de redes sociales verticalmente cuando el estado fijo está activado. Para hacer esto, podemos agregar algunos fragmentos de CSS al módulo.
En la pestaña Avanzado, agregue el siguiente CSS al Elemento principal en el estado fijo.
|
01
02
03
04
05
|
display:flex;flex-direction: column;align-items: center;justify-content: center;width: auto !important; |
Luego, agregue el siguiente CSS al ícono social en el estado Sticky.
|
01
|
margin-right: 0; |
¡Aquí está el resultado!
Para alinear los íconos de red a la derecha en el estado fijo, agregue lo siguiente debajo del CSS existente del elemento principal en el estado fijo:
|
01
02
|
left: auto !important;right: 0; |
¡Aquí está el resultado!
Resultados finales
Aquí hay otro vistazo a los resultados finales de los diseños de módulos de seguimiento de redes sociales persistentes.
Pensamientos finales
Los botones de seguimiento de las redes sociales son casi siempre una característica clave en un sitio web. Son una de las principales formas de conectar los canales de redes sociales a un sitio web. Es por eso que el módulo de seguimiento de redes sociales de Divi está repleto de todos los íconos de red y las opciones de diseño que necesita para crear la solución perfecta para su sitio. Con suerte, este diseño de módulo de seguimiento de redes sociales pegajoso será útil para su próximo proyecto.
Para obtener una solución más completa para compartir en las redes sociales, puede consultar Monarch .
Espero escuchar de usted en los comentarios.
¡Salud!