04. Page Builder & Shortcodes - Portfolio Grid

Portfolio Grid

This shortcode allows the display in your page all Team custom post type posts. Now see all options available for this shortcode:

  • Portfolio Layout Mode - Choose the portfolio layout, you can choose between Grid and Masonry.
    Remember to select the Full-Width Section and enabled the No Margin and Padding option.
  • Portfolio Module - You can select between two module. The first is the "Classic" this option open the portfolio links into a respective single portfolio post. If you selected the second choice "Creative" when you click the portfolio link, these appear in a creative and navigable pop-up (see the video in the bottom of the page).
  • Creative Module for Mobile/Tablet devices - You can disable the creative module for mobile and tablet devices, if disabled the portfolio posts works like classic module.
  • Columns - Simple select your columns for portfolio grid or masonry layout. Available from 2 up to 6 columns for grid layout and for masonry up to 4 columns.
  • Featured Image Size - You can change the size of featured image on the fly based on your columns selected ( 2 to 6 columns ) for grid layout. By default is set to 700x700. For masonry layout the theme does all the resizing, so if you upload various image with custom sizes, the theme will detect which is the best width for it ( see below the difference ).
  • Colorize Effect - Enable or Disable the Colorize Effect. You can set different hover color for each single portfolio post. You can set the colors in Portfolio Metabox inside the respective single portfolio post.
  • Sorting and Filtering - Enable the Isotope sorting and filter.
  • Exclude Portfolio Category ID Filter - If you want to exclude only certain portfolio categories from filter, please write the project-category ID in this field, separated by commas. Please use the project-category ID, not the title or slug. How to find Category ID
  • Pagination - Select your favorite pagination mode between Classic ( numeric pagination ) or Infinite Scroll. The infinite scroll not work if you have enabled the Portfolio Creative Module.
  • Portfolio Post Number - Select how many post to show in the current page. Insert a number.
  • Portfolio Post Category - If you want to show only certain portfolio categories, not the entire portfolio posts, please write the categories in this field, separated by commas. Please use the project-category slug, not the title.
  • Exclude Portfolio Post Category - If you want to exclude only certain portfolio categories and show the others portfolio posts, please write the categories in this field, separated by commas. Please use the project-category slug, not the title.
  • Order by - Select how to sort retrieved posts. More at WordPress codex page.
  • Order way - Designates the ascending or descending order.

Note you can order the post via shortcode with this default wordpress parameters or use the Simple Custom Post Order plugin with drag and drop feature.

About Featured Image

You can change the size of featured image on the fly when you insert into your page/post the "Portfolio Grid" shortcode.

  • Grid Layout - If you select this layout inside the portfolio grid shortcode you can select your featured image size based on your columns selected ( 2 to 6 columns ). By default is set to 700x700.
  • Masonry Layout - If you select this layout the theme does all the resizing, so if you upload various image with custom sizes, the theme will detect which is the best width for it. The columns available for this layout is from 2 to 4 columns. When you upload an image the theme will always search for the highest occurence of a 480 multiplier ( 480, 960, 1440, 1920, etc. ). The images will be positioned vertically in the space available.

    - If you upload an image size 550x550 the theme resize to 480x480.
    - If you upload an image size 1600x1000 the theme resize to 1440x960.
    - If you upload an image size 960x960 the theme not resize.


    If you select a masonry 4 columns the sum of each columns height is always 4. For example 960x960 is equals to 1/2 block, an 480x240 is equals to 1/1, etc.

Portfolio Grid - Screencast

Portfolio Grid Colorize Effect - Screencast