Landing pages: Creating your custom website

With the Landing page feature, you can build a custom website for your event. It provides you options to design and customize the website to reflect the theme of your event.

This article explains how to create, design, and customize a website for your event.

Setting up a custom website

To set up your custom website, navigate to Marketing > Landing pages > Landing page.

Ensure that you have first enabled the Landing page tool in Settings > Tools > Registration section.

On this page, a box will appear for you to enter your page name and select a template from the drop-down. The available templates are Andromeda dark, Andromeda light, Columba, Janus, Jericho, Hydra, Lima, Orion, and Vulcan.

Gif showing how to create your landing page by navigating to Marketing > Landing pages > Landing pages, a window will pop up allowing you to give te landing page a title and a template

To learn about switching templates, refer to this section.

Website sections

On the far left menu of the Landing page dashboard, you will see the following sections which can be added to your website:

  • Header: Adds the website's logo, event's name and date, event's address, city, and zip code as well as a navigation menu that shows all the available sections and allows users to navigate to different sections or pages of the site.
  • Event details: Allows you to add the details of your event this includes your event's name, event start and end date, event's address, city, and zip code.
Event details
For the address, city, and zip code to be visible in both the Header and Event Details sections, admins must first set up the address at Event > Details.
  • About: Shows the event description added under Event > Details > General description.
  • Registration form: Embeds your registration form to your event's website. For more information on creating a Registration form, refer to our Registration form article.
  • Countdown: Shows the countdown to your event in days, hours and minutes.
  • Map: Adds a map that shows the location of your event.
  • Photos:  Displays the images added in your Photo Gallery.
  • App: Adds a section where users can download your event app.
  • Sponsors: Shows all the sponsors in your event. To learn how to add sponsors to your event, refer to our Sponsors article.
  • Exhibitors: Shows all the exhibitors in your event. To learn how to add exhibitors to your event, refer to our Exhibitors article.
  • Speakers: Shows all the speakers in your event. To learn how to add speakers to your event, refer to our Speakers article.
  • Speakers of the day: Displays speakers who would be speaking on each day of your event.
  • Agenda: Shows all the activities in your event. The activity start and end times displayed on the agenda will follow the time zone selected by the event organizer under the Event > Details > Timezone.
By default, the cover image set at Event > Details will be used as cover image for the landing page.

Adding website sections

To add sections into your website, follow these steps:

  1. Click on the Sections icon situated at the top left corner of the page.
  2. Choose the desired section from the list.
  3. Use the drag-and-drop functionality to position the chosen section precisely where you want it on the main page.
Adding sections

The sections you have added can also be visualized as a list. Click on the Select layer icon at the top left corner of the page. This will display all the sections available in your website. You will see the total number of sections created as well as the number of components added to each section. To access and start modifying a particular section, click on the name of section.

Viewing sections as a list

Advanced customizations & enhancements

Once you’ve added the website sections, you can go further with customizations to improve layout, functionality, and overall user experience.

Each section can be refined through the General, Dimension, Typography, Border, and Decoration tools available in the editing panel. These allow you to control visibility, spacing, alignment, borders, and background designs for your sections and elements.

The Header section can be customized to control what content is displayed and whether a registration button is available. Some of these customizations include:

  • Enable header: Turn the header section on or off.
  • Header content: Choose what appears in the header(invisible or cover overlay):
    • Invisible: Hides the header while keeping it available for later use.
    • Cover overlay: Displays the header with a background (image or GIF) and text overlay.
  • Enable registration: Allows you to display a registration button in the header. You can:
  • Edit the button label
  • Add a direct registration link.
  • Set an alternate label to appear once the event is live
  • Enable show date: Toggles the display of the event date in the header on or off.
Header content
To use a video as the header background, you must first convert the video into a GIF format.

By default, the header background uses the event cover image set under Event > Details on the platform. If you wish to change the header background, you’ll need to update the event cover image

header background

Alternatively, you can add, remove, or edit the header background images from the Decoration section of your landing page. For more information, refer to the Decoration article.

Edit header background
Agenda

The Agenda section is where attendees can see all the sessions, activities, and times for your event. It helps them know what is happening, when it is happening, and where to click for more details.

