Portfolio Widget (Pro)

The Portfolio Widget allows you to display your posts, pages, and custom post types in an attractive, filterable grid.

Note: The Portfolio widget ONLY works with posts, pages, and custom post types. The Portfolio widget does NOT work with Galleries.


Content

Layout

  1. Columns: Set the number of columns displayed in the widget
  2. Posts count: Set the exact amount of posts to be displayed in the widget
  3. Image size: Set the size of the images
  4. Item ratio: Set the ratio of the items
  5. Show title: Choose whether to show or hide the title. The title will display while hovering over the images
  6. Title HTML tag: Wrap the title with a tag, either H1…H6, span, div or paragraph

Query

Source: Select the source from which the widget will display the content. Options include posts, pages, custom post types if available, manual selection, current query, and related. Depending upon which source you’ve chosen for the query, you’ll be given options which allow you to filter the results.

Include
  1. Include By: Term or Author, then use Search and Select to choose which ones to use
  2. Date: Select from All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates) 
  3. Order By: Set the order in which the posts will be displayed. Options include: Date, Title, Menu Order, or Random
  4. Order: DESC (descending) or ASC (ascending)
  5. Ignore Sticky Posts: Yes or No
  6. Query ID: Give your Query a custom unique ID to allow server side filtering
Exclude
  1. Exclude By: Current Post, Manual Selection, Term, or Author, then use Search and Select for Manual,Term, or Author choices
  2. Avoid Duplicates: Yes or No – Choose Yes to avoid displaying duplicate posts on the frontend only. Elementor looks for duplicates at the page level (not at the widget level) given that there cannot be duplicates in a Posts widget.
  3. Offset: Use this setting to skip over posts (e.g. “2” to skip over 2 posts)
  4. Date: All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates)
  5. Order By: Date, Title, Menu Order, or Random
  6. Order: DESC (descending) or ASC (ascending)
  7. Ignore Sticky Posts: Yes or No
  8. Query ID: Give your Query a custom unique ID to allow server side filtering. See the developer docs for more information on how to use this advanced feature.

Filter Bar

  1. Show: Set whether to show or hide the filter bar above the portfolio
  2. Taxonomy: Choose the taxonomy from which to display the posts. Options include: Categories, Tags, and any custom post type taxonomies

Style

Items

  1. Item Gap: Set the exact gap between the items
  2. Rows Gap: Set the exact gap between rows of items
  3. Border Radius: Set the border radius for the images to control corner roundness

Item overlay

  1. Background Color: Set the background color of the overlay when you hover over the image
  2. Color: Set the post’s Title color. The title appears within the overlay when you hover over the image
  3. Typography: Customize the typography of the Title

Filter bar

  1. Color: Set the color of the Filter Bar text
  2. Active Color: Set the color for the Filter Bar’s active text
  3. Typography: Customize the typography of the Filter Bar text
  4. Space Between Items: Set the space between the items in the Filter Bar
  5. Filter Spacing: Set the spacing between the Filter Bar and the images

Advanced

Set the Advanced options that are applicable to this widget

Note: Featured images must be used in your posts for any images to show up in the Portfolio widget.

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email
Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page