fbpx

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:

Prueba 12 clases gratis

 

1. Cómo contratar un hosting, instalar WordPress y acceder a tu web

2. Cómo buscar y elegir un theme para tu web

3. Cómo crear menús personalizados

4 Cómo personalizar páginas en WordPress con Gutenberg

5. Cómo instalar Divi y cargar diseño web en un par de clics. 

6. Qué es el email marketing y porqué debes usarlo

7. Cómo funciona el editor visual de MailerLite para crear tus campañas de email marketing

8. Cómo crear una tienda online profesional con Flatsome

9. Cómo crear una página web para inmobiliarias

10. Estrategias linkbuilding para mejorar el SEO

11. Cómo crear metadescripciones para atraer más clics a nuestra web.

12. Cómo conseguir suscriptores y contactos

Muchas gracias por suscribirte. Tendrás noticias mías por correo en breveRevisa, por favor, tu bandeja de spam o correo no deseado si en unos minutos no has recibido mi email.¡Seguimos!​David