Portfolio Mirror Look

In this article we will discuss about how to create similar effect we have here: https://jupiterx.artbees.net/portfolio-mirror-rows/

Step one

Place Post widget on the page and before you configure this widget switch to Style tab and in feature image tab switch image position to the left or right side, also set image width to the less than 100%, in most cases 50% is ideal, take a looks at this screenshot:

Step two

Switch to the Content tab and in the Settings tab you will see Mirror row switch just appeared, enable it and enjoy with the result

Changing “portfolio” slug for Portfolio post type in Jupiter X

You may notice that by default our Portfolio post type uses portfolio slug in the URL, so when you open a single portfolio post, you’ll see this address in the URL: http://yourdomain.com/portfolio/post-name.

But what if you want to use the same name for your custom Portfolio page and show portfolio posts with Elementor widgets and add some other content? If you name your page “Portfolio”, you’ll have the same slug – “portfolio”, but it’s already assigned to default Portfolio post type in the theme and you won’t be able to edit the page with Elementor and get an error.

To fix this, you have 2 ways:

  • The first one is to change your page’s slug to something like “portfolios” or “projects”, so you don’t have the same “portfolio” slug. 
  • The second way is to change default “portfolio” slug for our Portfolio post type, so you can use “portfolio” slug for your custom page:

1. Install the child theme.

2. Go to Appearance > Editor and open functions.php file. Or you can edit it via FTP in wp-content/themes/jupiterx-child directory.

3. Add the code in the functions.php file:

add_filter( 'register_post_type_args', 'wpse247328_register_post_type_args', 10, 2 );
function wpse247328_register_post_type_args( $args, $post_type ) {

if ( 'portfolio' === $post_type ) {
$args['rewrite']['slug'] = 'projects';
}

return $args;
}


4. Go to WP Dashboard > Settings > Permalinks and save changes without editing anything. This is needed to refresh the permalinks so that the new changes take place.

After that, you are free to use “portfolio” slug for a custom Portfolio page.

Display settings for Blog, Shop single pages

How to show/hide theme elements (title, featured image, tags, etc.)

In some places, you can globally show/hide the theme elements, such as titles, subtitles, images, metadata. These options can be found on Archive and Single page settings such as BlogPortfolioShop and in the HeaderFooterSearch template and Page Title bars.


For example, you can simply refuse to show the Featured Image on Blog single posts by deactivating its option in Customizer > Blog > Blog Single > Settings > Display Elements.

Display Options are not only show/hiding something. But it’s how you choose the layout of your content too. You can choose how your single content look. It also effects on other options if you choose a different template for your single pages.


For example, you can change the layout on a single product page in Customizer > Shop > Product Page > Settings > Template.

Creating a custom Portfolio page

How to create a Portfolio page with Elementor

Portfolio is the only custom post-type which has been added in Jupiter X. By using the Raven Posts element, you can display Portfolio posts in your Elementor’s layout. Posts element has 2 main styles – Grid and Masonry. 

Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Posts, you need to look for it in the Elementor knowledgebase.

It’s worth to mention that before displaying portfolio posts, a post itself should be created and the element configured. 

Creating a single portfolio post

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

2. Enter a title and click on Edit with Elementor button or use default WordPress editor to add your content to a post.

3. Add needed content to your post.

4. Publish the post and check the result.

Note: If you don’t see Edit with Elementor button in the Portfolio Post editor, you need activate it in Elementor > Settings as described in this article.

Configuring a Single Portfolio Post Layout

You can change the post layout to the Default template (the one with a sidebar) or Full Width template (without a sidebar). Sidebar can be added to portfolio posts which will then allow adding widgets to portfolio posts. How to add a sidebar refer to this article.

If you don’t want to have a sidebar on a portfolio post page, you need set Template in Post Attributes drop down to Full Width:

In Appearance > Customize > Portfolio > Portfolio Single you have options to hide/show different elements like featured image, social icons, related works, post meta, etc. and style them.

To see all of the portfolio styles, you may check out “Portfolio” section on our Jupiter X main demo under the Portfolio menu item.

Creating a custom Portfolio page

In order to display content of the Portfolio post type in your Elementor’s layout:

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the Elementor’s left dashboard, drag and drop the Posts widget into your layout so that a new panel will open on the left side of the Elementor with the element’s specific settings.


Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Posts, you need to look for it in the Elementor knowledgebase.

