Adding and Configuring Two Column Grid on a Webpage

Overview

The Two Column Grid component in the Web Builder enables users to organize content into two parallel columns, making layouts more structured and visually balanced. Users can configure key properties such as ID, Title, Dependency, and Section Version Type, as well as manage nested components like sections, buttons, and forms. This ensures flexibility and consistency in page design.

Step-by-Step Approach

1. Add the Two Column Grid Component

• Navigate to the Web Builder and open the desired web page.
• Locate the Two Column Grid component in the components panel.
• Drag and drop the component onto the page.

2. Configure the Two Column Grid Properties

• Click on the Two Column Grid to open its settings panel.
• Enter or edit the following:
  • ID: Assign a unique identifier.
  • Title: Provide a meaningful title.
  • Dependency: Select an option from the Dependency dropdown.
  • Section Version Type: Choose the appropriate version type.

3. Add Components Within the Grid

• Within each column, drag and drop components such as:
  • Additional Sections
  • Buttons
  • Forms

4. Configure Each Added Component

For every component added inside the Two Column Grid:

• Enter or edit:
  • ID: Provide a unique identifier.
  • Title: Add a descriptive name.
• Select:
  • Dependency: Choose from the Dependency dropdown.
  • Section Version Type: Select the appropriate version type.

5. Configure Component-Specific Settings

• Click on each added component (Section/Button/Form).
• Configure its specific properties based on its type, such as:
  • Content or text
  • Actions (for buttons)
  • Form fields and validations (for forms)
• Ensure all configurations are saved correctly.

6. Reposition the Two Column Grid

• Click and hold the Two Column Grid component.
• Drag it to the desired location on the page.
• Drop it to update its position within the layout.

7. Remove the Two Column Grid

• Select the Two Column Grid component.
• Click on the Delete/Remove option.
• Confirm the removal to delete it from the page.