imágenes con HTML

#imágenesconHTML

 

Hola amigos, esto llega un día tarde porque los días de WIR-escuela son los jueves… pero como ahora mismo está la cosa un poco anárquica hasta que vuelva a pillar ritmillo de publicar, lo publico aunque sea viernes… ¡algo mejor que nada!  Además, así os vais de fin de semana sabiendo una cosa más (si aún no sabíais lo que hoy os cuento), que se trata ni más ni menos de…

cómo poner una imagen con código HTML

 

Habéis leido bien, código HTML pero no os asustéis, es un truquillo muy fácil de hacer y muy, muy útil… ¿para qué? Pues para poner imágenes sin necesidad de utilizar ningún plugin por ejemplo en vuestro sidebar del blog y así, dejarlo más resultón, bonito y más con vuestro toque.

Dicho todo esto y explicado de qué irá todo el tema de hoy vamos al lío:

Antes de nada, lo primero que debes hacer será crear las imágenes que vas a querer poner. Vamos a pensar que quieres tunear tu sidebar del blog, ya sabes, la barra lateral izquierda o derecha (depende de donde lo tengas). Quieres poner imágenes de tus categorías, un banner que lleve a tu tienda (por ejemplo) y un banner también para que se suscriban a tu newsletter. Bien, pues antes de nada deberás crear esos banners en cuestión. Si no sabes medidas ni nada o si quieres tener una base para crear esos banners, en el club de WIRWIP! te puedes descargar de manera gratuitas unas plantillas que diseñamos hace unos meses. Para acceder a WIRWIP! tan solo te tienes que registrar a la newsletter, es gratuito y no mandamos muchos mails 😉

Bueno, vamos a pensar que ya tienes tus imágenes creadas y preciosas que te han quedado. Bien, pues lo primero será ir a: ENTRADAS > AÑADIR NUEVA y dentro de esta nueva entrada iremos a AÑADIR OBJETO, para poder añadir tu foto en cuestión que previamente has hecho. Al añadir objeto tiene las opción de seleccionarla ya de la galería (si ya la has subido antes) o subirla en ese momento.

paso_uno_imagen_url

Una vez tengas subida la imagen pulsamos sobre ella para seleccionarla y aparecerá un submenú, ¿verdad? como ves en la foto de abajo. Bien, pues pulsamos sobre el LÁPIZ para poder editar esa foto.

paso_dos_imagen_url

Al pulsar sobre el lápiz se nos abrirá una ventana donde podremos tocar características de esa foto, de cómo queremos que se muestre. Podemos cambiar el tamaño, poner la alineación con respecto a nuestra entrada (izquierda, central, derecha o ninguna) y lo más importante, o mejor dicho para lo que hemos llegado hasta aquí, podemos poner la URL personalizada donde queremos que nos lleve esta imagen si clicamos sobre ella. Así pues, pulsamos el desplegable de ENLAZADO A y pillamos la opción de URL personalizada.

paso_tres_imagen-_url

Hecho esto pulsamos en el botón azul de actualizar que está justo abajo a la derecha y nos devolverá a la ventana de nuestra entrada, donde estábamos. Ahora nos toca obtener el código HTML que pondremos en nuestro widget de texto de nuestro sidebar (por ejemplo, por seguir con el ejemplo que teníamos de poner imágenes en nuestra barra lateral del blog, aunque esto se puede aplicar a cualquier parte, ¿eh?).

Para obtener este código debemos pulsar en la pestaña de HTML.

paso_cuatro_imagen_url

Al hacerlo veremos algo como esto que ves en la foto de abajo. Ya solo queda SELECCIONAR Y COPIAR todo ese código y ponerlo donde queramos poner esa foto con enlace.

paso_cinco_imagen_url

Por ejemplo, si lo que queremos es poner imágenes en nuestra barra lateral iríamos a APARIENCIA > WIDGETS y seleccionaríamos uno de TEXTO en la localización donde queremos que aparezca, en este caso en el BLOG SIDEBAR y en el espacio de CONTENIDO le pegaríamos nuestro código HTML. Si queremos ponerle un título se lo ponemos, eso al gusto.

 

Conclusión de todo esto:

 

Esto es más o menos toda la explicación de cómo añadir imágenes a nuestros widgets de wordpress sin necesidad de usar ningún plugin 🙂 ¡Usemos plugins de manera escasa y para lo realmente importante!

Espero que os venga bien y si tenéis alguna duda no os cortéis en preguntar, ¿vale?

 

¡Nos leemos! 

🙂

[icon color=”Extra-Color-3″ animation_speed=”Slow” size=”tiny” icon_size=”” animation_delay=”” image=”fa-music”] suena: run – foo fighters o si prefieres verlo y escucharlo 

¿te ha gustado?

¡comparte pues!

Facebook
Twitter
LinkedIn
Pinterest
Email
¿quieres ser más de lo que ya eres?

¡trabaja con nosotros!

Dejar un comentario

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

“Al enviar aceptas la política de privacidad. Los datos que proporciones al enviar tu comentario, serán tratados conforme la normativa vigente de Protección de Datos y gestionados en un fichero privado por Ana Cristina Gadea Sánchez, propietaria del fichero. La finalidad de la recogida de los datos, es para responder únicamente y exclusivamente a tu comentario. En ningún caso tus datos serán cedidos a terceras personas. Consulta más información en mi Política de privacidad.