4. From the Content tab and within the Content section set the Source of the posts to Portfolio

5. Edit the settings and Update the page.


Custom Portfolio page and Portfolio Archive pages are different. When creating a custom Portfolio page, you can add any widget in Elementor page builder, but Portoflio Archive page shows some posts by default. 
For example, a category page which was created in Portoflios > Categories and you assigned some posts to this category, so they are shown once the category page link is clicked. Such page can’t be modified in Elementor as it uses default archive template.

Note: If you want to show a sidebar on your Portfolio page and Portfolio Archive (category pages) pages, refer to this article how to assign a sidebar globally, and read this one how to add a sidebar to a specific page.

Setting Layout for Portfolio Archive pages


When creating a page you have a possibility to set its layout to Full Width or Default (with sidebar). But what about archive pages, for example category pages to which you assign the posts? What if you want to set sidebar for one category, but have full width page for another? You’ve got such opportunity when creating a category or edit a category after its creation.

1. Go to Portfolio > Categories > Add New Category.

2. Fill in the fields and in Layout setting choose the layout for this new category. You can have a layout with sidebar or without sidebar. If you set it to Global, the setting will be applied from Appearance > Customize > Sidebar.

Note: If you forgot to select the layout while creating a category, you can change it in the category editor. Edit a category in Portfolio > Categories and set the Layout option to the needed setting.

Also, you can set a global layout for all category pages.

1. Go to Appearance > Customize > Sidebar.

2. Under the Settings tab in Exceptions section click on Add New Exception.

3. Select Archive item and set Layout setting to the desired layout.



Note: Archive settings are applied to both Blog and Portfolio archive pages. Portfolio and Blog exceptions are related to single post pages in this setting.

Showing Portfolio items in a List view

Raven Posts element has 2 layouts to display your portfolio posts – Grid and Masonry.
But you may wish to show the posts in a List view and this can be achieved.

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the Elementor’s left dashboard, drag and drop the Portfolio widget into your layout so that a new panel will open on the left side of the Elementor with the element’s specific settings.


Note:Portfolio element is a part of the JetElements. The JetElements plugin is bundled and recommended for Jupiter X. It can be installed via Jupiter X control panel as described here.

4. Edit the settings and Update the page.

Note: Find the description of each setting in the JetElements documentation.

When adding items in the Portfolio settings, you’ll see Link URL option. You can add URL of your single portfolio post that you created in Portfolios menu on the left side of WordPress dashboard as described in the “Creating a portfolio post” section of this article. This way the portfolio item will be redirected to the needed single portfolio post once clicked on the Link Text.

Displaying Portfolio Posts

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

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

displaying portfolio posts

2Enter a title for your grid portfolio page.

Adding the Shortcode

1From Visual Composer screen, click +

displaying portfolio posts

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

displaying portfolio posts

3When 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 standard portfolio like shown in the demo:

1In 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

2Click on Save Changes.

3Publish 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.

Creating a Portfolio Page

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

displaying portfolio posts

2Enter a title for your Grid portfolio page.

Adding the Shortcode

1From Visual Composer screen, click +

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

displaying portfolio posts

3When 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:

1In 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

2Click on Save Changes.

3Publish 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.

Creating a Portfolio Page

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

displaying portfolio posts

2Enter a title for your masonry portfolio page.

Adding the Shortcode

1From Visual Composer screen, click +

displaying portfolio posts

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

displaying portfolio posts

3When 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:

1In 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

2Click on Save Changes.

Configuring the Row

1In the row which contains the portfolio shortcode, click on Edit this row.

2A new pop-up screen called Row Settings opens, configure the settings like shown below.

Setting Configuration

Full width row Enabled
Full width content Enabled

3Click on Save Changes.

4Publish 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.

Creating a Portfolio Page

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

displaying portfolio posts

2Enter a title for your masonry portfolio page.

Adding the Shortcode

1From Visual Composer screen, click +

displaying portfolio posts

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

displaying portfolio posts

3When 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:

1In 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

2Click on Save Changes.

Configuring the Row

1In the row which contains the portfolio shortcode, click on Edit this row.

2A new pop-up screen called Row Settings opens, configure the settings like shown below.

Setting Configuration

Full width row Enabled
Full width content Enabled

3Click on Save Changes.

4Publish 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:

