Create Grid content with layout boxes, filter tags, parallax and masonry effect.
Filter, Lightbox Image and Fullwidth image
Parallax on scroll and beauty blend mode styles
Here is a list of common content fields for Grid add-on.
|TItle||Heading to define a card title.|
|Meta||A text field used for meta text like the author or publication date.|
|Content||A text field for the main text blocks.|
|Image||An image field with an image picker.|
|Blend Background Color||Use the background color in combination with blend modes, a transparent image or to fill the area, if the image doesn't cover the whole section.|
|Image Blend modes||Apply different blend modes to your backgrounds, for example when placing them on images.|
|Use Custom Link||Enable button text with different styles|
|Button text||A text field used for button text.|
|Button Link||Enter or pick a link, an image or a video file.|
|Link opens||Choose whether or not your link opens in a new window.|
Common settings, The Common Settings contains all the specific settings for grid layout content. Here is a short overview.
|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.|
Filter settings, The Filter Settings contains all the specific settings for an add-on. Here is a short overview.
|Enable filter navigation||Enable filter navigation for gallery|
|Enable Sorting Icon||To sort items alphanumerically|
|Replace All tag||Add your text to replace the 'All' tag title|
|Style||Select the filter style. The pill and divider styles are only available for horizontal subnavs|
|Position||Position the navigation at the top, bottom, left or right. A larger style can be applied to left and right navigations.|
|Alignment||Align the navigation's items.|
|Margin||Set the vertical margin.|
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.|
Card settings, The Card Settings contains all the specific settings for an add-on. Here is a short overview.
|Style||Select on of the boxed card styles or a blank card.|
|Size||Define the card's size by selecting the padding between the card and its content.|
|Hover||Select this option to add box shadow on hover.|
Image settings, The Image Settings contains all the specific settings for an add-on. Here is a short overview.
|Enable lightbox image||Enable lightbox image on click with lightbox and caption mode|
|Alignment||Align the image to the top,left,right or place it between the title and the content|
|Align image without padding||Top, left or right aligned images can be attached to the card's edge. If image is aligned to the left or right, it will also exten to cover the whole space|
|Image Border||Select the image's border style.|
|Box Shadow||Select the image's box shadow size.|
|Hover Box Shadow||Select the image's box shadow size on hover.|
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.|