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 incluye 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

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:

01
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:

01
02
03
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

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!