Añadir un bloque lateral flotante con iconos de redes sociales con Divi

Las redes sociales son indispensables hoy en cualquier sitio web ya que nos permiten entre otras cosas:

  • Conseguir mas visibilidad
  • Crear tu propia comunidad
  • Conocer lo que dicen sobre ti
  • Atraer y fidelizar clientes

Por ello hoy veremos como crear una barra de enlaces a redes sociales usando divi pero estos enlaces se encontraran en la parte derecha y permanecerán fijos mientras nos desplazamos.

Lo primero que debemos hacer es añadir una nueva sección, y dentro de la sección una fila. Da igual donde añadáis la sección, ya que el resultado final será el mismo.

En la sección que hemos creado, abrimos sus ajustes y pulsamos en la pestaña “avanzado”, una vez dentro nos desplazamos hasta “css personalizado” y lo abrimos. Buscamos “Elemento Principal” y pegamos el siguiente código:

position:fixed;
width:auto;
top:90px;
right:10px;
background-color:transparent;
z-index:9999999999;

Aceptamos los cambios y añadimos un módulo de “Seguir en medios sociales”, dentro de la fila creada.

En los ajustes de la red social, abrimos el desplegable de red social y elegimos la red que queramos añadir a ese módulo, y en enlace ponemos el enlace hacia nuestra red social.


Sigue aprendiendo con los cursos de la Zona Premium. Puedes darte de alta por 10€ al més aquí. Incluye acceso a los cursos, descargas de temas, plugins premium y soporte directo conmigo para dudas.

Configuramos las dos redes sociales que se ponen por defecto a nuestro gusto.

Si deseamos agregar mas redes sociales hay que señalar que este script solo nos permite agregar dos redes a la vez en cada modulo, por lo que si deseas agregar mas redes debes agregar otro modulo de seguir en medios sociales después del primero y en el, personalizar las dos redes que vienen. Si se desea agregar mas habrá que repetir este procedimiento.

En el siguiente vídeo veremos todo el procedimiento completo de forma más detallada: