Adding and Configuring Image + Text on a Webpage

Overview

The Image + Text Image Gallery component allows users to display an image alongside descriptive text on a web page. Using the Web Builder, users can add and configure the Image + Text component by defining identifiers, titles, image settings, navigation behaviour, dependencies, section version types, and formatting options. This article explains how to add, configure, and manage an Image + Text Image Gallery 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 Image + Text Component

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

3. Enter or Edit ID for Text and Image Sections

Select the Image + Text component to open its Settings panel.
Locate the ID field for the Image + Text section and enter or edit the value as required.
Locate the ID field for the text areas and enter or edit the value as required.

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 Image + Text component displays or hides based on the configured dependency conditions.

5. Select Section Version Type from the Section Version Type Select Field

Locate the Section Version Type select field.
Select the appropriate section version type.
The Image + Text component follows the visibility rules defined for the selected version type.

6. Enter or Edit Title for Text and Image Sections

Locate the Title field for the Image + Text section and enter or edit the title as required.
Locate the Title field for the text areas and 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 Alt Text for the Image

Select the image section within the Image + Text component.
Locate the Alt field and enter or edit the alternative text.
Alt text improves accessibility and supports screen readers.

8. Enter URL With or Without HTTPS for the Image

Locate the URL field in the image settings.
Enter the destination URL manually.
The URL can be entered with or without the https prefix, based on your configuration.

9. Select Target from the Target Select Field for the Image

Locate the Target select field.
Select whether the image link opens in the same tab or a new tab.

10. Upload or Select an Image

Upload an image by dragging and dropping it from your local system into the image area, or
Click Select Image to choose an image from the Select Image pop-up.
The selected image is displayed in the component preview.

11. Edit Text Content Using Styling and Formatting Options

Select the text section on the Web Builder canvas.
Edit the text using available merge tags, styling, and formatting options.
Changes are reflected immediately in the preview.

12. Apply Formatting Options to the Image

Select the image on the Web Builder canvas.
Apply available formatting and styling options as required.
Adjustments are reflected in real time.

13. Manage the Image + Text Component

Reposition the Image + Text component using drag-and-drop within the page layout.
Remove the Image + Text component if it is no longer required.

14. Save and Apply Changes

Save and publish the web page to apply the Image + Text configuration.
Preview the page to confirm that the image and text display and behave as expected.

Related to