Cómo hacer un banner en WordPress, insertarlo y añadir un enlace

Hoy toca otro post con algo que puede parecer básico, pero que mucha gente me pregunta.

Se trata de cómo hacer un banner en WordPress, no sólo el tema de crearlo sino más bien saber cómo insertarlo en la barra lateral y también cómo añadir un enlace.

Esto último normalmente viene por el tema de que se quiere poner el banner porque es de algo de afiliados, entonces necesitas que al hacer click se abra la web que tú quieres, es decir, la URL que te han facilitado con quienes te hayas hecho afiliado.

No te preocupes que esto lo vamos a ver hoy, tanto comentando ahora por escrito algunas cosas a tener en cuenta como al final del post con vídeo para hacerlo paso a paso.

Vamos allá.

como-hacer-un-banner-en-wordpress

Cómo hacer un banner, ¿desde cero?

Primero de todo, aclarar que en este post no vamos a explicar la creación de la propia imagen como tal que serviría de banner.

Sería hablar de Photoshop y no es el objetivo de este artículo.

Si lo que quieres es manejarte con dicho programa para hacer tus propias creaciones o bien para modificar algún banner que te facilite otra empresa, ahora te dejo un enlace.

Pero este post va más bien orientado a eso, a que una vez que tienes el banner que te proporcionan, tú sepas qué hacer con él para subirlo optimizado y ponerle el enlace.

Entonces, ¿qué vamos a ver aquí?

Vamos a ver lo que tienes que tener en cuenta a la hora de subir un banner para tu sidebar.

  1. Cómo saber el ancho de nuestro sidebar o barra lateral.
  2. Cómo optimizar el tamaño de la imagen en Photoshop.
  3. Cómo añadir la imagen en un widget de forma fácil.
  4. Cómo poner un enlace en dicha imagen que se abra en otra ventana.

¿Cuánto mide mi sidebar?

Para saber el ancho de tu barra lateral, en el vídeo te presento dos opciones.

La primera es usando el complemento Web Developer, que es un complemento del navegador que te sirve para identificar los elementos y las reglas CSS que les afectan a dichos elementos en un sitio web.

Eso que parece un poco complejo, significa en cristiano: te localiza el sidebar y te dice sus atributos, entre ellos, el ancho.

Ya te adelanto que si trabajas con Genesis, lo más probable es que la etiqueta que regula el tema de la barra lateral se llame «.sidebar-primary», por lo que podrías ir directamente a buscarlo en «Apariencia/Editor» dentro del «style.css» y ver cual es su ancho.

Otra opción, un poco más artesanal o rudimentaria, sería la de hacer un pantallazo y llevarlo a Photoshop.

Una vez allí, con la herramienta de recortar puedes recortas por ejemplo un trozo del sidebar y después te vas a «Imagen/Tamaño de imagen» y ahí te pondrá el ancho.

La primera forma es más exacta, yo es la que te recomiendo porque al recortar te puede bailar algún pixel.

¿Y eso de optimizar la imagen?

Bueno, una vez que ya sabes el ancho de tu sidebar, lo suyo es aprovechar el dato y preparar la imagen para subirla optimizada.

Esto supone:

  • Abrir la imagen en Photoshop (u otro programa que uses)
  • Modificar su ancho al ancho de tu sidebar, mantiendo la proporción de alto.
  • Guardarlo a 72ppp (si utilizas el «Guardar para web…», mejor que mejor)
  • Recuerda no usar TIFFs, con un JPG va que arde.

Si quieres profundizar más en el tema de los formatos de imagen, ahí puedes hacerlo.

Como comento en el vídeo, piensa que un banner en el sidebar es una imagen que se va a cargar muchas veces.

Quiero decir: cuando se carga un artículo tuyo, como sabrás el peso de dicha dirección web afecta y bastante al posicionamiento, en tanto y cuanto que afecta al tiempo de carga de dicha dirección web.

Entonces, piensa que las imágenes que pongas en el sidebar tienen mucha importancia, porque a veces pensamos en las imágenes que metemos en un post y las optimizamos, quizás incluso tratando de no meter muchas por el tema del peso, etc.

Pero luego se nos olvida que las imágenes del sidebar también cuentan en dicho peso al cargar, entonces no podemos permitirnos tener dos o tres ladrillos en nuestra barra lateral que están siendo «un lastre» cada vez que se carga cualquier página de nuestro sitio web.

Se pueden tener imágenes en el sidebar, pero cuidando su peso.

No es un detalle a vida o muerte para tu posicionamiento, pero ya sabes que todo suma 😉

Cómo insertar un banner en la barra lateral

Para ello tenemos que ir a «Apariencia/Widgets».

El problema de muchas personas es que no hay un widget que se llame «Imagen» o algo similar, con lo que puedas meter sencillamente una imagen ahí.

Yo al principio, me subía la imagen primero a la Biblioteca de Medios y después con el Widget «Texto arbitrario» le metía ahí la ruta de dicha imagen mediante código.

Obviamente, sabiendo de código no es algo muy difícil, pero para alguien que no tenga ni idea desde luego no es la mejor solución, y menos cuando le quieras añadir por código un enlace asociado a la imagen y decirle dónde debe abrir dicho enlace.

Peeero, para esto tenemos el plugin Black Studio Tiny.

Si no lo conoces, te recomiendo que eches un vistazo en ese enlace.

Ya te adelanto que básicamente te permite tener un widget donde cuentas con el editor de las propias entradas, o lo que es lo mismo, que tienes la opción del botón «Añadir objeto» para meter tu imagen con ello y no volverte loco.

