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 |
