From November 2025, we’re introducing the new Modern event website builder!

This article is about the Modern event website builder. For information about the Legacy event website builder, please refer to the separate article.

This article is about your event website - your promotional website. An event website is not interactive - if you're looking for information about creating an interactive registration site, for your attendees, presenters, exhibitors etc to add details and pay online, please see the articles about interactive (registration) sites.

Also, although there are similarities, features described in this article aren't necessary available in websites created with the Event Info Site portal [and vice versa].

The Event Website Builder (accessed under Event Website in the Online Panel) lets you build a device-responsive website to promote your event or meeting.

You can only have one event website per event.

If you want to create a new event website in your event, you have to delete the existing one. This also applies if you built an event website using the Legacy Event Website Builder and you want to create one using the Modern Event Website Builder, or vice versa. Once you delete the existing site, you'll see the option to create another.

In the Online Panel, under “New event website”, choose “Modern” (instead of “Legacy”).

Give the website a name and select “Create”.

You can see what each template looks like by hovering over it and selecting “Preview”.

When ready, hover and select “Use this template”

Once you've selected a template (or selected "Create from scratch"), the builder will open in a new tab.

Soon, we’ll take a brief look at how to add and edit blocks, elements text, images etc, including how to watch Help videos inside the builder itself.

But first, there are some settings you should check.

