Páginas personalizadas

Creá páginas adicionales para tu sitio: sobre nosotros, contacto, sponsors, y cualquier contenido que necesites.

¿Para qué sirven las páginas personalizadas?

Además de la homepage y las páginas de eventos, podés crear páginas adicionales para:

• Sobre nosotros — Historia de tu marca, equipo, misión
• Contacto — Formulario y datos de contacto
• Sponsors — Mostrar tus patrocinadores y partners
• Términos — Políticas detalladas (más allá del pie de página)
• Landing pages — Páginas específicas para campañas
• Galerías — Fotos de eventos pasados
• Información — FAQs extendidas, guías, instrucciones

---

Acceder al gestor de páginas

Desde el panel de Fanz, andá a Sitio Web. En la barra lateral vas a ver una sección "Páginas" con un botón "+" a la derecha.

---

Crear una página nueva

1. Hacé clic en el botón "+" junto al título "Páginas"
2. Se agrega una nueva página a la barra lateral con un campo de texto para el nombre
3. Escribí el nombre de la página (ej: "Sobre nosotros")
4. Presioná Enter o hacé clic en el check verde para confirmar

Cancelar la creación:

• Si hacés clic afuera sin completar el nombre, la página no se crea
• Si hacés clic en la X a la derecha del campo, se cancela la creación

La página se crea vacía y privada (no publicada) por defecto.

---

Vista previa del navegador

A la derecha de la pantalla vas a ver un previsualizador del navegador que muestra cómo se ve tu página.

En la esquina superior derecha del previsualizador tenés:

• Ícono de escritorio: Ver cómo se ve en computadoras
• Ícono de móvil: Ver cómo se ve en celulares
• Flecha ↗: Abrir tu sitio real en una nueva pestaña

Diferencia con otras secciones: En el previsualizador de páginas personalizadas, a la izquierda vas a ver dos botones nuevos:

• "Editar página": Abre el constructor de páginas
• "Publicar": Publica la página para que sea visible

Nota: La página no aparece en la barra de navegación del sitio hasta que la publiques, pero podés ver cómo se ve en el previsualizador sin publicarla.

---

Gestión de páginas en la barra lateral

Cada página en la barra lateral tiene íconos de acción:

A la izquierda:

• Ojo tachado (si no está publicada): Hacé clic para publicar
• Manejador de arrastre (si está publicada): Cuando publicás una página, el ojo tachado se convierte en un manejador de arrastre. Arrastrá para reordenar las páginas. El orden en la barra lateral es el mismo orden en que aparecen en el navbar del sitio.

A la derecha:

• Ícono de configuración (tuerca): Abre un menú con 4 opciones:

Acción	Descripción
Publicar	Cambia el estado de borrador a publicado
Configuración	Abre el ventana de configuración de la página
Duplicar	Crea una copia de la página (siempre como borrador)
Eliminar	Elimina la página permanentemente

---

Configuración de la página

El ventana de configuración te permite editar:

Título de la página

El nombre que aparece en la navegación.

Path (URL)

La dirección de la página. Por defecto, convertimos el nombre a formato kebab-case (ej: "Sobre Nosotros" → sobre-nosotros). Podés editarlo manualmente si querés algo diferente.

Redireccionar a archivo o URL

Si activás esta opción, la página no muestra contenido propio sino que redirige a:

• Una URL externa
• Un archivo que subas (PDF, imagen, etc.)

Ocultar de la barra de navegación

La página existe y es accesible, pero no aparece en el navbar. Útil para landing pages o subpáginas que no querés en la navegación principal.

Nota: Las páginas ocultas aparecen en la barra lateral bajo un título "Ocultas" separado de las páginas publicadas.

---

El constructor de páginas (Page Builder)

Para editar el contenido de una página, hacé clic en "Editar página" en el previsualizador.

Interfaz del constructor

Barra superior:

• A la izquierda: "Page Builder" - nombre de la página - ícono de nube (verde si está publicada, gris si no)
• Junto a la nube: Indicador de cambios sin guardar / guardando
• A la derecha: Botones de Deshacer/Rehacer y Cerrar

