Adding and Configuring Profile section on a Webpage

Overview

The Profile section allows users to display profile-based content on a web page, including images and associated text fields. Using the Web Builder, users can add and configure the Profile section by defining identifiers, titles, dependencies, section version types, image settings, navigation behaviour, and formatting options. This article explains how to add, configure, and manage a Profile 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 Profile Section

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

3. Enter or Edit the Profile ID

• Select the Profile section to open its Settings panel.
• Locate the Id field.
• Enter or edit the Id value as required.

4. Select Dependency from the Dependency Select Field

• In the Settings panel, locate the Dependency select field.
• Select the required dependency from the list.
• The Profile 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 Profile section follows the visibility rules defined for the selected version type.

6. Enter or Edit the Profile Title

• Locate the Title field in the Profile section settings.
• 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 Profile section.
• Locate the Id field for the selected text field.
• Enter or edit the Id individually for each text field.

8. Enter or Edit Title for Individual Text Fields

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

9. Enter or Edit Alt Text for Each Image

• Select an image within the Profile section.
• Locate the Alt field.
• Enter or edit the alternative text.
• Repeat these steps for each image in the Profile section.

10. Enter or Edit URL for Each Image

• Select an image and locate the URL field.
• Enter the destination URL, with or without the https prefix.
• Repeat the process individually for each image.

11. Select Target for Each Image

• Locate the Target select field for the image.
• Select whether the link opens in the same tab or a new tab.
• Repeat the selection for each image in the Profile section.

12. Upload or Select Images

• Upload images by dragging and dropping them from your local system into the image area, or select images using the Select Image pop-up.
• Repeat the process individually for each image.
• The selected images are displayed in the Profile preview.

13. Edit Text Content Using Styling and Formatting Options

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

14. Apply Formatting Options to Images

• Select an image within the Profile section.
• Apply available formatting and styling options as required.
• Repeat for each image to customize the appearance.

15. Manage the Profile Section

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

16. Save and Apply Changes

• Save and publish the web page to apply the Profile configuration.
• Preview the page to confirm that all Profile content displays and behaves as expected.