Parallax images, overlay effects, hover styles, layout mode and much more.
Overlay on hover (Icon mode)
Overlay on hover (Cover mode)
Gallery Masonry Layout
Here is a list of common content fields for Gallery add-on.
|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, The Gallery Settings contains all the specific settings for an add-on. Here is a short overview.
|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.|
Columns control the grid layout of your content.
|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.|
Create an image overlay, which comes in different styles.
|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, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
|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.|