# Services Grid

The **Services Grid** **Widget** is used to display **Services** posts on your website in grid view.

### Using the Services Grid widget

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

### Step 1:

Select the **Services 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%2FEIvLwQoZId36jJ0rm5v3%2FCompanion%20-%20services%20grid%20add.png?alt=media\&token=6ff15411-7dcd-4d6a-aa6e-6278f2a73873)

### 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.

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

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FMK6OQKnHHrB778FoVKO2%2FCompanion%20-%20services%20grid%20general.png?alt=media\&token=d7e7ad53-278e-4022-b656-520539621bdc)

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%2FeE4cIO5EPoKkS9CVTxpy%2FCompanion%20-%20services%20grid%20query.png?alt=media\&token=332ba042-5feb-4619-9725-8b91953d8049)

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%2FACHYzFa7zw3upnjKEKIv%2FCompanion%20-%20services%20grid%20layout.png?alt=media\&token=264672d0-2559-4d67-9985-bbe62c545dda)

### Step 3:

Now, by clicking on the Style Tab you can customize the text color, typography, margin, padding, border, and many more for used elements in different screens resolutions:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FPiWhOYfhlVhMFBppDQak%2FCompanion%20-%20services%20grid%20style.png?alt=media\&token=d0331eb4-8f99-4abe-90f6-9a3843f9f187)

### 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%2F07zfDIBrsZf3qZmVszNO%2FCompanion%20-%20services%20grid%20adv.png?alt=media\&token=97323200-51e5-43bd-aa12-81a6d12355c3)

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%2FtkQNwWeTLm0OLVbLyFJm%2FCompanion%20-%20services%20grid%20final.png?alt=media\&token=6b10dc21-15f4-4342-aca6-de2aa8f306ff)

Great job! You have done it successfully.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F4DgcpWnUq2VqBddVanuw%2FServices%20Grid.gif?alt=media\&token=84acf9d1-05f9-4fdd-b3d2-6a771ed1cbc2)