Displaying Portfolio Posts

Last Updated on

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.

In this article


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.

x
Note: Before creating a grid portfolio, portfolio posts should be created. To learn more read creating a portfolio post article.

Creating a Portfolio Page

1
From WordPress left menu, go to Pages and click on Add New.

displaying portfolio posts

2
Enter a title for your grid portfolio page.

Adding the Shortcode

1
From Visual Composer screen, click +

displaying portfolio posts

2
In Add Element pop-up screen, search for Portfolio and click on it to be added to the page.

displaying portfolio posts

3
When the shortcode is added, a new pop-up screen called Portfolio Settings opens. It allows you to configure the shortcode settings.

displaying portfolio posts

x
Note: To learn more about the portfolio shortcode settings, read portfolio shortcode article.

Configuring the Shortcode

To achieve the three column standard portfolio like shown in the demo:

1
In Portfolio Settings pop-up, configure the settings like shown below.

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

2
Click on Save Changes.

3
Publish the page and check out the result.

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.

x
Note: Before creating a classic portfolio, portfolio posts should be created. To learn more read creating a portfolio post article.

Creating a Portfolio Page

1
From WordPress left menu, go to Pages and click on Add New.

displaying portfolio posts

2
Enter a title for your Grid portfolio page.

Adding the Shortcode

1
From Visual Composer screen, click +

2
In Add Element pop-up screen, search for Portfolio and click on it to be added to the page.

displaying portfolio posts

3
When the shortcode is added, a new pop-up screen called Portfolio Settings opens. It allows you to configure the shortcode settings.

displaying portfolio posts

Configuring the Shortcode

To achieve the three column grid portfolio like shown in the demo:

1
In Portfolio Settings pop-up, configure the settings like shown below.
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

2
Click on Save Changes.

3
Publish the page and check out the result.


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.

x
Note: Before creating a masonry portfolio, portfolio posts should be created. To learn more read creating a portfolio post article.

Creating a Portfolio Page

1
From WordPress left menu, go to Pages and click on Add New.

displaying portfolio posts

2
Enter a title for your masonry portfolio page.

Adding the Shortcode

1
From Visual Composer screen, click +

displaying portfolio posts

2
In Add Element pop-up screen, search for Portfolio and click on it to be added to the page.

displaying portfolio posts

3
When the shortcode is added, a new pop-up screen called Portfolio Settings opens. It allows you to configure the shortcode settings.

displaying portfolio posts

Configuring the Shortcode

To achieve the Flip three column portfolio like shown in the demo:

1
In Portfolio Settings pop-up, configure the settings like shown below.
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

2
Click on Save Changes.

Configuring the Row

1
In the row which contains the portfolio shortcode, click on Edit this row.
2
A new pop-up screen called Row Settings opens, configure the settings like shown below.

Setting Configuration
Full width row Enabled
Full width content Enabled

3
Click on Save Changes.

4
Publish the page and check out the result.

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.

x
Note: Before creating a masonry portfolio, portfolio posts should be created. To learn more read creating a portfolio post article.

Creating a Portfolio Page

1
From WordPress left menu, go to Pages and click on Add New.

displaying portfolio posts

2
Enter a title for your masonry portfolio page.

Adding the Shortcode

1
From Visual Composer screen, click +

displaying portfolio posts

2
In Add Element pop-up screen, search for Portfolio and click on it to be added to the page.

displaying portfolio posts

3
When the shortcode is added, a new pop-up screen called Portfolio Settings opens. It allows you to configure the shortcode settings.

displaying portfolio posts

Configuring the Shortcode

To achieve the Mansory columns portfolio like shown in the demo:

1
In Portfolio Settings pop-up, configure the settings like shown below.
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

2
Click on Save Changes.

Configuring the Row

1
In the row which contains the portfolio shortcode, click on Edit this row.
2
A new pop-up screen called Row Settings opens, configure the settings like shown below.

Setting Configuration
Full width row Enabled
Full width content Enabled

3
Click on Save Changes.

4
Publish the page and check out the result.

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:

1
From WordPress left menu, go to Portfolios and enter a specific post.
2
Scroll down to Ken Portfolio Post Options.
3
From Masonry Image Size dropdown, select a desired image dimensions.
4
Update the post and check the masonry portfolio loop for changes.

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.

x
Note: Before creating a classic portfolio, portfolio posts should be created. To learn more read creating a portfolio post article.

Creating a Portfolio Page

1
From WordPress left menu, go to Pages and click on Add New.

displaying portfolio posts

2
Enter a title for your Grid portfolio page.

Adding the Shortcode

1
From Visual Composer screen, click +

displaying portfolio posts

2
In Add Element pop-up screen, search for Portfolio and click on it to be added to the page.

displaying portfolio posts

3
When the shortcode is added, a new pop-up screen called Portfolio Settings opens. It allows you to configure the shortcode settings.

displaying portfolio posts

Configuring the Shortcode

To achieve the two row Scroller portfolio like shown in the demo:

1
In Portfolio Settings pop-up, configure the settings like shown below.
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

2
Click on Save Changes.

3
Publish the page and check out the result.

Configuring the Row

1
In the row which contains the portfolio shortcode, click on Edit this row.
2
A new pop-up screen called Row Settings opens, configure the settings like shown below.

Setting Configuration
Full width row Enabled
Full width content Enabled

3
Click on Save Changes.

4
Publish the page and check out the result.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket