Habilitado por el cliente: marca y personalización

Hay varias formas de adaptar Workvivo para que coincida con tu marca.

Esta guía detallará qué áreas se pueden personalizar a través del Panel de administración de Workvivo, las recomendaciones/requisitos de imágenes y otros consejos y trucos.

Temas

Dentro del área Temas del Panel de administración, puedes configurar los siguientes elementos de marca:

1. Imagen del banner principal
2. Color primario
3. Color secundario
4. Color de la barra de navegación (opcional)
5. Logotipo de la empresa

Cómo actualizar:

Para actualizar los elementos de marca anteriores:

• Vaya a Administración > Temas

• Verás tu marca predeterminada en la opción "Tema predeterminado". Se mostrará como activo.
• No puedes editar este tema porque está activo.
• Para crear una nueva marca, haga clic en "Agregar tema".
• Puedes darle un nombre a tu tema y comenzar a editar tus elementos de marca.

Información adicional sobre los elementos de marca de Themes:

1. Banner principal:

Puedes establecer un tema para las versiones web y móvil, y aplicar el mismo banner web a la aplicación móvil, o reemplazarlo con una imagen personalizada.

Especificaciones de la web:

• Dimensiones recomendadas: 2241px x 474px
• Espacio seguro para texto/imágenes clave: aproximadamente 895 px x 474 px, centrado. Mantener el texto clave y los elementos visuales dentro de esta área garantizará que permanezcan visibles en computadoras de escritorio, dispositivos móviles y cuando se recorten en el feed principal. Pruebe y perfeccione siempre su imagen para obtener la mejor experiencia.
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF o GIF < 3 MB
• Tamaño máximo de archivo: 10 MB

Especificaciones móviles:

Nuestros mejores consejos: 

Para obtener una vista previa de la imagen de un banner, puede:

1. Consulta una vista previa desde la página Editar tema. Te mostramos cómo se verá tu tema con cada cambio que hagas.

2. Súbelo a un espacio oculto/privado. Ver un banner desde dentro del espacio aparecerá igual que si fuera el banner principal en el escritorio.

Ve a tu Espacio > Edita el espacio > Haz clic en el banner > Haz clic en "Cargar" > "Guardar". Minimiza el uso de texto o personas en las imágenes, ya que puede que queden cortadas.
 

2. Color primario

Un color primario estiliza elementos clave, entre ellos:

• Escritorio:
  • Barra de navegación del escritorio (color predeterminado) 
  • Publicación de interfaz de usuario (iconos, bordes, botones) 
  • Bordes de todos los botones y color principal de algunos botones 
  • Todos los iconos excepto la barra de navegación 
  • Domine el texto en actividades, espacios, artículos de noticias, objetivos/valores, análisis y secciones de búsqueda. 
  • Avatares de eventos en el feed de actividades 
  • Enlaces, por ejemplo @menciones, hipervínculos, hashtags (a menos que estén habilitados los "enlaces azules")
  • Menú de navegación lateral que indica la opción de perfil si el menú está abierto:
  • Aplicaciones y documentos: indicador de estado “destacado” y el color del ícono de la carpeta.
• Móvil:
  • Encabezado (color predeterminado a menos que se elija un color de barra de navegación independiente) 
  • Texto e iconos del menú de hamburguesa 
  • Publicación de interfaz de usuario (iconos, bordes, botones) 
  • Etiquetas de elementos en valores y personas 
  • Enlaces, por ejemplo @menciones, hipervínculos 
  • Encabezado de notificación por correo electrónico: el valor predeterminado es el color principal

3. Color secundario

Un color secundario estiliza elementos clave que incluyen:

•  Determinados bordes, como el borde alrededor del avatar de los eventos en el feed de la web:

• Tenga en cuenta que el color de fondo de la Declaración de Misión en la página de Valores es ligeramente más oscuro; esto no se puede personalizar:

• El botón “Nuevo” en el megamenú. 

4. Color de la barra de navegación (opcional)

• Esto debe contrastar con la fuente blanca de las etiquetas.
• Tenga en cuenta que las etiquetas de fuente blanca no son personalizables.
• Si no personaliza el color de su barra de navegación, el valor predeterminado será el 90 % de su color primario.

5. Logotipo de la empresa

Dimensiones: ancho mínimo 400px Tipos de archivos: JPG, JPEG, PNG, BMP, SVG, WEBP.

Marca adicional habilitada para el cliente

Banner de perfil personal

Los banners de perfil personal se pueden configurar para todos los usuarios con las mismas especificaciones de archivo recomendadas que el banner principal. Ten en cuenta que solo se ven cuando se consulta el perfil de un usuario tanto en la computadora de escritorio como en dispositivos móviles. Obtén más información en este artículo.
 

Presupuesto:

• Dimensiones recomendadas: 2241px x 474px
• Espacio seguro para texto/imágenes clave: 1290 px x 135 px centrado
• Tipos de archivos admitidos: PNG, JPG, JPEG < 3 MB
• Tamaño máximo de archivo: 10 MB

Iconos y pancartas espaciales

Haz que tus Espacios se destaquen personalizando el banner y el icono.

En una computadora de escritorio, los íconos del espacio aparecerán en la parte izquierda de la pantalla. En un dispositivo móvil, los íconos del espacio aparecen al hacer clic en la imagen de perfil en la esquina superior izquierda. También puedes abrir el menú lateral si deslizas el dedo de izquierda a derecha en la aplicación. 

Especificaciones del icono espacial:

• Dimensiones recomendadas: 200 px x 200 px o relación 1:1
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF o GIF < 3 MB

Especificaciones del banner espacial:

• Dimensiones recomendadas: 2241px x 474px
• Espacio seguro para texto/imágenes clave: 1290 px x 135 px centrado 
• Más información y consejos en esta Guía de banners de espacio 
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF o GIF < 3 MB 
• Nota: los bordes de un banner de espacio se recortan en la vista en dispositivos móviles
   

Iconos de valor y declaración destacada
 

¡Pon en práctica los valores de tu empresa en Workvivo! Los empleados pueden etiquetar los valores de tu empresa en las publicaciones para generar un mayor sentido de propósito y pertenencia en toda la organización.
 

Presupuesto:

Iconos

• Dimensiones recomendadas: 200px x 200px 
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF o GIF <3 MB
• Una imagen cuadrada dará como resultado un ícono de valor con forma cuadrada, una imagen circular dará como resultado un ícono de valor circular

Imagen y vídeo del héroe

• Dimensiones recomendadas para la imagen principal: 600 px x 300 px
• Tipos de archivos admitidos: PNG, JPEG, JPG, JFIF o GIF <3 MB
• Declaración del héroe Tipo de archivo de vídeo: MP4, MOV < 5 GB
• Las imágenes aparecerán en una proporción de 2:1; si también se carga un video, la imagen se mostrará como imagen de portada.
• Nota: La sección Valores no se puede eliminar de la plataforma.

Iconos de insignia

Los badges son una forma de fomentar la participación en el lugar de trabajo y aumentar el reconocimiento de los empleados en toda la empresa. Puedes personalizar los íconos de los badges para que coincidan con su propósito.
 

Presupuesto:

• Dimensiones recomendadas: 200px x 200px o relación 1:1 (cuadrado)
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Iconos de aplicaciones y documentos

Aplicaciones y Documentos (accesibles a través de la pestaña Recursos) son ventanas a los sistemas y documentos clave que se utilizan en tu organización cada día. Puedes hacer que las aplicaciones se reconozcan fácilmente si les añades íconos. Si no añades ninguna imagen, de manera predeterminada se utilizará el ícono de enlace negro del siguiente ejemplo:
 

Presupuesto:

