Creating a Portfolio Page
Last updated
Last updated
The Portfolio Page, also known as the portfolio archive, displays all your portfolio items in one place. By default, the portfolio page is located at this URL yoursite.com/portfolio unless you modify it.
There are several methods to create and set up a Portfolio Page:
Default Post Type Archive Page: Automatically generated by WordPress for the "Portfolio" post type. It displays all portfolio items using the default archive layout.
Page Template "Portfolio Page": Choose this template when creating a new page to set up a custom-designed Portfolio Archive page with layout options specific to the Kalium theme.
Elementor Widget: Use the Elementor Page Builder to add a Portfolio widget to any page, providing advanced design and layout options.
WPBakery Widget: For users of WPBakery Page Builder, add the Portfolio widget to your page for a customizable and visually appealing portfolio display.
In this guide, we will cover each method of creating the Portfolio Page and demonstrate how to use them effectively to showcase your portfolio items.
The default post type archive page is automatically generated by WordPress for the Portfolio post type.
It provides a standard archive layout to display all portfolio items. For additional customization options, refer to the Portfolio Page article where you can learn how to define and adjust the appearance of your portfolio page according to your preferences.
This method is straightforward and requires no extra configuration, making it an easy option for a basic portfolio display.
The permalinks structure for the Portfolio post type is located in Settings -> Permalinks:
Every single portfolio item (project) includes the Portfolio base prefix in its permalink, e.g., yoursite.com/portfolio/project-url. To remove this prefix, simply leave the field empty.
There is a caveat to removing the portfolio prefix: without it, the default portfolio archive will no longer be available. Instead, you will need to create the archive using the methods described on this page.
Using the Page Template Portfolio Page allows you to create a custom portfolio archive page with specific layout options provided by the Kalium theme.
When you select the Portfolio Page template for a new page, it inherits all the initial design settings and options defined in the Portfolio Page section of the Customizer.
You can then set various additional settings to customize the output of your portfolio page, allowing for greater flexibility and control over the presentation of your portfolio page.
Go to your WordPress dashboard and under Pages from the left-hand menu, and click Add New Page to create a new page.
After selecting Portfolio Page template, click on Parameters and Options -> Portfolio Settings to override the options that you need:
Show Title & Description: This option allows you to hide or show the portfolio title and description that is defined here. You can choose to disable this feature if you have custom content that you want to display above the portfolio.
Custom Query: This option provides a query builder that allows you to select specific items to appear on that page only. It enables you to customize the content displayed on the portfolio page according to your preferences.
Masonry Style Portfolio: Create a custom pattern for displaying portfolio images. It allows you to design a creative layout with various image formats that will align neatly based on the Masonry layout style. This section is covered here.
Default Filter Category: Set a default filter category that will be applied automatically when users visit the portfolio page.
Various grid settings are available for the Portfolio Page template in Grid Settings tab, allowing you to customize how portfolio items are displayed. These settings include:
Columns Count: Set the number of items per row.
Reveal Effect: Control the animation effect applied to portfolio items as they enter the viewport. Learn more about reveal effect ->
Full Width Container: Enabling this option makes the portfolio container span the full width of the viewport. Learn more about full width container ->
Title and Filter Container: Visible when the Full Width Container is set to Yes. This option extends the portfolio items to align with the container’s edges, creating a more immersive layout.
Alternatively, you can use either of the two available Portfolio Page card layouts in the Layout Type tab. Select the layout type you want to apply for portfolio items in this page only. By default, it inherits the layout type set in the Customizer.
This option alters the output of portfolio items displayed on the page. It allows you to define a specific set of items to show, independent of the default filters. The filters on the page will then adjust based on the items included in the custom query.
Portfolio Items: List individual portfolio items to display.
Select From Category: Choose portfolio categories to include items from.
Select From Tags: Choose portfolio tags to filter items by.
Order By: Define the criteria for sorting portfolio items (e.g., date, title).
Order: Specify the sorting direction (ascending or descending).
Items per Page: Set the number of portfolio items to display per page.
If you want to enhance your portfolio presentation beyond the default layout, Elementor’s powerful page builder offers a versatile solution. Elementor’s intuitive interface and extensive customization options enable you to create a visually appealing and highly functional portfolio page that aligns with your vision.
Go to your WordPress dashboard and under Pages from the left-hand menu, and click Add New Page to create a new page.
Enter a title for your portfolio page (e.g., "Portfolio" or "Our Projects").
Click the Edit with Elementor button to start customizing your page with Elementor.
From the left widget area of Elementor, under the Kalium section, drag or click the Portfolio Items widget onto your page (right area).
Under the Content tab, adjust the basic options to fit your needs. These settings will override the default Portfolio Page options.
Switch to the Layout tab in the widget settings. You can choose to inherit layout settings from the Customizer or configure new layout options directly in Elementor.
Once you're satisfied with the setup, click the Publish button in the top right corner to make your blog page live.
WPBakery Page Builder enables you to create a portfolio page with a personalized touch. Instead of using the default WordPress portfolio archive, WPBakery lets you build a portfolio page from scratch, offering extensive customization to achieve your desired look and layout.
Go to your WordPress dashboard, select Pages from the left-hand menu, and click Add New Page to create a new page.
Enter a title for your portfolio page (e.g., "Portfolio" or "Our Work").
Click the WPBakery button to start customizing your page with the WPBakery Page Builder.
Choose between Backend or Frontend editor. For this example, we'll use the Backend editor.
Choose the Default Layout for your portfolio page.
Click the + Add Element button.
In the popup that appears:
Switch to the Laborator tab and select Portfolio.
Alternatively, use the search bar to find the element directly.
Set the options in the Portfolio widget to overwrite the layout and style of the Portfolio Page under the Customizer. Click Save Changes to apply your settings.
When you're done customizing the portfolio page, click the Publish button on the right side to make your portfolio page live.
