Cerrar video

Cómo agregar el icono de whatsapp o cualquier icono al módulo seguir en medios sociales de divi

por | Jul 14, 2021 | Tutorial gratuito | 2 Comentarios

Si ya eres un usuario antiguo de divi sabrás que aún tiene módulos por mejorar y uno de ellos es el módulo de “Seguir en medios sociales”. Este módulo nos sirve para introducir iconos de las “principales” redes sociales en nuestro sitio web para que los visitantes nos puedan seguir.

Lamentablemente este módulo de “Seguir en medios sociales” (The Divi Social Media Module) con el tiempo ha quedado un poco obsoleto ya que aún conserva iconos de redes sociales que hoy en día ya quedaron en el olvido, tal es el caso de: Google+, My Space entre otras… Pero sobre todo aún no le han agregado iconos que hoy en día son fundamentales cómo: WhatsApp, Telegram, Messenger incluso Tiktok…

Cómo agregar el icono de whatsapp o cualquier icono al módulo seguir en medios sociales de divi

Por tal motivo, en este tutorial te enseñaré a agregar los iconos que quieras en este módulo. Esto lo haremos sin plugins, sin métodos difíciles, todo será muy práctico y fácil. Este es un truco que he aplicado desde hace mucho tiempo en mis desarrollos web pero hasta el día de hoy me animé a compartirlo con todos ustedes.

Para agregar los iconos nos vamos a apoyar de FontAwesome la cual es una librería de iconos que podemos incrustar facilmente con divi mediante este CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Además de esta librería vamos a necesitar de esta fragmento de código CSS que solamente tienes que copiar y pegar:

.et-social-google-plus a.icon:before {
  font-family: "Font Awesome 5 Brands" !important;
  content: "\f232"; /* icono fontawesome */
  font-size: 20px !important;
}

Reemplazar el atributo “title” de los iconos:

<script>
jQuery(document).ready(function($){
  $('.et-social-google-plus a').attr('title','Escríbenos por WhatsApp');
});
</script>

Y es todo, con eso tendremos cualquier icono insertado en el módulo “Seguir en medios sociales” y lo mejor es que podemos personalizar el icono desde los mismos ajustes del módulo y esto lo hace realmente genial.

Si no sabes cómo implementar estos fragmentos de código dale play al video y no te quedará ninguna duda.

Bueno, si al final tienes dudas o cualquier pregunta, puedes dejarla en la sección de los comentarios y cómo siempre estaré encantado de responder.

Un abrazo.

2 Comentarios

  1. juan

    hola, gracias por tus tutoriales. una pregunta, esta pagina https://www.keychron.com/ el la primera sesión tiene unas imágenes que cambian automáticamente. ¿será que tu tienes un tutorial de como hacer eso?

    Responder
    • Oscar Viedma

      Hola Juan, de nada.

      No tengo un tutorial exactamente sobre ese efecto, pero divi viene con un módulo slider con el cual puedes lograr un efecto parecido. Si quieres algo más avanzado puedes usar el plugin Smart Slider el cual tiene una versión free y otra premium.

      Responder

Enviar un comentario

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

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest