Task · Customize studio
Add your website’s header and footer
Put your own logo, links and footer around every page people book on.
8 steps · About 6 minutes
-
Select Customize in the account bar
Your accountCustomize -
Select the Frame tab, then Add a header
go.tito.io/acme/admin/customize?tab=frame&zoom=50 -
Set up the header
- Header logo takes a PNG or JPEG up to 10 MB. Without one, the header shows your account name. If it's the same picture as your event's logo, your pages show it once, in the header. Emails, tickets and wallet passes still show your logo. - Where the logo goes when it’s pressed is usually your website's home page. - Add a link adds a link along the top, with its words and its address. You can have up to 8. - Button is one button at the end of the header, such as a link back to your registration page.
Each change saves as you make it, and the preview shows it straight away.
-
Select Add a footer and set up the footer
- Add a column adds a column of links with a heading. You can have up to 6 columns of 12 links. - Add a social link adds an icon for Facebook, Instagram, LinkedIn, TikTok, X or YouTube. - Small print is your footer's words, such as an Impressum. See Add a footer to your pages and emails. - Logo and colors sets the footer's own logo and a strip of color behind it.
-
Select Publish
The header and footer appear on every page people book on: the event page, every step of booking, the order page, tickets and portals.
Give one event its own header
Every event uses your account's header until you change it for that event.
-
Open the event, select Customize, then the Frame tab
-
Select Give this event its own header
It starts with your account's header, so you can change what's there. To have none on this event, select No header on this event.
-
Select Publish
To go back to your account's header, open the menu beside Header and select Use the account’s header. The event's own header is deleted.
The footer works the same way, from Give this event its own footer.
Good to know
A link can go to an address starting https://, to a path on your own address starting /, or to mailto: and an email address.
On a phone, the header links move into a menu button.
The links are in your page's text color. To style them another way, use your own CSS.
To fill in the header and footer from your own website, use Generate theme from your website under Change on the Look tab. See Starting from your own website.
To take the header away from every event, open the menu beside Header and select Remove the header. Adding it again brings back what it had.
A custom theme can set its own header and footer through the API (PATCH /api/v1/looks/{id}). An event based on that theme shows them until you add a header on the Frame tab, which is used instead. A footer you set up on the Frame tab changes only the theme footer's columns and social links. Its logo, picture and small print stay.