Custom pages

Create additional pages for your site: about us, contact, sponsors, and any content you need.

What are custom pages for?

In addition to the homepage and event pages, you can create additional pages for:

• About us — Your brand's history, team, mission
• Contact — Form and contact information
• Sponsors — Show your sponsors and partners
• Terms — Detailed policies (beyond the footer)
• Landing pages — Specific pages for campaigns
• Galleries — Photos from past events
• Information — Extended FAQs, guides, instructions

---

Accessing the page manager

From the Fanz dashboard, go to Website. In the sidebar you'll see a "Pages" section with a "+" button on the right.

---

Creating a new page

1. Click the "+" button next to the "Pages" title
2. A new page is added to the sidebar with a text field for the name
3. Type the page name (e.g., "About us")
4. Press Enter or click the green checkmark to confirm

Canceling creation:

• If you click outside without completing the name, the page isn't created
• If you click the X to the right of the field, creation is canceled

The page is created empty and private (unpublished) by default.

---

Browser preview

On the right side of the screen you'll see a browser previewer that shows how your page looks.

In the top right corner of the previewer you have:

• Desktop icon: See how it looks on computers
• Mobile icon: See how it looks on phones
• Arrow ↗: Open your actual site in a new tab

Difference from other sections: In the custom pages previewer, on the left you'll see two new buttons:

• "Edit page": Opens the page builder
• "Publish": Publishes the page so it becomes visible

Note: The page doesn't appear in the site's navigation bar until you publish it, but you can see how it looks in the previewer without publishing.

---

Managing pages in the sidebar

Each page in the sidebar has action icons:

On the left:

• Crossed-out eye (if unpublished): Click to publish
• Drag handle (if published): When you publish a page, the crossed-out eye turns into a drag handle. Drag to reorder pages. The order in the sidebar is the same order they appear in the site's navbar.

On the right:

• Settings icon (gear): Opens a menu with 4 options:

Action	Description
Publish	Changes status from draft to published
Settings	Opens the page settings modal
Duplicate	Creates a copy of the page (always as draft)
Delete	Permanently deletes the page

---

Page settings

The settings modal lets you edit:

Page title

The name that appears in navigation.

Path (URL)

The page address. By default, we convert the name to kebab-case format (e.g., "About Us" → about-us). You can edit it manually if you want something different.

Redirect to file or URL

If you enable this option, the page doesn't show its own content but redirects to:

• An external URL
• A file you upload (PDF, image, etc.)

Hide from navigation bar

The page exists and is accessible, but doesn't appear in the navbar. Useful for landing pages or subpages you don't want in the main navigation.

Note: Hidden pages appear in the sidebar under a separate "Hidden" title below published pages.

---

The Page Builder

To edit a page's content, click "Edit page" in the previewer.

Builder interface

Top bar:

• On the left: "Page Builder" - page name - cloud icon (green if published, gray if not)
• Next to the cloud: Indicator for unsaved changes / saving
• On the right: Undo/Redo buttons and Close

Autosave: The builder saves changes automatically. You'll see an indicator when there are unsaved changes and when they're being saved.

Canvas: The main area shows a preview of your page with the navbar at the top and footer at the bottom, exactly as it will look on your site.

---

Page banner

At the top of the canvas you have a button "Add Page Banner".

Clicking it opens the banner configuration modal:

Banner images

Device	Recommended ratio
Desktop	3:1
Mobile	1:1

Text overlay

By default, the "Show text overlay" switch is enabled. If enabled, you can customize:

• Banner title: Defaults to the page title
• Subtitle: Supporting text
• CTA (Call to Action): Button with text, URL, and target (same window or new window)

If you disable the overlay, only the image is shown without text.

Click Save to apply changes or Cancel to discard them.

---

Adding blocks

