Adding and Configuring Two Column Text on a Webpage
Overview
The Two Column Text component allows users to display content side by side in two columns on an event webpage. It is commonly used to present structured information, comparisons, or grouped content in a clear and balanced layout. This article explains how users can add and configure the Two Column Text component on a webpage using the Web Builder.
Step-by-Step Approach
1. Access the Web Builder
- From the Event dashboard, go to the Content module.
- Select the Pages submenu.
- Open the required webpage in edit mode.
2. Add the Two Column Text Component
- From the component panel, locate Two Column Text.
- Drag and drop the Two Column Text component onto the desired section of the webpage.
3. Enter or Edit the Component ID
- Select the Two Column Text component.
- In the component settings panel, enter or edit the ID field.
- The ID can be used for navigation, styling, or tracking purposes.
4. Enter or Edit the Title
- In the Title field, enter or update the title text, if applicable.
5. Select a Dependency
- From the Dependency select field, choose a dependency if required.
- The component visibility updates based on the selected dependency conditions.
6. Select Section Version Type
- From the Section Version Type select field, choose the appropriate version.
- This controls which version of the Two Column Text is displayed.
7. Edit the Two Column Text Content
- Edit the text directly in the Web Builder.
- Use the available styling and formatting options to adjust font style, alignment, spacing, or lists for each column.
8. Select Merge Tags
- From the Merge Tags select field, choose the required merge tags.
- Merge tags dynamically display event or participant data within the text.
9. Manage Two Column Text Placement
- Reposition the Two Column Text using drag-and-drop within the page layout.
- Ensure the Two Column Text placement aligns with the page design.
10. Save and Apply Changes
- Publish the webpage to apply the configured Two Column Text settings.
- Preview the webpage to validate layout, content, and behavior.