Porto Posts Grid Element

The Porto Posts Grid element is a flexible listing widget used in pages and Porto builders (Elementor / WPBakery). It queries post items such as posts, products, portfolio items and renders them in a configurable grid, list, or slider layout using a selected Post Mini Type Layout (a mini-template for each item).

It’s intentionally powerful: you control the content source, which posts to include, layout & responsiveness, filters, pagination, image sizes, and style (including slider controls when using Slider view).

These options determine which items are retrieved and passed to the layout.

- Post Mini Type Layout

• What it does: Choose the item template used to render each post/product (a small reusable layout you designed using Porto Post Type Builder).
• When to use: Create multiple mini layouts (e.g., product card with price, blog card with excerpt) and switch them here without changing query logic.
• Notes: The Post Mini Type must be created previously using Porto Post Type builder.

- Content Source

• Options include Posts and Terms.
• Choose the logical source depending on your page (All post types are included in Posts and taxnomies such as category, brand, tags are included in Terms).

- Post Type

• Choose the post type to query post , product , portfolio , members , or any custom post type.
• It is visible only when Posts option is set as "Posts".

- Product Status (only for products)

• Controls product lifecycle status: All , Featured , On-Sale , Pre-Order , Recently Viewed , etc.
• Use to highlight sale items or show only featured one.

- Product Visibility (products)

• Choose visibility like: Shop and Search Results , Shop Only , Search Results Only , Hidden , or Any .
• Useful to omit hidden products from public grids.

- Taxonomies

• Select taxonomy scope for the query (categories, product attributes, tags, custom taxonomies).
• Important: You can select All or All product attributes & taxonomies, or pick specific taxonomies.
• When you select a specific taxonomy, Terms control appears (below) and Post Titles option is hidden (see interaction rules).

- Terms

• Appears when a specific taxonomy is chosen. Select one or more terms (categories, attributes) for filtering.
• Use multiple terms to fine-tune results.

- Post Titles

• When you are not filtering by taxonomy, Post Titles field can be used to manually provide a list of post slugs/titles to include (manual selection).
• Hidden if you choose a specific taxonomy (terms take precedence).

- Count

• How many items to pull. Use a sensible number to avoid performance issues (e.g., 8/12/20 per page).

- Order By

• Common options: Date , Modified , ID , Menu Order , Title , Random , Price , Popularity , Rating , etc.

- Order

• ASC or DESC . For recent-first, use DESC on date .

These options control how the query results are displayed.

View

• Available rendering modes: Grid, List, Masonry, Slider (names may vary by Porto version).
• Choose Slider to enable the slider-specific options in the Style tab.

Columns / Columns on Tablet / Columns on Mobile

• Number of columns at desktop / tablet / mobile breakpoints.
• Example: 4 / 3 / 2 typical for product grids.
• Use conservative numbers on mobile for readability (1–2 columns).

Column Spacing

• Spacing (gutter) between columns. Enter px value or use provided presets.
• Small gutters for dense cards; larger gutters for airy design.

Add Half Column

• When enabled, allows certain layouts to insert a half-width item as part of creative grids — useful for asymmetric designs.
• Works best with Post Mini Type Layouts built to support half-width.

Image Size

• Controls the image size rule used for thumbnails (e.g., thumbnail , medium , large , full , or Porto presets like blog-masonry-small ).
• Match the image size to your card size for performance and correct cropping.

Show Category Filter

• Toggle a category/filter UI above grid so visitors can filter by taxonomy.
• When enabled, configure Taxonomy and optionally filter style (buttons, dropdowns, masonry filter). The filter reflects the taxonomy chosen in Posts Selector or a specific taxonomy you define here.

Taxonomy (for filter)

• Choose which taxonomy is exposed in the live filter (e.g., categories, product attributes).
• If left empty the widget will use the taxonomies of queried post types.

Pagination Type

• Controls pagination UI: None , Standard (numeric) , Load More , Infinite Scroll .
• Notes: For large product lists use Load More or Infinite for performance improvements (lazy load).

Custom Class

• Add one CSS class (or multiple space-separated) to the widget container for custom styling.

Styling and view-specific settings.

Global Visual Controls

• Spacing, background, border, and card-level typography — these depend on the chosen mini template and Porto version.
• Use Custom Class to target the grid container in CSS.

Slider Options (shown when View = Slider)

• Slides to Show (desktop / tablet / mobile)
• Slides to Scroll
• Autoplay (on/off) and Autoplay Speed
• Speed (transition ms)
• Pause on Hover
• Arrows / Dots (show navigation)
• Center Mode / Variable Width (for creative sliders)

These options let you fine-tune behavior and responsiveness for carousel presentation.

Filter Style

• When Show Category Filter is enabled, you can style the filter UI: button shapes, active color, size, spacing, alignment.
• Some versions provide filter animation (fade, slide) to change grid items on filter click.

• Taxonomy vs Titles: If you select a specific taxonomy in Taxonomies, the Terms control appears and Post Titles is hidden. Terms-based filtering overrides manual title lists.
• Post Mini Type Layout determines the visual fields available (for example product price, add-to-cart button, star ratings). If you switch Post Mini Type, layout and available display fields may change.
• Product-specific options (Product Status, Visibility) are only available when Post Type = product.
• Image Size should match your Card layout dimension. Using full on many items increases page weight—prefer cropped sizes or Porto presets.
• Pagination + Count: Count sets items per page; pagination controls navigation behavior.