# News Grid

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

### Using the News Grid widget

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

### Step 1:

Select the **News 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%2F68G5rCFsk9LdnISwegPI%2FCompanion%20-%20news%20grid%20add.png?alt=media\&token=ad820266-5685-4e06-8135-e2b3379d7bb4)

### 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%2FXt8mk7cmYVWtH5bfun9z%2FCompanion%20-%20news%20grid%20content.png?alt=media\&token=be7f0c8a-a850-48d5-a07c-90a3c468923d)

In **General settings**, you can select a number of the columns to display the Blog 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%2FcPepwBpl4RdhTMvy8Dld%2FCompanion%20-%20news%20grid%20general.png?alt=media\&token=6d3788e4-c28d-499a-897a-85a75346b9a0)

In the **Query** section, you can set the number of the posts to display on the page, select the blog 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%2F03qFb8RxNY2LbjVOzYKl%2FCompanion%20-%20news%20grid%20query.png?alt=media\&token=deeb8923-efd6-40dc-a931-b35aed84cc03)

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

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F7siH91xWEc3GzzIMQF6y%2FCompanion%20-%20news%20grid%20layout.png?alt=media\&token=dd6c3ac4-60cb-427c-864a-4db9b0791226)

### Step 3:

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

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FfVGOAlhHB9ns0feq1jOG%2FCompanion%20-%20news%20grid%20style.png?alt=media\&token=dd4d5a48-96f3-41b4-86a1-1b813e652122)

### 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%2F1BrAvCnYO1hjdPkSQxnC%2FCompanion%20-%20news%20grid%20adv.png?alt=media\&token=ade5384b-2a38-409b-a6b7-a88496c6d74d)

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%2FTs8lcV9s4EWcNbC3uMUP%2FCompanion%20-%20news%20grid%20final.png?alt=media\&token=8e6c07bc-c1f5-4831-9847-051244269c2f)

Great job! You have done it successfully.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FErhNaIuCvFjv8TU8sptv%2FNews%20grid.gif?alt=media\&token=724d3c20-f4c6-4dbb-917f-a166daff2ee9)