Grid Layouts

Grid Layout is a way of showing items (images, pages, portfolio pages, testimonials, products and custom post types) inside a grid (list). In fact, Grid Layout is a set of post elements, their position, and their settings, which corresponds to every grid item.

 

Impreza allows to create unlimited Grid Layouts via visual drag & drop editor and use them in Grid/Listing element, Carousel element, and other similar listings

Manage all your Grid Layouts at Templates > Grid Layouts.

Grid Layout Elements #

Click on a "Plus" icon to add elements:

  • Post Image
  • Post Title
  • Post Date
  • Post Taxonomy
  • Post Author
  • Post Comments
  • Post Content
  • Post Custom Field
  • Button
  • Custom HTML
  • Horizontal Wrapper
  • Vertical Wrapper
  • Text
  • Image
  • Product data
  • "Add to cart" Button

 

Design settings #

All Design settings are the same for all elements. Read the article.

Grid Layout Templates #

Grid Layout Templates are built-in layout combinations, which can be used in any Grid / Listing element.

View All Grid Layout Templates

By default, you can use any template in any Grid/Listing via the relevant option:

If you want to customize a template, just follow the steps:

  1. create a new Grid Layout in Templates > Grid Layouts 
  2. click the "Templates" button and select the needed template
  3. apply any changes to elements and save your Grid Layout

Custom Appearance #

The following options can be used in Grid Layouts.

2592.png

Background Color #

This option sets the color of the Grid/Listing item, which corresponds to a post. It overrides the Grid Layout background color option.

Text Color #

This option sets a color of the Grid item, which corresponds to a post. It overrides the Grid Layout text color option.

Custom Size #

This option proportionally enlarges the size of the Grid item, which corresponds to a Portfolio Page. Check the examples of "BLACK ICELAND" grid item:

1x1 — default size
1768.jpeg

2x1 — size with double width
1769.jpeg

1x2 — size with double height
1770.jpeg

2x2 — double size
1771.jpeg