Autoguardado: El constructor guarda los cambios automáticamente. Vas a ver un indicador cuando hay cambios sin guardar y cuando se están guardando.

Canvas: El área principal muestra una vista previa de tu página con el navbar arriba y el pie de página abajo, exactamente como se verá en tu sitio.

---

Banner de página

En la parte superior del canvas tenés un botón "Agregar banner de página".

Al hacer clic, se abre el ventana de configuración del banner:

Imágenes del banner

Dispositivo	Ratio recomendado
Escritorio	3:1
Móvil	1:1

Capa de texto

Por defecto está activado el botón "Mostrar capa de texto". Si está activado, podés personalizar:

• Título del banner: Por defecto usa el título de la página
• Subtítulo: Texto de apoyo
• CTA (Call to Action): Botón con texto, URL y destino (misma ventana o nueva ventana)

Si desactivás la capa de texto, solo se muestra la imagen sin texto.

Hacé clic en Guardar para aplicar los cambios o Cancelar para descartarlos.

---

Agregar bloques

Debajo del banner (o al inicio si no hay banner) tenés el botón "Agregar bloque".

Al hacer clic, se abre el ventana con los tipos de bloques disponibles:

---

Bloque: Texto

Agregá encabezados, párrafos y texto formateado.

Configuración:

• Editor de texto con formato (negrita, cursiva, listas, etc.)

Hacé clic en Listo para agregar el bloque.

---

Bloque: Imagen

Agregá imágenes con links opcionales.

Configuración:

• Subir imagen (también podés arrastrar y soltar)
• Alt text: Texto alternativo para accesibilidad (opcional)
• Ancho: Porcentaje del ancho (opcional)
• Alto: Auto o valor en px (opcional)
• URL del link: Si querés que la imagen sea clickeable (opcional)

---

Bloque: Video

Embebé videos de YouTube, Vimeo o una URL directa a un archivo de video.

Configuración:

• URL del video: Pegá el link de YouTube, Vimeo o una URL directa a un archivo de video (.mp4, .webm, .ogg, .mov)
• Aspect ratio: 16:9, 4:3, 1:1, 21:9
• Alineación: Izquierda, Centro, Derecha, Ancho completo
• Controles de reproducción:
  • Autoplay (activar/desactivar)
  • Silenciado (activar/desactivar)
  • Loop (activar/desactivar)
  • Mostrar controles (activar/desactivar)

En la parte inferior ves una vista previa del video embebido.

---

Bloque: Botón

Agregá botones de llamada a la acción.

Configuración:

• Texto del botón
• URL del link
• Destino: Misma ventana o nueva ventana
• Estilo: Filled (relleno), Outlined (contorno), Text (solo texto)
• Tamaño: S, M, L
• Ancho: Auto o ancho completo

En la parte inferior ves una vista previa del botón.

---

Bloque: Columnas

Creá layouts de múltiples columnas. Al hacer clic, se agregan 2 columnas por defecto.

Después de agregarlo, podés:

• Agregar más columnas
• Agregar bloques dentro de cada columna
• Configurar el comportamiento responsive

(Ver sección "Trabajar con columnas" más abajo)

---

Bloque: Espaciador

Agregá espacio vertical entre secciones.

Configuración:

• Altura: Valor en px

---

Bloque: Divisor

Agregá una línea horizontal separadora.

Configuración:

• Grosor: Ancho de la línea
• Color: Color de la línea
• Ancho: Porcentaje del ancho
• Alineación: Centro, Izquierda, Derecha

En la parte inferior ves una vista previa del divisor.

---

Bloque: Eventos

Mostrá eventos dinámicamente en la página.

Configuración:

• Layout: Lista o Calendario
• Selección de eventos:
  • Por categoría: Elegí una categoría y los eventos de esa categoría se muestran automáticamente (útil para que nuevos eventos aparezcan sin editar la página)
  • Por evento específico: Elegí eventos puntuales manualmente
• Mostrar eventos pasados: Interruptor para incluir o excluir eventos finalizados

---

Bloque: Membresías

Mostrá planes de membresía.

Configuración:

• Selección de membresías:
  • Por categoría: Mostrá todas las membresías de una categoría
  • Por membresía específica: Elegí planes puntuales manualmente

