How to add an image (branding) to your event or calendar landing page using a custom template

Custom landing page templates are a powerful tool to completely customize the look and feel of your event or calendar landing pages. However, it's also possible to make some simple changes to the default template to quickly personalize your landing pages and make sure your branding is consistent and prominent throughout your events and calendars.

This help doc explains how to create a custom template for your event or calendar landing page to:

1. Change the background color
2. Add a header image
3. Add a background image

The following video provides step-by-step instructions on how to accomplish this, and you can read more below.

How to change the background color of your event or calendar landing page

Updating the background color of your event or calendar landing page is a simple and effective way to personalize your landing page and ensure that your branding is prominent and consistent. To update the background color of the landing page, you will need to do the following steps:

1. Create a custom event or calendar landing page template by clicking the "Custom Templates" button on the event/calendar page in the app, and clicking the "New Template" button. Add a name for the template.
2. Add the following snippet of code to the head section of your custom landing page template, just above the closing "/head" tag:
   
   To copy and paste the snippet and for a reference on where to place the snippet, you can take a look at this sample template and search for the above snippet.
3. Update the color from "pink" to your preferred color. For a list of colors supported by default in HTML, see the following reference guide. Alternatively, you can use a hex code to set your preferred color e.g. #FFC0CB.
4. Save the custom landing page template. From the event/calendar page, choose your new custom template from the dropdown, and click "Set" to apply it to your event or calendar and to see the updated background color!

How to add a header image to your event or calendar landing page

Adding a header image to your event or calendar landing page is a simple and effective way to personalize your landing page and to make it look even better for your attendees. To add a header image to your landing page, you will need to do the following steps:

1. Create a custom event or calendar landing page template by clicking the "Custom Templates" button on the event/calendar page in the app, and clicking the "New Template" button. Add a name for the template.
2. Add the following snippet of code to the head section of your custom landing page template, just above the closing "/head" tag:
   To copy and paste the snippet and for a reference on where to place the snippet, you can take a look at this sample template and search for the above snippet.
3. Add the following snippet of code to the body section of your custom landing page template, between the opening "wrap" and "box" class tags:
   Again, you can refer back to the sample template and search for the above snippet to copy and paste it and for a reference on where to place it.
4. Update the image link (enclosed in the quotation marks in the 2nd snippet above) to point to the image that you want to use as your header image. Refer to the How to get a public image URL from the image manager for steps on how to upload an image and link to that image within AddEvent.
5. Save the custom landing page template. From the event/calendar page, choose your new custom template from the dropdown, and click "Set" to apply it to your event or calendar and to see the new header image!

How to add a background image to your event or calendar landing page

Adding a background image to your event or calendar landing page is a simple and effective way to personalize your landing page and to make it look even better for your attendees. To add a background image to your landing page, you will need to do the following steps:

1. Create a custom event or calendar landing page template by clicking the "Custom Templates" button on the event/calendar page in the app, and clicking the "New Template" button. Add a name for the template.
2. Add the following snippet of code to the head section of your custom landing page template, just above the closing "/head" tag:
   To copy and paste the snippet and for a reference on where to place the snippet, you can take a look at this sample template and search for the above snippet.
3. Add the following snippet of code to the body section of your custom landing page template, between the opening "wrap" and "box" class tags:
   Again, you can refer back to the sample template and search for the above snippet to copy and paste it and for a reference on where to place it.
4. Update the image link (enclosed in the paranthesis after the "url" within quotation marks in the 2nd snippet above) to point to the image that you want to use as your background image. Refer to the How to get a public image URL from the image manager for steps on how to upload an image and link to that image within AddEvent.
5. Save the custom landing page template. From the event/calendar page, choose your new custom template from the dropdown, and click "Set" to apply it to your event or calendar and to see the new background image!