Skip to main content

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

Azavista Support
Updated

Adding and Configuring Two Image Gallery on a Webpage

Overview

The Two Image Gallery component allows users to display two images side by side on a web page, each with its own title, alt text, navigation URL, target behavior, dependencies, and styling options. Using the Web Builder, users can upload or select images, configure individual image settings, control visibility, apply formatting, and manage placement within the page layout. This article explains how to add, configure, and manage a Two 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 Two Image Gallery

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

3. Enter or Edit ID

  • Select the Two 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 Two Image Gallery will display or hide 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 Two Image Gallery follows the visibility rules defined for the selected version type.

6. Enter or Edit Title

  • Locate the Title field in the Two 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 within the Two Image Gallery.
  • Locate the Alt field and enter or edit the alternative text.
  • Repeat the same steps for the second image.
  • 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 image.

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 image.

10. Upload or Select Images for Each Image

  • 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 for both 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 second image.
  • Changes are reflected immediately in the preview.

12. Manage the Two Image Gallery

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

13. Save and Apply Changes

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

Related to

Related articles