Adding Images to a Landing Page

Creating a Template

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. Add a name for the template.

   

Adding a Header/Banner Image

To add a banner image to the header of your event landing page, use the following steps:

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

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 new header image!

Adding a background image

To add an image to the background of your event landing page, use the following steps:

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>
     html, body  {
       width: 100%;
       height: 100%;
       clear: both;
       background: url('YOUR IMAGE URL HERE');
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
     }
   </style>

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

   

2. Update the image link (enclosed in the parentheses 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.

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 background image!

Changing the page background color

To change the background color of the event landing page, use the following steps

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 updated background color!

Watch this tutorial!