Homepage
Classic builder only. This guide applies if your Website menu shows Branding, Homepage, and Pages. If you see My website instead, customize your home page inside Fanz Themes (Customize → pages and sections).
Customize the first impression for your visitors: banner, featured events, calendar, and more.
Accessing the configuration
From the Fanz dashboard, go to Website → Homepage.
Browser preview
On the right side of the screen you'll see a browser previewer that shows exactly how your homepage looks in real-time.
- All changes are visible instantly in the preview
- No need to navigate to other pages since changes only affect the homepage
- Changes are not applied until you click Save
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
Sidebar menus
The sidebar has 5 menus to customize the homepage:
1. Banner
Configure the main banner that appears at the top of your homepage.
Banner layout
Choose from 5 layout options:
| Layout | Description |
|---|---|
| Default | Full width |
| Text Overlay | Contained with padding, text over the image |
| Side by Side | Image on the left, text on the right |
| Text Only | Only heading and subheading, no image |
| No Banner | Skip the header section completely |
Heading and subheading
Optional text fields that appear based on the chosen layout:
- Heading: Large main title
- Subheading: Smaller supporting text
Depending on the layout, these texts appear over the image, to the side, or alone.
Looking to change "the best events in the world" ("los mejores eventos del mundo")? That text is not the banner Heading: it's your brand's default Slogan. Edit it in Website → General info, in the Slogan field (see General website settings). The banner Heading and Subheading are separate texts you write here for the homepage.
Banner type
| Type | Description |
|---|---|
| Static | A single fixed image |
| Carousel | Multiple images that rotate automatically |
Image carousel
If you choose carousel, you can:
- Add slides: Upload as many images as you need
- Delete slides: Remove the ones you don't want
- Reorganize slides: Use the drag handle at the start of each item to change the order
- Add links: Each slide can have a link to redirect to an event or another page you want to promote
Images for desktop and mobile
You can upload separate images for desktop and mobile:
| Layout | Desktop | Mobile |
|---|---|---|
| Default | 3:1 | 2:1 |
| Text Overlay | 3:1 | 2:1 |
| Side by Side | 1:1 (1080×1080 px) | 16:9 (1920×1080 px) |
Tip: Always upload both versions so your site looks perfect on all devices.
Setting a focal point for banner images
For each banner image — both desktop and mobile — you can define a focal point: a specific position within the image that marks the most important subject (a performer's face, a logo, a key visual element).
Once a focal point is set, the public site automatically crops and positions the image around that point. This ensures the subject you care about stays visible no matter what screen size or aspect ratio a visitor is using.
How to set a focal point:
- Upload your desktop or mobile banner image.
- Click the focal point selector that appears on the image.
- Click on the part of the image you want to keep in frame — a marker will appear at that position.
- Repeat for the other image version (desktop or mobile) if needed.
- Click Save to apply.
Tip: Set focal points independently for desktop and mobile banners. A wide desktop image and a taller mobile image crop differently, so each benefits from its own focal point.
2. Events Display
Configure how events are shown on the homepage.
Columns (desktop)
Choose how many columns of events to show on desktop:
| Columns | Ideal for |
|---|---|
| 1 | One featured event per row, maximum impact |
| 2 | Few events, large cards |
| 3 | Balance between size and quantity |
| 4 | Many events, medium cards |
| 5-6 | Extensive catalog, compact cards |
Image shape (aspect ratio)
The aspect ratio of event cards:
| Ratio | Description |
|---|---|
| 1:1 | Square, Instagram style |
| 2:1 | Horizontal, banner-like |
| 3:1 | Very horizontal, panoramic |
Show past events
A switch to control what happens with events that have ended:
| Status | Behavior |
|---|---|
| Enabled | Past events are shown grayed out as "finished". Visible but tickets cannot be purchased |
| Disabled | Past events don't appear on the site |
Customizing event order
You can customize the order in which events appear on your homepage using the Reorder events button in the Events list page. When you open the event-order customization modal, events are shown as draggable cards that match the appearance of the public site — each card features an edge-to-edge banner image with a compact metadata block below it (showing the event name, date, and location).
Drag and drop the cards to arrange your events in the order you want visitors to see them.
Where the manual order applies and where it doesn't:
- It applies to the event card grid of this homepage (classic builder). Events you placed in Reorder events come first, in that order; the ones you didn't order come after, by nearest date.
- The homepage calendar always shows events by date: the manual order plays no part there.
- On sites built with Fanz Themes, each events section has its own sort setting (by default by date: upcoming first) and agendas grouped by day or month are always chronological. The Reorder events order is not used on those sites.
- Event categories have no manual order: only events can be reordered.
- An event with several dates appears as a single card, positioned by its nearest date; there is no card per date.
Note: While the events are loading inside the modal, you'll see placeholder cards in a skeleton loading state. This is expected behavior — the actual event cards will appear once loading is complete.
3. Calendar
A simple switch to show or hide the event calendar.
| Status | Behavior |
|---|---|
| Enabled | Shows an interactive calendar below the banner |
| Disabled | Hides the calendar |
The calendar allows users to browse events by date. Useful for theaters, cinemas, and venues with regular programming.
When visitors open the calendar, it automatically scrolls to the week containing the next upcoming event instead of defaulting to today. This means attendees immediately see relevant events without having to navigate forward manually.
4. Logo Carousel
An infinite carousel of logos that appears below the banner. Ideal for showing sponsors, partners, or associated brands.
Configuration
You can add two types of logos:
| Type | Use |
|---|---|
| Filled | Logo with fill/colors |
| Outlined | Logo with outline only |
Recommended size: 2:1 ratio (double width than height)
Logos rotate automatically in an infinite carousel. If configured correctly, it looks very professional.
5. Layout
General homepage layout options.
Hide navigation bar
A switch to hide the navbar on the homepage.
| Status | Behavior |
|---|---|
| Enabled | Navbar is not shown |
| Disabled | Navbar is visible (default) |
When to use it? Useful if you're rendering your site inside an iframe or in situations where you don't want navigation to appear.
Saving changes
When you make any change, a save button appears at the bottom of the sidebar.
- Changes are visible in the previewer immediately
- Changes are only applied to your actual site when you click Save
- If you try to leave without saving, you'll be warned about pending changes
Next steps
That text is your brand's default Slogan, not the banner Heading. Change it in Website → General info, in the Slogan field, and save (see General website settings). If you also want a different title only on the homepage, write the banner Heading here in Homepage.
It's not mandatory. In the Banner menu you can choose "No Banner" to completely skip the header section.
Yes. In "Events Display" you can choose 1 column, which shows events one below the other like a list.
Yes. In "Events Display" you can choose the 1:1 aspect ratio to make event cards have square images.
You can choose between 1 and 6 columns for desktop. The more columns, the smaller the cards.
In "Events Display" there's a "Show past events" switch. If you turn it off, finished events disappear from the site.
Yes. If you enable "Show past events", finished events appear grayed out marked as "finished". Users can see them but can't buy tickets.
Yes, but only if you use the carousel. Each carousel slide can have a link that redirects wherever you want (an event, another page, etc.).
Because the proportions are different. The desktop banner is wider, mobile is more vertical. If you upload both, your site looks good on all devices.
A focal point marks the most important part of your banner image — for example, a performer's face or a central logo. The public site uses that position to crop and frame the image at every screen size, keeping your key subject always visible instead of cropping it out by chance.
You can set them independently for each version. Since desktop and mobile banners have different aspect ratios and crop differently, setting a focal point for both gives you the best result across all devices.
Yes. In the "Calendar" menu there's a switch to hide it. If you turn it off, the calendar won't appear.
The calendar automatically scrolls to the week containing the next upcoming event. This way, attendees immediately see relevant events instead of an empty or past week.