Divi por defecto viene con algunas áreas para insertar nuestras redes sociales en el encabezado y en el pie de página de nuestro sitio. Para ser exacto, con divi solamente podemos insertar un icono para Facebook, Twitter y Google+. En este sentido, divi nos limita ya que si queremos insertar un icono de alguna otra red social como por ejemplo YouTube, Instagram, Linkedin, Dribbble, etcétera, no podremos al menos que modifiquemos los archivos de nuestro tema. Pero modificar los archivos del tema no es una buena práctica, es más, NO ES RECOMENDABLE porque perderemos todas las modificaciones cada que actualicemos el tema.
¿Entonces cómo podemos hacerlo? Probablemente ya has escuchado hablar de los temas niño, o temas hijo de WordPress, o en inglés Child Theme. Un Child Theme es un tema que depende de un padre, es decir, para que este funcione debe estar sincronizado con el tema principal del sitio. En este tema hijo haremos todas las modificaciones que queramos sin el miedo de perder los cambios cada que actualicemos el tema padre, en este caso, el tema divi.
En este tutorial mi objetivo no es enseñarte a crear un tema hijo, más bien, mi objetivo es mostrarte como agregar más iconos de redes sociales en divi, pero para lograr esto debemos hacerlo con un tema hijo. A mí me gusta facilitarte la vida, por lo tanto, me he dado la tarea de crear un Child Theme de Divi qué podrás descargar completamente gratis a continuación…
Este Child Theme de divi ya viene configurado para agregar código CSS, nuevas funciones y para agregar nuevos iconos de redes sociales. Así que puedes usar el tema hijo o niño en cualquier proyecto que desees. Lo único que tienes que hacer es instalar el tema en tu wordpress como cualquier otro tema y activarlo.
Dale play al video tutorial y todo esto te quedará más claro…
Aquí te dejo el código de ejemplo que tienes que pegar en el archivo social_icons.php del Child Theme:
<li class="et-social-icon et-social-youtube">
<a target="_blank" href="https://www.youtube.com/" class="icon">
<span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span>
</a></li>
Aquí está la lista actual de iconos sociales disponibles:
.et-social-facebook
.et-social-twitter
.et-social-google-plus
.et-social-pinterest
.et-social-linkedin
.et-social-tumblr
.et-social-instagram
.et-social-skype
.et-social-flikr
.et-social-myspace
.et-social-dribbble
.et-social-youtube
.et-social-vimeo
.et-social-rss
Para agregar iconos de Font Awesome en divi solo tienes que copiar & pegar la siguiente línea de código en Opciones del tema divi / Integración / Agregar código al <head> de su blog.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Y copiar & pegar el siguiente código en el archivo social_icons.php del tema hijo:
<li class="et-social-icon">
<a href="#" class="icon">
<i class="fab fa-behance"></i>
</a>
</li>Recuerda reemplazar <i class=»fab fa-behance»></i> por la etiqueta HTML correspondiente al icono de Font Awesome que desees.
Hola hacia mucho tiempo necesitaba esta informacion 🙁 al fin voy a poder terminar el trabajo del semestre muchas gracias T.T
Espero te haya ido muy bien. Exito en lo que viene Armand 😉
Gracias por el aporte,y ¿Como se hace para agregar iconos al modulo de anuncio?.
cordial saludo
Hola Giovany, lo ideal para el módulo anuncio es subir tu icono como imagen 😉
Hola, muchas gracias por el tutorial, me ha funcionado todo, sin embargo me gustaría quitar el icono de G+ y no sé cómo hacerlo.
Hola Kaz, el icono de G+ lo quitas desde Divi / Opciones del tema / y desactivas: Mostrar icono de Google+
Muchas gracias Óscar.
Muy claro tu vídeo y muy rápido a la hora de colocar el icono y el enlace en YouTube
Me alegra que te haya servido Juan. Gracias por las palabras.
Hola: Tengo un tema hijo de Divi creado y al entrar al editor no me aparece la carpeta «social_icons.php»
¿Como hago para subir los iconos que quiero?
Hola Miguel, tienes que agregar manualmente el archivo social_icons.php a tu tema hijo. Puedes descargarte el tema hijo que dejo en el tutorial para que veas cómo esta realizado.
Hola espero estés bien…
Sabes descargue el divi y monarch que creo que tu usas también pero resulta que las redes sociales que uso son Instagram, facebook, youtube, telegram y whatsapp. pero en monarch no aparece ni telegram ni whatsapp.. intente agregarlo con este tutorial pero no funciona o por lo menos no me funcionó a mi… serias tan amable de publicar un video tutorial de monarch y como agregar nuevas redes sociales
Hola Francisco, lamentablemente monarch no cuenta con iconos para compartir en telegram y whatsapp 🙁
Hace poco encontré esta página Desde aquí puedes crear unos botones para compartir en redes sociales, escoges las redes que deseas y le das «obtener código», el código que te genera lo puedes pegar en un módulo código, en la página o parte que deseas mostrar los iconos. También hay un plugin para wordpress que puedes instalar, a ver qué tal te va.
Hola muchas gracias primera vez que escribo pero veo esta página hace tiempo. Consulta, ya puse todos los íconos que necesitaba, pero me gustaría dejarlos centrados, sobre el logo de mi web. Y si es que se puede poner una línea separadora.
muchas gracias.
Hola Claudio qué tal, espero te estén siendo útiles los tutoriales.
En cuanto a tu consulta, me puedes pasar el link de tu sitio y con gusto lo inspecciono y te proporciono el fragmento de código que debes utilizar para centrar los iconos.
También si estás utilizando divi 4.0 o más puedes crearte tu propio pie de página y darle el estilo que quieras, quizá sea mejor opción.
Un abrazo Claudio.
Hola gracias por responder! este es el sitio http://viveenalemania.com/
Para centrar los iconos del footer y el texto de copy usa esto:
#main-footer .et-social-icons {
float: none;
margin: 20px;
}
#main-footer #footer-info {
float: none;
padding-bottom: 10px;
text-align: center;
}
Oscar, Extremadamente bueno este contenido. De verdad muchisimas gracias, que Dios te bendiga.
No consigo el icono de Achor.fm es un podcast para agregarlo a los demás iconos.
Lo que quiero también es ver como puedo cambiar los tipos de letras y colores.
Si tienes algún link de tus turoriales mucho te lo sabría agradecer.
Una vez más muchisimas gracias Oscar.
Saludos.
Hola Vicente muchas gracias.
Para agregar cualquier otro icono lo que puedes hacer es subir el icono a la biblioteca de medios de wordpress y posteriormente solamente copiar la URL de la imagen y usar este código:
<li class="et-social-icon">
<a href="#" class="icon" rel="nofollow ugc">
<img src="URL_IMAGEN.jpg" alt="Achor fm">
</a>
</li>
Respecto a cambiar los colores y tipo de letra esto será de acuerdo a la tipografía que hayas escogido para tu sitio desde el personalizador de temas. Desde el personalizador puedes modificar la tipografía y el color de los iconos.
Saludos Vicente
Hola Oscar, excelente ya logre agregar el icono de anchor.fm, lo único es que no me aparece en el pie de la web, como podría solucionar eso.
Muchas Gracias.
Saludos.
Corrijo al pie de la web si sale, donde no sale es por ejemplo si me meto en articulos, no aparece en el cuerpo de la web abajo, aparecen los iconos de IG YOUTUBE TWITTER FACEBOOK, pero el del podcast no, no se si sera por el tema
DIVI como tal.
Saludos.
Hola Vicente ¿te refieres a las entradas? Esos iconos que comentas del cuerpo de página cómo los haz agregado? Si estás utilizando el generador de temas puedes insertar los iconos manualmente.
Hola como estas, seguí el paso a paso, pero no logro que aparezca el icono, revisé y no encuentro nada. alguna sugerencia? Te felicito por tus videos, gracias, saludos
Hola Edgardo, muchas gracias. No sé que icono necesites, si sigues los pasos correctamente debe funcionar sin problema. ¿No encuentras nada de qué amigo?
gracias por la ayuda Oscar, finalmente logré hacerlo, utilizando el tema hijo http://www.miautrio.com.ar ahi pude poner el icono de Spotify, pero no encuentro de donde modificar lo que sale cuando haces hover con el mouse "Seguir en Vimeo" modificarlo por "Seguir en Spotify" gracias saludos
Hola Edgardo solo en tu enlace tienes que colocar title="Seguir en Spotify"…
<a href="https://open.spotify.com/artist/0WIn93XS8EmNaLPG3AZpeL?si=m8WNImgmRM62HktQ-1rilA" class="icon et_pb_with_border" title="Seguir en Spotify" target="_blank"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Seguir</span></a>
Muchas gracias Oscar, eso deberia ir dentro de includes social_icons.php del tema hijo?
Sí así es Edgardo
Muchísimas gracias!! Me estaba volviendo loco y con un tutorial ha sido muy sencillo.
Eres un genio y gracias por compartir la sabiduría con nosotr@s.
Genial José Luis, qué bueno que te ha sido útil el tutorial, me alegra eso. Saludos amigo.
Hola Oscar… mil gracias por este tutorial Magnifico
EL problema que tengo es que cuando voy a Apariencia… no está la opción de editor
Tengo instalado el tema child d edivi, que generé con Chil Theme Configurator ( aunque no creo que sea este el problema no? o quizas sí?
Espero puedas ayudarme y desde ya , mil gracias anticipadas
Hola Victor qué tal, no tiene que ver cómo haz generado el tema hijo. La opción no te aparece si tienes un plugin de seguridad activado, puede qué tengas configurado el plugin para que oculte esa opción. La otra es modificar el tema desde un editor de código en tu computadora y después subirlo. También puedes hacer el proceso desde tu cPanel, hay muchas alternativas pero obviamente la más cómoda es desde Apariencia / Editor de temas…
Hola Oscar! ¿Qué tal?
Gracias por cada uno de tus vídeos, me han servido mucho, pero tengo un inconveniente.
Quiero hacer lo mismo que hiciste con agregar el ícono de Behance, pero no me lo permite, ni WhatsApp ni Behance, hago exactamente lo que haces en el vídeo pero no logro conseguir que aparezcan los dos íconos.
Porfa, ayúdame. Gracias.
Hola Jorge qué tal. ¿Estás utilizando el footer por defecto de divi? ¿Estás usando el childtheme que dejé para descargar o algún otro? ¿Estás sincronizando correctamente fontawesome? Cómo puedes ver son varias cosas las que pueden estar pasando. Dame más detalles y estaré encantado de ayudar.
Saludos.
HOLA! Muchas gracias por el tiempo.
Estoy intentando de agregar el ícono de spotify pero no logro identificar, una vez que haya seguido los pasos, donde debería aparecer el ícono. Es en el módulo de redes sociales (https://prnt.sc/vvfpmw) acá el código que metí (https://prnt.sc/vvfpdx)
Muchas gracias de antemano
El icono aparece en el pie de página o menú superior pero cuando estás usando el header y footer por defecto que vienen con divi. Si estás utilizando el generador de temas no será posible. En este caso te recomiendo insertar el ícono a través del módulo anuncio cómo imagen.
Hola! primero gracias por estos tutoriales, son de gran ayuda!!! Y segundo consulto por la segunda opción de agregar iconos a través de Font awsome. Casualmente quiero agregar el de Behance como figura en el ejemplo pero no logro entender dónde colocar la URL para que dirija a mi sitio.
Muchas gracias!
Hola Jonatan qué tal, la url debe ir en esta parte <a href=»#» class=»icon»>
Reemplaza el # por tu url.
Hola Oscar!
Podría añadirse tripadvisor?
Gracias!
Sí, solamente debes buscar el icono de tripadvisor desde FontAwesome 🙂
Genial explicación. Muy práctica. Gracias.
Muchas gracias Joseba 🙂 ¡Saludos!
Hola Oscar, sabes como agregar mas iconos sociales al módulo redes sociales?
Por defecto no es posible Leandro. Pero hay un truco que podemos aplicar para reemplazar cualquier icono por otro. Haré un tutorial más adelante 🙂
Hola segui todos los pasos tal cual explican pero no se me agregaron los iconos mi web es http://www.schreitererstudio.com en el pie de pagina solo tengo instagram twitter y facebook agrege con el child youtube y linkedin pero no aparecen. algun consejo?
Hola Pablo qué tal, debe funcionar amigo :/ también puedes crear el pie de página desde el generador de temas y usar el módulo «seguir en medio sociales» para agregar los iconos. Aquí tengo un tutorial de cómo hacerlo con dicho módulo.
Buenas noches,
amigo no eh podido agregar el icono de spotify y ningún otro hago el paso a paso pero no me funciona me podrías ayudar?
Hola Jahan, intenta con este otro tutorial 🙂
Hola Oscar.
Estoy queriendo agregar mas iconos (flikr) en el modulo de Seguir en Medios Sociales de DIVI.
agrego el código mencionado en el teme hijo, pero cuando voy a buscar en la lista no me muestran los iconos.
Habra alguna manera de agregarlos.
Gracias
Hola Jhonny, en las versiones más recientes de divi ya agregaron nuevos iconos al módulo seguir en medios sociales ¿no te aparece por defecto el icono de flikr?
También tengo esta otra alternativa, a ver si te ayuda.
Hola Oscar.
Me funciono perfecto la alternativa mencionada, ya que en mi Divi no me figura como mencionas.
Muy buen aporte con tu gran conocimiento !!!!!
Hola Oscar,
Yo tenía el tema hijo pero solo con archivo de estilos y funciones. He creado la carpeta includes y dentro he copiado el archivo social icons de divi y le añadí tu codigo justo antes del cierre:
Sin embargo, el icono de youtube sigue sin mostrarse
Alguna sugerencia?
Muchas gracias por tus tutoriales, son geniales
Hola Carmen, si tienes los mismos archivos que mi tema hijo en tu tema hijo debe funcionar sin problema. O quizá el problema esté en el código del icono, ¿Te funciona con otros iconos?.
Por cierto, ¿Cuál es la url de tu web?