Parallax images, overlay effects, hover styles, layout mode and much more.









Overlay on hover (Icon mode)






Overlay on hover (Cover mode)






Gallery Masonry Layout









Content Fields
Here is a list of common content fields for Gallery add-on.
Setting | Description |
---|---|
Image | An image field with an image picker. |
Image ALT | Insert Alt text, which is an important for SEO purposes and part of making a site accessible. |
Title | A text field used for title. |
Meta | A text field used for meta. |
Content | A text field for the main text blocks. |
Tag Name | Enter a comma-separated list of tags, for example: blue, white, black. |
Use Custom Link | Use this option if you wish to add a custom link for images instead opening it in lightbox |
Gallery Settings
Gallery settings, The Gallery Settings contains all the specific settings for an add-on. Here is a short overview.
Setting | Description |
---|---|
Enable lightbox gallery | Enable lightbox feature for gallery, default enabled. |
Enable masonry effect | The masonry effect creates a layout free of gap even if grid cell have different height. |
Parallax | To move single columns of a grid at different speeds while scrolling |
Gutter | Set the grid gutter width for columns. |
Show dividers | Select this option to separate grid cells with lines. |
Column Settings
Columns control the grid layout of your content.
Setting | Description |
---|---|
Phone Portrait/Phone Landscape/Tablet Landscape/Desktop/Large Screens | Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size. |
Overlay Settings
Create an image overlay, which comes in different styles.
Setting | Description |
---|---|
Mode: Cover/Caption/Icon | When using cover mode, you need to set the text color manually |
Display overlay on hover | Display Image content on hover |
Image Transition | Select a hover transition for the Image (support 03 styles) |
Style | Select a style for the overlay(support 07 styles) |
Text color | Set light or dark color mode for text, buttons and controls |
Padding | Set the padding between the overlay and its content. |
Overlay Positions | A collection of utility classes to position content (13 positions support). |
Margin | Apply a margin between the overlay and the image container. |
General Settings
General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
Setting | Description |
---|---|
Margin | Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom. |
Remove top margin. | Use this option to remove the add-on's top margin |
Remove bottom margin. | Use this option to remove the add-on's bottom margin |
Animation | Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on. |
Alignment | This option specifies the alignment of an add-on according to the surrounding element |
Text Breakpoint | Define the device width from which the alignment will apply. |
Visibility | Define when the add-on should be hidden. |
CSS Class | If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file. |