Theme:
Impreza
Zephyr
Knowledge Base
Support Forum
Impreza Knowledge Base Grids Grid Element

Grid Element

Updated 7 months ago

Grid content settings #

The grid element is used to show a list of items (images, pages, portfolio pages, testimonials, products, custom post types, and even terms of taxonomies) with a customizable appearance. It's related to Grid Layouts.

Grid element is available in Backend/Frontend Editor.

General settings #

Show — set custom grid layout as:

  • Posts (post)
        • Ignore sticky posts — ON/OFF checkbox allows to ignore sticky posts
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width

Add or edit Button Styles on Theme Options

  • Pages (page)
        • Ignore sticky posts — ON/OFF checkbox allows to ignore sticky posts
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Order" value from "Page Attributes" box, "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width

Add or edit Button Styles on Theme Options

  • Media (attachment)
        • Images — add a custom image
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width
  • Portfolio (us_portfolio)
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on a button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width
  • Testimonials (us_testimonial)
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on a button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width
  • Custom Fields
  • Custom appearance in Grid: Images
        • Include Featured image — ON/OFF checkbox allows to include to grid images featured image
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on a button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width
  • Items with the same taxonomy of current post
        • Set taxonomy from the list as "Categories (category)", "Tags (post_tag)", "Portfolio Categories (us_portfolio_category)", "Portfolio Tags (us_portfolio_tag)", "Testimonial Categories (us_testimonial_category)", "Media Categories (us_media_category)", "Formats (post_format)"
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on a button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width
  • Items of the current query (used for archives and search results)
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on a button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width
  • More Options
  • Items with the same taxonomy of current post
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on a button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width
  • Items of the current query (used for archives and search results)
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on a button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width
  • Сhild pages of current page 
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Order" value from "Page Attributes" box, "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on a button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
        • Stretch to the full width — ON/OFF checkbox allows to stretch content to the full width
  • Manually selected items
        • Search input field — search items manually
        • Order — set order as "Date of creation", "Date of update", "Title", "Random", "Comments", "Order" value from "Page Attributes" box, "Manually for selected images and items", "Custom Field"
        • Items Quantity — set custom items quantity, 10 by default
        • Exclude Items — set custom to exclude items "None", "of previous Grids on this page", or "by the given quantity from the beginning of output"
        • Items Quantity to skip — set custom quantity of items, 1 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
        • Pagination — set pagination style as "Numbered pagination" (set a Pagination Style), "Load items on a button click", "Load items on page scroll"
        • Button Label — set a custom button title
        • Button Size — set a custom button size (Examples: 16px, 1.2rem, max( 1rem, 1vw ) )
        • Button Style — set a custom button style (Add or edit Button Styles on Theme Options)
  • Terms
  • Terms of selected taxonomy
        • Set taxonomy from the list as "Categories (category)", "Tags (post_tag)", "Portfolio Categories (us_portfolio_category)", "Portfolio Tags (us_portfolio_tag)", "Testimonial Categories (us_testimonial_category)", "Media Categories (us_media_category)", "Formats (post_format)"
        • Show child terms — ON/OFF checkboxes allows to "Show child terms" taxonomy
        • Show empty — ON/OFF checkboxes allows to "Show empty" taxonomy
        • Order — set an order as "By title", "Random", "Items Quantity", "Manually, if available"
        • Items Quantity — set custom items quantity, 10 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"
  • Child terms of current taxonomy
        • Show child terms — ON/OFF checkboxes allows to "Show child terms" taxonomy
        • Show empty — ON/OFF checkboxes allows to "Show empty" taxonomy
        • Order — set an order as "By title", "Random", "Items Quantity", "Manually, if available"
        • Items Quantity — set custom items quantity, 10 by default
        • Action when no results found — choose an action from the list as "Show the message" (No results found.), "Show the Page Block", "Hide this Grid"

Appearance settings #

Go to the Appearance tab to select the desired Grid Layout. You can override Post Image Size and Post Title Size (set in Grid Layout) for the current Grid via relevant settings. To open grid items in a popup apply an Overriding Link.

  • Grid layout — choose a custom layout from the list of templates as Grid Layouts: "Grid Layout 1", "Blog Templates": "Image & Title", "Top Image (date, comments)", "Corner Tile (category, date)", "Side Image (date, comments)", "Side Image overlapped by Title (category, date, excerpt)", "Side Circle Image (date, comments, excerpt)", "Side Float Image Left (date, excerpt)", "Side Float Image Right (date, excerpt)", "Side Image Left 2:1", "Side Image Right 2:1", "Card White (category, date)", "Card White Full", "Card Gradient (category)", "Tile Gradient (category, date, comments)", "Title First (category, date, comments, excerpt)", "Full Content (date, comments, tags)", "Blog Classic", "Blog Flat Centered", "News Templates": "Title only", "Title & Date", "Title, Date, Comments", "Gallery Templates": "Image Gallery", "Image Gallery with titles BELOW the image", "Image Gallery with titles OVER the image", "Portfolio Templates": "Portfolio 1"—"Portfolio 18", "Portfolio Compact", "Testimonial Templates": "Testimonial 1" — "Testimonial 6", "Shop Templates": "Shop Standard", "Shop Modern", "Shop Trendy". Edit selected or create a new one in Imprea — Grid Layout
  • Display as — choose display style from the list as "Regular Grid", "Masonry", "METRO (works with square items only)"
  • Center items vertically — ON/OFF checkbox allows to center items vertically
  • Ignore items custom size — ON/OFF checkbox allows to ignore items custom size
  • Items animation on load — choose animation style from the list as "None" (default parameter), "Fade", "Appear From Center", "Appear From Left", "Appear From Right", "Appear From Bottom", "Appear From Top", "Height Stretch", "Width Stretch"
  • Columns — set custom columns items as "1" to "10"
  • Gap between Items — set a gap between items (1.5rem by default)
  • Post Image Size — set a custom post image size as "As in Grid Layout", "Full Size", "150×150 cropped", "300×300", and "1024×1024". Edit image sizes in Theme Options — Image sizes
  • Post Title Size — set a custom post title size (examples: 16px, 1.2rem, max( 1rem, 1vw ))
  • Items Aspect Ratio — set a custom items aspect ratio as "As in Grid Layout", "1x1 square", "4x3 landscape", "3x2 landscape", "16:9 landscape", "2x3 portrait", "3x4 portrait", "Custom"
  • Overriding Link — set a custom link for the items as "None" (default), "To a Post", "Opens a Post in a popup", "Opens a Post Image in a popup"

Responsive Options #

  • Below screen width — set custom responsive option for mobile devices. Bellow screen width 1200px show "1 column" to "10 columns" (3 column by default)
  • Below screen width — set custom responsive option for mobile devices. Bellow screen width 900px show "1 column" to "10 columns" (2 column by default)
  • Below screen width — set custom responsive option for mobile devices. Bellow screen width 600px show "1 column" to "10 columns" (1 column by default)

How to make it rotate like a Carousel? #

Use a separate Carousel element:

How to create an Image Gallery? #

Use the Grid element to add an image gallery, set it to Show "Media (attachment)" and select the desired images from Media Library:

Once images are added, go to the "Appearance" tab and select an appropriate Grid Layout:

If you want images to zoom on click, set the "Overriding Link" to "Opens a Post Image in a popup":

Design settings #

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

Related Articles

Portfolio Grid Layout Grid Layout Templates Blog Posts List Blog Post Options Portfolio Pages Custom appearance in Grid