Los dispositivos móviles para navegar en internet son cada vez más usados y nuestro sitio web tiene que estar preparado para mostrarse correctamente, una de las mejoras que podemos hacer es mostrar una versión diferente de nuestro logo cuando el sitio se muestra en dispositivos móviles.
Cambiar el logo en la versión móvil es especialmente útil si el logo que usamos es muy ancho o tiene detalles que solo se ven en un tamaño adecuado, debido a esto existe una tendencia de diseño de tener una versión responsive del logo.
En este artículo veremos cómo realizar el cambio del logo de nuestros sitio web WordPress para dispositivos móviles, teniendo en cuenta dos de las estructuras html más usadas.
Caso 1 – Logo como imagen de fondo
Este es el primer caso, la imagen se coloca a través de CSS en una etiqueta html; por ejemplo, en la imagen adjunta se muestra una estructura html en donde la etiqueta h1 envuelve a la etiqueta de link y es en esta etiqueta de link en donde a través de código CSS se esta colocando la imagen, ver flechas rojas en la imagen adjunta.
Como vemos en la imagen anterior, para cambiar el logo, debemos simplemente cambiar el background-image, seguiremos los siguientes pasos:
- Definimos @media para que el código se ejecute en anchos <=768px
- Tomaremos la misma setencia CSS para el cambio de imagen
- De ser necesario ampliaremos las dimensiones del contenedor
Nuestro código quedaría de la siguiente forma:
Caso 2 – Logo con etiqueta html img
En este caso la imagen se coloca explícitamente a través de una etiqueta html : img, podemos ver en la imagen adjunta una estructura de ejemplo en donde el link envuelve a una etiqueta html de imagen, ver flechas rojas en la pantalla adjunta.
Para este caso igualmente corregimos por CSS, pero con algunos pasos adicionales.
- Definimos el @media para que el código se ejecute en anchos <=768px
- Como no tenemos clases CSS de referencia, usaremos las clases CSS de la estructura html
- Debemos ocultar la imagen que actualmente se muestra con la etiqueta html img
- Colocar una imagen de fondo en lugar de la imagen actual
- Al quitar la imagen no se mostrará nada, hay que dar dimensiones al contenedor
- Finalmente centramos la imagen
El siguiente código refleja los cambios realizados
¿Te quedan dudas?, en el siguiente video se explica cada uno de los casos tratados anteriormente.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando…