La identidad visual es lo que hace que tu sitio y tus correos se vean como tu agencia: el logo, sus variantes, el ícono y los colores. Se configura en Configuración → General, en dos tarjetas: Identidad visual para los archivos y Branding para el nombre de marca y los colores.
Está disponible en todos los planes. La pueden cambiar el propietario y los administradores de la agencia.
Los cuatro archivos de tu marca
En la tarjeta Identidad visual hay un espacio para cada archivo. Arriba ves una vista previa del encabezado y del pie de tu sitio con el tema activo, y una pestaña de navegador con tu ícono.
- Logo principal (recomendado): se usa en el encabezado del sitio, en la tarjeta que aparece al compartir un enlace en redes y en los datos de la agencia para buscadores. Tiene que tener fondo transparente.
- Versión para fondo oscuro: tu logo en versión clara o blanca, con fondo transparente. Se usa en el pie oscuro del sitio y en el encabezado del tema Noche. Si no la cargás, en esas zonas el logo principal se muestra sobre una placa clara.
- Logo sobre fondo claro: una alternativa para cuando no tenés el logo con fondo transparente. Es un archivo con fondo blanco o claro sólido. Si solo cargás este, sobre fondos de color se va a ver el recuadro.
- Ícono (favicon): un cuadrado que se ve en la pestaña del navegador, en el acceso directo del celular y como avatar de tu espacio de trabajo en el panel. Sin ícono, el panel muestra las iniciales de la agencia.
Cada espacio muestra cómo queda el archivo sobre Fondo claro, sobre Fondo oscuro y sobre el tema activo, y una etiqueta de estado: Listo, Sin cargar, Procesando, Variantes incompletas o No cumple los mínimos. Variantes incompletas quiere decir que el archivo se cargó pero todavía faltan algunos de los tamaños que se generan para el sitio; tocá Reintentar variantes; si sigue igual, volvé a subir el archivo. Si el procesamiento de imágenes no está disponible, la etiqueta es Sin variantes (se usa el original saneado).
Cómo subir un archivo
- En el espacio que corresponda, tocá Subir archivo (o Reemplazar, si ya hay uno), o arrastrá el archivo hasta la zona punteada.
- Si el panel te lo pide, confirmá tu identidad.
- Listo: cada archivo se guarda en el momento en que lo subís, aparte del botón Guardar cambios de más arriba. Vas a ver el aviso «Guardado. Generamos las variantes para el sitio y ya se está usando.».
Para sacar un archivo, tocá Quitar. El sitio deja de usarlo en unos minutos.
Qué archivos se aceptan:
- Formatos: PNG, WebP o SVG. Un SVG se guarda como una copia limpia, sin scripts ni enlaces externos.
- Peso: hasta 8 MB; un SVG, hasta 1 MB.
- Logos: recomendamos 1200 px o más en el lado mayor, con un mínimo de 600 px. Pueden ser alargados hasta una proporción de 10 a 1. Por debajo de 1200 px el logo puede verse menos nítido en pantallas de alta densidad.
- Ícono: cuadrado, de 512 × 512 px o más.
- Ningún archivo puede superar los 4096 px por lado.
No hace falta que prepares tamaños distintos: subí un archivo grande y nosotros quitamos los márgenes transparentes, generamos los tamaños para cada pantalla, la tarjeta para redes (1200 × 630) y los favicons.
Mientras falte algo, la tarjeta te lo dice en una lista de pendientes, por ejemplo «Falta la versión para fondo oscuro». Cuando están todos, aparece el aviso La identidad visual está completa para todos los temas.
El logo en tus correos
Los correos que envía tu agencia también llevan tu logo, pero solo pueden mostrar archivos PNG o JPEG: muchos programas de correo no muestran SVG ni WebP. Como el panel acepta PNG, WebP y SVG, para que el logo aparezca en tus correos cargá al menos una de sus versiones en PNG. Si todos tus logos son SVG o WebP, los correos salen sin logo.
Por defecto, los correos usan primero la versión para fondo oscuro (va sobre el encabezado de color del correo), después el logo sobre fondo claro y por último el logo principal. Podés elegir otra en Apariencia de los correos.
Nombre de marca y colores
En la tarjeta Branding definís:
- Nombre de marca: el nombre con el que aparece tu agencia en el sitio público.
- Color principal y Color de acento: podés elegirlos con el selector o escribir el código del color (por ejemplo,
#0e4d64).
La vista previa de la tarjeta muestra los dos colores aplicados al nombre y a un botón. Cuando termines, tocá Guardar cambios, abajo de la tarjeta.
Estos colores se usan en tu sitio público y, si no definís otros, también en tus correos: el principal en títulos y detalles, y el de acento en los botones. El panel de administración mantiene siempre sus propios colores.
Relación con «Primeros pasos»
El primer paso de Primeros pasos, «Completá la identidad de tu agencia», queda hecho cuando tenés un logo cargado y, además, un Email público en Configuración → Sitio y SEO.