Grid Layout

Grid Layouts is available in Impreza 5

Grid Layout is a way of showing posts (pages, portfolio pages, testimonials, 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.

2233.png

Impreza allows to create unlimited Grid Layouts via visual drag & drop editor and use them in:

  • Grid content element
  • Theme Options > Blog > Related Posts
  • Theme Options > Blog > Blog Home Page
  • Theme Options > Blog > Archive Pages
  • Theme Options > Blog > Search Results Page
  • Portfolio widget
  • Blog widget

Manage all your Grid Layouts on the Impreza > Grid Layouts page:

2191.jpeg

Grid Layout editor consists of an element area which represents a single item in a grid. You can move, edit, duplicate or delete every element, hover on an added element to see the controls.

2194.jpeg

Grid Layout Elements #

Click on a "Plus" icon to populate the layout with the desired elements:

2193.jpeg

Post Image #

Shows a post image. By default, it is the "Featured Image" in posts, pages, portfolio pages.

  • Show placeholder when post image is absent - when is ON, shows a colored block with the aspect ratio based on Image Size value. This block takes background color from Theme Options > Colors > Content colors > Primary Color.
  • Show media preview for posts with video, audio and gallery format - when is ON, shows:
    • video player instead of an image for posts with "Video" format
    • audio player instead of an image for posts with "Audio" format
    • image slider instead of an image for posts with "Gallery" format
  • Enable rounded image - when is ON, makes a round-shaped image. Adds CSS property "border-radius: 50%".
  • Image Size - select one of the available image sizes, read about image sizes.

Post Title #

Shows post title.

When HTML tag is h1, h2, h3, h4, h5, h6, titles use by default:

  • all font settings from Theme Options > Typography > Headings
  • color from Theme Options > Colors > Content colors > Heading Color
  • line-height equals "1.4" (at the moment hardcoded in CSS file)

When Inherit from text color option is ON, the link takes the text color value, even on hover state. Otherwise, it takes values from Theme Options > Colors > Content colors > Link Color and Link Hover Color.

Post Date #

Shows post date. You can select a date of creation or date of the last update. Also, you can customize the date (and time) format, differ from the site general settings. Check the documentation on date and time formatting.

Post Taxonomy #

Shows post taxonomy. At the moment it's possible to show:

  • Post Tags
  • Post Categories
  • Portfolio Categories
  • Testimonial Categories

When Inherit from text color option is ON, the link takes the text color value, even on hover state. Otherwise, it takes values from Theme Options > Colors > Content colors > Link Color and Link Hover Color.

Post Author #

Show the name of the post author. The name is taken from the user profile.

When Inherit from text color option is ON, the link takes the text color value, even on hover state. Otherwise, it takes values from Theme Options > Colors > Content colors > Link Color and Link Hover Color.

Post Comments #

Shows the number of post comments, like "9 comments". Always shows translated words to the site language specified in the site general settings.

When Inherit from text color option is ON, the link takes the text color value, even on hover state. Otherwise, it takes values from Theme Options > Colors > Content colors > Link Color and Link Hover Color.

Post Content #

Shows post content. Also allows showing post excerpt.

When you're using Excerpt or a part of a content, all HTML tags (including shortcodes) of a post content will be stripped.

Post Custom Field #

Shows a custom field of a post. You can select one of predefined Impreza custom fields or enter a specific name to show its value:

  • Portfolio Page: Custom Image - shows an image set in Options for Grid Layouts, read about Portfolio Page Options.
  • Testimonial: Author Name - shows the relevant value of a Testimonial.
  • Testimonial: Author Role - shows the relevant value of a Testimonial.
  • Custom Field - shows a value of any custom field.

Button #

Shows a button with a customized appearance.

Custom HTML #

Allows to place any custom code in the Grid Layout item. Added code will be located inside <div class="w-html"></div> element.

Horizontal Wrapper #

Allows displaying grid layout elements in sequence in one row.

Vertical Wrapper #

Allows displaying grid layout elements one above the other in one column.

Custom links #

Use the following examples to add a custom link to any Grid Layout element with a link

  • {{us_tile_link}} - used to add a Custom LInk of a Portfolio
  • {{us_testimonial_link}} - used to add an Author Link of a Testimonial

2328.png

Design Options #

Design options are equal for all Post elements, and available inside the "Design Options" tab when editing an element.

Absolute Positioning - when this setting is ON, the element gets "position: absolute" CSS property. This allows locating the element inside a grid item disregarding its size.

You can set specific values for 4 dimensions (top, right, bottom, left) of 4 properties (position, margin, border, padding). You're able to use px, %, em, rem units.

2237.png

Grid Layout Settings #

Grid Layout Settings affect the whole grid layout area.

  • Set Aspect Ratio - applies fixed aspect ratio for all grid items. When you switched ON the aspect ratio, all first-level elements inside a grid layout get Absolute Positioning. It's reflected by adding a red triangle in the element corner:
    2218.jpeg

  • Hide Overflowing Content - crops the elements, which can be outside the layout area. Actually, this adds CSS property "overflow: hidden".
  • Link - sets a link to the whole grid layout area. When the link is set, all grid layout elements become not clickable.
  • Background Color
  • Text Color
  • Corners Radius
  • Shadow
  • Shadow on Hover

Grid Layout Name #

Click on the title with a "Pencil" icon and enter the desired name, then click on "Save Changes" button:

2195.jpeg

Export / Import #

You can Export / Import any Grid Layout with all elements and settings. It's useful to transfer Grid Layouts between the sites.

2196.jpeg

Copy/paste the code into the and click on the "Import" button. When you import another layout, all previous elements and settings will be deleted.

2197.jpeg

Grid Layout Templates #

The template is a predefined layout of grid elements. Using a template is a good start to create your own layout.

2198.jpeg

Every template includes:

  1. Grid Layout Settings
  2. Elements position
  3. Elements settings

When you apply a template, all your previous elements and settings will be deleted.