Grid Widget
Create a fluid and fully responsive grid layout on the fly. The height of grid items can be matched or displayed in a dynamic grid with the same space between all grid items.
Teaser Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Teaser Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Teaser Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Columns & Gutter
You can set the number of columns that will be displayed on all device sizes and apply different gutter widths or collapse the gutter altogether.
Small Gutter
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Small Gutter
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Small Gutter
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Small Gutter
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Media Align
You can align media above or below the title, left or right of the content or display it as a teaser at the top of the grid item.
Image Below
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Image Below
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Image Below
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Image Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Image Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Image Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Image Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Image Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Image Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Image Border
Images can be displayed as rectangles, with rounded corners or as circles. You can display social links inside the overlay.
Social Icons
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Social Icons
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Social Icons
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dynamic Grid
Create a grid whose items will arrange themselves fluently and seamlessly for a gap-free multi-column layout on all device sizes and filter items by name or tag.
Interior
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Vintage
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Slides
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Tea Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Camera
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Museum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Living Room
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Office
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Panels and Badges
Set a background panel style for grid items and add a badge, for which you can also select different styles to set content off from the rest of the item.
Hot
Box Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
New
Box Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Sale
Box Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
$10
Box Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Additional Fields
Some of the elements that you can display inside a Grid widget need to be defined first by creating an additional field inside the Content Manager.
| Field | Description |
|---|---|
| Tags | Need to be created for filtering items. |
| Social Links | Available social fields are Email, Facebook, Google Plus and Twitter. |
| Badge | Set off text content visually from the rest of the item. |
Grid Options
| Layout Options | Settings | Description |
|---|---|---|
| Grid Behaviour | Match Height, Dynamic Grid | Match the height of grid items or display them in a masonry style. |
| Grid Gutter | Default, Collapse, Small | The spacing between grid columns. |
| Grid Filter | none, Text, Divider, Nav, Tabs | The navigation to filter grid items. |
| Grid Alignment | Left, Center, Right | Alignment of the filter navigation. |
| Columns Phone Portrait (Default) | 1, 2, 3, 4, 5, 6 | Number of columns on phones in portrait view. |
| Columns Phone Landscape | Inherit, 1-6 | Number of columns on phones in landscape view. |
| Columns Tablet | Inherit, 1-6 | Number of columns on tablets. |
| Columns Desktop | Inherit, 1-6 | Number of columns on desktops. |
| Columns Large Screens | Inherit, 1-6 | Number of columns on large desktops. |
| Items Panel | Blank, Box, Box-Primary, Box-Secondary, Hover, Header, Space | Choose a panel styling for the item. |
| Items Link entire panel | Link the item to the Read More URL, which you set in the Content Manager. | |
| Items Animation | None, Fade, Scale Up, Scale Down, Slide Top, Slide Bottom, Slide Left, Slide Right | The animation that will be applied to grid items when scrolling into view. |
| Media Options | Settings | Description |
|---|---|---|
| Media Display | Display the image or video of all items. | |
| Media Image | [Number] | Set the width and height of the image in pixels. |
| Media Alignment | Teaser, Above Title, Below Title, Left, Right | Define the image alignment. |
| Media Border | None, Circle, Rounded | The appearance of the images inside the Grid. |
| Overlay | None, Link, Icon, Image, Social Buttons (if enabled) | Define what will be displayed inside the overlay or hide the overlay. |
| Overlay Animation | Fade, Slide Top, Slide Bottom, Slide Left, Slide Right | The animation that will be applied to the overlay when being displayed on hover. |
| Overlay Image Animation | None, Fade, Scale, Spin, Grayscale | The animation that will be applied to the image on hover. |
| Content Options | Settings | Description |
|---|---|---|
| Text Display | Show or hide content and social buttons. | |
| Text Title Size | Default, H1, H2, H3, H4, Extra Large | Define the font size of the title. |
| Text Alignment | Left, Right, Center | Define the text alignment. |
| Link Display | Display the Read More link. The link URL is added to each item in the Content Manager. | |
| Link Style | Text, Button, Button Primary, Button Large, Button Large Primary | Set the style of the Read More link. |
| Link Text | [Text] | Define the link text. |
| Badge Display | Show or hide the badge. | |
| Badge Style | Default, Success, Warning, Danger, Text Muted, Text Primary | Set the style of the badge. |
| Badge Position | Panel, Title | Position the badge inside the panel or next to the title. |
| General Options | Settings | Description |
|---|---|---|
| Custom HTML Class | [Text] | Set a custom HTML class that will be added to the widget element in the rendered output. |
| Custom Link Target | Open all links in a new window. |