Gallery is a very effective element that allows you to show multiple images and eventually link it to some action. According to a data compiled by a social marketing tech firm, gallery element drives 10 times more traffic to an advertiser’s website than a simple image.

Using the Properties tab on the right panel, you can change the properties of the Gallery element.

Gallery: Displays the name of the gallery element. You can change the name of the gallery element by selecting it and entering the desired name.

Position: You can define the positioning of the element on the workspace. The positioning of the element is relative to the workspace.

In the following screenshot, the gallery element is placed at Zero pixels from the left edge and the top edge. It implies that the element is placed at the top left corner of the workspace.

While manually entering the values for positioning, you cannot enter decimal values.

Height and Width: You can resize an element by dragging the corner handles of the element. Alternatively, you can enter the size of the element on the size fields.

While manually entering the values for resizing, you cannot enter decimal values.

Select lock to keep the aspect ratio locked when resizing the button element.

Rotation: You can rotate the gallery element by using the rotate lever or entering the value in the angle field.

The angle field displays values from 0 to 360 when the icon is rotated. While using the rotation feature to animate the button element, values must be entered in multiples of 360 to signify how many times the rotation must happen.

Opacity: You can change the opacity of the gallery element by dragging the slider.

Solid: Allows you to change the solid background color of the button.

Gradient: Enables transcendence of different colors for the button background.

Opacity : Allows you to configure opacity of the button background.

Rotation: Allows you to configure the transcendence angle of a gradient background.

Image: Allows you to assign an image as the button background.

Select Image: Allows you to select images for the gallery element.

To select multiple images, press Shift and select images.

You can decide the order in which the images will be displayed by dragging the image one on-top-of-another in the Assets section.

To delete an image, hover over an image in the Assets section and click the bin icon.

Position: Position refers to the position of the button element on the workspace. Pinning an element to an edge instructs that element to move as the edge itself moves. When an element is pinned to non-opposing edges the distance of the element from those edges remains fixed or proportional.

You can define the position of the element as Float or Fixed.

Dimension refers to the fluidity or the fixity of the element container. You can control the resizing aspect of any element by using the two arrows in the Dimension section. When the size of the document changes, the width and height of the element container also changes. If you enable either or both the arrows, the container of the element changes accordingly in height and width. By default, both the arrows are enabled.

To change the dimension of the element in the rendered creative, perform the following:

Keep initial state as hidden: Upon page load, keeps the gallery element hidden until a configured action is not performed. You can configure the action on the Events tab. For example, even if an animation is created to fade the gallery element, it will not show till the show action is triggered.

Transition Type: Allows you to add different transition effects to the images.

Auto Animate: Allows you to set auto animate feature for the gallery element. Selecting this will start the gallery as a slideshow. Even when auto-animate is on, the gallery element accepts user interaction to swipe and move to the next or previous image.

At the End: Allows you to select one of the following two options:

Navigation arrows: Navigation arrows are the < and > arrows that are displayed for a gallery element. Clicking the arrows slides the images in the gallery to the left or right side respectively.

Show/Hide Navigation Arrows: To hide or show the navigation arrows, click the Show/Hide icon.

Horizontal and Vertical Sliders: Move the horizontal and vertical sliders to move the position of the navigation arrows on the gallery element.

Arrow Color: Allows you to change the color of the navigation arrow element.

When not in loop, and when the start or the end of images is reached, the corresponding arrows get faded out.

Page Dots: Page Dots shows that there are multiple images in the gallery element. It also shows the current image slide which you are looking at.

Page Dots: To hide or show the page dots, click the Show/Hide icon.

Vertical Slider: The dots are always positioned at horizontal center. Move the vertical sliders to move the position of the page dots on the gallery element.

Dots Color: Allows you to change the color of the page dots. The dot for the slide you are currently in, displays the color you have selected, while others dots display the same color but faded.