(This lets you add a "Coming Soon" page while you're building)

In the event website builder, click the hamburger menu (top left) – when you hover over this, it says “CMS” (for ‘content management system’ – so it’s where you’ll find the over-arching content settings for your site).

Then choose “Assets”, and then look down the bottom of that menu for “Project Settings”:

Go back to the EventsAir tab (next to the builder tab) after creating your site.

In the Online Panel, under Event Website, you’ll now see something like the below, where “My Example Website” is the name you added in when creating your site (which also becomes part of the URL).

Click “Settings” at the top right of this section.

You’ll see the date when your event website is available until (this will be 6 months after the end of your event).

If you change your event site URL, this will update on the website.

You can also delete the site (content) from here, or add a custom domain.

To add a custom domain to your event website, you need to have already purchased the custom domain. After typing in the custom domain and pressing the “Attach domain” button, you’ll be shown the DNS settings. You can give these to your DNS provider to set up the redirection to your event website.

Talk to your IT department for more information.

When editing content inside the Modern event website builder, you’ll find the tools quite intuitive.

The main editing area shows your page.

The left-hand sidebar contains the CMS (Content Management System, for overall settings), the Elements drawer (that lets you add various elements such as text, images, buttons, dividers, etc); the Reorder Blocks tool, and Styling settings (such as your site's default fonts and color scheme). There's also a tool for checking how your site will appear on different devices.

The bottom right toolbar lets you access help, quickly undo or redo your last action, preview your page and update (or save as draft).

You can watch Help videos by going to the toolbar at the bottom right inside the builder, and using the Question Mark icon.

Content (text, images, buttons etc.) is added using "content elements".

Elements are held inside blocks (and multiple blocks make a "layout".

So you have to add blocks (if you don't already have some).

To add a new block, hover between two existing blocks and click the "Plus" icon.

Then choose from one of the pre-designed blocks, or create your own.

You can also select the "Layouts" tab to see pre-built layouts (collections of blocks).

The block/layout you choose will be added to the page you're editing.

Edit settings for an entire block using the Sliders icon at the top right of the block. Hover over the top right of the block until you see the "sliders" icon, then click on it to show settings for that block (such as 'Make it Global' if you want the block to appear on all pages; adding a background image, video, or map; changing the block color; saving the block; hyperlinking the block; other settings such as styling and effects; copying the block; or deleting the block). Some block types may have different settings available.

Inside blocks, you can add Elements using the plus icon on the left.

If you're using a template, your blocks will already have elements you can edit or remove.

You can edit an element by clicking on the top right corner to see other settings.

Different types of elements will have different settings available.

In the example below, the icons on the settings bar are (from left) - background, color, links, add column, move right/left, settings [width/height and other styling and effects], copy, and delete.

You can also drag to resize elements such as columns if you see a large "handlebar" when you hover over the element.

Elements such as images can also be directly edited using the toolbar that appears when you click on the content.

For some types of content, you can make things appear differently when someone hovers over them, by adding different settings for "Hover":

Explore in the builder to see what's possible for each block and content type.

You can re-order page blocks using the "Re-order Blocks" tool, which lets you drag and drop blocks into your preferred order. (You can also quickly delete blocks using the X to the right of each block in the left-hand "Reorder Blocks" panel.)

Use the Device icons (bottom left hand column) to preview your page as it appears on different devices. These are approximations, as there may be slight variations between different brands etc., so you may want to also test on a range of different actual devices to preview what your attendees will see.

Note that some editing features are only available in Desktop view.

If you have a block that you want to be hidden on some devices (for example, you have a large image you'd like to remove on mobile phone views as it'll take too long to download), you can hide blocks for that device.

To do so, go to the device view (e.g. mobile), and then select the block you'd like to hide. Use the "Eye" icon to hide the block.

The block will appear blurred to indicate it's hidden in this device view.

You can also toggle visibility in the builder of the blurred block, using the eye icon in the bottom-right toolbar.

After making changes to a page, use the Update button to save them. (You can also use this button to clear the layout or revert to draft. A draft page can’t appear in a menu, though.)

Whether you’re using a template or starting from scratch, you'll want to review or set up your website structure (pages and menu/s).

We'll look at the back end first, then review how the menu will appear on the site.

If you chose a template, here's how to edit the template page names and menu.

First, let’s look more closely at what’s under “Assets > Pages”. (Note – this is different to the Project Settings > System Pages menu where you may have added the “Coming Soon” page.)

Pages are listed here in alphabetical order (so if you change a page name, the order will change) but this doesn’t change the order in which they appear in the actual site Menu.

In this Assets > Pages screen, you’ll see page names listed, and to the right of each one, under the “Actions” heading, three icons:

Edit, Copy, and Delete (trash can/rubbish bin)

The Edit button takes you directly into the page content editor, so only select that when you’re ready to edit the actual page content.

The Copy & Delete icons are self-explanatory.

Click the NAME of the page (on the left) to edit the overall settings for the page (such as name and URL slug).

This will open up the page settings, where you can change the page name, URL slug, and status (e.g. Published or Draft).

Note that changing the page name alone will NOT change the URL slug, so you need to do that manually if you're altering an existing page. (When you create a new page, the URL slug will automatically mirror the name of the page.)

To the top right, you'll see the Status (e.g. Published), and a colored dot indicating the status. The “Published” status has a dropdown arrow next to it, and the green dot indicates that the page is published.

You can change a page to “Draft” here (or directly in the page content editor, instead of updating) and it'll show an orange dot. A page can only be added to a Navigation menu when the status is “Published”.

You can also link to Published pages (but not Draft pages) via internal hyperlinks / buttons.

If you change the page status to "Protected", (blue dot) you can choose a password.

Protected Pages are visible in Navigation menus but site visitors need the password to see the content. (To set up Protected Pages, you need to have enabled “Protected Pages” in Project Settings. See more information about Project Settings and System Pages later in this article.)

After you set the password when you change the publication status to “Protected Page”, you could use this for a “VIPs Only” page or similar.

The protected page looks a bit like the below when someone clicks on it from the menu. You can edit what it looks like from the Project Settings screen (see information later in this article about editing the Coming Soon page).

For each page, in the page settings section, you'll see a menu along the top, showing CONTENT, TRANSLATE, SEO, SOCIAL and CODE. This is so you can also edit other page qualities, including by adding translations, SEO settings, Social Media thumbnails and text, and under CODE you can add extra CSS code to the page.

[For more information on how these work, see the section on Project Settings later in this article, which is where you control these settings for your whole site. The Page settings work much the same way but are just for the individual page.]

Return to the pages setup via the CMS (hamburger menu, top left corner) > Assets > Pages.

The "Add New Page" button is at the bottom of the section.

Select it to see a screen where you can enter your new page Title, Slug and Description.

Remember, the slug (URL extension) will default to match your Page Title, but you can edit it here.

Be sure to change the page status to "Published" (top right) if you want to be able to add the page to a navigation menu.

After making changes to Pages, you'll also want to check under Assets > Menu and add/remove pages as needed from your menu(s) and review their navigation settings (how they'll appear in the menu).

Go to CMS (Hamburger menu, top left corner) > Assets > Menus

If you’re using a template, you’ll already have a Main Menu.

If not, Create a new Menu, name it, then select it. [You may need to save and refresh your builder to see the menu option appear in the builder.]

You can delete pages from the menu, or select pages in the left-hand column then add them to the menu, using the "Add to Menu" button.

You can also create more than one menu.

For each page in the menu, choose the Cog icon (Settings) to check the display name [the Navigation Label].

You can see (and edit) the navigation label and other settings for your pages (e.g. "Open in new tab".

Reviewing these settings is especially important if you used a template - you should check/update the page navigation labels (how they appear on your site).

In the screenshot below, you can see how the navigation label is now different to the internal page name. [The Navigation Label is "Blog", but the page title in the back end is "Unmissable workshops".]
​
It'll show up on the site menu as the navigation name (even if that doesn't match the page name and URL slug). You don't HAVE to call your pages the same name as their navigation label, because only you see the page name in the back end - but it probably helps to have your page name, slug, and navigation label all matching.

You can go back to the Pages tab under Assets to edit the page title and slug.

Remember to save your changes.

If you want to add an external link (for example, to your interactive registration site) to a navigation menu, use the Custom Link option in the Menus setup.

Alternatively, if you have a one-page site, you can use Custom Links to create menu links to anchors on your page.

Check the "Custom Link" box, then select "Add to Menu" and you'll see it appear.

Then select the Cog icon on the "Custom Link" to add the URL of the site you want to link to, along with what you want to appear in the Navigation Menu (and, if you want, check the "Open in new tab" option).

Go back to the Pages menu, and select the edit icon for the Home page.

Look for the menu element - if you used a template, there'll most likely be a menu at the top of your home page, and maybe all pages.

If not, you can add a Menu element from the elements list.

To adjust menu settings:

Where you see the Menu element, click the arrow at the top right of the element box containing the menu, to open the menu toolbar. The arrow you clicked on will change to four-handled cross icon when the toolbar opens up.

(If the menu is set to “Make it Hamburger”, the menu won’t show the page names by default – it'll just be a hamburger icon in the center of the element.)

Select the “hamburger/menu” icon in the toolbar, on the left, to show the menu options.

If you’ve created different menus (under Assets > Menus) you can select the one you want here (for example, the one in the screenshot below says "One page site").

You can create a "Mega Menu" (a kind of sub-menu that links to content, pages etc, for complex sites) by selecting a menu item in the editor. The Mega Menu editor will open, with "Mega Menu" toggled on. You can then use the plus sign icon to add other items to the Mega Menu, use the "star" symbol to add icons, etc.

There are many ways to make your event website more accessible using the Modern builder. Read more here.

Read this article to learn more about how to save and import layouts to create a 'cloned' version of your event website.

To load your own fonts, look under Styling, then Typography:

Under “Elements” (plus icon), look for Agenda (under the heading "Events"). If it's not there as part of a template, you can just drag it into your page.

[Note: this feature is only supported from Version 16.3.0 and above.]

Note that in the builder view, you won't see your actual event data in the agenda, just one with example content. However, you can still adjust the settings and styling etc.

To make changes, click on the agenda itself and look for the tools (these may appear at either the top or the bottom of the Agenda element).

The Cog icon will take you to Agenda Settings.

In the Agenda Settings panel, you can alter settings such as which paper statuses should be displayed; or the styling, including colors (under Design).

There are other settings you can change too.

The Modern Event Website Agenda will always display times/dates based on the event time zone, regardless of browser time zone.

In Agenda Settings, under Design, Colors, there are four colors you can adjust on your agenda in the Modern Event Website Builder: Primary, Secondary, Light and Extra Light.

This is an overview of where each one appears.

In the non-hover state, Session and Function titles are black on a white background. (Primary color on hover.)

Track name colors are based on agenda settings in the event. Track name border color will be same as font color. Keywords all show as gray.

SECONDARY COLOR:

LIGHT COLOR:

EXTRA LIGHT COLOR:

To see how your real agenda looks on the page, use the Preview tool (next to the Update option in the bottom-right toolbar); or use the preview speed-key (CTRL+SHIFT+P).

(Note that “Light” and “Extra Light” are more like “Contrast” and “Extra Contrast” in this type of color scheme.)

The Track Color you set in the Agenda builder in EventsAir becomes the font and border color when the track name is displayed in an Agenda element in the Modern event website builder. (If your track color is white, the white border is only visible only on a colored background, e.g. for breaks/activities.) See below for an example.

In EventsAir Agenda setup:

On Event Website:

To create a colored font (and border), choose a color other than white for “Track Color”. If there’s insufficient contrast, you’ll see a warning in the Track color settings (in the Agenda builder, in EventsAir). You should change either the track or background color to create greater contrast for ease of reading.

You can use Project Settings to control and manage various features of your event website.

Reminder: Get to the Project Settings Menu by choosing the CMS menu (Hamburger icon, top left of the builder), then the Project Settings icon (Cog, bottom left).

Inside Project Settings, you can choose which settings you want to review or add for your site, by selecting a tab:

General - You can add a favicon, a webclip icon for iPhones, switch on the Accessibility Widget and more.

SEO - This lets you enhance (or reduce) search engines' ability to find and crawl your site, for example by adding a description.

Business - Adding your organization's details such as name, address and opening hours can help search engines index and display this information in search results.

Sharing - Adding a relevant title, description, and thumbnail image here helps ensure your event website will display properly if the URL is posted on social media.

System Pages - see more detail on this further below. This is where you can add "Coming Soon" or "Page not found" pages, add password protection to your site or password-protect certain pages.

Translate - see more detail below. You need a Google Translate API key (for automatic translation); or you can manually translate content for each page. See more information below on adding translations. [NOTE: We encourage you to have automatic translations reviewed by professional translators or local speakers.]

Code - You can put in custom CSS and custom code for the header and footer.

Custom CSS allows you to set up your own <style> section for all pages.

The code injection sections let you put in any code you want injected into the header or footer. The code injection > Header section will be most commonly used for any external tracking analytics. You can generate them with your preferred tracking manager and then paste the generated code into here.

Webhooks - You can add webhooks here if you ant actions on your site (such as clicking on a page) to trigger data being sent via your own API to one of your own applications.

Redirects - see more information below.

Toggle on the “Coming Soon” page to set up a temporary page that visitors will see while your website is under construction.

Once you've enabled this page, you can edit it using the “edit” icon to the right.

In the page editor, click the countdown component, then using the hourglass icon on the countdown toolbar, you can adjust the countdown clock to set the exact time, date and time zone for when visitors can expect the site to go live.

You can also remove the countdown clock altogether (using the trash can/rubbish bin icon), click the image to change it, alter the text, etc.

Alternatively, while building your site, you can protect it by switching on "Protected Project" page in System Pages. This will generate a password that can be used to access the site (and without it, the site can't be viewed).

This is different to protecting just one page ("Protected Page") - for which you can choose your own password. (See earlier section in this article about adding a password to a page, in Pages settings.)

Similar to the Coming Soon page – this will show site visitors the maintenance message until you toggle it off again.

Once enabled, this page is automatically shown if the user enters an invalid URL (e.g. old link or mis-spelled link).

You can redirect to a specific link or page by editing the Back to Homepage’s link settings:

Under the Project Settings - Translate tab, start by specifying the original language of your site.

For automatic translations, add your Google Translate API Key (obtained separately via Google Translate - you need access to a paid account), and Save changes.

Then you have the option to add other languages.

You can choose to make automatic translation(s) publicly available on your site. [We highly recommend having any Automatic Translation reviewed by a translator. For example, "Spanish" may mean European Spanish or Latin American Spanish, and there are differences between them.]

Then press "Add Translation".

You can add multiple languages here.

You can also come back here to remove (delete) any translations you don't need.

Go to CMS, Assets, and the Pages Menu. Select the Name of the page (not the actual page editing) to edit page settings and qualities.

A Translate tab now appears, where you can adjust (or manually add, if you're not using automatic translations) translated content. You can also specify for which language and which page.

To show different language versions of your event website, first drag in add the element called "Translation".

You can adjust the placement using the normal controls.

Visitors to the site can choose a language from the dropdown menu of whichever languages you've added under the Translation tab (in Project Settings).

These can be found under: CMS (Hamburger, top-left) > Assets > Project Settings > Redirects (The icon that has a circle with an arrow bouncing off of it.)

This page allows you to put in redirects, in case you have updated a URL, or would like a page to redirect to (for example) your Under Maintenance page.

Put a forward slash, the original URL slug (the section after .com, .site etc.), add a space, another forward slash, and then put the new slug (where you want people to be redirected to).

E.g. if you put: /our-sponsors /sponsors

...it would mean you previously had an "our-sponsors" page, but have now shortened it to just "sponsors" - but you still want to make sure anyone with the old link is properly re-directed.

You can add more than one re-direct here - for example, you can re-direct multiple old URLs to one new URL. However, each old URL can only be re-directed once.