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!

Descubre lo que
necesitas ahora
para vender más

Realiza el Quiz ahora y conocerás el resultado al instante

¿Quieres saber qué herramientas uso en mi negocio, cuáles recomiendo a mis clientes y cuál necesitas tú ahora mismo, en el momento actual en el que te encuentras, para vender más o mejor en tu negocio digital?

Realiza ahora mismo el quiz tecnológico que he preparado, para determinar tu fase actual, y decirte en el instante en que deberías enfocarte ahora mismo para vender más o de la mejor forma posible

Mockup escritorio herramientas
Ir arriba