Create a Portfolio Grid Metro List page

The Metro is a special Grid style portfolio page that will take your work and display them in a stunning grid pattern.

Metro Demo

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

  1. 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.
  2. Add a title, click Publish
  3. Click BM Content Builder
    BM Content builder
  4. Click “Grid”
    Grid module
  5. Choose “Portfolio” from the “Source” selector.
    Tips: Add several single portfolios before creating the portfolio list page.
  6. Choose a category of your portfolio(project) items.
    Grid module - Source, Category
  7. 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
    Grid Module options: Column, Spacing, List type
  8. Click tab Advanced Settings, you will see the Item Style, you can select Image(with Mask) or Image + Text.
    Grid Item Style
    The 2 item layouts should be like:
    Grid Item Style Demo
  9. Click Save at the top right corner of Grid module panel, then the panel will disappear.
    Module panel save button
  10. Click save icon at the top top corner builder interface
    Save button on 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.

Was this article helpful?

Yes No

Related Articles