Cómo diseñar una barra de botones de pop-up de redes sociales emergentes para la plantilla de tu página en Divi


Los botones de seguimiento de redes sociales siguen siendo una adición popular a cualquier sitio web. Las empresas y los individuos usan 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 al 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 para una plantilla de página en Divi. Esto le dará a esos botones de seguimiento de redes sociales una mayor visibilidad en su sitio sin ser una distracción. Además, con Divi’s Theme Builder, puede crear una plantilla de página que incluya estos botones para cualquier (o todas) páginas a través 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.

barra de botones de seguimiento de redes sociales

barra de botones de seguimiento de redes sociales

barra de botones de seguimiento de redes sociales

Descargue GRATIS la plantilla de la página de la barra de botones de pop-out de los medios sociales

Para poner sus manos en la plantilla de la página de la barra de botones Seguir de las 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y agregue uno de los archivos json al Divi Theme Builder usando el Opción de portabilidad del generador de temas.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberás instalar y activar el tema Divi. Asegúrate de tener la última versión de Divi.

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

Después de eso, estás listo para partir.

Crear una barra emergente de botones de seguimiento de redes sociales para una plantilla de página en Divi

Crear una nueva plantilla

Desde el Panel de WordPress, navegue hasta Divi> Generador de temas. Luego haga clic en el cuadro "Agregar nueva plantilla" para crear una nueva plantilla.

barra de botones de seguimiento de redes sociales

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

barra de botones de seguimiento de redes sociales

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

barra de botones de seguimiento de redes sociales

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

barra de botones de seguimiento de redes sociales

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.

barra de botones de seguimiento de redes sociales

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.

barra de botones de seguimiento de redes sociales

Agregar redes sociales

En la configuración de seguimiento de redes sociales, agregue todas las redes sociales que desea mostrar. Para agregar una nueva red, haga clic en el icono gris más Agregar nueva red social y luego seleccione la red de la lista.

barra de botones de seguimiento de redes sociales

barra de botones de seguimiento de redes sociales

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

barra de botones de seguimiento de redes sociales

Agregar módulo de botón

Después de que termine las redes de módulos de seguimiento de redes sociales, estamos listos para agregar un módulo de botón. Este botón será el que pase el usuario para revelar la barra emergente. Continúe y agregue el módulo de botón, luego arrástrelo sobre el módulo de seguimiento de redes sociales.

barra de botones 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: #

barra de botones de seguimiento de redes sociales

Estilos de botones y posicionamiento

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

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

Luego agregue el siguiente CSS personalizado al elemento principal:

position: absolute;

barra de botones de seguimiento de redes sociales

Configuración de fila

Una vez que el botón esté diseñado y listo, actualice la configuración de la fila de la siguiente manera:

  • Color de fondo: #ffffff
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 64px
  • Relleno: 24px arriba, 16px abajo, 16px izquierda

barra de botones de seguimiento de redes sociales

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

barra de botones de seguimiento de redes sociales

Posicionamiento de fila

Luego agregue el siguiente CSS personalizado a la fila Elemento principal:

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

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

barra de botones de seguimiento de redes sociales

Pop Out en el efecto de desplazamiento con márgenes personalizados

Ahora agregue los siguientes valores de margen para agregar la función emergente en la funcionalidad de desplazamiento.

  • Margen (escritorio): -64 px a la izquierda
  • Margen (pasar el mouse): 0 px a la izquierda

barra de botones de seguimiento de redes sociales

barra de botones de seguimiento de redes sociales

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

Agregar el módulo de contenido de publicación a la plantilla

En este punto, la barra de botones de seguimiento de redes sociales está lista para funcionar. Pero como se trata de una plantilla, debemos asegurarnos y agregar el módulo de contenido de publicación para mostrar el contenido de las páginas que usan esta plantilla.

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

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

barra de botones de seguimiento de redes sociales

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

barra de botones de seguimiento de redes sociales

Actualmente, el módulo de contenido de publicación estará limitado 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 publicación determina el área que debe construir una página con Divi Builder.

Actualice lo siguiente:

  • Ancho: 100%
  • Ancho Máx .: 100%
  • Acolchado: 0px arriba, 0px abajo

barra de botones de seguimiento de redes sociales

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

  • Acolchado: 0px arriba, 0px abajo

barra de botones de seguimiento de redes sociales

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

barra de botones de seguimiento de redes sociales

Resultado final

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

barra de botones de seguimiento de redes sociales

barra de botones de seguimiento de redes sociales

barra de botones de seguimiento de redes sociales

Pensamientos finales

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

Espero tener noticias suyas en los comentarios.

¡Salud!