Cómo Hacer una Barra de Botones Sociales Flotantes con Divi

WordPress es Mejor con Divi

Por lo general si queremos mostrar en WordPress botones para que nos sigan en nuestras redes sociales necesitamos instalar un plugin.

Sin embargo con Divi no es necesario instalar ninguna herramienta adicional.

En la guía de hoy te voy a mostrar cómo insertar una barra de botones sociales en las entradas de tu blog usando el Theme Builder de Divi.

Cómo Crear una Barra de Botones Sociales con Divi

Hasta ahora la única forma que había de añadir una barra de botones sociales en un sitio WordPress era instalando un plugin dedicado a esa tarea.

Pero ahora gracias a Divi y al Theme Builder ya no necesitamos ningún plugin adicional porque podemos crear nuestra barra directamente con el constructor de plantillas.

Y además, no recuerdo haber visto ningún plugin de botones sociales que ofrezca un nivel de personalización tan alto y tanta libertad como Divi.

Recursos necesarios

Para crear la sección de entradas recientes con Divi vamos a usar las siguientes herramientas:

Paso a paso

En el siguiente video te muestro paso a paso cómo crear una barra de botones de seguir en redes sociales con Divi.

 

Paso 1 – Sección para la barra de botones

Para empezar añadimos una sección en cualquier lugar de la plantilla de entradas en la que queremos mostrar los botones de seguir en redes sociales con Divi.

Por ahora no hacemos ningún ajuste en la sección.

 

Paso 2 – Fila con 1 columna

Añadimos una fila con estructura de 1 columna y configuramos sus ajustes así:

TAMAÑO:

  • Uso Personalizado del Canalón de Ancho: Sí.
  • Espacio entre Columnas: 1
  • Ancho: 100%.
  • Ancho máximo: 100%.

SEPARACION:

  • Relleno superior y base: 0px
  • Relleno izquierda y derecha: 0px

 

Paso 3 – Módulo Seguir en Medios Sociales

Dentro de la fila insertamos un módulo Seguir en Medios Sociales y añadimos los íconos de las redes sociales que queramos.

No te olvides de agregar el enlace a tu perfil en cada uno de ellos.

 

Paso 4 – Módulo Botón

En segundo lugar añadimos un módulo Botón de Divi y lo arrastramos justo arriba del módulo de botones. Escribe la palabra Seguir en el texto del botón.

BOTON:

  • Usar Estilos Personalizados para Botón: Sí
  • Tamaño del Texto: 16px
  • Color: #444444
  • Color de fondo: rgba(0,0,0,0)
  • Ancho del borde: 0px
  • Color del borde: rgba(0,0,0,0)
  • Espacio entre letras: 1px
  • Fuente: Montserrat
  • Peso: Negrita
  • Icono del botón: flecha hacia la derecha
  • Solo Mostrar Icono en Hover: No

SEPARACIÓN:

  • Margen izquierdo: 100%
  • Relleno base: 150px

PUESTO:

  • Absoluto.

 

Paso 5 – Ajustes finales de la Sección

Ahora que ya tenemos todos los módulos configurados podemos hacer unos ajustes finales a la sección.

TAMAÑO:

  • Ancho: 64px

SEPARACIÓN::

  • Relleno superior: 24px
  • Relleno base: 16px
  • Relleno izquierda: 16px

SOMBRA DE LA CAJA

  • Sombra de la caja: primera opción.
  • Blur Strenght: 10px
  • Color: rgba(165,165,165,0.3)

PUESTO

  • Puesto: Fixed
  • Location: Izquierda – Centro
  • Indice Z: 100

 

SEPARACIÓN:

Volvemos a Separación y asignamos un margen negativo igual al ancho de la sección para que ésta se oculte. Aplicamos un margen cero a Flotar para que aparezca cuando acercamos el ratón.

  • Margen izquierdo: -64px
  • Margen izquierdo (Flotar): 0px

 

Guardamos los cambios en la plantilla y vamos a cualquier entrada publicada para ver cómo queda nuestra barra de botones para seguir en redes sociales con Divi.

 

Déjame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi y ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Las Guías Divi

los Módulos Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *