Homepage
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 | 2:1 |
Tip: Always upload both versions so your site looks perfect on all devices.
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.
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.
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.
Yes. In the "Calendar" menu there's a switch to hide it. If you turn it off, the calendar won't appear.
Not right now. The banner only accepts static images or an image carousel.
That's the skeleton loading state — it appears while your events are being fetched. Once loading is complete, the actual event cards will display with their banner images and metadata.