• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Cambiar el logo en la versión móvil de tu sitio Web
Anuncio banner webservi

Cambiar el logo en la versión móvil de tu sitio Web

Cambiar logo version móvil

[ 23 junio 2016 ] [ Actualizado: 19 julio 2016 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Logos responsive

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.

caso 1

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.

caso 2

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.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Leer datos desde otra base de datos en WordPressLeer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPressCrear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPressMostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPressAñadir código de Google Tag Manager sin plugins en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (6 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Claudio Barragán

    30 diciembre, 2017

    Hola,

    Felicitaciones por el artículo. El motivo de este comentario es pedirte asesoramiento sobre un tema que está retrasando el lanzamiento de mi web. Resulta que en la versión móvil y responsive de la web, al abrir los menús desplegables las letras aparecen de un color gris claro sobre fondo naranja, algo muy difícil de leer. He intentado encontrar el CSS para modificarlo y nada. No sé donde se encuentra el CSS de la versión móvil, aparentemente en el bloque principal de código de la web no está. He probado con más de diez plugins para modificar la apariencia de mi web en dispositivos móviles y tablets con un rotundo fracaso (me gustaría también que el logo de la versión móvil fuera otro).

    En fin, el tema me está devorando horas, retrasando el lanzamiento del sitio y cargando de frustración. Cualquier consejo que puedas darme será bienvenido. Muchísimas gracias por tu tiempo y atención.

    Saludos.

    • Jhon Marreros Guzmán

      31 diciembre, 2017

      Hola, por lo que comentas es un problema con CSS, mejor escríbeme a través del formulario de contacto, envíame la url de tu sitio para revisar y ver a qué te refieres. Saludos.

  2. Claudio Barragán

    2 enero, 2018

    ¡¡Jhon eres un crack!!, has dado con la línea de código que no lograba encontrar y he logrado solucionar ese pequeño-gran problema.
    Este hombre vale oro por su desinteresada, altruista, rápida y certera respuesta.
    Muchísimas gracias por todo.

  3. Dayanna Soto Mendoza

    24 mayo, 2018

    Hola.
    Desde hace dias tengo un problema que es el siguiente.
    Mi logo en pantallas para desktop se ve de la forma correcta a como yo quiero, pero en dispositivos moviles y tablets (Ya probado en varios) se ve como si hicera zoom. https://app-1526679884.000webhostapp.com

    • Jhon Marreros Guzmán

      24 mayo, 2018

      Hola, yo lo veo igual en mi laptop, sale la imagen grande y es debido a la funcionalidad retina, es decir tu código HTML que carga tu logo tiene varias imágenes, una para 1x y otras para 2x o retina. Tendrías que revisar la configuración de tu theme o si tienes un plugin que te esta generando esto.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Personalizar el mantenimiento programado de WordPress

Actualizar el stock de productos usando la API de WooCommerce

Cómo usar la cache de objetos en WordPress

Adaptar un theme WordPress a Gutenberg

Recientes

  • Leer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad