PowerFolio Pro: Build Filterable Portfolio Grids

Set up portfolio content

Create a portfolio post for each project and assign categories so users can filter the displayed work by category. Use the image gallery tools for photography, artwork, products, and other visual collections. Layouts are responsive for monitors, tablets, and phones.

Add a show in your editor

In Elementor, use the portfolio widget for portfolio posts or the image gallery widget for image collections. Both provide options for the grid, hover effects, and other display settings. In Gutenberg, add the portfolio block or image gallery block and personalize the filterable grid in the visual editor.

For other page builders, place a portfolio grid with the [powerfolio] shortcode. Its generator is available from the WordPress Classic Editor screen; the shortcode shows a portfolio grid.

Choose the grid and item view

Select a boxed, masonry, or Packery layout, then select two, three, four, five, or six columns. Portfolio entries can open in a modal or on a single page. The Pro grid builder lets you set the width and height of individual gallery items for a mixed-size arrangement.

Pro display options

• Use additional grid styles, including special grids, and extra CSS effects and animations.
• Add several hover animations and transition effects.
• Place the portfolio carousel widget in suitable Elementor layouts.
• Show a specific portfolio category or display content from any post type in the grid.
• Adjust additional portfolio and gallery presentation settings.

Install and publish a portfolio

1. Upload the elementor-portfolio folder to /wp-content/extensions/.
2. Activate the plugin from the WordPress Plugins menu.
3. Open Portfolio from the WordPress main menu and choose Add New Item.
4. Create and publish portfolio items as needed.
5. Create an Elementor page or edit an existing one, then drag the portfolio widget into the layout.
6. Adjust the widget options and publish the page.

You can also add the portfolio grid with the [powerfolio] shortcode or use the relevant Gutenberg block in the block editor.