Skip to main content

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

Azavista Support
Updated

Adding and Configuring Four Image Gallery on a Webpage

Overview

The Four Image Gallery component allows users to display four 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, alternative text, navigation URLs, target behavior, dependencies, section version types, apply formatting options, and manage the placement of the gallery within the page layout. This article explains how to add, configure, and manage a Four 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 Four Image Gallery

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

3. Enter or Edit ID

  • Select the Four 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.
  • Select the required dependency from the list.
  • The Four Image Gallery displays or hides based on the configured dependency conditions.

5. Select Section Version Type

  • Locate the Section Version Type select field.
  • Select the appropriate section version type.
  • The Four Image Gallery follows the visibility rules defined for the selected version type.

6. Enter or Edit Title

  • Locate the Title field in the Four Image Gallery 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 Alt Text for Each Image

  • Select the first image and locate the Alt field.
  • Enter or edit the alternative text.
  • Repeat the same steps for the second, third, and fourth 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, with or without the https prefix.
  • Repeat the same steps for the remaining three images.

9. Select Target 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, third, and fourth 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 select an image using the Select Image pop-up.
  • Repeat the process individually for all four 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 the process for the remaining three images.
  • Changes are reflected immediately in the preview.

12. Manage the Four Image Gallery

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

13. Save and Apply Changes

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

Related to

Related articles