These are the settings and customization options available in the Agenda section:

  • Menu/Section Name: This is the name that will appear in your event website’s menu (the navigation bar at the top of the page). By default, it is called Agenda. You can rename it to something more suitable, such as Schedule or Program.
  • Is menu visible?: This setting decides whether the Agenda will appear in the navigation menu.
    • If turned on, attendees will see Agenda (or whatever name you set) as a clickable option in the menu. If turned off, the Agenda won’t show in the menu.
  • Show days without activities: If your event runs across multiple days, you can choose whether to display days that don’t have any sessions scheduled.
    • Turn this on if you want all event days to be visible (even empty ones).
    • Turn this off if you only want days with scheduled activities to appear.
  • Label: Start: This is the word shown for when an activity begins. By default, it says Start. You can change it to Begins or whatever suits your preference.
  • Label: End: This is the word shown for when an activity finishes. By default, it says End. You can change this to suit your preference.
  • Button: Learn More: This is the button attendees click to see extra details about a session. By default, it says Learn more. You can change it to something like See details, View session, or Read more.
  • Label: Description: This is the text label that appears above the activity’s description. By default, it says Description. You can edit this to suit your preference.
  • Text: No activities available : This is the message displayed if the Agenda has no sessions. By default, it says No activities available. You can customize it to say something friendlier like Stay tuned! The schedule will be announced soon, etc.
  • Label: Close: This is the text on the button attendees click to close a session details pop-up. By default, it says Close. You can customize this if you prefer.
Agenda website section
Event Details

The Event Details section is where attendees can find the key information about your event, such as its title, date, and registration options. This section helps people quickly understand the basics before exploring the rest of your event content. Customization options include:

  • Menu/Section Name: The name shown in your event website’s menu.
  • Is menu visible?: Toggle whether the event details section is displayed in the navigation menu.
  • Enable registration: Turn on or off the option for attendees to register directly from this section.
  • Label: Registration: Customize the text shown on the registration button.
  • Enable show date: Choose whether the event’s date is displayed in this section.
Event details section
The Event Details and Header sections are the only website sections where you can enable the registration form button.
About

The About section introduces your event with a description, background story, or any key information attendees should know. You can control how this section appears and what content it contains.

Customizations include:

  • Menu/Section Name: Controls how the section is labeled in your website’s navigation menu. You can rename it to match your branding.
  • Is menu visible?: Toggle on/off to decide whether the About section shows up as a visible menu item. If turned off, the section will still exist but won’t appear in the menu.

By default, the About section copies the General Description set under Event > Details. If no description has been added there, the section will appear blank. However, you can always replace this with a different description or add a new one directly in the About section.

This ensures you have full flexibility, either reuse your general description or write a unique introduction just for the landing page.

About section
Photos

The Photos section showcases images from your event. This can include official uploads, attendee contributions, or images added directly to your landing page.

Customizations include:

  • Menu/Section Name: Controls how the section is labeled in your website’s navigation menu. You can rename it (e.g., change “Photos” to “Gallery” or “Event Highlights”) to fit your branding.
  • Is menu visible?: Toggle on/off to decide whether the Photos section appears as a visible menu item. If turned off, the section will still exist but won’t appear in the menu.

By default, the Photos section pulls images from three sources:

  • Event > Content > Photo Gallery: Any photos added here will automatically display.
  • Virtual Lobby > Event Photos: Images uploaded by attendees in the Virtual Lobby will also appear in this section.
  • Direct uploads to the Photos section on the landing page: These images will only display on the landing page and won’t sync back to your platform galleries.

This gives you the flexibility to combine curated event photos, attendee generated content, and landing page–specific visuals.

photos
Registration Form

The Registration Form section allows attendees to sign up for your event on the landing page.

Customizations include:

  • Menu/Section Name: Controls how the section is labeled in your website’s navigation menu. You can rename it to align with your event branding.
  • Is menu visible?: Toggle on/off to decide whether the Registration Form appears as a visible menu item. If turned off, the form will still exist but won’t appear in the menu.
  • Registration form link: Connects this section to a form. By default, it links to the main registration form created under Marketing > Registration > Registration Form. However, you can choose to link a different form if you prefer (for example, a speaker application or a custom form).

This gives you the flexibility to either use your event’s default registration form or link to an alternative form depending on your needs.

Countdown

The countdown section helps build anticipation by displaying a live timer that counts down to your event’s start date.

