FANZ
FANZ

Documentación

ENES

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ónDescripción
PublicarCambia el estado de borrador a publicado
ConfiguraciónAbre el ventana de configuración de la página
DuplicarCrea una copia de la página (siempre como borrador)
EliminarElimina 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.


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

DispositivoRatio recomendado
Escritorio3:1
Móvil1: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 o Vimeo.

Configuración:

  • URL del video: Pegá el link de YouTube o Vimeo
  • 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: 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, pero podés agregar otras marcas de tu whitelabel para que todas tengan el lead en su base de datos.

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ónPublicar

Páginas publicadas vs no publicadas

EstadoComportamiento
PublicadaVisible para todos, aparece en la navegación
No publicadaSolo 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

Agregá el bloque "Membresías" a tu página. Podés elegir mostrar todas las membresías de una categoría o seleccionar planes específicos manualmente.

Sí. Creá una página nueva y agregá el bloque "Eventos" con el layout "Calendario". Así tenés un calendario de eventos en cualquier página que quieras.

Usá el bloque "Eventos" y seleccioná "Por evento específico" en lugar de "Por categoría". Así elegís exactamente qué eventos mostrar.

Agregá el bloque "Formulario de newsletter". Podés personalizar el título, qué campos pedir (email, nombre, teléfono, etc.) y a qué marcas se agregan los contactos.

Sí. En la configuración del banner, desactivá el botón "Mostrar capa de texto". Solo se va a ver la imagen sin texto encima.

No. El bloque de video solo soporta embeber videos de YouTube y Vimeo. No se pueden subir videos directamente ni usar otras plataformas.

El constructor muestra una vista previa aproximada mientras editás. Para ver exactamente cómo va a quedar, cerrá el constructor y usá el previsualizador del navegador que tiene datos 100% reales.

En la configuración de la página (ícono de tuerca) activá "Ocultar de la barra de navegación". La página va a seguir existiendo y siendo accesible por URL, pero no aparece en el navbar.

Sí. El constructor tiene autoguardado. Vas a ver un indicador cuando hay cambios sin guardar y cuando se están guardando. No perdés el trabajo si cerrás accidentalmente.

No, la eliminación es permanente. Te recomendamos duplicar páginas importantes antes de eliminarlas.