Branding del sitio
Personalizá cada aspecto visual de tu sitio: plantillas, colores, logos, layouts y más. Todo con vista previa en tiempo real.
Acceder al editor de branding
Desde el panel de Fanz, andá a Sitio Web → Branding.
Vista previa del navegador
A la derecha de la pantalla vas a ver un previsualizador del navegador que muestra exactamente cómo se ve tu sitio en tiempo real.
Nota: Este previsualizador también aparece en los menús de Homepage y Páginas. Es la misma herramienta para ver cambios en tiempo real.
Acciones del previsualizador
En la esquina superior derecha del previsualizador tenés:
| Ícono | Acción |
|---|---|
| Escritorio | Ver cómo se ve en computadoras |
| Móvil | Ver cómo se ve en celulares |
| Flecha ↗ | Abrir tu sitio real en una nueva pestaña |
Importante: Podés navegar dentro del previsualizador, hacer clic en eventos y ver cómo se ven los cambios en distintas páginas (homepage, detalle de evento, etc.).
Menús de la barra lateral
La barra lateral izquierda tiene 5 menús para personalizar diferentes aspectos del sitio:
1. Plantilla (Template)
Elegí entre 8 plantillas prediseñadas que definen el estilo visual general de tu sitio:
| Plantilla | Descripción |
|---|---|
| Base | Plantilla por defecto, equilibrada y versátil |
| Bold | Diseño fuerte y llamativo |
| Bright | Colores vivos y energéticos |
| Clean | Minimalista y profesional |
| Organic | Estilo natural y fluido |
| Pulse | Dinámico, ideal para eventos nocturnos |
| Simple | Sencillo y directo |
| Vivid | Vibrante y colorido |
Qué incluye cada plantilla:
- Layout predeterminado (pie de página, navbar, tipografías)
- Diseño del banner del encabezado
- Colores personalizados
- Redondeo de cajas (border-radius)
- Sombras de elementos
Al hacer clic en una plantilla, ves inmediatamente los cambios en el previsualizador sin guardar nada. Podés probar todas las plantillas y solo guardar cuando encuentres la que te guste.
2. Layout
Elegí el estilo de navbar, pie de página y tipografías. Hay 6 opciones disponibles:
| Layout | Estilo |
|---|---|
| Standard | Clásico y funcional |
| Floating Modern | Moderno con elementos flotantes |
| Classic Elegant | Elegante y sofisticado |
| Bold Split | Dividido y llamativo |
| Old Theatre | Estilo teatral vintage |
| Organic Cultural | Cultural y artístico |
Cada layout tiene un diseño de navbar y pie de página que combinan entre sí, además de tipografías específicas.
Nota: El layout puede sobrescribir el layout por defecto de la plantilla que elegiste. Primero elegí la plantilla y después ajustá el layout si querés algo diferente.
3. Logos
Configurá los logos de tu marca:
Logo principal del sitio
Se usa en:
- Navbar del sitio
- Pie de página del sitio
- Tickets (por defecto)
- Emails de comunicación
Recomendaciones:
- Formato: PNG con fondo transparente
- Tamaño recomendado: 400 × 200 px (proporción 2:1, el doble de ancho que de alto)
Logo de Wallet
Se usa para membresías que aparecen en Apple Wallet.
Recomendaciones:
- Tamaño recomendado: 200 × 200 px (proporción 1:1, cuadrado)
- Formato: PNG
Nota: Si no vendés membresías, podés dejarlo vacío.
4. Colores
Personalizá los colores del sitio. Cada plantilla tiene colores por defecto, pero podés sobrescribirlos.
Esenciales
| Color | Uso |
|---|---|
| Primario | Color principal de tu marca. Botones, links, elementos destacados |
| Secundario | Color de soporte. Elementos secundarios, fondos alternativos |
Texto
| Color | Uso |
|---|---|
| Color de texto | Color del texto principal en la página |
| Texto de botones | Color del texto dentro de botones y elementos con fondo primario. Importante que tenga contraste |
Fondos
| Color | Uso |
|---|---|
| Fondo principal | Color de fondo general del sitio |
| Barra de navegación | Fondo del navbar |
| Pie de página | Fondo del pie de página |
| Campos de entrada | Fondo de los campos de formulario |
Bordes y sombras
| Color | Uso |
|---|---|
| Color de bordes | Líneas divisorias, bordes de tarjetas |
| Sombra de caja | Sombras de elementos |
| Sombra al pasar mouse | Sombras al pasar el mouse sobre elementos clickeables |
| Sombra light | Sombras suaves para casos específicos |
Presets de colores
En la parte superior del menú de colores tenés presets de modo claro y oscuro. Hacé clic en uno para aplicar un conjunto de colores predefinidos.
Restaurar colores individuales
Al lado de cada color hay un botón para restaurar a valor por defecto de la plantilla. Si modificaste un color y querés volver al original de la plantilla, usá este botón.
⚠️ Importante: Si cambiás los colores y después cambiás de plantilla, todos los colores se resetean al valor predeterminado de la nueva plantilla excepto primario y secundario. Por eso, te recomendamos primero elegir la plantilla y después ajustar los colores.
5. Opciones
Configurá opciones adicionales del sitio:
Texto del botón de compra
El texto que aparece en el botón principal de compra en la página del evento.
| Idioma | Valor por defecto |
|---|---|
| Español | "Comprar" |
| Inglés | "Buy" |
Podés personalizarlo (ej: "Obtener entradas", "Reservar", "Comprar ahora").
⚠️ Importante: Al personalizar el texto, perdés la traducción automática. Solo podés ingresar un único valor que se usará para ambos idiomas. Si tu sitio es bilingüe, considerá usar una palabra que funcione en ambos idiomas o dejá el valor por defecto.
Mostrar precio inicial
Elegí si mostrar el precio "desde" arriba del botón de compra:
- Activado: Muestra "Desde $5.000" arriba del botón
- Desactivado: Solo muestra el botón sin referencia de precio
Guardar cambios
Cuando hacés cualquier cambio, aparece un botón de guardar en la parte inferior de la barra lateral.
- Guardar: Aplica los cambios permanentemente a tu sitio en vivo
- Salir sin guardar: Si intentás salir con la flecha de atrás, te avisa sobre cambios sin guardar
Checklist antes de guardar
- ✅ Revisá cómo se ve en vista escritorio
- ✅ Revisá cómo se ve en vista móvil
- ✅ Navegá a un evento en el previsualizador para ver cómo afectan los cambios
- ✅ Si todo está bien, guardá los cambios
Próximos pasos
Sí, podés cambiar la plantilla en cualquier momento. Los eventos y contenidos se adaptan automáticamente a la nueva plantilla.
Si cambiaste de plantilla después de personalizar colores, estos se resetean al valor predeterminado de la nueva plantilla (excepto primario y secundario). Siempre elegí primero la plantilla y después ajustá los colores.
Sí. La plantilla define el estilo general y los colores, pero podés sobrescribir el layout (navbar, pie de página, tipografías) eligiendo otro en el menú Layout.
No hasta que guardes. El previsualizador muestra los cambios en tiempo real, pero tu sitio en vivo no se modifica hasta que hagas clic en Guardar.
Navegá por el previsualizador, entrá a un evento, mirá los botones. Si no podés leer el texto o los elementos no se distinguen, ajustá los colores. Probá siempre en escritorio y móvil.
Podés restaurar cada color individualmente al valor por defecto de la plantilla usando el botón de restaurar al lado de cada color.
No. Solo es necesario si vendés membresías que se agregan a Apple Wallet. Si no usás esta funcionalidad, podés dejarlo vacío.
Los cambios de Opciones (texto del botón, precio inicial) se ven en la página del evento. Navegá a un evento dentro del previsualizador para verlos.
Por el momento se usa el mismo logo. Asegurate de que tu logo funcione bien sobre diferentes fondos.
No. Los tickets PDF tienen su propia configuración de diseño en el menú de Diseños de tickets.