Grid

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

Teaser Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Teaser Image

Teaser Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Teaser Image

Teaser Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more


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.

2 Columns

2 Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Read more

2 Columns

2 Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Read more


Small Gutter

Small Gutter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Read more

Small Gutter

Small Gutter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Read more

Small Gutter

Small Gutter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Read more

Small Gutter

Small Gutter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Read more


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

Image Below

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Read more

Image Below

Image Below

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Read more

Image Below

Image Below

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Read more


Image Left

Image Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image Left

Image Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image Left

Image Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image Left

Image Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image Left

Image Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image Left

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

Social Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Social Icons

Social Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Social Icons

Social Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more


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

Interior

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Library

Library

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Vintage

Vintage

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Slides

Slides

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Tea Box

Tea Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Camera

Camera

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Museum

Museum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Living Room

Living Room

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Office

Office

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.


Camera

Camera

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Typography

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Portfolio App

Portfolio App

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Sneakers

Sneakers

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Corporate Identity

Corporate Identity

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Badge

Badge

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Sticker

Sticker

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Vintage

Vintage

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Workspace

Workspace

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Business Card

Business Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Flyer

Flyer

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

T-Shirt

T-Shirt

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.


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.

Header Hot

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Read more

Header Sale

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Read more

Header $10

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Read more

Header New

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Read more


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.
Translate »