Una vez que lo tengas instalado, tendrás un widget llamado «Editor Visual».

Pues nada, simplemente lo arrastras al hueco de «Barra lateral primaria», donde te interese, y después mediante «Añadir objeto» le insertas la imagen y guardas.

¿Y el famoso enlace?

Es probable que la imagen no esté ahí por amor al arte, sino que le quieras poner un enlace.

De afiliado o de lo que sea, es igual.

El caso es que debes hacer click en la imagen, darle a «editar» y ahí dentro tiene la opción de ponerle la URL o dirección web única que te haya facilitado la empresa a la que te has afiliado o lo que tú quieras.

También en esa pantalla tienes la opción de «Abrir en una pestaña nueva» (recomendable) para que no se salgan de tu sitio web y se abra en otro sitio.

YouTube video

 

Todo esto viene explicado paso a paso en el vídeo y con él te dejo, espero que te sirva para aprender cómo hacer un banner en WordPress, insertarlo y poner tu enlace 🙂

¡Un abrazo!

4/5 - (4 votos)

¿Te gustaría autoemplearte y trabajar desde casa pero no sabes por dónde empezar?

21 comentarios en “Cómo hacer un banner en WordPress, insertarlo y añadir un enlace”

  1. Hola Omar.
    Recién me apunto a tu blog, y estoy sorprendido con todo lo que dominas.
    Gracias por este post, he estado buscando esta misma información y por fin tal cual la encuentro en tu blog.

    1. Omar De La Fuente

      Me alegro que encuentres útiles mis contenidos Rolando 🙂
      Y ya veo que te has suscrito, ¡gracias!
      Un abrazo!

  2. Hola Omar! Eres un crack! Me encantan tus posts y estoy disfrutando como una enana el mini-curso de blogging.

    Aquí os dejo mi «chapucilla» para insertar imágenes en el sidebar (que de momento me va bastante bien).

    Me voy a escribir un post nuevo, subo el recorte de la imagen y le edito el texto si quiero añadirle, todo desde la sección «visual». Entonces me voy a la pestaña de «código», copio todo lo que se ha generado y lo pego en un widget de texto. Voilá!!

    Gracias por compartir todos tus trucos y crear un espacio para intercambiarlos! 🙂

    Saludos!

    1. Omar De La Fuente

      Hola Lorena! Me alegra que te esté gustando y sirviendo 🙂
      Lo que explcis es una forma de hacerla, pero justamente en este post yo explico que es mejor usar el plugin gratuito Balck Studio Tiny MCE.

      Básicamente porque al instalarlo, te ofrece un widget llamado «Editor visual» el cual sustituye a la basura del widget solo de «texto plano», y te permite hacer lo mismo que estás haciendo antes en un post y luego lo pegas, pero ahí directamente porque tienes las misma opciones de edición que en una entrada.

      Y obviamente, hacer eso es más rápido 😉
      Un abrazo!

      1. ¡Muchas gracias Omar!
        Para serte sincera, estoy intentando cortar el tema plugins. Es decir, es como mi vicio personal del Blog: cuando empiezo instalando plugins, no paro! Y más ahora que estoy en plan «reformas».

        Pero en fin… acabo de instalar Black Studio Tiny MCE. Jajajaja. Así que date por satisfecho. ¡Has conseguido tu objetivo de este post conmigo ;)!

        Un saludo!!

        PD: qué maravilla y qué rapidez!! gracias!!

  3. Muy buen artículo Omar. Hay otro plugin llamado «Image Widget» que funciona muy bien para insertar banners o cualquier tipo de imagen. Tiene un código muy limpio y va de maravilla 😉

    Un saludo!

  4. Gracias por tanto, hasta en tus vacaciones eres mi tabla de salvación. Gracias a ti y a tus cursos he dejado de enfocarme en lo poco necesario y me estoy concentrando en lo importante.

    1. Omar de la Fuente

      Me alegra muchísimo oir eso Paulina, si he conseguido lo que comentas ya he cumplido contigo mis objetivos 🙂
      Un saludo!

  5. Hola Omar.

    Muy interesante el artículo, a mí me ha servido para ver el editor visual, fundamental para los que no sabemos de código.

    Para poner mi granito de arena recomiendo un truco fácil para saber el tamaño desde el navegador Chrome, sin necesidad de extensiones o programas. Sitúas el cursor en el banner, ‘clickas’ botón derecho y en el menú de opciones vas a la última, Inspeccionar elemento, dónde aparece el código con el tamaño de la pieza.

    Saludos a todos!

  6. ¡Gracias mil Omar! Tras seguir tus consejos acabo de poner una foto promocional de una recopilación de mis ebooks en mi blog :))

    Tal vez sea sencillo pero cuando lo haces por primera vez… ¡no hay nada fácil!

    Saludos!

  7. Mery Miramontes

    Excelente artículo Omar! Muy trabajado y muy detallado; era algo que estaba buscando pues quiero optimizar mi site y darle un look and feel más completo y profesional.
    Como siempre, un trabajo estupendo!

    Saludos!

  8. Luis Fernando Arteaga

    Estos aportes tuyos son muy significativos para mi porque me falta mucho por aprender, pero cuando veo un post tuyo mermo mucho la distancia. Muchas gracias Omar.

  9. Alejandro Lozano

    Muy buenas Omar, estos posts son muy útiles para los que andamos perdidos con el diseño del blog.

    Te agradezco como seguidor tuyo que aportes tanto.

    Espero que vaya bien las vacaciones.

    un abrazo

Deja un comentario

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

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Scroll al inicio

UNA PREGUNTA RÁPIDA

¿Tienes ya una página web propia?