Your Logo Here! Match Your Company Branding

A landing page defaults to a simple look, but you can make it your own by creating a custom template. A custom template allows you to add images and match your company colors. It is a simple and effective way to personalize the event and ensure your branding is prominent and consistent. Check out the steps below to create your own custom template.

Example event

Check out this simple example to get an idea of the possibilities for your custom landing page!

Creating the template

To update the background color of the landing page, you will need to do the following steps:

1. Scroll down to the first sharing method, Event landing page. Create a custom event landing page template by clicking Custom Templates in the app and clicking + New Template.

   

Adding a header Image

A header image is an image that would be located in a similar position as the screenshot below:

1. Add the following snippet of code to the head section of your custom landing page template, just above the closing </head> tag:

   HTML

   <style>
     /* Image box with image */
     .img1 {clear:both;margin:0px 0px 10px 0px;border-radius:8px;}
     .img1 img {width:100%;max-width:100%;display:block;}
   </style>
   

   For reference on where to place the snippet, refer to the screenshot below, in particular, the line numbers on the left side:

   

2. Add the following snippet of code to the body section of your custom landing page template, between the opening wrap and box class tags:

   HTML

     <!-- Image box with image -->
       <div class="img1">
         <img src="https://image.shutterstock.com/image-vector/group-smiling-people-team-young-600w-1677180133.jpg">
       </div>
   

   For reference on where to place the snippet, refer to the screenshot below, in particular the line numbers on the left side:

   

3. 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 to upload an image and link to that image within AddEvent.

4. Name the template and save the custom landing page template. From the event page, choose your new custom template from the dropdown, and click Set to apply it to your event and to see the new customizations!

Changing the background color

The background color can be customized to any color.

1. Add the following snippet of code to the head section of your custom landing page template, just above the closing </head> tag:

   html

   <style>
     
     /* Change background color */
     html,body {background:pink;}
   
   </style>
   

   For reference on where to place the snippet, refer to the screenshot below, in particular, the line numbers on the left side:

   

2. 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.

3. 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 customizations!

Watch this tutorial!

VIDEO TO COME ASAP