1From WordPress left menu, go to Portfolios and enter a specific post.

2Scroll down to Ken Portfolio Post Options.

3From Masonry Image Size dropdown, select a desired image dimensions.

4Update 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.

Creating a Portfolio Page

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

displaying portfolio posts

2Enter a title for your Grid portfolio page.

Adding the Shortcode

1From Visual Composer screen, click +

displaying portfolio posts

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

displaying portfolio posts

3When 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:

1In 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

2Click on Save Changes.

3Publish the page and check out the result.

Configuring the Row

1In the row which contains the portfolio shortcode, click on Edit this row.

2A new pop-up screen called Row Settings opens, configure the settings like shown below.

Setting Configuration

Full width row Enabled
Full width content Enabled

3Click on Save Changes.

4Publish the page and check out the result.

Creating a Portfolio Post

A portfolio is an essential section in your website for getting more business and building your professional brand.  Ken theme really shines when it comes to portfolios, as it offers a lot of customization. Creating a portfolio post is the first step to creating a portfolio on your website. This article also covers how to use Visual Composer with portfolios, add a sidebar and widgets, as well as how to configure the portfolio posts.

To see some of the Ken portfolios, check out the Ken main demo.


Creating a Portfolio Post

Creating a portfolio post is the first step into creating and displaying a portfolio on your website. Ken let’s you create different types of portfolio posts, like images, gallery, videos, audio, quote, link.

These types differ in how they work both in the portfolio archive and in the portfolio single post.

Creating a Simple Image or Video Post

To create an image or video post:

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

creating a portfolio post

2Enter a title and scroll down to Format.

creating a portfolio post

3Select Image or Video.

Image Format

If the image format is selected, to upload the image:

1Click on Set Featured Image in the right sidebar.

creating a portfolio post

2Upload the image or select one from the media library and click on Set Featured Image.

3Click on Publish to publish the page.

Video Format

If the video type is selected, some options will appear in the Ken Portfolio Options to upload the video:

Setting Description

Video URL URL to the video site to feed from.

Configure the necessary settings and click on Publish.

Enabling WPBakery Page Builder in Portfolio post

To enable WPBakery Page Builder for portfolio posts:

1From the WordPress left menu, go to WPBakery Page Builder > Role Manager.

2Under the Post Types option, select Custom and enable Portfolio.

3Click on Save Changes.

Once the WPBakery is enabled for portfolio posts, you will notice that when creating a portfolio post you will be able to use WPBakery shortcodes just like on any other page.


Configuring the Portfolio Post Layout

A sidebar can be added to portfolio posts which will then allow adding widgets as well.

Adding Sidebar to a Portfilio Post

1From the WordPress left menu, go to Portfolios and enter a portfolio post.

2Scroll down to Ken Page Layout.

3From the Layout dropdown, select the desired option.

4Publish or update the post.

Adding Widgets

To add widgets to the portfolio post sidebar:

1From the WordPress left menu, go to Appearance > Widgets.

creating a portfolio post

2On the Widgets page, drag and drop a widget into the Portfolios Single Widget Area.

3Configure the widget and click on Save.


Configuring the Post Page

There are a few settings which can be used to configure the portfolio post page.

To configure the post page:

1From the WordPress left menu, go to Portfolios.

2Enter a specific portfolio that you wish to configure.

Ken Portfolio Options

Setting Description

Page elements Changes the page’s general layout by making structural changes.
Stick template Enabling this removes the padding after the header and before the footer.
Header Toolbar Show the Header Toolbar on this post.
Header Style Select the Header style on this post, the available options are : Block Module, Transparent Layer.
Transparent Header Style Skin Select the Skin for the Transparent Header style, the available options area : Light, Dark.
Transparent Header Style Sticky Scroll Offset Set the offset to sticky the Header on scroll.
Portfolio Loop Overlay Logo You can upload a logo to appear on portfolio loop images.
Ajax Description  Short description for ajax content. This content will be shown if you have enabled ajax feature for your portfolio loop.
Masonry Image Size Option to select the image size for the Masonry loop style.
Show Featured Image In Single Post?  This option will disable featured image, video player (when video post type chosen) and gallery slideshow (when gallery post type chosen).
Custom URL  External link other than the single post.
Previous & Next Arrows? Previous & Next Arrows? This option can turn on/off the navigation arrows when viewing the portfolio single page.
Related Projects? Related Projects?  This option can turn on/off the Related Projects when viewing the portfolio single page.

