Elements Editing in Mobile Editor: Gallery

This article will showcase how to edit elements in Mobile Editor. For convenience and visibility, we will use the Gallery element as an example. Other elements have similar editing flow, although their editing toolkit may vary.

Table of Contents

Adding Gallery Element

Adding elements is currently unavailable within the Drag and Drop Grid Grid functionality on Mobile Editor. You can only edit, move, and rearrange existing elements. Please switch to a desktop version to be able to add new elements.

Resizing Gallery

Please refer to the Elements Management in Mobile Editor (Drag and Drop Grid) article to learn more resizing elements.

To edit, move, or layer the element, tap on it and switch between the buttons that appear in its toolbar:

Editing Gallery

  • Switch between the Layout and Style tabs to modify the element:

Adding and Rearranging Images

To add an image to your Gallery:

  • Tap on the Gallery element.
  • Tap on the Add Photo icon in the toolbar to open the Image Library:

  • Tap on Upload Photos to open the Upload Image dialog:

  • A dialog with different options to upload photos will open (Upload from your device or add a Photo URL):

  • Click the Select button to add the selected image:

  • The photo will be uploaded right away.

Please Note: Your interface for image upload may differ if your plan doesn't include the Image Editor functionality.

  • To rearrange images in the Gallery, tap on an item, then drag and drop it onto the desired place.

Removing the Image

To remove a photo from the Gallery, tap on it and tap on Remove [Bin] that appears in the toolbar:

Replacing the Image

  • Tap on the Image icon on the toolbar, and select Change Image:

  • Choose the variant on how you want to change the image: Upload from your device or add a Photo URL.

Adding Alt Text

To improve the SEO ranking of your website, you can add the image's Title and Description.

  • Tap on the Image icon in the bottom toolbar and swipe to the Alt Text section:

  • Add the Title (which will be seen by hovering over the image on the Published website).
  • Add the Description (will be seen only in Metadata).

Adding a Link 

You can link the image to any page of your website, an external URL, file, email, or phone via these steps:

  • Tap on the Link icon on the bottom toolbar to open the Link Settings:

  • Choose the type of the link: Page, Anchor, URL, File, Email Address, or Phone Number.
  • Specify the link.

If you want website visitors to open this link in a new tab, turn on the Open in the New Tab toggle.

Gallery Layout Tab

Type

You can change the appearance of the Gallery by switching between Grid and Masonry types. 

Please Note: For Masonry type, pictures should be different sizes.

  • Grid type:

  • Masonry type:

Photo Gap

Modify the Gap between images in your Gallery. Drag the Slide Control to increase or decrease padding between the photos:

Photo Size

Change the value in the Slide Control to increase or decrease the size of images in the Gallery:

The number of pictures in a row depends on the selected photo size.

Gallery Style Tab

Aspect Ratio

Please Note: The element is available only for the Grid layout type.

  • Select the width-to-height ratio for the image placeholders in the Gallery among Square, Standard, Standard (vertical), Four-three, Three-four (vertical), Widescreen, Anamorphic Widescreen:

Show Caption

You can add a Caption for all images in the Gallery. To set the Caption:

  • Enable the Show Caption toggle:
  • Change the Caption Text by clicking the Image Caption phrase below the image in your Gallery and editing or re-writing it.

You can also change the Background for the Caption:

  • Click the Square icon to open the color picker.
  • Select the overlay color and drag the control to set the Opacity level for the Caption Background.

On Click Enlarge

With the On Click Enlarge, website visitors can view the full-size image by clicking on it. To enable the On Click Enlarge for all images in the Gallery:

  • Turn on the On Click Enlarge toggle.
  • Select the Theme in the drop-down below. You can set an image to display with the Light or Dark theme on the published website.

Please Note: The On Click Enlarge functionality is unavailable for an image if it is linked to a page, anchor, URL, etc. It won't affect other images in a Gallery.

Gallery Border 

The Border element allows customers to add borders to images and change their color settings.

  • Change the border width with the Slide Control.
  • To change the border color, click the Square icon above the Slide Control.
  • Select the overlay color and drag the control to set the Opacity level for the Border.

Please Note: If the value on the Slider Control is set to zero, the Gallery Border element is disabled.

You can change a separate Border Location by clicking a special Icon and choosing a preferable option among: Top, Right, Bottom, Left:

Gallery Corner Radius

The Gallery Corner Radius setting allows changing the corner radius of the images in the Gallery. Use the Slider Control to configure the radius.

  • Choose a range of radius for all corners:

  • You can change a separate range of radius by clicking a special Icon and choosing a preferable option among:Top left, Top right, Bottom right, Bottom left:

Please Note: Gallery Radius is calculated as a percentage and is shown as a numeric value in the Slider Control. At 0%, the customer will get a square image at 50% - maximum roundness.

Gallery Shadow

The Gallery Shadow allows adding shadows to any image in settings with a shadow toolbar.

  • Change the value in the Blur slide control to set the shadow intensity.
  • Click the Square icon above the slide control to open the color picker.
  • Select the overlay color and drag the control to set the Opacity level for the Shadow.

Please Note: If the value on the Slider Control is set to zero, the Gallery Shadow element is disabled.

Hover Effects

Hover Effects add dynamic visual effects to the website. They help to create more engaging and modern experiences for visitors.

  • To enable gallery hover effect, choose hover animation in the drop-down: Scale, Shine, Grayscale, Sepia, Blur.

Moving Gallery

To move an element:

  • Select an element you want to move by tapping on it and choosing the Move Above or Move Below buttons that appear in its toolbar:

  • The element will be moved to a new place. 

Layering the Gallery

To layer elements within Mobile Editor, follow these steps:

  • Tap on the element and select Move Forward or Move Backward options:

Please Note: The Move Forward or Move Backward options are available only when one element was previously added on top of another in a Desktop view.