Adding Images to a Landing Page

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 change the background color, add a header image, and add a background color.

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:

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.

Changing the Background color

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

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

Adding a Header Image

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

    <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:

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

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

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

Watch this tutorial!