Customizations include:

  • Menu Name: Defines how this section is labeled in your website’s navigation menu. You can rename it to match your event branding.
  • Is menu visible?: Toggle on/off to decide whether the Countdown section appears in your navigation menu. If turned off, the timer will still be active on the page but hidden from the menu.
  • Label: Countdown: Customize the main label
  • Count up option: Switches the timer from counting down to the start of the event to counting up from the event start. This is useful if you want to show how long the event has been live.
  • Label: Days / Hours / Minutes: Customize the unit labels.
countdown
Sponsors

The Sponsors section highlights the partners and sponsors supporting your event, giving them visibility on the landing page.

Customizations include:

  • Menu/Section Name: Defines how the section is labeled in your website’s navigation menu.
  • Is menu visible?: Toggle on/off to decide whether the Sponsors section appears as a visible menu item. If turned off, the section will still exist but won’t appear in the navigation menu.
  • Enable sponsor categories: Organize your sponsors into categories created under Event > Sponsors.
  • Text: No sponsor available: Customize the placeholder text shown if no sponsors have been added yet.

The Sponsors section automatically displays sponsors you add under Event > Sponsors.

landing page websites
Exhibitors

The Exhibitors section showcases the companies or organizations exhibiting at your event, helping attendees learn more about them.

Customizations include:

  • Menu/Section Name: Defines how the section is labeled in your website’s navigation menu.
  • Is menu visible?: Toggle on/off to decide whether the Exhibitors section appears in the navigation menu. If turned off, the section will still exist but won’t be listed in the menu.
  • Enable exhibitor categories: Organize exhibitors into categories created under Event > Exhibitors.
  • Text: No exhibitor available: Customize the placeholder text when no exhibitors are added.

The Exhibitors section automatically displays exhibitors you add under Event > Exhibitors.

Speakers

The Speakers section highlights the people presenting or participating in your event, giving attendees insight into who they’ll be hearing from.

Customizations include:

  • Menu/Section Name: Controls how this section is labeled in your website’s navigation menu.
  • Is menu visible?: Toggle on/off to decide whether the Speakers section appears in the navigation menu.
  • Enable speaker categories: Group speakers into categories created under Event > Speakers.
  • Text: No speaker available: Customize the placeholder text when no speakers have been added.
  • Label: Close: Customize the label for the close button in speaker profiles.
  • Label: Bio: Defines the text label for the speaker biography section.

The Speakers section automatically displays speakers added under Event > Speakers, including their names, photos, and bios.

speakers
Speakers of the Day

The Speakers of the day section showcases only the speakers presenting on a specific day of your event. Unlike the general Speakers section, which lists all speakers, this section filters speakers by the daily agenda.

Customizations include:

  • Menu/Section Name: Defines how this section is labeled in your navigation menu.
  • Is menu visible?: Toggle on/off to decide whether the section appears in the navigation menu.
  • Enable speaker categories: Organize daily speakers into categories (e.g., Keynotes, Panels).
  • Text: No speaker available: Customize the placeholder text when no speakers are scheduled for that day.
  • Label: Close: Customize the close button label in speaker profiles.
  • Label: Bio: Defines the text label for the speaker biography section.
All section labels can be translated to support multiple languages.

The speakers of the day section automatically updates based on your agenda. Only speakers linked to activities scheduled for that day will appear here.

speakers of the day
Customization with Containers

All website sections in InEvent are built inside div containers.

Div containers
A div container in HTML, derived from division, serves as a generic block-level container for grouping and structuring other HTML elements and content on a webpage.

In short, div containers are the building blocks that give your website sections structure and flexibility. These containers, or boxes, are highlighted in blue when you hover your mouse cursor over them, making it easy to identify their boundaries while customizing your layout.

container blue highlight

Because each section is made up of containers, you can:

  • Nest content
  • Layer elements
  • Organize layouts using 1-column, 2-column, or 3-column structures.
You can use the Column components (1-column, 2-column, or 3-column) to create additional containers inside a section. This gives you more flexibility to structure your layout, organize content side-by-side, or layer elements creatively.
  • Resize and reposition elements within sections.
  • Add links or tags anywhere text is supported.

When dragging and dropping elements into your website, you’ll notice several visual indicators that help guide placement.

