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.
