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.

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

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.

Main sections
Basic

From the Basic section, the available options are: 1 column, 2 columns, 3 columns, Image, 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

  • 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

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

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.

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

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

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 list of sections 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

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.

Editing a drop-down

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.

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 available text
  • Change Label names depending on the section selected

When editing the Header and Event details sections, you will be able to configure the following items:

  • Enable registration: When ticked, it will add a Registration button that will lead whoever accesses the website to the Registration form when clicked on.
Sections settings

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

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

  • Enable sections 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 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

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
Removing a section

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

Gif showing how to remove a section

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.

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.

Editing pages

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.

Deleting a website page

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.

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

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.

Website views

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.

Resetting the website page


How Did We Do?