# Portfolio

The **Portfolio Widget** is used to display Portfolio posts on your website in different views.

### Using Portfolio widget

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

### Step 1:

Select the **Portfolio** 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%2FM06pDnYx7XyQpy9prRRI%2FCompanion%20-%20portfolio%20add.png?alt=media\&token=1f917ef7-f553-4ad1-8da6-c5c855f57548)

### 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 variations (Masonry and List views), number of the columns, and enable pagination:

![Masonry view](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FxYpv4wBB8J63DIiw3cj0%2FCompanion%20-%20portfolio%20general.png?alt=media\&token=4c0f272c-6c54-4e9f-8237-eb6de7d0e012)

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

![List view](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FS6b8Nq5rxLafyoGKiNZL%2FCompanion%20-%20portfolio%20query.png?alt=media\&token=ce35f50a-a3c4-4a17-94c9-6f3712600fa0)

In the Layout section, you can select elements to display in Portfolio list cards.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FIkAFGemBMi6n6fvXdFKy%2FCompanion%20-%20portfolio%20layout.png?alt=media\&token=699117bd-c915-426c-8de0-9c4dc68b9006)

### 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 Portfolio widget:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FtFCfn5XOETul2mtN2ISH%2FCompanion%20-%20portfolio%20style.png?alt=media\&token=3644b666-08f3-4c25-a19b-39b77f8d9369)

### 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%2F0DiteSHuMSNiSEo6dIqj%2FCompanion%20-%20portfolio%20adv.png?alt=media\&token=351f9f99-280f-4963-863a-d8e2bcd75481)

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%2FxCzOFWg3fYzJ4PZvttUc%2FCompanion%20-%20portfolio%20final.png?alt=media\&token=4e3ac009-3f28-4e13-8dac-0a2a08dfc5c4)

Great job! You have done it successfully.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FjVLYcpxDzcAzlUVlvJu9%2FPortfolio.gif?alt=media\&token=57f0cdef-72fc-4793-aeaa-c190f3087d35)