The Portfolio widget allows you to showcase your posts, pages, and custom post types in an appealing, filterable grid.
Adding Portfolio widget
- Open the page where you want to add the widget.
- Locate the Portfolio widget in the widget panel and drag it onto the canvas.
- Configure the widget settings as described below.
Content tab
Layout
- Columns: Determine the number of columns displayed in the widget.
- Posts per page: Specify the exact number of posts to display.
- Image Resolution: Adjust the size of the images.
- Masonry: choose to enable/disable masonry layout for the widget
- Item ratio: Set the ratio of the items.
- Show title: Choose to show or hide the title, which appears when hovering over images.
- Title HTML tag: Choose a tag (H1…H6, span, div, paragraph) to wrap the title.
Query
- Source: Select the content source for the widget. Options include posts, pages, custom post types, manual selection, current query, and related content. Depending on the chosen source, you can filter the results accordingly.
- Author: filter the content by the chosen author.
- Categories (Posts Source only): order content by post categories
- Product categories and tags (Product Source only): order content by product categories & tags
-
Advanced:
Order By: Determine the order of posts. Options include Date, Title, or Random.
Order: Choose between descending (DESC) or ascending (ASC).
Exclude Posts: Choose posts to exclude from the query
Filter bar
- Show: Choose to show or hide the filter bar above the portfolio.
- Taxonomy: Select the taxonomy to display the posts. Options include Categories, Tags, and any custom post-type taxonomies.
Style tab
Items
- Columns Gap: Define the gap between columns.
- Rows Gap: Define the gap between rows of items.
- Border Radius: Adjust the border radius for images to control the roundness of corners.
Item overlay
- Background Color: Set the overlay background color when hovering over the image.
- Color: Set the post title color, which appears within the overlay when hovering over the image.
- Typography: Customize the typography of the title.
Filter bar
- Color: Set the text color of the Filter Bar.
- Active Color: Set the active text color of the Filter Bar.
- Typography: Customize the typography of the Filter Bar text.
- Space Between: Define the space between items in the Filter Bar.
- Spacing: Adjust the spacing between the Filter Bar and the images.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.