Features Editing in Mobile Editor: Gallery


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

A feature can be placed into different blocks. To add the feature:

  • Select the block to place the feature:

  • In the Mobile Editor, click Build at the bottom:

  • In Features, click on the feature you would like to add (in our case, Gallery):

  • The feature will be added to the top of the selected block:

Customizing Gallery

To customize any feature, tap on it to display the editing menu.

Gallery Settings

You can modify the Layout and Design settings of the Gallery. To access the Settings:

  • Click on the Gallery, and select the Edit button at the bottom:

  • Switch between Layout and Design tabs:

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 Spacing

Modify Spacing for 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:

Design Tab

Aspect Ratio

Please Note: The feature 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 on the right of the Background 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 feature, website visitors can view the full-size image by clicking on it. To enable the On Click Enlarge feature for all images in the Gallery:

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

Please Note: The On Click Enlarge feature 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 feature allows customers to add borders to images and change their color settings.

To enable the Gallery Border feature:

  • Go to the Design tab on the toolbar.
  • Change the value in the Slide Control to set the border width.
  • To change the border color, click the Square icon on the right to 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 feature is disabled.

You can change a separate Border Location by clicking a special Icon and choosing a preferable option among:

Choose a Border Location:

Gallery Border Radius

The Gallery Border Radius settings allow changing the border radius of 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:

  • Select the desired corner from the drop-down menu:

Please Note: Gallery Border 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 feature allows adding shadows to images in Gallery.

To enable the Gallery Shadow feature:

  • Change the value in the Slide Control to set the shadow intensity.
  • Click the Square icon on the right of 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 feature is disabled.

Hover Effects

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

To enable the Gallery Hover:

  • Enable the Hover Effects toggle. 
  • Choose Hover Animation in the drop-down (Scale, Shine, Grayscale, Sepia, Blur).

To save your changes, click the Done button.

Adding and Rearranging Images

To add an image to your Gallery:

  • Click on the Gallery feature:

  • Click on the Edit button on the bottom open Gallery settings:

  • Click Add Photo to open the Upload Image dialog:

  • A dialog with different options to upload photos will open (Upload from your device, add from My Photos or Clouds, or use Free Photos):

  • Select the desired image by clicking on it:

  • Click the Select button to add the selected image:

  • The photo will be uploaded right away:

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

Remove the Photo

To remove a photo from the Gallery, click on it and click [x] that appears in its top-right:

Replace a Gallery Image

  • Select the image you want to replace and click the Replace icon:

Choose the variant on how you want to change the image: Upload from your computer, add from My Photos or Clouds, or use Free Photos:

  • Select the desired image by clicking on it:

  • Click the Select button to add the selected image:

Add Alt Text to a Gallery Image

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

  • Click the Text icon on the Tooltip to open the Alt Text Toolbar.
  • 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).

Add a Link to a Gallery Image

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

  • Click the Link icon on the Tooltip 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.