# Cases Grid

The **Case** Grid **widget** is used to display Cases post type on your website in grid view.

### Using the Cases Grid widget

Go to your site and start editing the page with Elementor.

### Step 1:

Select the Cases Grid widget from the menu bar on the left-hand side of your screen then drag and drop it into the selected area.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FoKvh9Tx5I6ptsyh1nljf%2FCompanion%20-%20case%20grid%20add.png?alt=media\&token=45bf0091-53b1-4101-8a28-d2433b70b1eb)

### Step 2:

You will get a window with the basic setting options under the **Content** tab. It will give you three options: General, Query, and Layout.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F16xoWxpWP8WwSDoeGyLn%2FCompanion%20-%20case%20grid%20content%20tab.png?alt=media\&token=0472f5f6-9f18-47a1-8eab-2c1be8a5c514)

In **General settings**, you can select a number of the columns to display the Services post type, set space between items, and enable pagination:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FhchubCe9rx3JvKCb7TtB%2FCompanion%20-%20case%20grid%20general.png?alt=media\&token=13e70d10-0bea-4789-9302-9742adf1a498)

In the **Query** section, you can set the number of the posts to display on the page, select the services category to display selected posts and order them.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FuWKEhWyZFdzYzPt1mK3k%2FCompanion%20-%20case%20grid%20query.png?alt=media\&token=535a06f2-afed-4e61-a3b1-22efb4b778a3)

In the Layout section, you can select elements to display in Services grid cards.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FgeoPKcBaAbdvwvvyLPCw%2FCompanion%20-%20case%20grid%20layout.png?alt=media\&token=90bb726a-a1b7-4e78-8cad-1c336f4c783d)

### Step 3:

Now, by clicking on the Style Tab you can customize the text color, typography, margin, padding, and many more for the Image, Categories, Title, Excerpt, and Show more buttons.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F8TX1e67t3GaejtyEXUAd%2FCompanion%20-%20case%20grid%20style.png?alt=media\&token=f040a38e-f9f9-4e43-ba00-3dfc507b9a0f)

### Step 4:

If you want to add motion effects, background, or make the page responsive, click on ‘Advanced**’** to explore those options. This **‘Advanced’** tab is a default feature of Elementor. Give a read to [this Document](https://docs.elementor.com/article/571-advanced-tab) to know more about Advanced features and their uses.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FZze2mx6mSdZqxdn8eVuW%2FCompanion%20-%20case%20grid%20adv.png?alt=media\&token=fea5d2e8-1700-49cd-aa80-78a4cbd67b7c)

Finally, after completing all the customization click on ‘Publish’ to see your work live.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FLzjF2ywrz3a8KX5xS4J7%2FCompanion%20-%20case%20grid%20final.png?alt=media\&token=5b43794a-c762-48b4-a2ee-86072204a5ca)

Great job! You have done it successfully.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FF0rhE7thuDVPumNqSsGy%2FCases%20Grid.gif?alt=media\&token=bebb9dfd-d774-49dd-bb7f-39f670a04888)