Yellow highlight: Shows a container where the element can be placed.

Green line: Indicates the exact position where the element will be inserted.

No yellow highlight: Means that the element cannot be placed inside that container.

These visual cues make it easy to understand where elements fit within the layout and help you build your website with confidence.

visual indicators

Once your elements are inside a container, you can refine their look and layout using the editing options on the left-hand panel. These include:

  • General settings (opacity, display, flex alignment)
  • Dimensions (width, height, margins, padding)
  • Typography (text color, font, spacing, shadow)
  • Border (style, radius, color)
  • Decoration (background color, image, shadows)

For a full walkthrough of these tools, refer to the sections on General, Dimension, Typography, Border, and Decoration.

Viewing your containers as a list

You can view and manage all the containers and components within your website sections in a structured list format. Click the Select layer icon at the top-left corner of the page, and a list will appear showing all the sections on your website (for example, Event Details, About, or Speakers). Each website section displays the total number of components inside it, and you can click the arrow beside a section to expand it and see which components, such as text, images, or columns, are nested within others.

When expanded, containers in a section will be displayed as Divs. Once you place or insert a component such as text, image, or video, into a div or container, that element will appear within it. This helps you visualize the content hierarchy clearly.

Each container or div serves as a holder or layout box for components. Columns are arranged as rows when viewed in the structured list, and when a column is placed within another column, the outer one acts as a container for the inner content.
The parent container defines the structure, while the child elements (like text, images, or nested columns) define the content within that structure.
section layers

This view helps you manage your page’s structure more intuitively, making it easier to organize or rearrange nested elements visually.

Creating custom sections for your website

When you click on the Components icon at the top left corner of the page, you will have the possibility of creating your custom sections using the available tools. You will be able to create extra sections with text content, images, and links. On this page, you will find the following fields:

Generate custom sections automatically using AI

The AI-powered website section generator lets you upload a screenshot of any website, and it automatically creates a custom section based on that image as well as any additional instructions. You can then edit and modify the section as needed. This greatly saves time when building custom sections or pages.

You can also generate custom sections without uploading any screenshots.

To use the AI-powered section generator, follow the steps provided below:

  1. Click the Generate section button at the top of the Sections or Components tab. The Generate new section using AI pop-up box will be displayed.
  2. Upload a screenshot of any website part of section you want to replicate using the file selector or by dragging and dropping the image. This step is recommended for best results. The following screenshot is used as an example in this guide.
Screenshot showing an example website screenshot.
  1. Enter the Section name. This step is required.
  2. Write a description of the section, including any instructions or extra details in the Describe the section you want to generate text field. This step is required.
For best results, describe the desired website section as detailed as possible.
  1. Click Generate. The AI will process the request, and the resulting custom section will appear under Custom sections.
Custom sections will only be displayed if you have at least one custom section created or generated.
GIF showing how to use the AI-powered custom section generator

After completing the steps above, your generated Custom section can be immediately dragged and dropped to your website page and further edited to suit your styling needs.

When replicating website with image elements, a 400x400 image placeholder may be displayed on the generated custom section instead of an actual image. You can modify the element by double-clicking the placeholder, then uploading and selecting the desired image. Refer to the Basic section for more information. For further information on editing and styling, refer to Customizing sections.
Main section

In the Main section, there are two available options: Section and Footer. You can add a Section and Footer by dragging and dropping the selected option into the main page.

adding a footer
Basic

From the Basic section, the available options are: 1 column, 2 columns, 3 columns, Image, Video, Link, and Link region. You can drag and drop any of these options into the Section or Footer selected from the Main section.

  • When adding a column, simply drag and drop it into the added Section or Footer.
Adding a column

  • To add an image, select it from your computer or drag and drop it into the designated Section or Footer. Click on the uploaded image to add it. You can adjust the image size using dimension Width and Height, and include Alt text in the Settings field at the left hand menu of the page.
Previously uploaded images will be available for selection when adding an image.

Adding an image in the section

  • To add a video, click on the video element and click on the pen Click to edit style icon on the top left menu. In the Settings section, you can use the drop-down box to select the desired video provider: HTML5 Source, Youtube, Youtube (no cookie), or Vimeo. You can also use the checkboxes to enable or disable video Autoplay, Loop, and Controls.
