1. Home
  2. Modules
  3. VEX
  4. Create custom landing pages for your VEX event

Create custom landing pages for your VEX event

Sometimes when you’re building your VEX event it can be useful to create several different pages in addition to the automatically generated event home page. VEX Landing Pages lets you create as many additional pages as you need for your event and you can create customizable navigation to link everything together. Using VEX Landing Pages you can use an HTML editor or incorporate your VEX Session Groups.

Examples of pages you might want to create for an event could include a tech support help desk, a sponsor marketplace, and dedicated pages for personas or tracks.


How to create VEX Landing Pages

When editing your event, select the Landing Pages tab and then click the Add Page button in the top right corner.

image

There are 3 primary functions that you can choose from once you’ve added a page.

  • Modify Page: Select this to start adding content and styling on the chosen landing page
  • Edit: This allows you to:
    • Rename the title of the page
    • Control the page visibility. You can choose to make the page private and not visible, or publicly visible to anyone who has access to the event (access protection still applies)
    • Change the URL slug of the page.The URL slug is in the page URL and therefore, it is best practice to use semantic language that is concise and easy to to understand. The URL slug cannot contain spaces.
  • Remove: This will remove the respective landing page, there is a confirmation pop-up but once you’ve confirmed deletion, we are unable to retrieve it anymore.

If you want to set a landing page you’ve built as the Event’s Home Page you can do so by clicking on ‘Set as Home Page’ under the homepage column (shown below). If you don’t see this option for your page, you should check that the page’s visibility is set to Public (as described above).

image

If you wish to change your homepage, simply go back to the Landing Page tab and select `Unset` & choose another page to be set as your Homepage. If you do not choose a page in the Landing Page list as the home page, then the event home page will be the default home page.

image

Once you’ve added your Page Title, click ‘Modify Page’ to start editing the experience. This will allow you to build a page using HTML or embed a Session Group you have created in a Landing Page editor. To begin creating a page, click on the `+` button at the top center of the landing page editor and select between the 2 options shown below. You can add as many additional blocks you need by clicking anywhere on the page and looking for the ‘+’ buttons to add a new block above or below an existing one.

image


Add an HTML block

If you decide to select HTML, you can code the entire section from scratch. Hover over the section and use the pencil icon to start customizing your HTML block. Make sure to hit Confirm to save your changes.

image

When you click the edit button on the HTML block you’ll see a new window which allows you to edit the following areas:

image

  • HTML Content: This is where you can edit all of the HTML in this particular block. Any styling, content, and scripts you want to code to go in the block which will sit on the page  is added in here. These are auto-saved, so once you are ready to go back to other settings of this container, feel free to click on the back arrow on the top left corner without losing the HTML you’ve just written.
  • Add an HTML block

    If you decide to select HTML, you can code the entire section from scratch. Hover over the section and use the pencil icon to start customizing your HTML block. Make sure to hit Confirm to save your changes.

    image
    When you click the edit button on the HTML block you’ll see a new window which allows you to edit the following areas:

    image

    • HTML Content: This is where you can edit all of the HTML in this particular block. Any styling, content, and scripts you want to code to go in the block which will sit on the page  is added in here. These are auto-saved, so once you are ready to go back to other settings of this container, feel free to click on the back arrow on the top left corner without losing the HTML you’ve just written.

      Feel free to use <style> and <script> tags that target elements within the page you’ve created. Custom fonts can be used if called out in your <style> tags as needed.

      Where possible you should create your own unique classes or ids for your HTML elements. For example rather than styling a `p`, it would be better for assign an id to `p` and then apply a style to that unique id.
      image

    • Background: You’ll notice several options for how the background can be styled. Any background options chosen here only be applied to the background of the particular block you’re working on. You can select a solid color using the color picker, RGB as well as a HEX code. In addition, you can also choose to select an image as a background. Additional styling can be configured within these options.
    • Typography: Change font color and alignment if that’s not currently added on the HTML content snippet already. If you wish to change the font, you can do so directly in the HTML code.
    • Spacing: Add padding around the entire HTML container. Padding and spacing can also be configured directly using the HTML code if you’d like to add padding to individual HTML elements.
    • Class: If you’d like to target this block using CSS or Javascript (such as External Code or the Advanced Customization area of Appearance Settings), you can add a class name for the container block.

    Add a Session Group Block

    If you decide to utilize a Session Group that you’ve previously created, you can select this option after clicking the `+` button on the page. This allows you to insert the Session Group block at your desired location between other blocks. As shown in the image below, when you hover your cursor above or below an existing block you can click to add the new block.

    image
    You can select the Session Group in the drop-down after clicking the ‘+’ button.

    image
    When you’re ready to edit the block, hit the `Pencil` icon of your session block to select which session group you want to add.

    image
    You can only add one session group to each block. If you want to add all session groups you’ve created, you must create additional blocks.

    image
    Once you’re in the Session Group configuration (as shown above), you’ll find three other options that impact the look and feel of the section:

    • Background: Similar to HTML Configurations, this controls the background color and/or image of the respective session group block.
    • Heading: This changes the text color and alignment of the session block header title.
    • Spacing: Similar to HTML Configurations, this controls the padding around the entire Session block content.

    Additional Info

    If you wish to completely restart your Landing Page and build the page from scratch, there is an option to reset the entire page. You can find this option on the left side of the `Save` button in the top right corner. This will erase the entire content of the page so you’re able to recreate a new experience. While the backward facing arrow might look like an undo button it is not.

    You can use the arrows which appear when you hover over a block to reorder the blocks on your landing page. You can also reorder blocks by using the quick drag and drop option which is the icon with up & down arrows. This way, you can easily reorder blocks visually.

    image
    It’s important to know that the delete button on each block does not ask for your confirmation and will immediately delete the block without providing you an option to undo your changes. So be cautious when deleting blocks.

    IMPORTANT: Please make sure that you hit ‘Save’ at the top right corner to save the page you just built. If you leave the page without hitting save, your page changes will not be saved at all. You should receive a confirmation message at the bottom stating ‘Page saved successfully’.

    image
    Once you’ve built your page and have hit `Save`, you’re ready to go! Your new page is accessible at the URL you’ve defined and can be added to your event navigation in the Navigation tab.

Updated on July 10, 2022

Was this article helpful?

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
CONTACT SUPPORT