The Metro is a special Grid style portfolio page that will take your work and display them in a stunning grid pattern.
Please notice that the Portfolio List is different from Single Portfolio. The single portfolio show one specific project(or work) item, the portfolio list is for showcasing multiple portfolio(project) items.
Step by step
- The portfolio list is created by Page. Navigate to the Pages tab in your WordPress sidebar and click the Add New option, then you will enter the page editing interface.
- Add a title, click Publish
- Click BM Content Builder
- Click “Grid”
- Choose “Portfolio” from the “Source” selector.
Tips: Add several single portfolios before creating the portfolio list page.
- Choose a category of your portfolio(project) items.
- Config Column and Spacing, you can select(or enter) number from(into) input boxes. There are 2 boxes for each option, the 1st is for desktop, the 2nd is for mobile.
Please select an option from selector Grid Ratio, options including: 4:3, 3:2, 16:9, 2:1, 1:1, 2:3, 3:4, Auto. The Auto will be shown as the image origin ratio.
There are 3 Grid List Type options for list layout: Regular grid(demo), Waterfall(demo), and Metro(demo). Pick up Metro. ps: the single portfolio should be set with thumbnail shape
- Click tab Advanced Settings, you will see the Item Style, you can select Image(with Mask) or Image + Text.
The 2 item layouts should be like:
- Click Save at the top right corner of Grid module panel, then the panel will disappear.
- Click save icon at the top top corner builder interface
Then this page is created. There are tons of option for the Grid module, please check this tutorial about the Grid module.
Tips: It is possible to create Metro style list by Masonry Grid module also. There is a freely editor within Masonry Grid, you can directly drag&drop the thumbnails to arrange a metro layouts what you want, so it is not necessary to set thumbnail-shape for each single portfolio. But it is not possible to set Filter and Pagination work together within Masonry Grid. Please check Masonry Grid tutorials.