Below the banner (or at the start if there's no banner) you have the "Add Block" button.

Clicking it opens the modal with available block types:

---

Block: Text

Add headings, paragraphs, and formatted text.

Configuration:

• Text editor with formatting (bold, italic, lists, etc.)

Click Done to add the block.

---

Block: Image

Add images with optional links.

Configuration:

• Upload image (you can also drag and drop)
• Alt text: Alternative text for accessibility (optional)
• Width: Percentage of width (optional)
• Height: Auto or px value (optional)
• Link URL: If you want the image to be clickable (optional)

---

Block: Video

Embed videos from YouTube or Vimeo.

Configuration:

• Video URL: Paste the YouTube or Vimeo link
• Aspect ratio: 16:9, 4:3, 1:1, 21:9
• Alignment: Left, Center, Right, Full width
• Playback controls:
  • Autoplay (enable/disable)
  • Muted (enable/disable)
  • Loop (enable/disable)
  • Show controls (enable/disable)

At the bottom you see a preview of the embedded video.

---

Block: Button

Add call-to-action buttons.

Configuration:

• Button text
• Link URL
• Target: Same window or new window
• Style: Filled, Outlined, Text
• Size: S, M, L
• Width: Auto or full width

At the bottom you see a preview of the button.

---

Block: Columns

Create multi-column layouts. When clicked, 2 columns are added by default.

After adding, you can:

• Add more columns
• Add blocks inside each column
• Configure responsive behavior

(See "Working with columns" section below)

---

Block: Spacer

Add vertical space between sections.

Configuration:

• Height: Value in px

---

Block: Divider

Add a horizontal separator line.

Configuration:

• Thickness: Line width
• Color: Line color
• Width: Percentage of width
• Alignment: Center, Left, Right

At the bottom you see a preview of the divider.

---

Block: Events

Display events dynamically on the page.

Configuration:

• Layout: List or Calendar
• Event selection:
  • By category: Choose a category and events from that category appear automatically (useful so new events appear without editing the page)
  • By specific event: Choose specific events manually
• Show past events: Switch to include or exclude finished events

---

Block: Memberships

Display membership plans.

Configuration:

• Membership selection:
  • By category: Show all memberships from a category
  • By specific membership: Choose specific plans manually

---

Block: Newsletter form

Add a form to capture contacts.

Configuration:

• Form title
• Subtitle
• Fields (enable/disable each):
  • Email (always enabled, can't be disabled)
  • Name
  • Last name
  • Phone
  • Birth date
• Submit button text
• Form max width: Default 600px (recommended)
• Target brands: Which brand(s) the contact is added to. Default is the current brand, and you can add other available brands in your account context based on permissions and current brand/website setup.

---

Block: Restaurant Menu

Create a professional restaurant menu with sections and items. Perfect for restaurants, cafes, bars, or any venue that wants to display their food and drink offerings.

How it works:

The menu is organized into sections (like "Appetizers", "Main Courses", "Desserts", "Drinks") and each section contains items with name, optional description, and price.

Configuration:

When you click to edit the menu block, you'll see:

1. Toolbar at the top with:

   • Settings icon: Opens menu settings (currency, section dividers)
   • Stats: Shows total sections and items count

2. Sections list: Each section is a collapsible card showing:

   • Up/down arrow buttons (↑ ↓): Use these to move the section up or down in the list
   • Section title
   • Number of items
   • Expand/collapse button
   • Delete button

Adding sections:

• Click "Add Menu Section" to create a new section
• Enter the section title (e.g., "Appetizers", "Main Courses")
• Only one section can be open at a time for better organization

Reordering sections:

• Each section has up (↑) and down (↓) arrow buttons on the left. Click Move section up or Move section down to change the order. The first section has the up button disabled; the last section has the down button disabled.
• The new order is reflected immediately on the published page.

Reordering items within a section:

• When a section is expanded, each menu item has up (↑) and down (↓) arrow buttons on the right (next to the delete button). Use them to reorder items within that section. The first item has the up button disabled; the last item has the down button disabled.

Adding items to a section:

• Expand a section by clicking on it
• Click "Add Menu Item" inside the section
• Fill in:
  • Item name (required): The dish or drink name
  • Price (required): Just the number, currency is added automatically
  • Description (optional): Ingredients, preparation, or additional info

Menu settings:

• Currency symbol: Choose from preset options ($, €, £, ¥, ₹, R$) or enter a custom symbol
• Show section dividers: Toggle the decorative line under section titles

Display:

On your published page, the menu displays with:

• Section titles with optional underline in your brand's primary color
• Items showing name connected to price with a dotted leader line (like traditional menus)
• Descriptions in smaller text below each item name

Tip: The dotted leader line between item names and prices makes it easy for customers to match items with their prices, following the classic restaurant menu design pattern.

---

Working with blocks on the canvas

When you add a block to the canvas, you see a visual preview. Hovering over a block shows a blue outline with controls.

Block controls

At the top and bottom center:

• "+" button: Add a new block above or below

In the top right corner:

• Move up: Moves the block up one position
• Move down: Moves the block down one position
• Duplicate: Creates a copy of the block
• Delete: Removes the block

Editing content: Click on the block's content to open the edit modal and modify its properties.

---

Working with columns

The columns block has special behaviors.

Adding content to columns

Each column has a "+" button to add blocks inside. You can add any block type except another columns block.

Individual column controls

In the top left corner of each column:

• Drag handle: Drag to reorder columns
• Red trash: Delete the column

Columns block controls

In the top right corner of the columns block you have additional controls:

• Add new column: Add more columns (not just 2)
• Configure columns: Opens the configuration modal

Columns configuration

The modal has 3 tabs: Desktop, Tablet, and Mobile.

Desktop:

• Column gap: Horizontal space in px
• Vertical alignment: Top, Center, Bottom, Stretch

Tablet:

• Stack columns vertically: Switch to show columns one below the other
• Column width (%): Only if not stacked, define each column's percentage
• Column gap: Space in px

Mobile:

• Same options as Tablet
• Reverse column order: The rightmost column appears at the top instead of the leftmost

---

Publishing the page

Once the content is ready:

1. Close the builder by clicking Close
2. In the previewer, click "Publish"

Or from the sidebar:

• Click the crossed-out eye to the left of the page
• Or click the settings icon → Publish

Published vs unpublished pages

Status	Behavior
Published	Visible to everyone, appears in navigation
Unpublished	Only you see it, doesn't appear in navigation

Note: If you published a page by mistake, you can unpublish it the same way: by clicking the eye icon or from the settings menu.

---

Next steps

1. Configure site branding →
2. Optimize SEO →

---