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.

Where can I set up my custom website?

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

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.

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, 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 - event's name and event's start and end date.
• 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.

How do I add 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.

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 the number of components added to each section. To access and start modifying a particular section, click on the name of section.

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:

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.

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.

• 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.

• 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.

• 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.

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.

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.

Can I re-order sections?

Yes. You can re-order the arrangement of your added sections. To do this, 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.

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.

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.

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.

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.

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.

Can I edit the created dropdown?

Yes, to edit the dropdown 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.

Can I delete the dropdown?

To delete the created dropdown, 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.

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.

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

• 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.

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.

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.

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.

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.

• 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.

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.

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.

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.

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.

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.

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

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

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

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

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.

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.

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.

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

How do I edit 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.

How do I delete a website page?

To delete a website page, 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.

How do I preview 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.

Choosing a view while building your 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.

Can I reset my website page?

Yes. 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.