• Dimensiones recomendadas: 200px x 200px (cuadrado)
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Iconos de documentos

Presupuesto:

• Dimensiones recomendadas: 200px x 200px (cuadrado)
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Iconos del mega menú

El Megamenú (que se encuentra en tu barra de navegación) facilita que tú y tus compañeros encuentren los recursos pertinentes. Puedes asegurarte de que los enlaces y las aplicaciones importantes estén siempre visibles si añades íconos pertinentes.

Presupuesto:

• Dimensiones recomendadas: 24px x 24px
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF, GIF < 3 MB
• Esta imagen aparecerá antes del título del encabezado en el Mega Menú

Enlaces útiles Iconos de la barra lateral

Puedes crear un widget de Enlaces útiles en la barra lateral para un acceso rápido en tu página de inicio de Workvivo.

El widget estará visible en el lado izquierdo de tu feed solo en la versión de escritorio y se puede agregar en el panel de administración. 

Presupuesto:

• Dimensiones recomendadas: 200px x 200px (cuadrado)
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Iconos del equipo
 

Puedes añadir íconos de Equipo a tus equipos una vez que los datos de tus empleados se hayan añadido a la plataforma.

Presupuesto:

• Dimensiones recomendadas: 200px x 200px (cuadrado)
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Billboards
 

Los billboards te permiten resaltar y mostrar contenido en la parte superior del Activity Feed tanto para usuarios de computadoras escritorio como de dispositivos móviles.

• Dimensiones recomendadas: Tamaño mínimo 600px x 300px
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF, GIF < 3 MB
• La imagen aparecerá en una relación de aspecto de 2:1

Imagen de portada de los podcasts
 

Puedes compartir podcasts con personas a través de Workvivo. Si creas tu propio podcast, puedes añadir una imagen de portada para ese podcast. La imagen de portada también aparecerá en el widget de podcasts en el lado derecho del feed para usuarios de computadoras de escritorio (si está habilitado).

• Dimensiones recomendadas: mín. 300px x 300px
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Galería
 

Puedes usar la función de Galería en Workvivo para almacenar, organizar y compartir imágenes con tus colegas en computadoras de escritorio y en dispositivos móviles.

Presupuesto:

• Tipos de archivo admitidos: GIF, PNG, JPG, JPEG, JFIF, MP4, MOV
• Siempre recomendamos imágenes de paisajes en Workvivo
• Las miniaturas se muestran con una relación de aspecto de 10:7 en el escritorio y de 1:1 en el móvil. Se recomiendan imágenes horizontales con una relación de aspecto de 2:1.
• Para imágenes con texto, recomendamos centrar el texto para evitar posibles cortes.

Imagen destacada para una página global

Puedes destacar una Global Page en un widget en el lado derecho del Activity Feed en computadoras de escritorio.

Presupuesto:

• Dimensiones recomendadas: 800px x 400px
• Tipos de archivos admitidos: PNG, JPG, JPEG, JFIF, GIF < 3 MB

Resumen de imágenes personalizables y recomendaciones
 

Nota: JFIF solo funciona en computadoras de escritorio.

¿Qué es un espacio seguro?
Recomendamos tener un "espacio seguro" para el texto y las imágenes porque queremos garantizar una visualización adaptada en la computadora de escritorio. Por ejemplo, el widget del Lanzador de aplicaciones y las imágenes de portada de artículos/eventos de noticias pueden ajustarse a tres tamaños diferentes según el ancho de la ventana del navegador.

Esta es la naturaleza del diseño adaptativo: las personas siempre verán Workvivo en ventanas de diferentes tamaños, no hay un tamaño de ventana establecido a menos que estén en pantalla completa.

Otras consideraciones:

• Spotlight: las imágenes de los artículos de noticias (incluidos los artículos destacados), eventos y Global Pages se incluirán automáticamente en Spotlight; no es necesario que subas imágenes especiales para esta sección.