Skip to main content

How do I Add and Configure Panel section for a Web Page on the Web Builder?

Azavista Support
Updated

Adding and Configuring Panel section on a Webpage

Overview

The Panel section allows users to display grouped text content within a structured layout on a web page. Using the Web Builder, you can add and configure a Panel section by defining identifiers, titles, dependencies, section version types, individual text fields, navigation targets, and formatting options. This article explains how to add, configure, and manage a Panel section on a web page.

Step-by-Step Approach

1. Access the Web Builder

  • From the Event Dashboard, navigate to the Content module.
  • Select the Pages submenu.
  • Open the required web page in edit mode.

2. Drag and Drop the Panel Section

  • From the Components panel, locate the Panel section.
  • Drag and drop the Panel onto the desired area of the web page.
  • The Panel section is added and becomes visible in the page layout.

3. Enter or Edit the Panel ID

  • Select the Panel section to open its Settings panel.
  • Locate the Id field and enter or edit the value as required.
  • The Id uniquely identifies the Panel section on the page.

4. Select Dependency from the Dependency Select Field

  • In the Settings panel, locate the Dependency select field.
  • Choose an existing dependency from the list.
  • The Panel section displays or hides based on the configured dependency conditions.

5. Select Section Version Type

  • Locate the Section Version Type select field.
  • Select the appropriate version type.
  • The Panel section follows the visibility rules defined for the selected version type.

6. Enter or Edit the Panel Title

  • Locate the Title field for the Panel section.
  • Enter or edit the title as required.
  • The title serves as the primary identifier for the web page for both search engines and users.

7. Enter or Edit ID for Individual Text Fields

  • Select each text field within the Panel section.
  • Locate the Id field for the selected text field.
  • Enter or edit the Id value individually for each text field.

8. Enter or Edit Title for Individual Text Fields

  • For each text field in the Panel, locate the Title field.
  • Enter or edit the title as required.
  • The title helps identify and organize text content within the Panel.

9. Select Target from the Target Select Field

  • Locate the Target select field for the image or linked content within the Panel.
  • Select whether the link opens in the same tab or a new tab.

10. Edit Text Content Using Styling and Formatting Options

  • Select the text field directly on the Web Builder canvas.
  • Edit the text using available styling and formatting options.
  • Changes are reflected immediately in the preview.

11. Manage the Panel Section

  • Reposition the Panel section within the page layout using drag-and-drop.
  • Remove the Panel section if it is no longer required.

12. Save and Apply Changes

  • Save and publish the web page to apply the Panel configuration.
  • Preview the page to confirm that the Panel section displays and behaves as expected.

Related to

Related articles