Blogging

Posticoning: Mejorar el aspecto de tus posts con iconos

Hoy, quinto post seguido con vídeo, te cuento cómo añadir fácilmente y gratis iconos bonitos para decorar y hacer más atractivos tus posts.

Enga, ya estamos otra vez. A ver que pijo-huevo de palabra se ha inventado hoy el colega. ¿Posticoning? ¿En serio? Seguro que le pilló la máquina de fumigar cuando cogía albaricoques en un árbol y no pudo escapar porque menuda avería tiene en el melón. Lo peor de todo es que es hasta fácil de pronunciar: posticoning. Y, no se, como melódica. ¿Qué desea de postre señor? Un posticoning con bechamel…

Hola!!! Eh, ¡que estoy aquí! Cuando quieras dejas de pensar en el nombre y empiezas a leer. No tengo prisa porque estoy convencido de que el post de hoy te va a gustar mucho. Antes de nada, te propongo una cosa: escanea el post y dime si no le notas algo diferente

La importancia del aspecto visual en el Blog

Si no te has dado cuenta, siéntate, tenemos que hablar. Pero como sé que si, sabrás que hoy vamos a hablar sobre cómo y por qué incluir iconos dentro de tus posts.

Seguro que habrás leído millones de artículos que te cuentan de la importancia de la imagen en un post. Unos te hablan de la imagen principal, otros te hablan del diseño general de tu blog e incluso quizás te hayas cruzado con algunos que hablan sobre cómo romper la uniformidad del texto para conseguir una lectura más agradable. ¿Verdad que si?

Y en todas tienen razón. Por lo general, las personas odian los bloques grandes de texto, somos muy visuales. Y, en Internet, aún más. Por eso es realmente importante cuidar todos esos detalles en la escritura de tus posts y evitar que los visitantes se sientan intimidados por el texto.

Pero, además, hablamos de estética. Y es muy cierto que una estética bien cuidada en un blog le hace más propenso a ser visitado y leído. Da un aspecto más consolidado y profesional. (si luego su autor desvaría en público, se inventa palabras y hace gilipolleces en los vídeos y se carga la profesionalidad que trasmite el diseño … eso es otra cosa).

La importancia del aspecto visual en la lectura de un post

Cualquier detalle es importante y la suma de todos produce esa sensación de “jo, esto está currado”. Así que, si ya has cuidado la apariencia general de tu blog, escribes con una buena organización y escoges buenas imágenes para tus posts, es hora de que des un pasito más y añadas un poco de iconografía.

Los iconos a los que me refiero son pictogramas o símbolos que tienen una peculiaridad muy importante: su uso está tan extendido que su interpretación correcta está casi garantizada. Esto es súper importante. Por ejemplo, cuando vez un icono de un carro de compra, sabes que ahí hay información u operaciones relacionadas con el comercio electrónico. Cuando ves una rueda dentada, asocias a un proceso. ¿Verdad?

Pues bien, dos son las características que hacen de estos iconos un estupendo recurso para completar tus posts:

  • Añaden impacto visual y rompen la uniformidad del texto. Al incluirlos en tus posts, verás como cobran vida, se hacen más atractivos y se pierde el efecto “tocho de texto” que puede llevar a un lector a agobiarse y salir.
  • Favorecen el escaneo. Sabes que la mayoría de los lectores escanean en Internet en vez de leer. Al ser iconos genéricos, cuyo significado está mas que extendido y ser visualmente más fáciles de localizar e interpretar, estarás favoreciendo el escaneo en tus posts.

Font Awesome: más de 360 iconos a tu alcance … GRATIS!

Ha quedado claro que mola poner iconos en tus posts, ¿verdad? Jejejeje. Si no, vuelve a la casilla de salida.

Pues bien, ahora toca contarte que existe una (bueno hay más, pero yo me quedo con esta) web donde han creado una colección de más de 360 iconos y los han empaquetado de modo que puedas usarlos gratis y muy pero que muy fácilmente en cualquier web o blog (no se si en WordPress.com o Blogger, pero el resto si).

Se trata de Font Awesome y te invito a que la visites, sobre todo la galería de iconos, para deleitarte de lo lindo no solo con la cantidad y aspecto de los iconos sino con las funciones adicionales que te ofrecen.

Con solo añadir una línea de código en el head de tu web podrás:

  • Agregar cualquiera de los más de 360 iconos disponibles como parte del texto de tu web/blog.
  • Escalar los iconos a cualquier tamaño sin perder calidad.
  • Ponerlos en el color que desees.
  • Aplicarles cualquier efecto CSS que se pueda aplicar a un texto.
  • Hacer que giren sobre sí mismos.
  • Hacer que floten a la izquierda o derecha del texto.
  • ¡Y muchas más posibilidades!

