Summary

  • Overview
  • Adding Element
  • Adding Multiple Images to Gallery
  • Adding Items to Element
    • Add Image Icon
    • Dragging Images to Gallery
    • Adding Multiple Images by Dragging
  • Gallery
    • Gallery Columns
    • Gallery Image Gap
    • Wide Option
    • Dragging Area
  • Image
    • Double Click to Change Image
    • Replace Image By Dragging
    • SEO Alt Property For Gallery Images
    • Hover Animation
  • Text
    • Text on Image While Editing
    • Title and Text in Image Lightbox
    • Text and Animation Properties
    • Spacing Between Texts
  • Proportional Image Resize in Responsive Modes

Gallery Overview

Use the Gallery Element to output images. This Element supports image hovering, and you can add texts and hyperlinks to the Hover Box.

image-gallery-overview.png

Adding Elements to Gallery

You can add the Gallery Element from the Add Elements list in the Top Bar.

gallery.png

Adding Items to Gallery

Add Image Icon

You can add Items to the Gallery by clicking the Add Image icon.

add-icon-moved.png

Dragging Images to Gallery

You can add several images to the Gallery at once by dragging those images onto the Gallery Element.

drag-images.png

Adding Multiple Images to Gallery

You can add multiple images to a Gallery by selecting several images in the Add Image dialog.

adding-multiple-images-gallery.gif

Adding Multiple Images By Dragging

You can drag several images from the PC desktop onto a Blank Block to automatically create the Gallery Element with those images.

dragging-images.gif

Gallery

Gallery Columns and Rows

Use the Columns and Rows properties to change the number of Gallery's columns and rows. You can also modify this number from the Context Toolbar.

image-gallery-columns-rows.png

Gallery Image Gap

You can use the Image Gap property to add spacing between images. By default, the Image Gap is 10px.

image-gap.png

Wide Option

You can use the Wide option to fit the Gallery in the Block to the Page width.

gallery-wide.png

Dragging Area

You can move the Gallery by dragging it by the area around this Element.

gallery-dragging-area.png

Image

Double Click to Change Image

You can double-click the Gallery Image to change it.

double-click.png

Replace Image By Dragging

You can replace the Gallery Images by dragging other ones from the desktop.

drag-image-to-gallery.gif

SEO Alt Property

The Gallery Images are SEO friendly, so search engines and can index them. When you add the Image Title, the SEO Alt option is filled automatically.

seo-alt.png

Hover Animation

You can have the Zoom Effect on the Gallery Images on Hover.

gallery-image-animation.png

Example:

gallery-image-zoom.gif

Image Lightbox

You can set the Image Lightbox property to open the large Image view on click.

image-gallery-lightbox.png

Text

Text on Image While Editing

While editing the Title or Text in the Property Panel, you can see the Element changes directly in the Editor.

hover-texts.gif

Title and Text in Image Lightbox

You can see the Title and Description of the Image in the Lightbox.

title-text-lightbox.png

Text and Animation Properties

We have combined the Text and Animation properties into one panel. Now you can view the Hover Text for the current Image without hovering the mouse on it.

text-animation.png

Spacing Between Texts

You can use the Spacing property to separate texts.

spacing-between-texts.png

Gallery Rows

Now you can specify the number of Rows for the Gallery.

image-gallery-rows.gif

Proportional Image Resize in Responsive Modes

The Gallery Image resized proportionally in the Mobile Views.

proportional-resize.png

## Summary - Overview - Adding Element - Adding Multiple Images to Gallery - Adding Items to Element - Add Image Icon - Dragging Images to Gallery - Adding Multiple Images by Dragging - Gallery - Gallery Columns - Gallery Image Gap - Wide Option - Dragging Area - Image - Double Click to Change Image - Replace Image By Dragging - SEO Alt Property For Gallery Images - Hover Animation - Text - Text on Image While Editing - Title and Text in Image Lightbox - Text and Animation Properties - Spacing Between Texts - Proportional Image Resize in Responsive Modes ## Gallery Overview Use the Gallery Element to output images. This Element supports image hovering, and you can add texts and hyperlinks to the Hover Box. !image-gallery-overview.png! ## Adding Elements to Gallery You can add the Gallery Element from the Add Elements list in the Top Bar. !gallery.png! ## Adding Items to Gallery ### Add Image Icon You can add Items to the Gallery by clicking the Add Image icon. !add-icon-moved.png! ### Dragging Images to Gallery You can add several images to the Gallery at once by dragging those images onto the Gallery Element. !drag-images.png! ## Adding Multiple Images to Gallery You can add multiple images to a Gallery by selecting several images in the Add Image dialog. !adding-multiple-images-gallery.gif! ### Adding Multiple Images By Dragging You can drag several images from the PC desktop onto a Blank Block to automatically create the Gallery Element with those images. !dragging-images.gif! ## Gallery ### Gallery Columns and Rows Use the Columns and Rows properties to change the number of Gallery's columns and rows. You can also modify this number from the Context Toolbar. !image-gallery-columns-rows.png! ### Gallery Image Gap You can use the Image Gap property to add spacing between images. By default, the Image Gap is 10px. !image-gap.png! ### Wide Option You can use the Wide option to fit the Gallery in the Block to the Page width. !gallery-wide.png! ### Dragging Area You can move the Gallery by dragging it by the area around this Element. !gallery-dragging-area.png! ## Image ### Double Click to Change Image You can double-click the Gallery Image to change it. !double-click.png! ### Replace Image By Dragging You can replace the Gallery Images by dragging other ones from the desktop. !drag-image-to-gallery.gif! ### SEO Alt Property The Gallery Images are SEO friendly, so search engines and can index them. When you add the Image Title, the SEO Alt option is filled automatically. !seo-alt.png! ### Hover Animation You can have the Zoom Effect on the Gallery Images on Hover. !gallery-image-animation.png! Example: !gallery-image-zoom.gif! ## Image Lightbox You can set the Image Lightbox property to open the large Image view on click. !image-gallery-lightbox.png! ## Text ## Text on Image While Editing While editing the Title or Text in the Property Panel, you can see the Element changes directly in the Editor. !hover-texts.gif! ### Title and Text in Image Lightbox You can see the Title and Description of the Image in the Lightbox. !title-text-lightbox.png! ### Text and Animation Properties We have combined the Text and Animation properties into one panel. Now you can view the Hover Text for the current Image without hovering the mouse on it. !text-animation.png! ### Spacing Between Texts You can use the Spacing property to separate texts. !spacing-between-texts.png! ### Gallery Rows Now you can specify the number of Rows for the Gallery. !image-gallery-rows.gif! ## Proportional Image Resize in Responsive Modes The Gallery Image resized proportionally in the Mobile Views. !proportional-resize.png! ##