Los móviles a día de hoy son los dispositivos más usados para navegar cómodamente por Internet, por ello una de las mejoras que deberías tener en tu sitio web es mantenerlo actualizado al 100% para estos pequeños dispositivos.
Por ello te enseñamos como mostrar logo distinto en móvil usando WordPress, con un theme responsive y adaptado a todos los públicos.
Tener nuestro sitio web responsive en WordPress es fácil, prácticamente el 99% de themes que encuentras a la venta o de forma gratuita suelen traer su diseño responsive, pero pocos ofrecen la posibilidad de cambiar el logotipo en versión móvil ó pc, por este motivo te mostramos como lograr tener un logotipo totalmente diferente en tu sitio para PC escritorio y el sitio responsive de móviles o pequeños dispositivos.
En el día de hoy aprenderemos a cambiar el logo en la versión móvil de tu página WordPress con un simple código que te enseñaremos a continuación.
Código HTML del logo WordPress
Cuando creamos una web WordPress, la mayor parte de casos nos encontraremos con un código muy similar al que verás a continuación, conformado por un HTML con una clase site-logo que mediante el uso de media querys y un toque de CSS lograremos obtener la solución en la mayoría de Plantillas WordPress.
La estructura HTML es la siguiente:
<div class="site-logo">
<a href="SITIO-URL" title="TITULO_SITIO_WEB">
<img class="header-image" src="LOGO-URL" >
</a>
</div>
El código anterior nos esta indicando que:
– Tenemos un contenedor div que tiene la clase CSS llamada site-logo
– Un enlace al sitio web referenciado por la etiqueta a
– La imagen del logotipo el cual tendremos subido en MEDIOS de WordPress y referenciamos mediante LOGO-URL
Entendido esto, pasamos a usar las media query que permitirán modificar el logotipo de WordPress en la versión móvil distinto a la versión de ordenador.
CSS Media Queries para móvil
El diseño de nuestro sitio depende rotundamente de nuestro CSS, si eres un experto en el, dominarás gran parte del diseño web y si conoces los media query este código te resultará familiar:
@media only screen and (max-width: 768px) {
h1 { color: blue; }
p { font-size: 22px; }
}
Lo más importante de este código es que entiendas el funcionamiento de los media query, en el hemos usado la sintaxis de media query para modificar los h1 en color azul y párrafos con un tamaño de fuente de 22 pixeles pero sólo para dispositivos móviles. Afecta a pantallas con un ancho menor o igual a 768px.
Código CSS para cambiar logotipo en móvil versión
Si haz seguido los pasos entenderás que debes hacer uso correcto de los media query y editar el contenedor div site-logo para reailzar los cambios en ciertos tamaños de pantalla.
@media only screen and (max-width: 600px) {
.site-logo a{
background-image:url(/wp-content/uploads/2019/10/logo-movil.png);
display: block;
background-size:contain;
background-repeat: no-repeat;
background-position: center;
width:100px;
height:100px;
}
.site-logo img {
display:none; }
}
Con este código conseguimos tener 2 logotipos en el mismo sitio web, uno para versión móvil y otro para la versión de escritorio de nuestra página web WordPress.
Espero que te haya gustado el tip de diseño CSS para WordPress y compartas tu experiencia, si tienes algún problema no dudes en consultarme estamos disponibles para colaborar profesionalmente en tu proyecto.
Tener dos logotipos no afecta el rendimiento del SEO o perjudica?, me interesa bastante realizar esta modificación en mi web pero deseo saber si repercute en posicionamiento o imagen de marca.
Gracias.