Como personalizar Simple Social Icons para Genesis en 5 minutos

Junto a tu blog tienes varios perfiles en redes sociales para darte a conocer.

Y quieres que tus lectores sepan donde encontrarte para poder conectar contigo.

Así que comienzas a incluir enlaces en tus post, y en la firma de tu correo.

Y ves en otros blogs que tienen iconos de redes sociales en sitios destacados.

Y colocas los típicos iconos de las redes sociales en un lugar visible de tu web, para que puedan seguirte.

Mira un poco más arriba a la derecha. No, arriba del todo no, un poco más abajo… ¡eso es! Ahí están mis iconos de redes sociales, donde podemos conectar si quieres.

¿Y que tienen de especial?

Que uso el plugin Simple Social Icons para Genesis.

Ventajas del Plugin Simple Social Icons para Genesis.

Pues lo confieso, algunas de las ventajas pueden ser un poco subjetivas, pero otras son totalmente objetivas.

  • Los iconos de redes sociales no son imágenes. Son una fuente tipográfica. ¿Eso qué quiere decir? Menos carga para tu web.
  • Tienes disponibles todas las redes sociales más conocidas, incluyendo servicios como RSS y email.
  • Esto es ya subjetivo, pero prefiero un estilo uniforme de color, que el multicolorido de los botones originales.

Además se integra muy bien con la estética de los child themes de Genesis.

Por lo menos para mi, obsesionado con usabilidad y poca carga para el servidor y la web, me parece una opción perfecta. Ya sabes que siempre quiero una web que cargue rápido.

Desventajas de Simple Social Icons para Genesis

Pues me casi repito en el titulo para destacarte la, para mi, principal desventaja.

No es que sea solo para Genesis FrameWork, pero es donde mejor funciona.

En otros temas te puedes encontrar que al insertarlo en determinadas áreas de Widgets, según como este codificado te saldrán los iconos o unos «símbolos raros».

Esto se debe a que no los iconos no son imágenes, sino una fuente, y es por ello que en algunas áreas, no carga bien.

Vale, pero quieres saber que es capaz de hacer el plugin, ¿verdad?

Pues empezando desde el principio, lo que hace es añadir hasta 14 iconos sociales a un área de widget de tu web.

Estos iconos se pueden personalizar del color que quieras, con el fondo que quieras, y cambiar estos cuando el cursor pasa por encima. También modificar su tamaño o alineación, y con CSS cambiar su forma.

Puedes usar estas redes sociales: Dribbble, Email, Facebook, Flickr, GitHub, Google+, Instagram, Linkedin, Pinterest, RSS, StumbleUpon, Twitter, Vimeo and YouTube.

Simple Social Icons

 Un paso a paso para usar Simple Social Icons

  • Instala el plugin desde el repositorio oficial, usando el instalador de tu WordPress, o descárgalo desde aquí, y lo subes.
  • Tras activarlo, vete a Apariencia/Widgets.
  • Añade el Widget Simple Social Icons en el Área de Widget donde quieras que salga.
  • Y ya te saldrá el Widget para personalizarlo.

Zona del Widget #1

Simple Social Icons
Lo primero que tienes que decidir es si va a tener titulo o no.

Como ves, en mi caso lo dejo en blanco, porque al ir en el Header, no me parece estético.

Pero cuando se coloca en una barra lateral, muchos bloggers si colocan un titulo, tipo: ¡Conecta conmigo!, Conectemos. Sígueme en la red, etc….

Es una buena práctica que los links se abran en una nueva ventana, así que asegúrate que esta marcada esa opción.

Y por último, decide el tamaño del icono, y por defecto los iconos son cuadrados, así que puedes «redondear las esquinas» configurando el Icon Border Radius. También elige la alineación de los botones.

Zona del Widget #2

Simple Social Icons

En esta parte configuras el color de los iconos. Por una parte el color del icono, y el color de fondo. Y además en dos ocasiones, en modo normal, y cuando se pasa el cursor por encima.

Como ves en la imagen, en mi caso el icono siempre es blanco, y el fondo es azul por defecto, y naranja cuando pones el ratón encima.

Y ahora que has vuelto, tras haber subido a ver el efecto, seguimos… 😀

Zona del Widget #3

Como ves en esta imagen, llega el momento de indicar cuales son nuestras redes.

El funcionamiento es sencillo, simplemente escribe la dirección de cada uno de tus perfiles en la casilla correspondiente, y ese icono aparecerá. El que este en blanco no se visualizará.

Sencillo y útil, ¿qué mas puedes pedir?

Como ves, el nombre del plugin cumple lo que promete. Simple social icons para genesis es sencillamente eso, una forma simple de agregar los iconos sociales de nuestro sitio.

Además algunos temas traen un CSS para personalizarlos aún más.

O si eres mañoso lo puedes hacer tu a mano. Yo por ejemplo uso este CSS:

[css]

/*Simple Social Icons
—————————————————–*/
.simple-social-icons div ul li a, .simple-social-icons div ul li a:hover {
/*Con estas tres lineas redondeo todas las esquinas menos la inferior izquierda*/
border-bottom-right-radius: 300px;
border-top-left-radius: 300px;
border-top-right-radius: 300px;
}
[/css]

¿Quieres conectar conmigo en las redes sociales? Me encontrarás en Google+, Twitter… ¡pero que digo! Arriba en mi Widget Simple Social Icons para Genesis sabras donde encontrarme!

EN ESTE ARTÍCULO:

comparte este artículo

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

no dejes de leer...

12 comentarios en “Como personalizar Simple Social Icons para Genesis en 5 minutos”

  1. ¡Genial!
    Tengo pendiente este tema pues me falta crear una página en G+ y en FB pero me lo anoto para hacerlo este verano ¡¡y lo haré yo solita!!
    Bueno con tu ayuda 🙂
    Feliz verano Javi!

    1. Feliz Verano Ana!
      Pues a aprovechar el tiempecillo libre para descansar, y a veces para ponernos al día con estas cosas.
      Ya sabes donde ando para lo que necesites.
      Un abrazo.

  2. Buena explicación de este mítico plugin de Genesis.

    Un apunte para escribir aun menos código en esa personalización, verás que consigues lo mismo poniéndo sólo esta línea:

    .simple-social-icons div ul li a, .simple-social-icons div ul li a:hover {
    border-radius: 50% 50% 50% 0;
    }

    Un abrazo!

  3. Hola,
    ¿Se puede modificar el color de las redes sociales, para que cada icono sea de un color?
    En principio comentas (y es lo único que el plugin te ofrece a primera impresión) que podemos cambiar el color principal, y el color secundario al pasar el cursor por encima, pero… ¿Como se puede hacer con css para que cada red social tenga su propio color?
    ¿Es posible?
    ¡Muchas gracias de antemano!

  4. Hola Javier:
    En mi caso aparecen los simbolos raros que comentas mas delante, pero antes si aparecian normal, que puedo hacer para que vuelvan a la normalidad?. Saludos y Gracias.

    1. Hola Eduardo.
      Pues al estar usando un tema Genesis, no deberías de tener ningún problema. Los símbolos extraños salen o bien por no usar un tema Genesis, o porque haya un problema con el CSS. Prueba a limpiar cache del plugin que uses de cache o similar, a ver si se soluciona.

      Si no, ¿en que area lo estas poniendo?

      Un saludo.

      1. Hola Javier, Limpie cache pero no funciono, lo estoy poniendo en la barra lateral primaria…. Creo que si no me funciona estoy pensando en probar con otro plugin que haga la misma funcion, conoces alguno que me puedas recomendar?
        Saludos y gracias por tu ayuda…

        1. Hola Eduardo. El fallo esta en el código que has metido por CSS Hero. Hay un código que dice que todos los enlaces de los widgets de la barra lateral que no sean de woocommerce, usen la fuente Lato, por lo que te falla la fuente de los iconos de redes sociales. Es este código:
          .sidebar-primary .widget:not(.woocommerce) a {
          text-align: left;
          font-family: Lato;
          font-weight: normal;
          }
          Repasa lo que tengas puesto en CSS Hero (por eso no soy muy amigo de estos plugins), y verás como te salen bien.
          No tengo otro plugin que recomendar para los iconos, tan ligero y sencillo de usar como este, para Genesis, asi que lo suyo es hacerlo funcionar.
          Un saludo.

  5. Hola Javier,
    ¿Como puedo cambiar el orden de apariencia de los iconos sociales?
    Me gustaría tenerlos en un orden concreto, pero el plugin los ordena con el mismo orden que aparece en el widget.
    Saludos,
    Claudia.

  6. Hola Javier!
    Vuelvo a ser Claudia… pasado un tiempo 🙂
    He modificado los márgenes de mi web y para que me queden todos los iconos en una línea tengo que modificar el tamaño. Pero no se cambia nada! He probado de borrar caché, de eliminar el plugin y volverlo a instalar y por mucho que desde el widget cambio el tamaño… lo iconos siguen apareciendo en 36px y todos en una línea (pero como no caben quedan desproporcionados).
    ¿Sabes como puedo modificar el tamaño con css? No tengo ni idea… Si me contestas que sea para principiante 🙂

Los comentarios están cerrados.

Acceso gratuito
a la Academia de
Hormigas en la Nube

+20 cursos disponibles sobre herramientas, marketing y ventas

Por tiempo limitado estoy regalando el acceso a la librería de recursos de la Academia de Hormigas en la Nube.

Cursos de ActiveCampaign, Elementor, Beaver Builder, WordPress, Copywriting, ventas, email marketing y más te estan esperando dentro. Disponible gratis por tiempo limitado.

Mockup escritorio herramientas
Ir arriba