# Posts Grid

<figure><img src="/files/mdYc49IULbk9GwjuPknf" alt=""><figcaption></figcaption></figure>

### Add & Configure

1. Open the page with **Elementor** and search for **Post Grid**.
2. Drag it onto the canvas.
3. Use the **Content** tab to choose a **Grid Layout**, **Overlay Layout**, and what to show (heading, terms, meta, icon, full-card link).
4. Open **Query** to choose **source**, **categories/tags**, **posts per page**, **sorting**, and **offset**.
5. Use the **Style** tab to design spacing, colors, typography, overlay, badges, etc.
6. Click **Update** to save.

<figure><img src="/files/sCeOUwUYEhkTo2Q1Gm1M" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/0iXVlvwj0sArmDxRSXuU" alt=""><figcaption></figcaption></figure>

### Content Tab

#### Layout

* **Grid Layout**\
  Choose one of **7** grid presets (e.g., different image/text arrangements, card styles, and gutters).
* **Overlay Layout**\
  Choose one of **3** overlay styles (e.g., *Title Only* plus two additional variants).
* **Widget Heading** *(Show/Hide)*\
  Toggle a section heading above the grid.
* **Widget Heading Text**\
  Text used when **Widget Heading** is enabled.
* **Overlay Icon** *(Show/Hide)*\
  Show an icon on image hover (e.g., play/eye icon depending on use).
* **Post Term** *(Show/Hide)*\
  Show the category/tag badge on each card.
* **Post Meta** *(Show/Hide)*\
  Show meta such as date, author, views, or comments (depending on theme settings).
* **Full Grid Link** *(On/Off)*\
  Make the **entire card** clickable (links to the single post).

> ℹ️ Available toggles/positions can vary slightly by chosen **Grid Layout** and **Overlay Layout**.

***

#### Query

Control which posts appear in the grid.

* **Source (Post Type)** – Select the type (e.g., *Posts*, *Videos* CPT).
* **Categories** – Filter by one or more categories.
* **Tags** – Filter by one or more tags.
* **Posts Per Page** – Total items to show in the grid.
* **Order By** – Date, Title, ID, Menu Order, Random, etc.
* **Order** – Ascending / Descending.
* **Offset** – Skip the first *n* posts (useful to avoid duplicates across sections).

> 💡 Combine **Categories/Tags** with **Offset** to build multi-block homepages without repeating the same posts.

***

### Style Tab

> The exact sections shown depend on the selected **Grid Layout** and **Overlay Layout**. Common controls include:

* **Grid** – Columns (desktop/tablet/mobile), row/column gap, card spacing.
* **Card** – Background, border, radius, shadow, inner padding.
* **Image** – Ratio, fit/position, hover scale, overlay color & opacity.
* **Overlay** – Background, padding, alignment; title/meta visibility & spacing.
* **Title** – Typography, color, hover color, spacing, line-clamp (if available).
* **Meta** – Typography, color, icon size/space, separator.
* **Term Badge** – Typography, text/bg color, radius, padding, position.
* **Heading (Widget Heading)** – Typography, alignment, divider/spacing.
* **Read-More / Full-Card Link** – Typography and colors (shown only when the layout uses it).

***

### Tips & Best Practices

* **Pick the layout first**, then style—some style controls are layout-specific.
* Use **Full Grid Link** for better click targets on mobile.
* Keep **meta** subtle so titles remain the main focus.
* For visual balance, set consistent **image ratios** across sections.
* Use **Offset** to prevent duplicate posts if you’re stacking multiple grids on the same page.

***

### FAQ

**Why don’t I see some Style controls?**\
Certain options only appear with specific **Grid** / **Overlay** combinations.

**Can I show only videos?**\
Yes—set **Source** to your **Videos** CPT in the **Query** panel.

**How do I change the overlay text/content?**\
Choose a different **Overlay Layout** (Content → Layout). Then style it under **Style → Overlay/Title/Meta**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stylothemes.com/urdupress/elementor/widgets/posts-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.