Si necesitas saber cómo hacer un logo responsive, aquí te explico cómo puedes cambiar el logotipo de tu sitio web en WordPress, para que se adapte desde dispositivos móviles, es decir, el teléfono celular o una tableta.
En el video de abajo te explico a detalle lo que tienes que hacer.
Por qué utilizar un logo responsive en tu sitio web
Esto es muy útil (y recomendable) ya que el logotipo se va adaptar mejor al formato de la pantalla donde se vea, es decir, el logo también es responsive. Así no pierde fuerza la identidad de la marca, y será recordado por la persona que visita tu página web.
¿Necesitas mejorar tu logotipo? Mira quien hace logos para empresas
Siempre me pasa que voy hacer un sitio web de un cliente, y casi siempre hay una sola versión del logotipo.
Me tomo el tiempo para modificar el header para que el logotipo se vea genial, y reviso el sitio web desde un teléfono móvil, y sorpresa.. el logo se ve fatal porque no se adapta bien.
Qué es un Logo Responsive
Es un logotipo que se adapta a distintos medios y formatos, sin perder su identidad corporativa. En la actualidad es muy importante para una marca tener versiones del logotipo para utilizar en:
- un sitio web
- en todos los formatos de redes sociales
- en videos
- en gifs
- sobre camisetas, gorras, botellas, fondos de pantalla, etc,
Ejemplos de Logos Responsive
Mira estos famosos logos y sus variantes al cambiar el tamaño del formato.
Como puedes ver, estos logotipos tienen como características principales el uso de un ícono sustraído del diseño principal. Esto ayuda para simplificar y mantener la identidad visual del logotipo.
Características de Logos Responsive
Las características de un logo responsive tienen como factor principal que se adapten a cualquier tamaño, formato, espacio, medio, o lugar, sin que el logo pierda su identidad visual.
Me refiero que si una marca decide utilizar un ícono con fondo de color para representar su logo en su página de Facebook, y en su canal de Youtube utiliza el logo completo, y aun así puedes identificar rápidamente la marca, ese logo es responsive.
Tiene mucho que ver la identidad de la Marca, no solo es el logo.
Una marca puede crear cuantas variables considere en su logotipo, mientras haya una constante visual.
Un logotipo puede tener 4 versiones básicas que se deben crear para considerarse un logo responsive:
- Logotipo completo: Nombre + Icono + Descripción (tagline)
- Logotipo sin Tagline: Nombre + Icono
- Solo Nombre
- Solo Icono
También se debe tomar en cuenta la forma del logotipo. Si es muy largo (horizontal o vertical) se debe considerar crear una versión que encaje bien en formatos cortos o cuadrados.
Cómo Crear un LOGO Responsive
Como viste en los ejemplos, puedes utilizar el icono de tu logotipo para distintos medios.
O crear varias versiones pensando en espacios cuadrados, rectangulares angostos, espacios muy pequeños, en lugares con fondo oscuro, etc.
Todo esto se puede crear un Adobe Illustrator, que es la herramienta más popular para crear logotipos.
Puedes también a un diseñador gráfico que te ayude con el diseño de las versiones responsive de tu logotipo.
Cómo Hacer un LOGO Responsive en WordPress
Te comparto cómo hago para cambiar un logo en dispositivos móviles en un sitio web creado en WordPress.
Para esto vamos a modificar el CSS del sitio web, para decirle a WordPress cuál logo mostrar según el dispositivo que la persona utiliza al visitar el sitio web.
Paso 1: Crear dos versiones de logotipos responsive
Crea 2 logos.
Uno para la versión de escritorio y uno para la versión móvil.
En mi sitio web, hice la versión de escritorio más horizontal, para que se adaptara a la barra del menú principal.
La versión del logotipo para dispositivos móviles la hice más compacto, porque el espacio en una tableta o teléfono celular es más limitado.
Paso 2: Guardar logotipo en biblioteca de sitio web
Añade ambos logos a tu biblioteca de medios, adentro de tu página web en WordPress.
Recuerda escribir un nombre que diferencie cada logo.
Por ejemplo logo.jpg y logo-responsive.jpg.
Paso 3: Copiar código CSS Logo Responsive
Copia el siguiente código.
Cambia la URL en rojo por la URL de tu logotipo responsive para dispositivos móviles.
}
Paso 4: Pegar código CSS logo responsive
Vas a Apariencia, Personalizar, CSS Adicional, y pegas este código ahí.
Conclusiones
LISTO!
Ya tienes un logotipo responsive para que tu sitio web se vea más dinámico y profesional.
Cuando el logotipo de tu sitio web, o el sitio web de un cliente, tiene este tipo de detalles, definitivamente crear una buena primera impresión. El sitio web se va a percibir más profesional y moderno.
Si hacer paginas web para clientes, aplicar estas técnicas de diseño, te van a ayudar a sobresalir y tus clientes quedarán muy satisfechos con su nuevo sitio web.
El tema de WordPress que uso para crear páginas web es DIVI de Elegant Themes.
Este tema es súper completo, y me facilita hacer páginas web profesionales.
Mira este video para conocer más sobre cómo puedes instalar la plantilla DIVI en tus páginas web.
Además te comparto mi Curso de DIVI gratis en español, que te puede ayudar a configurar esta poderosa herramienta de WordPress.