For more information, refer to the section on customizing embedded video.
  • When adding a Link or Link region, click on it and its Settings menu will open at the left corner of the page. Here you can insert the link's URL in the Link text box and select its Target to decide if the link should open in a new window or the website page will be directed to the link's page: This window or New window.
Adding links in the section

Tags

In the Tags section, the available options are Article and Figure. To add any of these options, drag them into the Section or Footer column.

Article is commonly used for self-contained text elements, whereas Figure is commonly used for self-contained images, diagrams, etc. For more information, refer to the W3schools article on HTML <article> Tag and HTML <figure> Tag.
Adding tags in the section

Text

In the Text section, the available options are Text, Header 1, Header 2, Header 3, Header 4, and Quote. These options allow you to write inside the text boxes. You can also use HTML-formatted text or other elements.

To add any of these options, simply drag and drop it into the Section or Footer sections added. You can also add any of the text options inside Columns, Article, Figure options.

Adding Texts in sections

Reordering sections

To reorder sections on the website, follow the steps below:

  1. Locate and click on the section you want to re-position.
  2. Click on the Settings icon to display the available options.
  3. Click on the Drag and Drop icon.
  4. Drag the section to the desired position and drop.
Re-ordering sections

You can undo or redo changes you have made by clicking on the Undo or Redo button at the top of the page. You can also reset the Landing page back to the default state by clicking on the Reset to default button.

Reset to deault, undo or redo

Alternatively, you can re-order your sections by clicking on the Select layer icon at the top left corner of the page.

Here you will see a list of the added sections. To re-order the sections, click on the drag and drop icon beside a section and drop the section in the desired position. You will see the changes reflect in the section menu of the main page.

Re-ordering sections
Icons on the Landing page

When you click anywhere on a component added on the landing page builder, you will be able to see some icons as shown bellow. The icons shown below (from left to right):

Image showing icons on the landing page
  • Parent container: This is used to select the parent container of the component you are in. It moves one level up until it reaches the highest component.
  • Compass-like cross: This is used to move the component.
  • Copy Icon: This is used to create an exact copy of the component selected.
  • Delete icon: This is used to delete/remove the component selected.
  • Refresh icon: This is used to reload or update the component selected

Creating a dropdown menu for your sections

To create a dropdown menu for your website sections, follow these steps:

  1. Click on the pen icon located at the top left corner of your webpage.
  2. Next, click on the + icon beside NavBar.
All your created sections will be listed below the Navigation bar.
  1. In the box that appears, fill in the following information:
  • Title
  • Is visible?: Enable the visibility of the dropdown menu by toggling its button.
  • It's a dropdown item?: Enable this option to add sections to the dropdown.
  • Items: When the It's a dropdown item option is enabled, you can add the desired sections by clicking on the Select some options box.
  • Link: If you disable the It's a dropdown item option, you can add a link here.

Make sure to start links with https://.
  1. Click on Add once you have configured the settings.

Once created, the dropdown will appear in the top bar of your page and on the top menu bar of your website page.

Make sure you've added a Header section to have the navigation bar at the top of your webpage.
Creating a drop-down menu

In the website page, the created dropdown menu will appear in the top menu bar. When clicked, it will display the added sections, allowing for easy navigation to a selected section.

If you added a link instead of a dropdown item, clicking on it will take you directly to the linked page.

Created drop-down in the web page

Editing the dropdown menu

To edit the dropdown menu, follow the steps below:

  1. Click on any part of a section on the main screen.
  2. Click the editing pen icon next to the created drop down
  3. In the box that appears, you can:
  • Change the title of the drop-down.
  • Modify the visibility.
  • Add more sections.
  • Remove a section by clicking the X icon beside it.
  • Add a translation to your title.
  • Turn off the It's a drop down item to add a link or turn it on to add sections.

Editing a drop-down

Deleting the dropdown menu

To delete the created dropdown menu, simply click on the trash icon next to it and it will be removed. All the sections will then appear individually at the top menu bar.

removing the drop-down

Customizing sections

There are so many customization options that you can carry out on your sections. To begin editing a section, simply click on the section you want to edit, and the editing menu will open at the left side of the page.

You can also click on the Settings icon that appears when you click on a section to bring out the edit menu at the left side of the page.
Editing sections
Settings