---

Bloque: Carrousel de Imágenes

Mostrá una presentación de diapositivas con imágenes: ideal para galerías, sponsors, fotos de eventos y contenido destacado.

Configuración:

Cada carrousel tiene una o más diapositivas. Hacé clic en el bloque para abrir el editor de diapositivas.

Agregar y gestionar diapositivas:

• Hacé clic en Agregar primera diapositiva (si está vacío) o en la tarjeta + al final de la tira para agregar una nueva diapositiva
• Hacé clic en cualquier miniatura de la tira para seleccionarla y editar su contenido
• Para eliminar una diapositiva: pasá el mouse sobre su miniatura y hacé clic en el botón × (solo visible cuando hay más de una diapositiva)
• Para reordenar diapositivas: seleccioná una y usá los botones ← → junto al número de diapositiva

Configuración por diapositiva:

Campo	Descripción
Imagen de escritorio	Imagen principal (recomendado 1920 × 1080 px, ratio 16:9)
Imagen móvil (opcional)	Imagen alternativa para celulares (si no se sube, se usa la de escritorio)
Alt text (opcional)	Descripción accesible de la imagen
URL del link (opcional)	Hace que la diapositiva sea clickeable
Abrir en	Misma ventana o nueva ventana (solo se muestra si hay un link)

Configuración del carrousel (ícono de tuerca arriba a la derecha del editor):

Ajuste	Por defecto	Descripción
Autoplay	Activado	Las diapositivas avanzan automáticamente
Intervalo	5 s	Tiempo entre avances automáticos (2–15 s)
Flechas de navegación	Activadas	Botones izquierda/derecha
Indicadores de puntos	Activados	Puntos abajo que muestran la diapositiva actual
Loop	Activado	Pasa de la última diapositiva a la primera
Arrastrable	Activado	Los usuarios pueden arrastrar/deslizar para avanzar
Ancho	100%	Ancho del carrousel relativo a su contenedor
Alto	400 px	Alto fijo en píxeles

---

Bloque: Formulario de newsletter

Agregá un formulario para capturar contactos.

Configuración:

• Título del formulario
• Subtítulo
• Campos (activar/desactivar cada uno):
  • Email (siempre activo, no se puede desactivar)
  • Nombre
  • Apellido
  • Teléfono
  • Fecha de nacimiento
• Texto del botón de envío
• Ancho máximo del formulario: Por defecto 600px (recomendado)
• Marcas destino: A qué marca/s se agrega el contacto. Por defecto es la marca actual, y podés agregar otras marcas disponibles en tu contexto de cuenta según permisos y configuración marca/sitio web.

---

Bloque: Menú de Restaurante

Creá un menú de restaurante profesional con secciones e items. Perfecto para restaurantes, cafeterías, bares, o cualquier local que quiera mostrar su carta de comidas y bebidas.

Cómo funciona:

El menú está organizado en secciones (como "Entradas", "Platos Principales", "Postres", "Bebidas") y cada sección contiene items con nombre, descripción opcional y precio.

Configuración:

Cuando hacés clic para editar el bloque de menú, vas a ver:

1. Barra de herramientas arriba con:

   • Ícono de configuración: Abre las opciones del menú (moneda, divisores de sección)
   • Estadísticas: Muestra cantidad total de secciones e items

2. Lista de secciones: Cada sección es una tarjeta colapsable que muestra:

   • Botones de flecha arriba/abajo (↑ ↓): Usalos para mover la sección hacia arriba o abajo en la lista
   • Título de la sección
   • Cantidad de items
   • Botón para expandir/colapsar
   • Botón para eliminar

Agregar secciones:

• Hacé clic en "Agregar Sección" para crear una nueva sección
• Ingresá el título de la sección (ej: "Entradas", "Platos Principales")
• Solo una sección puede estar abierta a la vez para mejor organización

Reordenar secciones:

• Cada sección tiene botones Subir sección (↑) y Bajar sección (↓) a la izquierda. Hacé clic para cambiar el orden. La primera sección tiene el botón subir deshabilitado; la última tiene el botón bajar deshabilitado.
• El nuevo orden se refleja inmediatamente en la página publicada.

