Tutorial Divi: Cómo añadir más iconos sociales

El tema Divi contiene ajustes para tres iconos de medios sociales por defecto: Twitter, Google+ y Facebook, pero ¿y si quieres mostrar más iconos en tu cabecera o pie de página?

Afortunadamente es bastante fácil, y tenemos 2 maneras de conseguirlo.

Añadir más iconos sociales a Divi con código

Para añadir iconos sociales a Divi manualmente lo primero que debemos hacer es localizar el archivo /Divi/includes/social_icons.php. Lo ideal es que crees una carpeta /includes/ en tu tema hijo y sea ahí donde copies el archivo social_icons.php, así podrás seguir actualizando Divi sin perder los cambios que hagamos ¿vale?

copiar-archivo-iconos-sociales-divi-a-tema-hijo

Una vez creada la carpeta y copiado el archivo a tu tema hijo ábrelo con tu editor de código favorito. Una vez dentro verás el código para los tres iconos sociales por defecto…

codigo-iconos-sociales-por-defecto-divi

Pues bien, será ahí donde añadiremos nuestros nuevos iconos sociales. Para poner un ejemplo vamos a añadir un icono para LinkedIn, así que el código a incluir sería este:

<li class="et-social-icon et-social-linkedin">
<a target="_blank" href="https://www.linkedin.com/">
<span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span>
</a>
</li>

El código lo añadiremos justo después de la línea <?php endif; ?> y antes de la etiqueta de cierre </ul>, con lo que el código resultante en tu archivo social_icons.php quedaría así:

codigo-nuevo-icono-social-divi

Solo tienes que acordarte de que la URL que pongas en el código, en el ejemplo https://www.linkedin.com, sea la de tu perfil social; por ejemplo . Por supuesto, guarda los cambios al archivo.

Ahora solo nos queda añadir un poco de CSS para que se vea nuestro nuevo icono, así que ve a la hoja de estilos de tu tema hijo (el archivo style.css) y añade lo siguiente al final del archivo:

.et-social-linkedin a:before { 
	content: '\e09d';
}

Guarda los cambios y ya verás el nuevo icono junto al resto de iconos activos previamente.

mas-iconos-sociales-en-divi

¿Que no quieres el icono de LinkedIn? Pues mira tú por donde Divi incluye los códigos para otros iconos sociales, estos:

  • Dribble = e09b
  • Flickr = e0a6
  • Instagram = e09a
  • Myspace = e0a1
  • Pinterest = e095
  • Skype = e0a2
  • Tumblr = e097
  • Vimeo = e09c
  • YouTube = e0a3

Solo tienes que modificar el código o añadir nuevos, por ejemplo:

<li class="et-social-icon et-social-skype">
<a target="_blank" href="http://www.skype.com/">
<span><?php esc_html_e( 'Skype', 'Divi' ); ?></span>
</a>
</li>
.et-social-skype a:before { 
	content: '\e0a2';
}

Añadir más iconos sociales a Divi con un plugin

Ahora bien ¿no quieres o no te atreves a tocar código? Puedes usar la joya de plugin llamada Divi Booster que, entre muchas otras personalizaciones, incluye la posibilidad de añadir todos los iconos sociales disponibles en Divi a un clic.

Simplemente instálalo, lo activas, y en el menú Divi verás un submenú nuevo llamado Divi Booster. En la sección Site-Wide Settings -> Icons tienes la posibilidad de añadir todos los iconos disponibles de la manera más fácil posible.

mas-iconos-sociales-a-divi-con-divi-booster

Ya que estás,  también puedes forzar a que los enlaces a tus perfiles sociales se abran en nueva pestaña/ventana, algo que en Divi no viene por defecto.

El plugin Divi Booster es casi obligatorio si usas Divi, al menos altamente recomendable, pues incluye decenas de personalizaciones más que útiles, de las que marcan diferencias, esas pequeñas cosas que echas de menos en Divi, por solo 19$ en un único pago.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(0 votos, promedio: 0)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

11 comentarios en “Tutorial Divi: Cómo añadir más iconos sociales”

  1. Buenas Fernando:

    Juraría que los iconos que mencionas en el post ya están incluidos en el style.css de divi, a pesar de que no aparezca la opción para añadirlos en el panel de ajustes de divi, por lo que el CSS que mencionas creo que no hay que añadirlo, por lo menos antes de Divi 3.0 era así.

    Un saludo

  2. Saludos, quiero hacer una consulta, y si alguien sabe como ayudarme le agradeceria, instale DIVI, empece a hacer un sitio, pero desde que lo instale, ya no puede acceder normalmente atravez de filezilla (solo por IP), ya no me dejo borrar los temas normalmente, y lo peor es que si hago un cambio, si tengo suerte, pasan dias para que se refleje, y los señores del foro de divi no ayudan. borre el theme y en un navegador sin cookies sigue apareciendo el theme de divi….

  3. Buenos días. Gracias por tus aportes. Sabes si hay alguna forma de añadir el watsap, este no viene por defecto «Monarch». Lo cierto es que casi todas estas redes sociales están en este plugin, pero no tiene el watsapp. Y de meterlo como aparece en tus indicaciones, cuál sería el código. Muchas gracias.

  4. Javier Pintos

    Compre este plugin pues entendi que se podían poner los iconos en el Main Menu. En el otro menú ya trae divi para ponerlos pero en el Main no. Lo compre, intente poner los iconos y me los pone en el mismo menú que Divi!! que demonios! para que me sirve si hace lo mismo que Divi? voy a pedir un refund…

Deja un comentario

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

 

Ir arriba Ir al contenido