From the editing options, click on the Open this section settings button and the settings option available for customization will appear. You can do the following actions:

  • Change the section's name.
  • Make the section visible or invisible on the website's menu by checking or unchecking the Is menu visible? checkbox
You can also control the visibility of a section from the Select layer page by clicking or unclicking the eye icon beside the section.
Setting a section' s visibility
  • Add translations to your sections' names and other texts.
  • Customize label names based on the selected section.

When editing the Header and Event details section, you will be also be able to configure the following fields:

  • Enable registration: When ticked, it will add a Registration button that will lead whoever accesses the website to the Registration form when clicked on.
  • Label Registration: Here you can edit the name of the Registration button.
  • Enable show date: This is enabled by default. You can untick the checkbox to hide the event's start and end date that appears in your Header and Event details sections.
The Enable show date field works across all templates and in only the Header and Event details default sections.
Sections settings

When editing just the Header section, you will see the additional options:

  • Enable Header: This is enabled by default. Tick or untick the checkbox to make the header will be visible or invisible on the website.
  • Header content: This is by default set to Cover overlay. You can change it to Invisible using the dropdown, and the details on the header will be cleared.
  • Label: Event has started: You will be able to change the 'event has started' message that appears when using the Lima template when the event has already begun.
  • Registration link: This field appears when editing the Header section, you will be able to add a registration link.
By default, once the Enable registration box has been checked, anyone who accesses the website and clicks on the Registration button will be directed to the Registration form, even if a link isn't added to the Registration link box.

Header sections

When editing the Sponsors, Exhibitors, and Speakers section, you will also be able to do the following actions:

  • Enable categories by ticking the checkbox.
  • Change the text that appears on the website when there is no Sponsors, Exhibitors or Speakers available.

Settings for Sponsors, exhibitors and speakers

When editing the Speakers section alone, you will also be able to change the Bio and Close labels that appears when viewing a Speaker on the website.

Image showinng the Bio and close label fields that appear in the settings of a speaker section when you edit it alone

General

From the editing options click on General. You will be able to carry out the the following modifications to a selected section or a part within the section using the following tools:

  • Opacity: Use the regulate button or click on the up or down arrow to define the section's opacity.
  • Display: Choose between the visible, invisible, flex buttons to define how the section should be displayed.
If you click on Invisible, it will hide the section. If you click on Flex, it will enable the Flex container.
  • Flex container: Enable or disable the flex container.
  • Justify elements for flex container: Click on the box within your section to reposition the elements using the Start, End, between, Around, Center options.
  • Align elements for flex container: Click on the box within your section to reposition the elements using the Start, End, Stretch and Center options.
To undo the changes made, simply click on the X button beside the editing tool.

General

Dimension

From the editing options, click on Dimension. You will be able to carry out the the following customization to a selected section or a part within the section using the following tools:

  • Width and Height: When working with sections containing images, you can customize the width and height of the images. You can either input the numerical value or make use of the arrow buttons beside the box to increase or decrease the width and height measurements.
  • Margin: Set a margin for your section by either inputting a numerical value in the box or using the arrows beside the box to increase or decrease the margin. The margin can be set in pixels (px) or in percentage (%). You can also use the Margin top, Margin right, Margin bottom and Margin left options to set the margins for specific sides of the section.
  • Padding: To create spacing within your section, you can set a padding. You can type in the numerical value or use the arrows next to to the box to define the padding. The padding can be set in pixels (px) or percentage (%). You can also use the Padding top, Padding right, Padding bottom and Padding left options to define the padding for specific parts of the section.

Dimension customization

Additionally, you can customize the dimensions of your company logo by selecting the logo and clicking on the dimensions drop down menu and making your customization, as shown in the GIF below.
Customizing logo dimensions
Typography

