Portfolio Widget

The Portfolio Widget allows you to show off your work in a neat grid. The widget makes use of a customizable project type filter. When a project type is selected, only the projects from that category are listed. The projects can be displayed with either the default or gallery designs.

DEMO


For help with setting up the portfolio, please refer  Setup Portfolio.


Title : Enter the widget title.

Select Projects : 

  • Click the Build post query button. This opens up the post query interface.
  • Under Post type make sure to select Projects.
  • If you want to display only a few projects click the Select Posts. Then just make a list of the projects you want.
  • Under Posts per page input -1 to show all projects.
  • Modify the form further as you see fit. Then click the Save Query button.

Design

Theme : Choose between the default and gallery layouts.

Enable Sorting : If checked you will have the project filtering with Project Types.

Show all Text : Display link to show all items

Label for showing all Toggles : This will be the first item in the filter list and will be active when the page loads.

Icon : This icon will appear at the center of the project on mouse hover.

Number of columns : This defines the maximum number of columns to display. The widget is responsive, so the columns will automatically change based on the screen width.


Styling

Filter List Theme : These options will display the filter list with different styles.

Filter List Color : The color will typically be used for the text. Will vary by theme chosen.

Filter List Highlight Color : The color will typically be used for the background. Will vary by theme chosen.

Filter List Position : You can have the filters on the left, center or right.

Text Alignment : This applies to the toggle title. You can align it left, center or right.

Remove Spacing between projects : Remove margins between projects.

Background Color : Choose the background color for the title and project types.

Image Hover Color : Choose the background color for project image.

Image Hover Opacity : Choose a value between 0 and 1. 0 is transparent & 1 is opaque.

Icon Color : Select the icon’s color.

Project Name Color : Select the project name’s color.

Project Types Color : Select the project type’s color.