Grid Default Layout
Grid Center Columns
Boxed layout
Title
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Title
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Title
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Lightbox Support
Title
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Title
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Title
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Link Type: Title/Image
Link Type: ITEM
Grid options for title alignment
With Filter Navigation
Left/Right Filter Alignment
Parallax on scroll
Content Fields
Here is a list of common content fields for Grid add-on.
| Setting | Description |
|---|---|
| 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
Common settings, The Common Settings contains all the specific settings for grid layout content. Here is a short overview.
| Setting | Description |
|---|---|
| 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
Filter settings, The Filter Settings contains all the specific settings for an add-on. Here is a short overview.
| Setting | Description |
|---|---|
| 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. |
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. |
Card Settings
Card settings, The Card Settings contains all the specific settings for an add-on. Here is a short overview.
| Setting | Description |
|---|---|
| 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
Image settings, The Image Settings contains all the specific settings for an add-on. Here is a short overview.
| Setting | Description |
|---|---|
| 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
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. |