Joer, si estoy por comprarlo. Ah no! ¡Que encima es gratis! Jajajajaja.

Cómo añadir Font Awesome a tu blog WordPress

En el caso de nuestro queridísimo WordPress, todavía lo tenemos más fácil gracias a los plugins disponibles.

Como el post ya se ha hecho muy largo, solo te contaré que lo más sencillo que es descargues e instales un plugin denominado “WordPress Visual Icon Fonts” y lo actives.

A partir de ese momento, verás como tienes un botoncito que pone “Icons” en el editor de WordPress y desde ahí podrás insertar cualquiera de los más de 360 iconos.

En el vídeo, además, te cuento como aplicar efectos avanzados que te exponen en la web de Font Awesome, como puede ser hacer que giren los iconos.

 

Así que, sin más, lo dejamos por hoy!!!! ¿Qué te ha parecido? ¿Estás de acuerdo conmigo en que es bueno añadir iconos en tus posts? ¿Encuentras alguna mejor utilidad que darles? ¿Usas otra colección? ¿Alguna vez has usado unos calientapiés de microondas?

 

 

Acerca del autor

Víctor Campuzano

Growth Hacker no soy, pero lo vivo. De mi blog no vivo, pero aquí si que soy como soy. Marketing Digital, Creatividad y Blogging con pasión y desenfado. Alumno del Postgrado de Growth Hacking por IEBS.

Ahora es tu momento

*

