Adding and Configuring Custom Profile section on a Webpage

Overview

The Custom Profile section allows users to display structured profile information on a web page using images and multiple text fields arranged in a configurable layout. Using the Web Builder, users can add and configure the Custom Profile section by defining identifiers, dependencies, layout settings, image behavior, and formatting options. This article explains how to add, configure, and manage a Custom 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 Custom Profile Section

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

3. Enter or Edit the Custom Profile Id

• Select the Custom 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 Custom 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 Custom Profile section follows the visibility rules defined for the selected version type.

6. Enter or Edit the Custom Profile Title

• Locate the Title field in the Custom Profile 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. Configure Layout Settings

• Locate the Columns to Display field and enter or edit the number of columns.
• Locate the Row Count field and enter or edit the number of rows.
• These settings control how profile items are arranged on the web page.

8. Enter or Edit Id for Individual Text Fields

• Select a text field within the Custom Profile section.
• Locate the Id field for the selected text field.
• Enter or edit the Id individually for each text field.

9. Enter or Edit Title for Individual Text Fields

• Select a text field within the Custom Profile section.
• Locate the Title field.
• Enter or edit the title individually for each text field.

10. Configure Image Accessibility and Navigation

• Select an image within the Custom Profile section.
• Enter or edit the Alt text for accessibility.
• Enter the URL, with or without the https prefix, if the image should be clickable.
• Select the Target to define whether the link opens in the same tab or a new tab.
• Repeat these steps for each image in the Custom Profile section.

11. Edit Text Using Styling and Formatting Options

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

12. Upload or Select Images

• Upload images by dragging and dropping them from your local system into the image area, or select an image using the Select Image pop-up.
• Repeat the process for each individual image.

13. Apply Formatting Options to Images

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

14. Manage the Custom Profile Section

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

15. Save and Apply Changes

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