Como muchos sabréis, Divi incorpora enlaces a las redes sociales de forma limitada. Es decir, solo podemos configurar Facebook, Twitter y Google Plus. Si queremos añadir más redes sociales debemos modificar algo de código. Pero no mucho, veremos que es muy sencillo.
Tabla de contenidos
¿Qué es Divi?
Antes que nada, para los que no conozcáis Divi, este no es más que una plantilla de WordPress que permite personalizar al máximo nuestra web sin tener demasiados conocimientos de Diseño Web, aunque se pueden aplicar dichos conocimientos para que nuestros diseños sean más espectaculares aún.
Si queréis aprender más sobre Divi aquí podéis consultar mis otros artículos donde explico mi experiencia y algunos trucos. Y si os has gustado y queréis adquirir dicha plantilla, podéis conseguir hasta un 20% de descuento si la compráis desde este enlace.
Es muy sencillo.Basta con añadir más estilos a nuestra plantilla y modificar el pie de nuestra web. Para ello, como siempre, os recomiendo trabajar con un Divi Child Theme para evitar perder nuestras modificaciones cuando salga una nueva versión de Divi.
Modificar style.css
Tenemos que añadir lo siguiente a nuestra hoja de estilos de nuestro tema Divi. Si estamos usando el Divi Child Theme tendremos que modificar la hoja de estilos de dicho tema.
Código:
/* Iconos de redes sociales para el footer de Divi */ /* Para añadir más redes sociales hay que editar el fichero /includes/social_icons.php de tu Child Theme */ .et-social-facebook a.icon:before { content: '\e093'; } .et-social-twitter a.icon:before { content: '\e094'; } .et-social-google-plus a.icon:before { content: '\e096'; } .et-social-pinterest a.icon:before { content: '\e095'; } .et-social-linkedin a.icon:before { content: '\e09d'; } .et-social-tumblr a.icon:before { content: '\e097'; } .et-social-instagram a.icon:before { content: '\e09a'; } .et-social-skype a.icon:before { content: '\e0a2'; } .et-social-flikr a.icon:before { content: '\e0a6'; } .et-social-myspace a.icon:before { content: '\e0a1'; } .et-social-dribbble a.icon:before { content: '\e09b'; } .et-social-youtube a.icon:before { content: '\e0a3'; } .et-social-vimeo a.icon:before { content: '\e09c'; } .et-social-rss a.icon:before { content: '\e09e'; }
Si estamos interesados en añadir otro icono diferente, podéis consultar este enlace de Elegant Themes donde tienen una gran recopilación de iconos y su código CSS:
Tenemos que modificar el fichero /includes/social_icons.php con lo siguiente. Si estamos usando Divi Child Theme tendremos que copiar el fichero de Divi en la carpeta de nuestro Child Theme para que podamos aplicar nuestras modificaciones ahí.
Hay que añadir el siguiente código al final del fichero, indicando nuestro nick en cada enlace:
<!-- Añadir estilos de los iconos en el Child Theme --> <li class="et-social-icon et-social-linkedin"> <a href="https://www.linkedin.com/in/nick" class="icon" rel="nofollow" target="_blank"> <span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span> </a> </li> <li class="et-social-icon et-social-youtube"> <a href="https://www.youtube.com/user/nick" class="icon" rel="nofollow" target="_blank"> <span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span> </a> </li> <li class="et-social-icon et-social-pinterest"> <a href="https://es.pinterest.com/nick" class="icon" rel="nofollow" target="_blank"> <span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span> </a> </li> <li class="et-social-icon et-social-instagram"> <a href="https://www.instagram.com/nick" class="icon" rel="nofollow" target="_blank"> <span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span> </a> </li>
Resultado
Una vez aplicados los cambios a nuestros ficheros, el resultado es el siguiente:
Como podéis ver, ya aparecen todos los iconos de nuestras redes sociales. Eso sí, para modificar la url destino de cada una tendremos que hacerlo desde el editor de nuestro tema modificando el fichero social_icons.php.
La ventaja de hacerlo de esta manera es que los iconos de redes sociales toman el color predefinido de nuestro tema y no tenemos que modificarlo a mano.
Hola Javier, en primer lugar enhorabuena por tu blog, me parece muy interesante.
Yo me dedico a Instalación de redes informáticas y no entiendo mucho de programación, el caso es que a mi mujer tiene una web que se la hizo una persona con la que ya no tiene contacto y ahora necesita quitar dos iconos de redes sociales, el de G+ y el de LinkedIn. Los iconos están posicionados igual que los que tienes en aquí en tu blog a la izquierda, tiene un aspecto posición igual que la que tu tienes, pero he dado mil vueltas y no logro encontrar donde están para quitar esos dos. Por favor sería tan amable de decirme como puedo llegar a ellos para eliminarlos.
Gracias de antemano por tu atención
Búenos días Leandro. Si la web la hicieron con WordPress lo más seguro es que sea un Plugin. Es cuestión de desactivarlo y ya está. Si me das la url de la web puede que te pueda dar alguna pista. Un saludo.
Hola Javier la url es http://www.maribelpaz.es
Solamente quiero quitar los iconos de G+ y Linkedin
Muchas Gracias
Hola Javier como muy bien decías el problema era de un plugin se llama monarch
Gracias
Saludos
Ese plugin es de Divi. Buena elección! 😉
Excelente! Me sirvió de muchísima ayuda. Mil gracias 🙂
Gracias a ti por dejar tu testimonio en mi blog ;). Saludos!