Agregar un nuevo logotipo

El objetivo de este breve documento es establecer pautas sobre cómo configurar el logotipo principal. Para ello, vamos a destacar los siguientes aspectos:

Archivos aceptados

  • JPG

  • JPEG

  • GIF

  • PNG

En la mayoría de los casos, es mejor guardar su logotipo como PNG transparente. Consulte el tamaño a continuación.

Tamaño máximo de archivo: 5MB


Nombre y tamaño del logotipo

Los logotipos deben denominarse siguiendo esta estructura:

 

Nombre del logotipo

Tamaño en píxels

Dispositivo 

_logo-nombre-hotel-ciudad.png

636 x 250

Escritorio

_logo-invertido_nombre-hotel-ciudad.png

636 x 250

Escritorio
(superposición de imágenes)

_logo-sm_hotel-nombre-ciudad.png

318 x 125

Tablet

_logo-xs_hotel-nombre-ciudad.png

400 x 80

Móvil

 

Nota :  Todos los logotipos tienen el mismo nombre de archivo, excepto el 2.º, 3.º y 4.º que tienen un prefijo que el CMS utiliza para determinar en qué dispositivo debe mostrarse. En el CMS eliges la primera imagen (_hotel-name-city.png) como logotipo principal y el CMS configurará la otra automáticamente.

 

Ejemplos:

ba-desktop-logo_hotel-bookassist-spain.png (primary logo)

ba-invert-logo
_logo-inverted_hotel-bookassist-spain.png (inverted logo)

ba-tablet-logo
_logo-sm_hotel-bookassist-spain.png

ba-mobile-logo
_logo-xs_hotel-bookassist-spain.png

Optimizar imágenes

Usar TinyPNG para optimizar sus imágenes una vez creadas.



Cargar y seleccionar logo en el CMS

Seleccione el logotipo de escritorio principal (_hotel-bookassist-spain.png) que desea utilizar. El cuadro resaltado verde es la imagen seleccionada que utilizará el CMS. Si las imágenes tienen el nombre correcto, el CMS determinará automáticamente la selección para cada dispositivo.

select-logo-cms

 

En la mayoría de los temas de sitios web, el logotipo invertido se muestra inicialmente como el logotipo principal en la página de inicio. Sin embargo, a medida que el usuario se desplaza hacia abajo en la página, cambiará al logotipo principal del encabezado. Además, en las páginas internas con espacio limitado en el encabezado, se utilizará el logotipo principal.

screen-logo-example