Grid Stack
Create a two column media and text layout. You can set different alignments, alternate the order, remove spacing and add horizontal dividers between grid items.
Alternate Order
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 laboris.
Alternate Order
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 laboris.
Alternate Order
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 laboris.
Marginless
Display a different horizontal and vertical gutter or remove all spacing to create a seamless layout that adapts to all device sizes.
Overlay Effect
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 laboris.
Overlay Effect
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 laboris.
Overlay Effect
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 laboris.
Alignment
You can align media to the left or right of the content. In alternate ordering this will apply to the first item. The images can be displayed as rectangles or circles.
Image Border
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 laboris.
Image Border
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 laboris.
Image Border
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 laboris.
Additional Fields
Some of the elements that you can display inside a Grid Stack 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 Stack Options
| Layout Options | Settings | Description |
|---|---|---|
| Grid Media Width | 20% – 100% | Define the column/ width ratio of the items. |
| Grid Media Alignment | Left, Right | Define the position of the media element inside the grid. |
| Grid Alternate | Alternate the ordering media and content element. | |
| Grid Horizontal Gutter | The spacing between grid columns. | |
| Grid Vertical Gutter | Same as horizontal, Collapse, Large | The spacing between grid rows. |
| Grid Divider | Display horizontal dividers between the items. | |
| Items Panel | Add whitespace to your content. | |
| Items Content | Center content vertically. | |
| Items Animation Media | None, Fade, Slide | The animation that will be applied to the media element when scrolling into view. |
| Items Animation Content | None, Fade, Slide | The animation that will be applied to the content 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 Border | None, Circle, Rounded | The appearance of the images inside the Grid. |
| Overlay | None, Link, Icon, Image, Social Buttons | 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, Center, To Media | 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. |