Portfolio Settings

Portfolio Theme Options is the main section that allows you to choose the global settings for your Jupiter website projects in WordPress. You can access Theme Options from the top left side of your dashboard.

In this article we will describe the options available under the Portfolio section of Theme Options.


Portfolio Single Post Settings

1Layout

You can globally manage the portfolio single layout using this option.

There are several options to choose from to style the layout of your single project page:

Name Description

Right Layout Sets the sidebar on the right side.
Left Layout Sets the sidebar on the left side.
Full Layout Sets the full layout without the sidebar.

2Single Featured Image Height

Use this option to adjust the featured image height for single portfolio posts.

3Category

Use this option to Enable/Disable portfolio post categories in single portfolio posts.

4Related Portfolio Posts

Use this option to Show/Hide the related posts section in the single portfolio post page. The related posts section is a list of portfolio thumbnails with links to their respective single portfolio pages. The portfolio thumbnails are selected automatically from the same category of the current portfolio post.

5Previous & Next Arrows

Use this option to Enable/Disable the navigation arrows in the single portfolio post page. The navigation arrows give the visitor the option to go to the next or previous portfolio post directly from the single portfolio post page.

6Previous & Next for Same Categories

This option limits the portfolio post navigation to the same categories of the current post.

7Comments on Portfolio Posts

Use this option to Enable/Disable the comments section for the single portfolio posts. This option is for the single portfolio posts only. If you are interested in having a comments section for WordPress Pages you’ll need to go to Theme Options > Global Settings and enable the Comments on Pages option. For more information about that option click here.

8Social Share

Use this option to Enable/Disable the social share section for the Single Portfolio Post pages.

9Portfolio Slug

Portfolio Slug is the text that is displayed in the URL (e.g. www.domain.com/portfolio-posts/morbi-et-diam-massa/). As shown in the example, it is set to ‘portfolio-posts’ by default but you can change it to anything to suit your preference. However, you should not use the same slug on any page or post, otherwise the page will return a 404 error due to internal conflicts.

10Portfolio Category Slug

The Portfolio Category Slug is the text that is displayed in the URL of your portfolio archive page. The default is: portfolio_category


Portfolio Archive Settings

1Archive Layout

Defines the archive loop layout. Available options are:

  1. Left Sidebar
  2. Right Sidebar
  3. Full Layout

2Archive Style

Jupiter has two styles for the portfolio list which is more configurable in the portfolio shortcode. Use these portfolio theme options to set the style for the archive page portfolio thumbnails list. Available options are:

  1. Classic
  2. Grid

3Featured Image Height

Use this option to set the height of the Thumbnail Images on the portfolio archive page.

4Columns

Use this option to adjust the number of portfolio post columns for the portfolio archive pages.

5Pagination Style

Use this portfolio theme option to set the Pagination Style of the portfolio archive page. Available options are:

  1. Pagination Nav
  2. Load More Button
  3. Load on Page Scroll

Portfolio Shortcode

In this article, we will explain how to display portfolio posts via Portfolio shortcode and configure the shortcode settings.

To see the Portfolio shortcode in action, check out the demo page.

Portfolio shortcode - demo


Creating Portfolio Posts

Portfolio posts are created separately in Portfolio post type. To learn about creating different kind of portfolio posts, read Creating a portfolio post article then continute to the next section.


Displaying Portfolio Posts

After creating portfolio posts, it’s time to display them in a page. For this purpose, we need to add Portfolio shortcode in a page.

To add the shortcode:

1Add a new page or edit an existing page.

2From Visual Composer screen, click + button.

Portfolio shortcode - visual composer screen

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

Portfolio shortcode - add element

4When the shortcode is added, a new pop-up screen called Portfolio Settings opens. You can configure different aspects of portfolio from the pop-up.

Portfolio shortcode - Portfolio settings

5Click Save Changes and publish or update the page to check the result. It shows all the available portfolio posts.

Configuring Image Dimensions

There are 2 settings in Portfolio settings pop-up to configure the image dimensions.

Setting Description

Image size Choose an image size which will be shown on the portfolio loop.
Image height Sets a custom image height (only available when using ‘Resize & Crop’ option from above).

Adding Custom Image Size Template

