Scroll

Widgets - Galleries

1. Background Slider
2. Carousel Gallery
3. Grid Gallery
4. Slider widget
5. Sliding Gallery
6. Reflection Gallery
7. Slider with Thumbnails
8. Sliding click action Gallery

 

1. Background Slider widget


1. Background Slider widget allows users to create and manage the dynamic background of your website. It has the following features:

Enable Slideshow - you can enable/disable the automatic slideshow function;

Slideshow Duration (ms)  value sets the time interval for the slideshow;

Show Controls - this combo box provides three options:

- None - additional navigation features are disabled;
- Previous/Next Buttons - sets additional navigation arrow buttons. You can customize the arrows image, the hover effect, vertical and horizontal alignment (top, bottom or middle); orientation (horizontal or vertical) and enable/disable Fit Width function.
 

- Pagination - enables navigation between background images with the help of thumbnails (you can customize the thumbnails images and choose their orientation and alignment).

2. In order to add background images to your background slider, please double-click on the widget or the “Edit Widget” button on the right bottom side of Control Panel. There are two main functions available: Add Items (allows you to add new images from your Media Library) and Remove Selected (erases images from the widget's content).

2. Carousel Gallery widget

1. Carousel Gallery widget allows you to create and manage the whirling galleries on your website pages. You can set the image’s width and height, enable/disable the carousel (whirling) effect and it’s speed and manage gallery’s image style function.

Let’s take a deeper look inside this Moto CMS gallery widget:

Main Image Width & Height (px) – allows to set up the size for the gallery's central image;

Move automatically – enables/disables the whirling effect of the carousel gallery.  

Image Style – allows you to configure the color/background style of the images in the gallery

Image Hover Style – allows you to configure the style of the images in the gallery when mouse over.

Controls – allow you to configure the image’s previous or next buttons and their hover effects.

2. In order to add new images to the carousel gallery please double-click on the widget or click on the “Edit Widget” button in the right bottom side of Control Panel. There are two main functions available: Add Items (allows you to add new images from your Media Library) and Remove Selected (erases images from the widget's content).

3. Grid Gallery

1. Grid Gallery widget allows you to create and manage the thumbnail gallery on your website's pages. You can set the amount of rows and columns, enable/disable slideshow, configure thumbnails style, etc.

Let’s take a deeper look inside this Moto CMS gallery:

Rows Number – allows you to set the amount of thumbnails rows in the Grid Gallery widget;

Columns Number – allows you to set the amount of thumbnails columns in the Grid Gallery widget;

Open In – allows you to set the preview of full-size images through Lightbox or on the Background;

Controls – allow you to customize default icons for the images within the Grid Gallery.

Controls Area Style and Controls Area Hover style – allows you to customize the area’s color/background, where navigation arrow buttons are located. 

Thumbnails Style and Active Thumbnails Style – allows you to change the style of thumbnail images within the gallery (color, background, stroke etc).

2. In order to add new images to the carousel gallery please double-click on the widget or press the “Edit Widget” button in the right bottom side of Control Panel. There are two main functions available: Add Items (allows you to add new images from your Media Library) and Remove Selected (erases images from the widget's content).

4. Slider widget

1. Slider widget allows you to create and manage slider type of gallery on your website pages. You can enable/disable slideshow function, add pagination or previous/next buttons in order to improve navigation process, adjust image description and configure image properties within the slider.

Let’s take a deeper look inside this Moto CMS gallery:

General Settings – here you can enable/disable slideshow function and set the duration of showing each slide. Also you can easily enable additional navigation buttons – Previous/Next buttons and Pagination.

Previous/Next buttons – allows you to configure style, position and alignment of navigation arrow buttons within the Slider widget.

Pagination – allows you to configure style, position and alignment of pagination buttons in the Slider widget.

Image Description – allows you to configure position and alignment of image’s description, it’s block style and link button style.

Image Properties – allows you to configure image’s alignment, scaling, padding, choose animation (slide or fade effect), duration of switching images and Animate Image function – unique feature, which creates a zoom video effect for each image in the Slider widget.

2. In order to add new images to the slider widget please double-click on the widget or press the “Edit Widget” button in the right bottom side of Control Panel. There are two main functions available: Add Items (allows you to add new images from your Media Library) and Remove Selected (erases images from the widget's content).

5. Sliding Gallery widget

Sliding gallery widget allows you to create and manage the sliding galleries on your website pages. You can choose the navigation style, configure thumbnails orientation and distance among images, enable zoom function through mouse overlay, edit thumbnails style and their hover effect.

Let’s take a deeper look inside this Moto CMS gallery:

General Settings

Navigate With - you can be choose navigation with Mouse or navigation with Arrows.

Thumbnails Orientation – allow you to configure the position of thumbnails in the gallery (there can be used horizontal or vertical orientation).

Distance between images (px) – amount of space, which separates/composes images in the gallery.

Zoom Thumbnails on Hover – zoom effect will be applied to the image when mouse over.

Open In – allows you to preview full-sized images using Lightbox or Background viewer.

Thumbnail Style – allows you to choose the fill type for thumbnail images (none, solid, gradient), color/background features and configure the stroke’s features.

Thumbnails Hover Style – allows you to configure the hover effects for thumbnail images, color/background features and configure the stroke’s features.

2. In order to add new images within the sliding gallery widget please double-click on the widget or press the “Edit Widget” button in the right bottom side of Control Panel. There are two main functions available: Add Items (allows you to add new images from your Media Library) and Remove Selected (erases images from the widget's content).

6. Reflection Gallery

Reflection Gallery allows you to create unique folio with specific feature - reflective design. It means that your photos would reflect the inverted copy of themselves. 
reflect1.png

The following functions are available for the gallery:

Reflection Opacity - allows you to reduce/increase opacity, which will change the effect of reflected image within the gallery.
reflect2.png

Text Vertical Offset - allows you to change position of text description for each image (description may locate on top, center or bottom of your image).
ref2.png

Distance between images - allows you to increase/decrease gap between images in the Reflection Gallery.

7. Slider with Thumbnails

Slider with Thumbnails allows you to create wide-functional slider, which includes thumbnails, descriptions, various properties (and even animation function).
slider1.png

The following functions are available for the gallery:
slide1.png

Thumbnails section includes various instruments, where you can modify their position (vertical/horizontal), increase/decrease their height and position, configure styles for entire set of thumbnails.
slide2.png

Image Description - feature, which allows you to place useful information on the image. Also it allows you to align description's position and configure link button's style.
slide3.png

Image Properties section allows you to enable animation effects for the gallery (change it from Slide to Fade effect, manage duration of image transition and also enable/disable animate image feature itself).

8. Sliding Click Action Gallery

This gallery allows you to enable redirect option for the images within the gallery and enable various navigation styles (arrows or mouse).

action2.png

In order to enable Click Action feature you need to enter gallery's structure (you can use double-click or Edit Widget button instead). Then you need to choose necessary image and manage it's redirect option (for example, Go to Page if you wish to enable redirect to specific page or Open URL if you wish to enable redirect to external URL).
action1.png

The following functions are available for the gallery:
action3.png

Navigate with - allows you to choose navigation style (arrows or mouse cursor)

Orientation - you can choose either horizontal or vertical position for the following gallery

Distance between images - you can decrease/increase gap between images

Zoom Thumbnail on Hover - after you hover thumbnails with mouse cursor, zoom effect would be used

Thumbnail Style allows you to modify styles of your thumbnails (fill type, stroke, padding)
action4.png

Thumbnail Hover Style provides exactly the same features as Thumbnail Style
action5.png

Mouse Style - feature, which can improve/reduce loading transition time from one image to another image after you hover them with mouse cursor. The higher duration you set - the higher would be the loading transition time.
action6.png

Have more questions? Submit a request

Comments