fbpx
logo responsive sitio web

Logo en Responsive: Cómo Hacer un LOGO Responsive en WordPress

Last updated Aug 30, 2022 | Crear Logo, Divi, Wordpress

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.

 

logo-responsive emmanuel escritorio

 

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.

 

logo responsive emmanuel

 

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.

 


@media only screen and (max-width: 981px) {
  /* Changes mobile logo to specified image */
  #logo {
  }

}


 

Paso 4: Pegar código CSS logo responsive

Vas a Apariencia, Personalizar, CSS Adicional, y pegas este código ahí.

 

logo responsive css

 

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.

 

Crear Boceto (Wireframe) de Página Web

Crear Boceto (Wireframe) de Página Web

En este artículo, voy a compartir contigo cómo puedes crear rápidamente los bocetos de una página web. Crear un boceto o wireframe antes de iniciar la construcción de una página web es una práctica fundamental para trabajar de manera más eficiente y tener claro el...

Mejorar Velocidad WordPress (Optimizar WordPress)

Mejorar Velocidad WordPress (Optimizar WordPress)

Una de las preguntas más frecuentes que recibo en mi canal de Youtube es cómo mejorar velocidad Wordpress. Tener una página web en Wordpress tiene cientos de beneficios, por eso es la plataforma más utilizada (44%) para crear páginas web en internet. Pero al ser...

20% Descuento Tema Divi (Tiempo Limitado)

DESCARGA ESTA PÁGINA

Descarga gratis este Layout de DIVI y la configuración de Bloom para empezar a aumentar tu lista de suscriptores

You have Successfully Subscribed!