You can add custom image sizes to be used in various locations such as portfolio shortcode.

To add a custom image size:

1From WordPress left menu, go to Jupiter > Control Panel > Image Sizes.
2Enter a custom image width, height and name.

Portfolio shortcode - custom image size

3Click on Save Settings.

This image size will now be available to use in Portfolio settings pop-up > Image size setting.

Portfolio shortcode - image size

Configuring Category Sorting

The filter or sorting feature is enabled by default and it works based on the categories. There are some settings in Portfolio Settings pop-up to help you configure sorting section.

Setting Description

Sortable? Enables or disables the sorting section.
Sortable Align? Aligns the sorting categories links on left, center or right.
Sortable Style Sets the predefined styling for categories links. Available options are Classic and Outline.
Sortable Mode Defines the functionality mode of the sorting. Ajax will load the sorted posts via Ajax without page reloading but Static reloads the page.
Sortable [All] Link Title Defines the link label for first sorting link. It loads all the posts.

Configuring Posts Meta

There are 3 settings in Portfolio settings pop-up to configure the meta.

Setting Description

Choose meta element Displays a specific meta data in the portfolio loop items.
Show permalink? Displays the permalink on hover which leads to portfolio single post.
Show zoom link? Displays a zoom icon on hover.

Configuring Pagination

In Portfolio settings pop-up, there are two settings for pagination.

Setting Description

Show Pagination? Enables or disables the pagination.
Pagination Style Defines the pagination style. There are 3 available styles: Classic

Showing Specific Posts

There are 3 settings in Portfolio Settings pop-up which allow you to show the posts based on specific categories, IDs or authors. Type the name of category, post or author to add them in the fields.

Setting Description

Select Specific Categories Determines categories of portfolio posts. Posts from the selected categories will be only displayed.
Select Specific Posts Determines specific portfolio posts. The selected posts will be only displayed.
Select Specific Authors Determines authors of portfolio posts. Posts from the selected authors will be only displayed.

Altering the Posts Sorting

There are 2 settings in Portfolio Settings pop-up which allow you to alter the posts sorting. By default, Order and Orderby settings are set to Ascending and Date therefore it sorts the older posts ahead of newer posts.

Setting Description

Order Sets the ascending or descending order of the Orderby parameter.
Orderby Sorts the posts based on the selected parameter (date, menu order, title, …).


Configuring the Layout

There are 3 types of layouts for the portfolio shortcode; classic, grid and masonry.

You can check out all the portfolio layouts on Jupiter main demo website, by going to Works section.


Making Whole Image Clickable

One of the most common request in our Helpdesk is about clickable images. By default if the permalink is enabled, only the arrow icon is clickable. There is no setting to enable this and we need to use some Custom CSS.

To make the image clickable:

1From WordPress left menu, go to Theme Options – Advanced – Custom CSS.

2In the custom CSS input field, paste the CSS codes below:

a.hover-icon.from-left.project-load {
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 45% !important;
    margin-left: 0 !important;
    padding-left: 0% !important;
}

3Click on Save Settings and check the portfolio loop for changes.


Disabling “All” Link

Disabling the All link from the sorting section requires custom CSS.

To disable the button:

1From WordPress left menu, go to Theme Options – Advanced – Custom CSS.

2In the custom CSS input field, paste the CSS codes below:

#mk-filter-portfolio ul li:first-child{
display: none;
}

3Click on Save Settings and check the portfolio loop for changes.

Configuring Portfolio Archive

The portfolio archive is an accumulation of portfolio posts. It contains all your portfolio posts in one place.

In this article we’ll explain how to access the portfolio archive and its settings. Note that if you are looking to create a portfolio you should check out the creating a portfolio post and displaying portfolio posts articles.


Configuring the Archive URL

By default, the portfolio archive can be found in (e.g. www.domain.com/portfolio-posts/).

To change the portfolio archive address:

1From the WordPress left menu, go to Theme Options > Portfolio > Portfolio Single Post.

2Enter a custom slug in the Portfolio Slug input field.

3Click on Save Settings.


Archive Layout

To change the layout of the portfolio archive:

1From the WordPress left menu, go to Theme Options > Portfolio > Portfolio Archive.

Setting Description

Portfolio archive layout Defines the layout of the archive page.
Columns Sets the number of columns.
Featured image height Sets the height of the featured image.

2Configure the settings and click on Save Settings.

