Tips and Tricks for Editing
The Event Website Builder is a valuable tool for crafting a distinctive landing page that embodies your brand identity. With this, you can create custom layouts and add unique design elements to your event. In this article, we have outlined some tips and tricks to make your page look amazing!
If this is your first time accessing the Event Website Builder, we highly suggest you check out this other article on how to Navigate the Event Website Builder.
Note: This feature is available only for Enterprise and White Label Plans
Creating a Menu
Adding a top menu on all your pages will allow attendees to navigate to your other pages easily. To ensure that your top menu looks identical for all your pages, add this menu on the first page you create, then duplicate the page instead of creating new ones from scratch. This way, you don't have to re-create the menu and the settings. If you have the same footer for all pages, we suggest adding it as well so that it will be copied over to the duplicated pages.
In the example above, the home page has 5 menu items and a button at the end. To make this work, duplicate the page 5 times for the other 4 menu items and the button.
After duplicating, open each page for editing and update the URL on each menu item and button. For example, the URL for the Speaker menu should have the URL for your Speaker Page. This way, when someone clicks that Speaker menu, no matter which page they are in, they will be redirected to the Speaker Page.
While adding the links, make minor changes on each page, like adding text below the menu to easily identify which page you're on. When you're done, activate each page and test it by clicking each menu item.
Pro Tip: If you already determined the last part of the URL for each page, even before duplicating the page, add it to the first page you created. This will save you some time!
Images with a Label to Appear Side by Side
On your page, you may want to feature your speakers' profile picture and name but don't want to want to use the speaker widget necessarily. You can use the Icons element for this. Upload each image to each icon item and add the name to the Icon Text field. Make sure to adjust the text position to the bottom.
Add Anchor Links
You can add anchor links to each section if you have a long page with different sections. Instead of the page visitor scrolling down to a section, they can click a button or a menu item from your page, which will move automatically to that section. In the example below, we added an anchor link to the "Buy Tickets Now" button that should move down to the Registration section at the bottom of the page when clicked.
To do this:
Select the page object that should appear on top of the screen when clicking the anchor link. (e.g., Registration Text at the bottom of the page)
Enable Block Identifier on the right side menu
Change the ID to something easier to remember (one word, no spaces)
Copy the new ID
Select the page object where you want to add the anchor link (e.g., Buy Tickets Now button)
Select Internal Link on Link Type
Select the ID you created in the Scroll to field
Set a Background Image for the Whole Page
The screenshot below shows several rows in the template (top menu, body, footer), and the background image covers all those rows. To have a background image for your full page, go to Settings, then enable Background Image.
If you want some sections to have different background images or colors, you can update that by clicking the row from the template to load the rows settings. From there, update the color or image in the Row Background section.
Have the Log In Pop-Up Appear When a Button is Clicked
In addition to signing in to Accelevents through the login button at the upper right corner of the page, you can add a button that displays a log-in pop-up when clicked.
To do this:
Add a button to your page
Add a link to that button (e.g., https://www.accelevents.com/u/login). This link is not going to work, but adding a link makes the button look like it's clickable, as the clicker icon appears when you hover over it.
Enable Block Identifier in the button object
Change the ID to login
Note: To ensure the ID saves, type in the ID and click on the template, then go back to the button settings to check if it was saved.
Add an HTML object
Paste this code:
<script>document.getElementById('login').addEventListener("click", function(e) {var button = document.getElementById("headerLogBtn");e.preventDefault()button.click()})</script>Save your page and test it. You must be logged out for this to work. If you're already logged in and you click the button, the pop-up will not appear.
