Ken has 5 main portfolio styles – Standard , Grid , Flip, Mansory and Scroller. Every style differ in looks, layout and functionality. In this article we cover the steps towards displaying portfolio posts using the portfolio shortcode and these 5 styles.
It’s worth to mention that before displaying portfolio posts, portfolio posts itself shoud be created and the shortcode configured. For more information, please read creating a portfolio post.
To see all of the portfolio styles, you may check out “Portfolio” section on our Ken main demo.
Creating a Standard Portfolio
Below, we are going to explain step by step how to create a three column standard portfolio. To see the end result, please check out Standard portfolio demo.
Creating a Portfolio Page
Adding the Shortcode
Configuring the Shortcode
To achieve the three column standard portfolio like shown in the demo:
Setting | Configuration |
---|---|
Style | Standard |
How Many Posts In A Page? | 12 posts |
Offset | 0 posts |
How many columns? | 3 |
Shows Posts Using Ajax? | Disable |
Image size | Resize & crop |
Image height | 400 px |
Increase Quality Of Image | Images 2 times bigger (retina compatible) |
Sortable? | Enabled |
Sortable align | Center |
Pagination? | Enable |
Pagination style | Classic Pagination Navigation |
Lightbox Plus Icon | Enable |
Permalink Arrow Icon | Enable |
Portfolio Overlay Logo | Enable |
Show Post Category | Enable |
Creating a Grid Portfolio
Below, we are going to explain step by step how to create a three columnGrid portfolio. To see the end result, please check out Grid portfolio demo.
Creating a Portfolio Page
Adding the Shortcode
Configuring the Shortcode
To achieve the three column grid portfolio like shown in the demo:
Setting | Configuration |
---|---|
Style | Grid |
How Many Posts In A Page? | 9 posts |
Offset | 0 posts |
How many columns? | 3 |
Shows Posts Using Ajax? | Disable |
Image size | Resize & crop |
Image height | 300 px |
Increase Quality Of Image | Images 2 times bigger (retina compatible) |
Sortable? | Enabled |
Sortable align | Left |
Pagination? | Enable |
Pagination style | Load more button |
Lightbox Plus Icon | Enable |
Permalink Arrow Icon | Enable |
Portfolio Overlay Logo | Enable |
Show Post Category | Enable |
Creating a Flip Portfolio
Below, we are going to explain step by step how to create a Flip three column portfolio. To see the end result, please check out Clip portfolio demo.
Creating a Portfolio Page
Adding the Shortcode
Configuring the Shortcode
To achieve the Flip three column portfolio like shown in the demo:
Setting | Configuration |
---|---|
Style | Flip |
How Many Posts In A Page? | 15 posts |
Offset | 0 posts |
How many columns? | 3 |
Shows Posts Using Ajax? | Disable |
Image size | Resize & crop |
Image height | 250 px |
Increase Quality Of Image | Images 2 times bigger (retina compatible) |
Sortable? | Disable |
Sortable align | Center |
Pagination? | Disable |
Pagination style | Load more button |
Lightbox Plus Icon | Enable |
Permalink Arrow Icon | Enable |
Portfolio Overlay Logo | Enable |
Show Post Category | Enable |
Configuring the Row
Setting | Configuration |
---|---|
Full width row | Enabled |
Full width content | Enabled |
Creating a Mansory Portfolio
Below, we are going to explain step by step how to create a Mansory columns portfolio. To see the end result, please check out Mansory portfolio demo.
Creating a Portfolio Page
Adding the Shortcode
Configuring the Shortcode
To achieve the Mansory columns portfolio like shown in the demo:
Setting | Configuration |
---|---|
Style | Mansory |
How Many Posts In A Page? | 16 posts |
Offset | 0 posts |
Shows Posts Using Ajax? | Disable |
Image size | Resize & crop |
Increase Quality Of Image | Images 2 times bigger (retina compatible) |
Sortable? | Disable |
Sortable align | Center |
Pagination? | Disable |
Pagination style | Load more button |
Lightbox Plus Icon | Enable |
Permalink Arrow Icon | Enable |
Portfolio Overlay Logo | Enable |
Show Post Category | Enable |
Configuring the Row
Setting | Configuration |
---|---|
Full width row | Enabled |
Full width content | Enabled |
Masonry Image Sizes
In masonry style, you can make every image have a specific width and height in the portfolio loop. This is configured in the portfolio post options.
To change the masonry image size:
Creating a Scroller Portfolio
Below, we are going to explain step by step how to create a two row Scroller portfolio. To see the end result, please check out Grid portfolio demo.
Creating a Portfolio Page
Adding the Shortcode
Configuring the Shortcode
To achieve the two row Scroller portfolio like shown in the demo:
Setting | Configuration |
---|---|
Style | Scroller |
How Many Row In One Side? | Two row in one slide |
How Many Posts In A Page? | 16 posts |
Offset | 0 posts |
How many columns? | 3 |
Shows Posts Using Ajax? | Disable |
Image size | Resize & crop |
Image width | 450 px |
Image height | 250 px |
Sortable align | Center |
Lightbox Plus Icon | Enable |
Permalink Arrow Icon | Enable |
Portfolio Overlay Logo | Enable |
Show Post Category | Enable |
Configuring the Row
Setting | Configuration |
---|---|
Full width row | Enabled |
Full width content | Enabled |