Adding Widgets to the Sidebar

If your portfolio archive layout has a sidebar, you can add widgets to it:

1From the WordPress left menu, go to Appearance > Widgets.

Configuring portfolio archive - Widgets

2From widgets page, drag and drop one of the widgets into Archive Widget Area.

Configuring portfolio archive - Archive widget area

3Configure the widget and click on Save.


Archive Style

There are two styles to choose from for the portfolio archive – classic and grid.

To change the style:

1From the WordPress left menu, go to Theme Options > Portfolio > Portfolio Archive.

Setting Description

Portfolio style Defines the style of the portfolio loop.
Pagination style Sets the style of the pagination.

2Configure the settings and click on Save Settings.


Category Archive

The portfolio category archive is an accumulation of portfolio posts which are in the same category.

Configuring the Category Archive URL

To change the base slug of a portfolio post type:

1From the WordPress left menu, go to Theme Options > Portfolio > Portfolio Single Post.

2Enter a custom slug in the Portfolio Category Slug input field.

 

3Click on Save Settings.

Displaying Portfolio Posts

Jupiter has 3 main portfolio styles – classic, grid and masonry. 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 3 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 and portfolio shortcode articles.

To see all of the portfolio styles, you may check out “works” section on our Jupiter main demo.


Creating a Classic Portfolio

Below, we are going to explain step by step how to create a two column classic portfolio. To see the end result, please check out classic portfolio demo.

Creating a Portfolio Page

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

Displaying portfolio posts - Add new

2Enter a title for your classic portfolio page.

Adding the Shortcode

1From Visual Composer screen, click +

Displaying portfolio posts - Visual Composer screen

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

Displaying portfolio posts - Add element

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

Displaying portfolio posts - Portfolio settings

Configuring the Shortcode

To achieve the two column classic portfolio like shown in the demo:

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

Setting Configuration

Style Classic
Image size Resize & crop
Image height 300 px
How many columns? 2
Choose Meta Element Category
Show permalink? Enabled
Show zoom link? Enabled
Sortable? Enabled
Sortable align Left
Sortable style Outline
Sortable mode Ajax
Show pagination Enabled
Pagination style Load more button

2Click on Save Changes.

3Publish the page and check out the result.


Creating a Grid Portfolio

Below, we are going to explain step by step how to create a two column grid portfolio. To see the end result, please check out grid portfolio demo.

Creating a Portfolio Page

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

Displaying portfolio posts - Add new

2Enter a title for your grid portfolio page.

Adding the Shortcode

1From Visual Composer screen, click +

Displaying portfolio posts - Visual Composer screen

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

Displaying portfolio posts - Add element

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

Displaying portfolio posts - Portfolio settings

Configuring the Shortcode

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

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

Setting Configuration

Style Grid
Hover scenario Zoom in box
Grid spacing 4 px
Image size Resize & crop
Image height 300 px
Show posts using ajax? Disabled
How many columns? 2
Choose Meta Element Category
Show permalink? Enabled
Show zoom link? Enabled
Sortable? Enabled
Sortable align Left
Sortable style Outline
Sortable mode Ajax
Show pagination Enabled
Pagination style Classic pagination navigation

2Click on Save Changes.

3Publish the page and check out the result.


Creating a Masonry Portfolio

Below, we are going to explain step by step how to create a spaced masonry portfolio. To see the end result, please check out masonry portfolio demo.

Creating a portfolio page

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

Displaying portfolio posts - Add new

2Enter a title for your masonry portfolio page.

Adding the Shortcode

1From Visual Composer screen, click +

Displaying portfolio posts - Visual Composer screen

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

Displaying portfolio posts - Add element

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

Displaying portfolio posts - Portfolio settings

Configuring the Shortcode

To achieve the spaced masonry portfolio like shown in the demo:

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

Setting Configuration

Style Masonry
Hover scenario Light zoom in
Grid spacing 4 px
Image size Original size
Show posts using ajax? Disabled
Choose Meta Element Category
Show permalink? Enabled
Show zoom link? Enabled
Sortable? Enabled
Sortable align Left
Sortable style Outline
Sortable mode Ajax
Show pagination Disabled

2Click on Save Changes.

Configuring the Row

1In the row which contains the portfolio shortcode, click on Edit this row.

Displaying portfolio posts - edit row

