Tips and Tricks for Editing
The Advanced Page 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 Advanced Page Builder, we highly suggest you check out this other article on how to Navigate the Advanced Page Builder.
Note: This feature is available only for Enterprise and White Label Plans
Save Rows as Templates
If you're creating multiple pages and some content will be repeated on those pages, like your header and footer, you can save rows as templates and use the templates for the other pages, this way you don't have to re-create it for every page. Think of it as a way to copy and paste contents from 1 page to another.
To create a template, click the row and click Save. Give your row a proper name so it's easy to find it later.
To use the saved row to other pages, open your page for editing, then go to the Rows tab and select My Saved Rows, then drag the saved row to the page.
Notes:
Other team members can also see the row templates you created
The row templates are saved per event, it's not available for other events under your organizer.
There is no option to edit the template, think of it as a way to copy and paste contents from 1 page to another.
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 colors or images, you can update that by clicking the row from the template to load the rows settings. From there, update the color in the Row Background section and update the image in the Row Background Image 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.
Note: If you want multiple buttons to have the login pop-up, each button must have a unique object ID (e.g. login2, login3) and you also need to add multiple scripts in the HTML object with the corresponding object ID.
Text Overlay on Image
This feature allows you to place text directly over an image.
To do this:
Click the image and select Apply Effects to load a new screen.
Click the Text icon, then select Add Text.
Type your text and customize the color and the font style.
Drag the text to position over the image.
Click Apply, then Save.
Insert a Dynamic Enter Event Button
This feature allows you to add a registration button that changes to an "Enter Event" button when the event opens.
To do this:
Under Event Widgets, find the Register Button
Click and drag this to its position on your page
Apply a Background Image to Multiple Rows
In this example, row 2, 3, and 4 has a gray background color, but we want row 2, 3 and 4 to have the same background image. Currently if you add a row background image, the image doesn't spill over to the next row, so we'll add a script to make that happen.
The script instructs Accelevents to apply the background image (through an image URL) to the 3 rows. You'll need to specify the rows in the script by getting the row's CSS class names or IDs. With the advanced page builder, the row CSS class names are as follows:
Row 1 -
.bee-row-1Row 2 -
.bee-row-2Row 3 -
.bee-row-3Row 4 -
.bee-row-4Row 5 -
.bee-row-5
The script would apply to all your pages, so if you need it to apply to only 1 page, then add some unique helper information in the script, like apply this script if this particular text appears in the page.
So in the script below, the action is to apply the background image to row 2, 3, and 4 if the page has this text "Featured Instructors" (found in row 2)
click for script
click for script
Add this script to Settings > Integrations > Landing Page Script > Header
<script>
(function () {
const BACKGROUND_IMAGE_URL = "https://d2mt98jlfbop4d.cloudfront.net/images/222238/iStock-1251946582%201.png";
const REQUIRED_TEXT = "Featured Instructors";
const pageHasRequiredText = () => {
return document.body.innerText.includes(REQUIRED_TEXT);
};
const waitForElements = () => {
const row2 = document.querySelector(".bee-row-2");
const row3 = document.querySelector(".bee-row-3");
const row4 = document.querySelector(".bee-row-4");
return row2 && row3 && row4;
};
const wrapAndStyle = () => {
if (!pageHasRequiredText()) return; // Stop if text not present
const row2 = document.querySelector(".bee-row-2");
const row3 = document.querySelector(".bee-row-3");
const row4 = document.querySelector(".bee-row-4");
// Avoid duplicate wrapping
if (document.querySelector(".bg-wrapper-custom")) return;
// Create wrapper
const wrapper = document.createElement("div");
wrapper.className = "bg-wrapper-custom";
// Apply background image
wrapper.style.backgroundImage = `url("${BACKGROUND_IMAGE_URL}")`;
wrapper.style.backgroundSize = "cover";
wrapper.style.backgroundRepeat = "no-repeat";
wrapper.style.backgroundPosition = "center";
wrapper.style.padding = "20px 0";
wrapper.style.width = "100%";
// Insert wrapper into DOM
row2.parentNode.insertBefore(wrapper, row2);
wrapper.appendChild(row2);
wrapper.appendChild(row3);
wrapper.appendChild(row4);
};
const observer = new MutationObserver(() => {
if (waitForElements() && pageHasRequiredText()) {
wrapAndStyle();
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
})();
</script>
Notes:
Remove your row background color to ensure the background image shows after you add the script.
You don't need to add the background image to your page for this to work, but you can upload it to the page editor's file manager and copy the image URL and use that URL for your script. Click the Preview button to get your image URL.
