Grid add-on

Create Grid content with layout boxes, filter tags, parallax and masonry effect.

Grid Default Layout

Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Grid Center Columns

Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Grid Divider Columns

Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Grid Small Columns Gap

Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Left image position

Build Beautiful WebsitesBuild Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful WebsitesBuild Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful WebsitesBuild Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Right image position

Build Beautiful WebsitesBuild Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful WebsitesBuild Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful WebsitesBuild Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Boxed layout

Build Beautiful Websites

Title

Meta
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Build Beautiful Websites

Title

Meta
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Build Beautiful Websites

Title

Meta
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.

Lightbox Support

Build Beautiful Websites

Title

Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Build Beautiful Websites

Title

Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Build Beautiful Websites

Title

Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.

Link Type: Title/Image

Build Beautiful Websites

Title

Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Build Beautiful Websites

Title

Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Build Beautiful Websites

Title

Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.

Grid options for title alignment

Build Beautiful Websites

Title

Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Build Beautiful Websites

Title

Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Build Beautiful Websites

Title

Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.

With Filter Navigation

Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Left/Right Filter Alignment

Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Parallax on scroll

Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Build Beautiful Websites

Title

Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

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.

Information

Joomla! name is used under a limited license from Open Source Matters in the United States and other countries. WarpTheme.com is not affiliated with or endorsed by Open Source Matters or the Joomla! project