36 comentarios

  • Muy bueno Victor muy bueno. Poco a poco estoy haciendo prácticos tus post, como el de mejor el diseño de tu email thunderbird, plugins útiles que ofreces, y demás.
    Esto de los iconos también lo haré.

  • Vaya pedazo de post! ¡Con todas las cosas que pones me está quedando el blog con más tonterías que el armario de un jefe indio! jajajaj

    Va, en serio, enhorabuena por el curro porque realmente consigues en cada post vender lo que quieras, el día que te de por los enlaces afiliados verás tú…jajajaj.

    ¡Un abrazo fuerte, compañero!

    • Jajajajajajaja,

      Gracias Antonio!!! Pues la verdad es que veo difícil que me de por enlaces de afiliados, lo veo difícil de verdad pero nunca se sabe.

      El armario de un indio, jajajajajajajaj. El mio!!! 🙂

  • Hola Víctor!
    Pues bastante interesante. Desconocía por completo este plugin y vas a ayudar a muchas personas con este artículo. Déjame decirte una cosa, eres un crack en inventarte palabras :).
    Un Saludo!

    • Jajajajajaja, Gracias Jony!!!

      Si, alguien por ahí ya me dice que soy el inventor de palabras… La verdad es que es divertido pero tiene sus consecuencias: Mal SEO. Pero bueno, hay que posicionarse como algo, aunque no sea en Google, verdad?.

      Me alegra mucho servir de ayuda y agradezco mucho que os paséis por aquí a dejar vuestro comentario. Son, sin duda, el mejor combustible para seguir trabajando duro!!!

      Un saludo! 🙂

  • Enorme Victor!!

    No conocía la función de esa página para usarla de una forma tan fácil en nuestros artículos. La verdad es que quedan bastante chulos!!

    Voy a aplicarlo ahora mismo en el artículo que iba a publicar cuando me ha entretenido un Tuit tuyo 😉 que me ha llevado a este artículo.

    Muchas gracias por el aporte!

    Un abrazo crack.

  • Hola Víctor!

    Es una gran idea que le da a los post un nuevo aire y más “color” ¡gracias!

    He estado implementando iconos en algunas páginas y quedan de cine aunque tengo un problemilla jeje. En mi último post he puesto iconos y en el lector de feeds que uso (feedly) en vez de salir el icono sale su nombre (icon-camera, icon-hand-o-right…etc).

    He visto que en tus publicaciones esto no pasa porque, aunque los iconos no se ven en feedly, son sustituidos por los puntos de una lista por ejemplo. ¿Cómo lo has hecho?

    Gracias de antemano

    ¡Un saludo crack!

    • Hola Juan.

      Pues creo que es algo del plugin. Yo no utilizo el plugin, sino que lo hago todo a mano. Yo inserto el código así:



      Y sin embargo a ti se te inserta algo así:

      icon-camera

      Vamos, esto es algo más avanzado pero creo que tendrás que conformarte si optas por la versión plugin. 🙂

  • Joe Victor! Eres capaz hasta de alegrar un Lunes!! jeje. Mil gracias por compartir el artículo! 🙂

    Al final hice la prueba en el último artículo de Byemovil y acabas de liármela!! porque ahora me tiraré un buen rato para escribir mis artículos (pensando qué iconos poner).. jejej, eso sí, quedarán guapos guapos…

    Al final nos damos a basto, yo también estoy descubriendo artículos tuyos cuando ha pasado algún tiempo.. algunos aún los tengo en la recámara para echarles un vistazo tranquilamente.

    Que disfrutes del día máquina!!

    PD: Ah, molaría que añadieras el número de respuestas sobre un comentario… así queda más ordenado 🙂 Just an opinion!

  • Anda!!! Pues no lo había pensado Javi!!!

    Graaaacias, voy a ver. Igual es la idea para el próximo post … 🙂 Te has ganado un link (hijo, mas no puedo ofrecer … 🙂

    Feliz lunes crack! 🙂

  • ¡Buen post, Víctor! ¡Me encanta!

    Yo suelo usar recursos para hacer los posts largos más legibles, pero no conocía el plugin este de los iconos ¡es genial!

    Muchas gracias. Un abrazo.

    • Pues genial entonces!!! Creo que es un gran recurso, algo chulo. Yo, por ejemplo, tengo la sensación de que las flechas hacia abajo, para dividir bloques, da la sensación avance y te resulta más cómodo leerlo. ¿Puede ser?

  • Muy buen artículo, me viene fenomenal para trastear y mejorar el nuevo diseño que le he puesto a mi blog con Genesis.

    Dejame decirte, que al margen del genial contenido que traes hoy, lo explicas con una personalidad y una alegría que genera una empatía con el lector muy buena (lo que por ahí llaman engagement, ¿no?) 😉 No hay más que ver el número de comentarios.

    Un saludo Victor.

  • Genial he instalado el plugin en Mi blog de Sexo, pero me gustaría hacerlo con código. Tendré que sacarle tiempo para cacharrearle al asunto. Aunque lo cierto es que la idea es genial 🙂

    Un abrazo y gracias por compartir 🙂

  • ¡Genial!

    Has hecho que un domingo lluvioso 🙁 sea un DOMINGO PRODUCTIVO.
    Seguiré leyendo tus post y aplicándolos al blog que estoy creando.

    Muchas gracias por compartir lo que sabes.
    Un saludo desde Conil ( aunque hoy parezca Alemania ) 😀

  • […] Posticoning. En este post te contaba cómo incluir el código de Font Awesome, una fuente web con más de 400 iconos escalables y configurables que podrás incluir en tus posts o páginas y que te servirán para dotarles de un mejor aspecto visual. Pues simplemente activando la opción, Vcgs Toolbox agregará los códigos necesarios para que puedas usar la última versión. A partir de ese momento podrás usar cualquier nomenclatura indicada en esta página, incluyendo animaciones de los iconos. (A que mola un montón!!!! ) […]

  • Hola Victor,

    hace tiempo me puse con esto y ahora lo he vuelto a retomar, pero quiero saber una duda que tengo. Estoy intentando poner los iconoes en los MAgic Action Boxes y me sale un cuadrado blanco en vez de un icono. Te dejo mi web por si puedes verlo: http://www.soyvendedor.com
    En el editor si me sale para ponerlo y lo veo, pero en la web final no…. :S será por que está capado? hay que hacer algo?

    mil gracias!

    • Hola Sebastian!!

      Pues la verdad es que tendría que probarlo. En principio no se puede porque el botón que crean los Magic Action Box es un input y eso no permite la adición de código html… Para hacerlo, tendrías que crear un “a class button” que si lo permite. Pero, claro, todo esto mejor revisarlo y hacer prueba y error hasta conseguirlo…

      Saludos!!!

  • Tiooo como mola la ruedita dinámica esa. Hola quee no dije hola 😉 que te digo yo soy una gran defensora de los iconos. Me aburren los textos y textosy las letras pequeñinas pufff.
    Los dibujitos pueden añadir hasta unas notas dde humor al aunto. Haber si soy capaz de hacer esto jjejje. Abrazos

    • HOla Silvia! 🙂

      ¿Verdad que está chula? 🙂 Anda que no se aprenden cositas. Yo llevo tiempo sin usarlo, por esto de que voy corriendo hasta pa echar un pis (y siempre hay consecuencias) jajaja.

      ¿Lo has conseguido? Con Vcgs Toolbox es muy fácil! 🙂

Uso de cookies

Esta web utiliza cookies propias y de terceros, como Google Analytics, para optimizar su navegación y realizar tareas de análisis y las pertenecientes a WordPress. Advierto que si continuas navegando, aceptas su uso. Puede cambiar la configuración, desactivarlas u obtener más información.

ACEPTAR