Site branding

Customize every visual aspect of your site: templates, colors, logos, layouts, and more. All with real-time preview.

Accessing the branding editor

From the Fanz dashboard, go to Website → Branding.

---

Browser preview

On the right side of the screen, you'll see a browser previewer that shows exactly how your site looks in real-time.

Note: This previewer also appears in the Homepage and Pages menus. It's the same tool for viewing changes in real-time.

Previewer actions

In the top right corner of the previewer you have:

Icon	Action
Desktop	See how it looks on computers
Mobile	See how it looks on phones
Arrow ↗	Open your actual site in a new tab

Important: You can navigate within the previewer, click on events, and see how changes look on different pages (homepage, event detail, etc.).

---

Sidebar menus

The left sidebar has 5 menus to customize different aspects of the site:

---

1. Template

Choose from 8 pre-designed templates that define the overall visual style of your site:

Template	Description
Base	Default template, balanced and versatile
Bold	Strong and eye-catching design
Bright	Vivid and energetic colors
Clean	Minimalist and professional
Organic	Natural and fluid style
Pulse	Dynamic, ideal for nightlife events
Simple	Straightforward and direct
Vivid	Vibrant and colorful

What each template includes:

• Default layout (footer, navbar, typography)
• Header banner design
• Custom colors
• Box roundness (border-radius)
• Element shadows

When you click on a template, you immediately see the changes in the previewer without saving anything. You can try all templates and only save when you find the one you like.

---

2. Layout

Choose the style of navbar, footer, and typography. There are 6 options available:

Layout	Style
Standard	Classic and functional
Floating Modern	Modern with floating elements
Classic Elegant	Elegant and sophisticated
Bold Split	Split and striking
Old Theatre	Vintage theatrical style
Organic Cultural	Cultural and artistic

Each layout has a navbar and footer design that match, plus specific typography.

Note: The layout can override the default layout of the template you chose. First choose the template, then adjust the layout if you want something different.

---

3. Logos

Configure your brand logos:

Main site logo

Used in:

• Site navbar
• Site footer
• Tickets (by default)
• Communication emails

Recommendations:

• Format: PNG with transparent background
• Recommended size: 400 × 200 px (2:1 ratio, double width than height)

Wallet logo

Used for memberships that appear in Apple Wallet.

Recommendations:

• Recommended size: 200 × 200 px (1:1 ratio, square)
• Format: PNG

Note: If you don't sell memberships, you can leave it empty.

---

4. Colors

Customize site colors. Each template has default colors, but you can override them.

Essential

Color	Use
Primary	Your brand's main color. Buttons, links, highlighted elements
Secondary	Support color. Secondary elements, alternative backgrounds

Text

Color	Use
Text color	Main text color on the page
Button text	Text color inside buttons and elements with primary background. Important to have contrast

Backgrounds

Color	Use
Main background	General site background color
Navigation bar	Navbar background
Footer	Footer background
Input fields	Form field backgrounds

Borders & shadows

Color	Use
Border color	Dividing lines, card borders
Box shadow	Element shadows
Hover shadow	Shadows when hovering over clickable elements
Light shadow	Soft shadows for specific cases

Color presets

At the top of the colors menu, you have light and dark mode presets. Click one to apply a predefined set of colors.

Restore individual colors

Next to each color there's a button to restore to template default. If you modified a color and want to return to the template's original, use this button.

⚠️ Important: If you change colors and then switch templates, all colors reset to the new template's defaults except primary and secondary. That's why we recommend first choosing the template and then adjusting colors.

---

5. Options

Configure additional site options:

Purchase button text

The text that appears on the main purchase button on the event page.

Language	Default value
Spanish	"Comprar"
English	"Buy"

You can customize it (e.g., "Get tickets", "Reserve", "Buy now").

⚠️ Important: When customizing the text, you lose automatic translation. You can only enter a single value that will be used for both languages. If your site is bilingual, consider using a word that works in both languages or leave the default value.

Show initial price

Choose whether to show the "from" price above the purchase button:

• Enabled: Shows "From $50" above the button
• Disabled: Only shows the button without price reference

---

Saving changes

When you make any change, a save button appears at the bottom of the sidebar.

• Save: Permanently applies changes to your live site
• Exit without saving: If you try to exit with the back arrow, you'll be warned about unsaved changes

Checklist before saving

1. ✅ Check how it looks in desktop view
2. ✅ Check how it looks in mobile view
3. ✅ Navigate to an event in the previewer to see how changes affect it
4. ✅ If everything looks good, save the changes

---

Next steps

1. Configure homepage →
2. Create custom pages →

---