Customizing Your Event Page

Make your event page match your brand with TicketFlo's customization options.

Accessing Customization Settings

1. Navigate to your event
2. Click Manage
3. Go to the Customization tab

Design Options

Colors & Branding

Primary Color: Your main brand color

• Used for buttons and accents
• Accepts hex codes (#FF4D00) or color picker
• Automatically adjusts for readability

Background Color: Page background

• White, light gray, or custom color
• Consider contrast with text

Text Color: Main text color

• Dark for light backgrounds
• Light for dark backgrounds

Logo & Images

Event Logo: Displayed at the top of your event page

• Recommended size: 400x100px
• Formats: PNG, JPG, SVG
• Max file size: 2MB

Header Image: Large banner image

• Recommended size: 1200x600px
• Should be eye-catching and relevant
• Max file size: 5MB

Background Pattern: Optional decorative background

• Subtle patterns work best
• Don't overpower content

Typography

Font Family: Choose from pre-selected fonts

• Modern Sans (default)
• Classic Serif
• Professional Sans
• Custom Google Fonts (coming soon)

Font Size: Adjust text sizing

• Small, Medium, Large, Extra Large
• Affects readability on mobile

Layout Options

Page Layout

Single Column: Simple, focused layout (recommended) Two Column: Event details and ticket selection side-by-side Full Width: Maximize screen space

Sections

Toggle which sections appear:

• Event description
• Venue/location map
• Schedule/agenda
• Speaker/artist information
• FAQ section
• Terms and conditions

Reorder sections by dragging.

Mobile Customization

Preview how your page looks on:

• Desktop (1920px)
• Tablet (768px)
• Mobile (375px)

Customizations automatically adapt to screen size, but you can:

• Adjust mobile font sizes
• Hide/show certain sections on mobile
• Optimize image sizes for mobile

Custom CSS

Advanced users only: Add custom CSS for complete control

1. Enable "Custom CSS" in advanced settings
2. Enter your CSS code
3. Preview changes live
4. Save when satisfied

Example CSS:

.ticket-card { border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

Preview & Testing

Always preview your changes:

1. Click Preview button
2. Test on different devices
3. Check all interactive elements
4. Ensure text is readable
5. Verify images load correctly

Brand Presets

Save time with brand presets:

1. Configure your design once
2. Click Save as Preset
3. Name your preset
4. Apply to future events instantly

Best Practices

• Use high-quality images
• Maintain consistent branding across events
• Ensure sufficient color contrast (WCAG AA)
• Test on actual mobile devices
• Keep designs clean and uncluttered
• Use web-safe fonts
• Optimize images before uploading

Common Issues

Q: Images aren't uploading A: Check file size (max 5MB) and format (PNG, JPG, SVG only)

Q: Custom colors aren't showing A: Ensure you're using valid hex codes (#000000 format)

Q: Design looks different on mobile A: This is normal - use mobile preview to adjust

Q: Custom CSS isn't working A: Check for syntax errors and ensure selectors are correct

Need help with customization? Contact support or hire a designer from our marketplace.