Cómo diseñar una barra emergente de botones de seguimiento de redes sociales a su plantilla de página en Divi

Los botones de seguimiento de redes sociales siguen siendo una adición popular a cualquier sitio web. Las empresas y las personas utilizan estos enlaces para redirigir a los usuarios a sus páginas de redes sociales con la esperanza de que los visitantes los sigan o se suscriban a su canal. Normalmente, verá estos botones en una página de contacto, barra lateral o en el pie de página de un sitio web.

En este tutorial, le mostraremos cómo diseñar una barra emergente de botones de seguimiento de redes sociales a una plantilla de página en Divi. Esto le dará a esos botones de seguimiento de las redes sociales una mayor visibilidad en su sitio sin ser una distracción. Además, con el Theme Builder de Divi, puede crear una plantilla de página que incluye estos botones para cualquiera (o todas) las páginas de su sitio con facilidad.

¡Saltemos y comencemos!

Vistazo

Aquí hay un vistazo rápido a los botones de seguimiento de redes sociales que se crean en este tutorial.

Descargue GRATIS la plantilla de la página de la barra de botones de seguimiento de redes sociales emergentes

Para poner sus manos en la plantilla de página de la barra de botones de seguimiento de redes sociales de este tutorial, primero deberá descargarla 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.

Descarga los archivos

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.

DESCARGAR

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!

Para importar el diseño a su página, simplemente extraiga el archivo zip y agregue uno de los archivos json en Divi Theme Builder usando la opción de portabilidad de Theme Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá instalar y activar Divi Theme. Asegúrese de tener la última versión de Divi.

También necesitará al menos una página creada con Divi Builder con fines de prueba a fin de asignar la nueva plantilla a esa página para mostrar el resultado.

Después de eso, estará listo para comenzar.

Creación de una barra de botones de seguimiento de redes sociales emergentes para una plantilla de página en Divi

Crear una nueva plantilla

Desde el Panel de WordPress, navegue a Divi> Theme Builder. Luego haga clic en el cuadro "Agregar nueva plantilla" para crear una nueva plantilla.

Asigne la plantilla a las páginas en las que desea que se muestre la barra de promoción.

En la nueva plantilla, haga clic en el área "Agregar cuerpo personalizado" y luego seleccione "Crear cuerpo personalizado".

Luego seleccione la opción "Construir desde cero".

Creación de la barra de botones de seguimiento de redes sociales

Crear nueva fila

Para empezar, agreguemos una fila de una columna a la plantilla.

Agregar módulo de botones de seguimiento de redes sociales

En la fila de una columna, agregue un módulo de seguimiento de redes sociales.

Agregar redes sociales

En la configuración de seguimiento de redes sociales, agregue todas las redes sociales que le gustaría que se muestren. Para agregar una nueva red, haga clic en el ícono más gris Agregar nueva red social y luego seleccione la red de la lista.

También deberá agregar la URL del enlace para la página de redes sociales a la que desea redirigir a los visitantes. Para hacer esto, haga clic en el ícono de configuración en la red de medios sociales y actualice la URL del enlace de la cuenta.

Agregar módulo de botones

Una vez que haya terminado las redes del módulo de seguimiento de redes sociales, estamos listos para agregar un módulo de botones. Este botón será sobre el que el usuario pase el cursor para revelar la barra emergente. Continúe y agregue el módulo de botones y luego arrástrelo sobre el módulo de seguimiento de redes sociales.

Contenido del botón

A continuación, actualice el contenido del botón de la siguiente manera:

• Texto del botón: Seguir
• URL del enlace del botón: #

Estilos y posicionamiento de botones

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

• Tamaño del texto del botón: 16px
• Color del texto del botón:
• Ancho del borde del botón: 0px
• Espacio entre letras de los botones: 1 px
• Fuente del botón: Montserrat
• Peso de la fuente del botón: Negrita
• Icono de botón: flecha derecha (ver captura de pantalla)
• Margen: 100% restante
• Acolchado: fondo de 100px

Luego agregue el siguiente CSS personalizado al elemento principal:

position: absolute;

Configuración de filas

Una vez que el botón tenga estilo y esté listo para funcionar, actualice la configuración de la fila de la siguiente manera:

• Color de fondo: #ffffff
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 64px
• Relleno: 24 píxeles en la parte superior, 16 píxeles en la parte inferior, 16 píxeles en la izquierda

Sombra de caja de fila

• Box Shadow: ver captura de pantalla
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de desenfoque de sombra de caja: 30px
• Color de sombra (escritorio): transparente
• Color de sombra (flotar): rgba (0,0,0,0.2)

Posicionamiento de filas

Luego agregue el siguiente CSS personalizado al elemento principal de la fila:

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

Esto colocará la fila en una posición fija a un tercio del camino hacia abajo desde la parte superior del navegador.

Efecto emergente al pasar el mouse con márgenes personalizados

Ahora agregue los siguientes valores de margen para agregar la función emergente al desplazarse.

• Margen (escritorio): -64px a la izquierda
• Margen (desplazamiento): 0px a la izquierda

Eso se encarga de la barra de botones de seguimiento de las redes sociales. Pero aún tenemos que terminar la plantilla creando el módulo de contenido de publicación necesario.

Adición del módulo de contenido de la publicación a la plantilla

En este punto, la barra de botones de seguimiento de las redes sociales está lista para funcionar. Pero dado que se trata de una plantilla, debemos asegurarnos de agregar el módulo de contenido de la publicación para mostrar el contenido de la (s) página (s) usando esta plantilla.

Agregar nueva fila con el módulo de contenido de publicación

Debajo de la fila que contiene la barra de botones de seguimiento de las redes sociales, agregue una nueva fila de una columna.

Luego agregue el módulo de contenido de publicación a la fila.

Actualmente, el módulo de contenido de la publicación se limitará al ancho predeterminado de la fila principal. Necesitamos cambiar el ancho y el relleno de la fila para que abarque todo el ancho del navegador sin espacios. Esto es importante porque el módulo de contenido de la publicación determina el área que tiene para crear una página utilizando Divi Builder.

Actualice lo siguiente:

• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px arriba, 0px abajo

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

• Relleno: 0px arriba, 0px abajo

Eso lo hace. Ahora asegúrese de guardar el diseño antes de salir del editor. Luego, guarde también los cambios para el generador de temas.

Resultado final

Para ver los resultados finales, visite la página que tiene la plantilla asignada. Así es como se verá la barra emergente de botones de seguimiento de redes sociales.

Pensamientos finales

Esta barra de botones de seguimiento de redes sociales definitivamente ayudará a llevar esas importantes redes sociales a un primer plano. La funcionalidad emergente se asegurará de que los íconos no sean una distracción para los usuarios. Y puede agregar la barra a cualquier plantilla de página usando Theme Builder. ¡Espero que sea una gran adición a su próximo proyecto!

Espero tener noticias tuyas en los comentarios.

¡Salud!