2A new pop-up screen called Row Settings opens, configure the settings like shown below.

Setting Configuration

Full width row Enabled
Full width content Enabled

3Click on Save Changes.

4Publish 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:

1From WordPress left menu, go to Portfolios and enter a specific post.

2Scroll down to Jupiter Portfolio Post Options.

Displaying portfolio posts - Jupiter Portfolio Post Options

3From Masonry Image Size dropdown, select a desired image dimensions.

Displaying portfolio posts - Masonry image size

4Update the post and check the masonry portfolio loop for changes.

Creating a Portfolio Post

A portfolio is an essential section in your website for getting more business and building your professional brand. Jupiter really shines when it comes to portfolios, as it offers a lot of customization.

 

Creating a portfolio post is the first step to creating a portfolio on your website. This article also covers how to use Visual Composer with portfolios, add a sidebar and widgets, as well as how to configure the portfolio posts.

To see some of the Jupiter portfolios, check out the Jupiter main demo.


Creating a Portfolio Post

Creating a portfolio post is the first step into creating and displaying a portfolio on your website. Jupiter let’s you create different types of portfolio posts, like images and videos. These types differ in how they work both in the portfolio archive and in the portfolio single post.

Creating a Simple Image or Video Post

To create an image or video post:

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

Creating a portfolio post - Add new

2Enter a title and scroll down to Jupiter Portfolio Post Options.

3From the Post Type dropdown, select Image or Video.

Creating a portfolio post - Jupiter Portfolio Post Options

Image Type

If the image type is selected, to upload the image:

1Click on Set Featured Image in the right sidebar.

Creating a portfolio post - Featured image

2Upload the image or select one from the media library and click on Set Featured Image.

3Click on Publish to publish the page.

Video Type

If the video type is selected, some options will appear underneath to upload the video:

Setting Description

Video site Select the website where your video is uploaded to.
Video ID Set the ID of the video.

Configure the necessary settings and click on Publish.

Creating a Post with WPBakery Page Builder

In order to create portfolio posts with Visual Composer, it needs to be enabled.

To enable Visual Composer for portfolio posts:

1From the WordPress left menu, go to WPBakery Page Builder > Role Manager.

2Under the Post Types option, select Custom and enable Portfolio.

3Click on Save Changes.

Once the Visual Composer is enabled for portfolio posts, you will notice that when creating a portfolio post you will be able to use Visual Composer shortcodes just like on any other page.


Configuring the Post Layout

The layout can be defined globally or page specifically. A sidebar can be added to portfolio posts which will then allow adding widgets as well.

Adding a Global Sidebar

1From the WordPress left menu, go to Theme Options > Portfolio > Portfolio Single Post.

2From the Layout dropdown, select the desired option.

3Click on Save Settings.

Adding a Page Specific Sidebar

1From the WordPress left menu, go to Portfolios and enter a portfolio post.

2Scroll down to Jupiter Page Options.

3From the Layout dropdown, select the desired option.

Creating a portfolio post - Jupiter Page Options

4Publish or update the post.

Adding Widgets

To add widgets to the portfolio post sidebar:

1From the WordPress left menu, go to Appearance > Widgets.

Creating a portfolio post - Widgets

2On the Widgets page, drag and drop a widget into the Single Portfolios Widget Area.

Creating a portfolio post - Single Portfolios Widget Area

3Configure the widget and click on Save.


Configuring the Post Page

There are a few settings which can be used to configure the portfolio post page.

To configure the post page:

1From the WordPress left menu, go to Portfolios.

2Enter a specific portfolio that you wish to configure.

Jupiter Page Options

Setting Description

Manage page elements Changes the page’s general layout by making structural changes.
Stick template Enabling this removes the padding after the header and before footer.
Page preloader Enables the page preloader only for this post.
Page title align Changes the title and subtitle alignment.
Breadcrumb Enables or disables breadcrumbs for this post.

Jupiter Portfolio Post Options

Setting Description

Show featured image Toggles between showing the featured image or hiding it in the portfolio single post.
Similar posts Displays the similar posts section in the portfolio single post.
Social share Displays the social share section in the portfolio single post.
Custom URL Changes the permalink of the thumbnail.
Masonry image size Changes the image size in the masonry loop style.
Item hover skin Changes the item hover skin color in the Grid & Masonry loop style > Zoom Out Box hover scenario.