• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Cambiar el logo en la versión móvil de tu sitio Web

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

  • Mover barra lateral al inicio en móvilesMover barra lateral al inicio en móviles
  • Widget sidebar al inicio en móvilesMostrar widget lateral al inicio en móviles
  • Cambiar el logo en cabecera fija en un tema WordPressCambiar el logo en cabecera fija en un tema WordPress
  • Archivo HTML como página de inicio en WordPressArchivo HTML como página de inicio 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 principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Copias no actualizadas de algunos archivos de plantilla WooCommerce

Agregar breadcrumbs de Yoast SEO a tu tema

Ocultar Widgets en dispositivos móviles

Instalar WordPress localmente con LocalWP

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados