Grid Stack

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

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.

Lire la suite


Alternate Order

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.

Lire la suite


Alternate Order

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.

Lire la suite


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

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.

Lire la suite

Overlay Effect

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.

Lire la suite

Overlay Effect

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.

Lire la suite


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

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.

Lire la suite


Image Border

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.

Lire la suite


Image Border

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.

Lire la suite


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.
Custom Link Target Open all links in a new window.

PubliƩ dans Uncategorised

Get Widgetkit for WordPress or Joomla.

Buy Widgetkit