This section appears only when you have clicked on a text within a section. You will be able to carry out the following customization to texts:

  • Text color: Pick a color for your text using the color board.
  • Font family: Choose a font for your text using the drop-down menu.
  • Font size: Define the size of your text by either entering a numerical value or using the arrows beside the box to increase or decrease the font size.
  • Font weight: Select a specific font weight for your text using the drop-down menu.
  • Letter spacing: Adjust the spacing between each letter by entering a numerical value or using the arrows beside the box to increase or decrease spacing.
  • Line weight: Set the thickness of the lines in your text by entering a numerical value or using the arrow buttons to adjust the weight.
  • Text align: Align your text horizontally using the Left, Center, Right, or Justify options.
  • Text decoration: Choose between Underline to underline your text or Line through to strike through your text. Click None if you do not want to apply any of these options.
  • Text transform: Change the case of your text using the Capitalize, Lowercase, or Uppercase options. Click None if you do not want to apply any of these options.
  • Text Shadow: Click on the + sign to open a new field for customizing text shadows. Enter numerical values in the X and Y columns to set the horizontal and vertical dimensions of the shadow. To blur the shadow, input a numerical value in the Blur box. Select a Color for the text shadow using the color board.
Typography

Border

From the editing options click on Border. You will be able to carry out the the following customization to a selected section or a part within the section using the following tools:

  • Width: Set a width for your section's border by either inputting the numerical value in the box or using the arrows beside the box to increase or decrease the border's width.
  • Style: Set the style for your border by selecting from the drop-down menu the style of choice.
  • Color: Choose a color for your border's style.
  • Border radius: Set a radius for your section's border by either inputting a numerical value in the box or using the arrows beside the box to increase or decrease the radius. The radius can be set in pixels (px) or in percentage (%). You can also use the Top left, Top right, Bottom right and Bottom left options to set the radius for specific sides of the section.
Border customization

Decoration

From the editing options click on Decoration. You will be able to carry out the the following customization to a selected section or a part within the section using the following tools:

  • Background color: Add a background color using the color board.
  • Box shadow: Click on the + sign to open a new field for customizing the box shadow. Enter numerical values in the X and Y columns to set the horizontal and vertical dimensions of the shadow. To blur the shadow, input a numerical value in the Blur box. To spread the shadow, input a numerical value in the Spread box. Select a color for the text shadow using the color board. Using the Type drop-down, select whether the shadow should be Outside the box or Inside the box.
  • Background Image: Click on the + sign to open a new field. Here you can add a background image to a section by clicking on the Images button under Select image. To remove the image simply click on the x button beside the image in the customization field. You can make further customization to the image using the Repeat, Position, Attachment, and Size fields, simply click on the drop-down beside each field to choose your preferred choice.
Decoration

When customizing sections, you can simply click on the X button beside each customization option to remove it or simply use the undo button at the top left corner of the page.
Embedded video

After adding an embedded video element, you can configure it to display a video from an HTML5 Source, Youtube, or Vimeo. Select the target provider using the Provider drop-down box.

When HTML5 Source is selected, enter the direct link of the target video, such as https://path/to/video.mp4, in the Source field. In addition, you can also use a separate thumbnail video by entering the direct link of the thumbnail image in the Poster field.

You can embed an existing room recording by entering the recording direct link. For more information, refer to our article on Room recording.
GIF showing the HTML5 Source embed video

When Youtube or Youtube (no cookie) is selected, enter the Video ID found in the URL, such as GImv597rQ8U, in the Source field.

When Youtube (no cookie) is used, there will be no interaction between the embedded video and your existing cookies stored in your browser.
GIF showing the Youtube embedded video

When Vimeo is selected, enter the Video ID found in the URL, such as 288344114, in the Source field.

GIF showing the Vimeo embed video

You can resize the embedded video using the square icons around the video element.

GIF showing how to resize the video element

You can also enable or disable Autoplay, Loop, and Controls using the checkbox items.

The Controls checkbox is not available if Vimeo is selected as the Provider.
Screenshot showing the Autoplay, Loop and Controls checkboxes.
Removing a section

To remove a section, first click on the section. When you do so, a blue trash can icon will appear and once you click on the icon, the section will be instantly deleted.

Gif showing how to remove a section

Making the logo on your landing page clickable

You can set your landing page logo to redirect users to a specific URL when clicked. This is great for navigation or linking back to your main site. To do this, follow the steps below:

  1. Navigate to Event > Details.
  2. Scroll down to the Advanced section.
  3. Select Links and domain.
  4. Click on Edit.
  5. In the Website link field, enter the URL you want users to be redirected to when they click the website logo.
  6. Click on End to save changes.

This allows you to link your logo to an external site or any page you'd like to direct attendees to.

clickable logo

Switching templates