Reordenar items dentro de una sección:

• Cuando una sección está expandida, cada item del menú tiene botones Subir (↑) y Bajar (↓) a la derecha (junto al botón eliminar). Usalos para reordenar los items dentro de esa sección. El primer item tiene el botón subir deshabilitado; el último tiene el botón bajar deshabilitado.

Agregar items a una sección:

• Expandí una sección haciendo clic en ella
• Hacé clic en "Agregar Item" dentro de la sección
• Completá:
  • Nombre del item (requerido): El nombre del plato o bebida
  • Precio (requerido): Solo el número, la moneda se agrega automáticamente
  • Descripción (opcional): Ingredientes, preparación, o información adicional

Configuración del menú:

• Símbolo de moneda: Elegí entre opciones predefinidas ($, €, £, ¥, ₹, R$) o ingresá un símbolo personalizado
• Mostrar divisores de sección: Activá/desactivá la línea decorativa debajo de los títulos de sección

Visualización:

En tu página publicada, el menú se muestra con:

• Títulos de sección con línea opcional en el color primario de tu marca
• Items mostrando el nombre conectado al precio con una línea punteada (como los menús tradicionales)
• Descripciones en texto más pequeño debajo del nombre de cada item

Tip: La línea punteada entre los nombres de los items y los precios facilita que los clientes relacionen cada item con su precio, siguiendo el patrón de diseño clásico de los menús de restaurante.

---

Trabajar con bloques en el canvas

Cuando agregás un bloque al canvas, ves una vista previa visual. Al pasar el mouse sobre un bloque, aparece un recuadro azul con controles.

Controles de bloque

En el centro arriba y abajo:

• Botón "+": Agregar un nuevo bloque arriba o abajo

En la esquina superior derecha:

• Mover arriba: Sube el bloque una posición
• Mover abajo: Baja el bloque una posición
• Duplicar: Crea una copia del bloque
• Eliminar: Borra el bloque

Editar contenido: Hacé clic en el contenido del bloque para abrir el ventana de edición y modificar sus propiedades.

---

Trabajar con columnas

El bloque de columnas tiene comportamientos especiales.

Agregar contenido a columnas

Cada columna tiene un botón "+" para agregar bloques dentro. Podés agregar cualquier tipo de bloque excepto otro bloque de columnas.

Controles de columna individual

En la esquina superior izquierda de cada columna:

• Manejador de arrastre: Arrastrá para reordenar las columnas
• Papelera roja: Eliminar la columna

Controles del bloque de columnas

En la esquina superior derecha del bloque de columnas tenés controles adicionales:

• Agregar nueva columna: Agregá más columnas (no solo 2)
• Configurar columnas: Abre el ventana de configuración

Configuración de columnas

El ventana tiene 3 pestañas: Escritorio, Tablet y Móvil.

Escritorio:

• Gap entre columnas: Espacio horizontal en px
• Alineación vertical: Arriba, Centro, Abajo, Estirar

Tablet:

• Apilar columnas verticalmente: Interruptor para que las columnas se muestren una debajo de otra
• Ancho de columna (%): Solo si no están apiladas, definí el porcentaje de cada columna
• Gap entre columnas: Espacio en px

Móvil:

• Mismas opciones que Tablet
• Invertir orden de columnas: La columna de la derecha aparece arriba en lugar de la de la izquierda

---

Publicar la página

Una vez que el contenido esté listo:

1. Cerrá el constructor haciendo clic en Cerrar
2. En el previsualizador, hacé clic en "Publicar"

O desde la barra lateral:

• Hacé clic en el ojo tachado a la izquierda de la página
• O en el ícono de configuración → Publicar

Páginas publicadas vs no publicadas

Estado	Comportamiento
Publicada	Visible para todos, aparece en la navegación
No publicada	Solo vos la ves, no aparece en la navegación

Nota: Si publicaste una página por error, podés despublicarla de la misma forma: haciendo clic en el ícono de ojo o desde el menú de configuración.

---

Próximos pasos

1. Configurar branding del sitio →
2. Optimizar SEO →

---