Customize Event Landing Pages
Each event created in AddEvent has a dedicated landing page. Each landing page can be customized using custom templates. With some HTML/CSS knowledge, these templates allow you to make small tweaks to the appearance of that page, such as changing the colors of a button or completely redoing the appearance of the whole page. In this article, we will go over the whole process of customizing your landing page and give you a few ideas on where to start.
Creating a custom template
A landing page custom template editor can be accessed from any event page.
-
Access any event in your dashboard and open the Event page:
-
Navigate to the Event landing page section of the event page and click Custom Templates:
-
After clicking it, you can select a custom template you have already made or you can create a new one by clicking + New Template.
Regardless of whether you're creating a new one or editing an existing template, you will see the Template Editor page. This page consists of four sections:
- Code - This section contains all of the template's HTML/CSS/JS code. Any changes you want to make should be applied here.
- Block Tags - This is the list of all available block tags. Each block tag represents a shortcut to a pre-defined section of code. You can replace the block tag with the corresponding code in the template and make any needed changes to that section.
- Data Tags - Here, you can see all the data tags that can be used in your template to insert dynamic values, like event title or starting date.
- Template Programming - In this last section, you will find all the supported logical functions that can be used for programming the dynamic behavior of the template.
Making changes in the custom template
Any changes you want to make can be implemented in the code section of the template editor using HTML, CSS, and JavaScript. Here are a few customization ideas to get you started:
- How to change the color of the Add to Calendar button on your event landing page
- How to display a custom number of events on a calendar landing page
- How to change the language on your event landing page
You can find more customization ideas in this section of our Help Center.
When editing the code, you can check how your changes will look by clicking View Template.
By clicking Save, you can save your recent changes, and clicking Cancel will undo any unsaved changes in the template.
Applying a custom template to an event
Once all the needed changes are made, you can apply the modified template to any event.
- Navigate to the event page where you want to use the template.
- Scroll down to the Custom event page part of the Event landing page section.
- Select the needed custom template from the dropdown and click Set.
Once set, the template will be used for rendering both the event landing page and the embedded version of the event.
Updated 7 months ago