You can easily switch templates. To do this simply navigate to the Sections page which displays the templates in alphabetical order. Scroll down to see all available templates and sections within them or simply click the arrow next to the first template to reveal the other templates, and click on the template to see the available sections.

Sections that have been created using a previous template will remain unchanged. To ensure a uniformed template throughout all sections, simply remove the sections added with a previous template and add them again using your desired template.
Already selected sections will show the cancel icon when you hover over them.
Gif showing how to add sections from the existing templates of your choice

Adding new website pages

To add new website pages, click on Click to manage pages icon, and then click on Add new page. Fill in the following information:

  • Page name: Title of your page.
  • Is active?: If you want the page to appear in the menu bar of the home page toggle the switch button on.
  • Copy from page: Select from the drop-down menu an existing page whose customization you want for your new page.
When you copy the customization of a website page, the new page will contain the same information available in the copied website page.
Gif showing how to create new pages in a website

Once you have created the new website page, you can start adding sections and new component to the page.

If you add a new page without selecting an already existing template for it, by default, a custom section will appear as part of the page.
Gif showing how adding a blank page without a template contains a custom section

Editing website pages

After creating a website page, you can easily edit this page. To do this, go to the Click to manage page and hover over the page you want to edit. Here you can change the name of the page, set the page to active or not, and add translations for your page's name, then click on Save.

Editing pages

Deleting website pages

To delete website pages, go to the Click to manage page, hover over the page you want to delete and select the trash bin icon. Click Yes on the confirmation pop-up that appears and the page will be removed.

Deleting a website page

Previewing the website

To preview your website, simply click on the eye icon located at the top left corner of the page. It will open the Home page of the website in a new tab. You will see all the created sections and pages on the top menu bar. You can click on the different sections and website pages that you've created and it will redirect you to each corresponding section or website page for a comprehensive preview of your content.

If you have created a dropdown for your sections, the sections will be contained within the drop-down.
Screenshot showing how to preview the website page

Choosing a view while building the website

You have the flexibility to select from a range of view options located at the top of the page. These options include Expanded view, Desktop view, Tablet view, and Mobile view. This allows you to tailor your website's appearance to various devices and screen sizes.

Website views

Resetting the website page

You can reset the website page back to its default state by clicking on the Reset to default button at the top of the page. Additionally, you have the option to use the Undo button to remove an action or the Redo button to bring back an action if necessary.

Screenshot showing how to reset the website page

Saving, publishing and restoring the website

The platform automatically saves changes to the website, but does not automatically publish it. To publish the website, click on Publish version on the top right menu. The Publish version confirmation pop up window will be displayed, complete with the publish candidate version number. Click Yes to publish the website, and the live website will be updated to the most recent version.

Making changes to the website and publishing them will bump or increase the website version number.
Screenshot showing Publish version

The website can also be restored or rolled back to a previous published version. Click Restore, and the Restore the page to an older version pop-up window will be displayed with a drop-down box of existing website versions. Click the desired version and click Restore.

Screenshot showing the Restore the page to an older version pop-up window

Click Yes on the confirmation pop-up window.

Screenshot showing the confirmation pop-up

After completing the saves above, the website in the editor will be restored to the desired version. To update the live website, ensure to click Publish version and complete the confirmation step, which also bumps the website version number. Then, the live website will be updated.

Defining website authentication policy and access code

The website can be configured to require authentication or access code to be viewed. The options can be configured under the style editor's Global Settings panel.

Screenshot showing the style editor menu with Global settings configurations

Authentication requirement

If the Page requires authenticated user? box is checked, people accessing the website page must already be registered for the event. When unauthenticated users access the website page, they will be prompted to log in using their username and password. Then, after logging in, they will be redirected to the website page.

Page access code

Event organizers can define a four-digit code to secure website pages, allowing the website to be viewable to only users who have access to the code.

To activate the page access code, enter the desired four-digit code in the Page access code field. Then, save your changes.

The access code must consist of numeric characters only.
Screenshot showing the page access code entry

After doing so, the website page will prompt the user to enter the four-digit code upon accessing the page link.

Administrators may not be prompted to enter the four digit code upon accessing the page. To ensure the access code prompt is displayed correctly, access the page using your browser's incognito or private mode.
Screenshot showing the page access code prompt


How Did We Do?