The primary goal of the Page Builder is to provide you with a flexible, modular environment to design your registration steps. By understanding how to manipulate Content Groups and Elements, you can create a highly organized and mobile-responsive flow that guides your attendees from landing to confirmation. This guide focuses on the Edit tab, where you will perform the essential actions of adding content, configuring column layouts, and arranging the building blocks of your registration site.
For more on Preview and Page Options, see this article.
Understand the Page Builder interface
To begin building your page, you must first access the correct area of the system:
Open the Event Builder menu.
Click on Pages & Menu.
Find the page you wish to edit and click the Edit icon.
By default, you will be on the Edit tab, which serves as your primary workspace.
The layout is divided into several functional zones:
CSS & JavaScript: Use this section to link a CSS or Javascript file that you have previously uploaded.
Header Elements: Place fields here that need to sit outside the main registration form, such as your Login Form.
Body (Content Groups): This is the main area where you will add your 1- to 4-column layouts and dynamic elements.
Footer Elements: Add information that appears below the registration form, typically used for Interface Text.
⚠️ Some page builder elements are contextual. For example:
Login Form is only available on Landing Pages
Payment element is only available on Payment Pages
Manage Content Groups
Content groups are the structural rows of your page and can contain 1 to 4 columns. Groups can be structured independently, such as a 1-column group followed by a 3-column group.
To add a new Content Group:
Hover your mouse over the dotted line separating existing content groups in the body of the page.
Click the Add Content Group button that appears.
To configure Group Settings:
Click the Gear icon on a content group to open the group settings.
Define the Column collapse size: Choose the screen size at which columns will stack (e.g., stack below 1200px for large screens).
Enter Column CSS classes: Type multiple class names separated by spaces to apply custom styling to each column.
Set the Column size: Enter the width of each column in percentages. Note that the system does not restrict total widths from exceeding 100%.
Click Save to apply these properties.
To remove a Content Group:
Click the "X" icon on the content group.
Confirm the action to delete the group and its contents.
Note: These layout features require the Bootstrap Library to be enabled in your Page Builder settings.
Generated HTML for Content Groups
When a group is created, HTML is generated using consistent class names:
One-column group:
<div class="ip-group-container row"> <div class="ip-group-col customClasses1"> </div> </div>
Three-column group:
<div class="ip-group-container row"> <div class="ip-group-col col-lg-4"></div> <div class="ip-group-col col-lg-4"></div> <div class="ip-group-col col-lg-4"></div> </div>
The col-lg-4 class corresponds to 33% width and a collapse below 1200px breakpoint.
Width | Large (col-lg) | Medium (col-md) | Small (col-sm) | Extra Small (col-xs) |
8% | col-lg-1 | col-md-1 | col-sm-1 | col-xs-1 |
15% | col-lg-2 | col-md-2 | col-sm-2 | col-xs-2 |
25% | col-lg-3 | col-md-3 | col-sm-3 | col-xs-3 |
33% | col-lg-4 | col-md-4 | col-sm-4 | col-xs-4 |
100% | col-lg-12 | col-md-12 | col-sm-12 | col-xs-12 |
⚠️ If no width is specified, no col-* class is added to the column.
Manage Page Builder Elements
Most page builder elements function the same way, with the exception of the Interface Text element.
Each element includes:
A unique
unique_idA label (
ip-elementLabel)A container (
ip-elementContent)An input field (
ip-formText, for text fields)
Example: Email textbox element
<div unique_id="NdbapU69" class="ip-elm-textbox ip-element"> <label for="NdbapU69" isrequired="1" class="ip-elementLabel"> Email<span class="requiredSymbol">•</span> </label> <span class="ip-elementContent"> <input type="text" name="NdbapU69" id="NdbapU69" class="ip-formText"> </span> </div>
⚠️ When duplicating an entire page, elements retain their original unique_id.
To organize elements using Drag and Drop:
Click and hold an element.
Drag it to rearrange its position within the page.
Observe the drop shadow for visual feedback, and release the mouse to set the new position.
Special Element: Interface Text
The Interface Text element no longer displays HTML content directly within the page builder interface to prevent admin UI conflicts and broken HTML.
To configure Interface Text:
Add the Interface Text element to a content group.
Fill in the Label field: Enter a name to easily identify the block (this label is for admin identification only).
Enter your HTML or text in the provided content area.
By mastering the layout and configuration of your Page Builder, you achieve the goal of creating a structured, professional, and responsive registration portal. Utilizing Content Groups allows you to build sophisticated layouts that adapt to different screen sizes, while correctly managing Elements ensures your data collection is secure and your interface remains clean. Always use the Preview tab to verify how your configuration translates to the public view before going live.