Skip to main content

How do I Add and Configure Three Image Gallery for a Web Page on the Web Builder?

Azavista Support
Updated

Adding and Configuring Three Image Gallery on a Webpage

Overview

The Three Image Gallery component allows users to display three images side by side on a web page, with individual configuration options for each image. Using the Web Builder, users can upload or select images, configure titles, alt text, navigation URLs, target behavior, dependencies, section version types, apply formatting, and manage the placement of the gallery within the page layout. This article explains how to add, configure, and manage a Three 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 Three Image Gallery

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

3. Enter or Edit ID

  • Select the Three Image Gallery to open its Settings panel.
  • Locate the ID field.
  • Enter a new ID or edit the existing 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 Three Image Gallery 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 Three Image Gallery follows the visibility rules defined for the selected version type.

6. Enter or Edit Title

  • Locate the Title field in the Three Image Gallery settings.
  • Enter or edit the title as required.
  • The title serves as the primary identifier for the section on the web page.

7. Enter or Edit Alt Text for Each Image

  • Select the first image in the gallery.
  • Locate the Alt field and enter or edit the alternative text.
  • Repeat the same steps for the second and third images.
  • Alt text improves accessibility and supports screen readers.

8. Enter URL With or Without HTTPS for Each Image

  • Select the first image and locate the URL field.
  • Enter the destination URL manually, with or without the https prefix.
  • Repeat the same steps for the second and third images.

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

  • Select the first image and locate the Target select field.
  • Choose whether the link opens in the same tab or a new tab.
  • Repeat the same steps for the second and third images.

10. Upload or Select Images for Each Image Slot

  • Upload an image by dragging and dropping it from your local system into the image area,
    OR choose an image from the Select Image pop-up.
  • Repeat the process individually for all three image slots.
  • The selected images are displayed in the gallery preview.

11. Apply Formatting Options to Each Image

  • Select an image on the Web Builder canvas.
  • Apply available formatting and styling options as required.
  • Repeat for the remaining two images.
  • Changes are reflected immediately in the preview.

12. Manage the Three Image Gallery

  • Reposition the Three Image Gallery using drag-and-drop within the page layout.
  • Remove the Three Image Gallery if it is no longer required.

13. Save and Apply Changes

  • Save and publish the web page to apply the Three Image Gallery configuration.
  • Preview the page to confirm that all three images display and behave as expected.

Related to

Related articles