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…
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.
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?
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.
Hola muchas gracias por el video fue muy útil, tengo una duda, solo me cargan los iconos de la categoría Brands ¿hay alguna manera de cambiar esto?
Hola Liz, puedes probar con otra versión de CDN, aquí tienes el listado. O también prueba cambiando el nombre de la fuente (font-family) en el CSS, puede ser:
font-family: «Font Awesome 5 pro» !important;
o
font-family: «Font Awesome 5 Free» !important;
Como puedo poner unos iconos personalizados de esta manera, para el modulo seguir
Hola Fernando, deberías subir tu imagen con la medida deseada a la biblioteca de medios, copiar la url y usar este otro fragmento:
.et-social-google-plus a.icon:before { content: url(url_image.jpg); }Hola muchas gracias por el video, me encanta tu contenido, me ha ayudado mucho, pero en este caso hago todos los pasos que comentas y en vez de salirme el icono de WhatsApp por ejemplo me sale un cuadro, intente lo que le colocaste a liz y aun nada que podría ser eso, muchas gracias.
Hola Naldo, puede ser la cache, desactiva la Generación de CSS Estático desde Divi > Opciones del tema > Constructor Avanzado…
También desactiva opción por opción de Divi > Opciones del tema > Performance. Quizá sea una de esas opciones.
Si después de hacer lo que te menciono el problema continúa me dejas la url de tu web y le doy un vistazo.
a mi tambien me sale el mismo problema, ya desactive el css estatico, pero no encontre el opcion por opcion en performance, en ingles que nombre tiene?
Hola Mauricio, la opción Performance está en Divi > Opciones del tema > Performance (a lado de la pestaña General)… Y aparece en las últimas versiones de divi.
Hola, tu contenido esta fabuloso!!!, he intentado el paso a paso y ahora en el CSS PERSONALIZADO, aparece varios cuadros para insertar el texto, como: ANTES, ELEMENTO PRINCIPAL, DESPUES, SEGUIDORES SOCIALES, ICONO SOCIAL, BOTON SEGUIR, ¿En qué cuadro inserto el texto, porque intento en todos y me aparece un mensaje en rojo que dice: Expected RBRACE. Y Unexpected token ´}´.
muchas gracias 🙂
Hola Cindy, muchas gracias.
El CSS debe ir en los ajustes de la página y no del módulo. Ajustes de la página > Avanzado > CSS Personalizado…
Hola, tengo un problema, puse el ícono de whatsapp en mi header global, pero no aparece el icono de whatsapp en mi pagina de archivo, es decir cuando busco en el filtro alguna propiedad o cuando en el menú selecciono ventas o cualquier otra opción que me lleve a la pagina de archivo o categorías pero no tiene sentido porque el header es global, y solo en esas dos páginas no me aparece el icono, no sé como solucionarlo
Hola Katherine, es probable que no esté tomando los valores CSS en esas páginas de archivo (cosas de divi). Necesitamos inspeccionar la página para saber que está pasando.
Compárteme la url de tu web y con gusto reviso que pasa.
Un abrazo.
Hola oscar con que clase podría cambiar el ícono de facebook del módulo de persona por algún otro?
Hola Ale, si quieres cambiar el icono de facebook del módulo persona, usa este fragmento CSS:
.et_pb_facebook_icon:before { font-family: "Font Awesome 5 Brands" !important; content: "\f232"; /* icono fontawesome */ font-size: 20px !important; }Hola! Sigo todos los pasos, incluso cuando copio todos los códigos tal cual aparecen acá todo me aparece correctamente, pero cuando quiero colocar otro ícono no aparece, simplemente desaparece el ícono que había antes y queda el recuadro de color. No sé qué pasa, me sucede con todos los íconos que intento colocar.
La web en cuestión es fabembid.cl
Veo que ya lo tienes hecho 🙂 ¡Excelente!
Hola! Probé con las 3 tipografías que pasaste, pero no me toma ninguna. No encuentro el error.
Hola Valeria, ¿Sigues teniendo problemas con esto?
Hola! Muy bueno el tutorial.
No me toma el ícono cuando le pongo la tipografía. Probé con todas las opciones que se encuentran en el comentario. A qué se puede deber?
Hola Valeria, muchas gracias.
¿No te aparece el icono? ¿Cuál es la url de tu web?