This tutorial will guide you to build a functional portfolio using only WordPress Pages and the SkyandStars design library.
Step 1: Create the Portfolio Index Page
- In your WordPress dashboard, go to Pages → Add New.
- Name this page something like Portfolio – this will be your main portfolio page (the “index”).
- Publish the page.
Step 2: Load the Portfolio Layout from the Design Library
- On the Portfolio page you just created, click Edit with Kadence Blocks (or just edit normally).
- Click the Design Library button.
- Make sure you’ve connected to the design library you purchased. If you haven’t, follow this tutorial to connect:
👉 How to connect to the SkyandStars Design Library - Once connected, find “SkyandStars” tab or “Portfolio page” in the design library title tab.
- Look for a layout labeled something like Portfolio Index and click “Import” or “Load”.
- Wait for the layout to fully load into your page editor.
Step 3: Customize the Portfolio Index Page
Replace all placeholder content (text, images, links) with your own project previews or thumbnails.
Don’t forget to Save or Update the page.
Step 4: Create a Single Portfolio Page (Project Detail Page)
- Go to Pages → Add New again.
- Name this page based on your portfolio item, e.g., “Brand Identity for ABC”.
- Before publishing, set this as a sub-page under your Portfolio Index page:
- In the right-hand Page Attributes panel, choose “Portfolio” as the Parent Page.
(Here’s a tutorial on how to create sub-pages in WordPress: Create a Subpage in WordPress)
- In the right-hand Page Attributes panel, choose “Portfolio” as the Parent Page.
- Publish the page.
Step 5: Load the Single Portfolio Layout
- Open the new sub-page you just created.
- Click Design Library again.
- Under the SkyandStars tab, look for a layout labeled Single Portfolio or Project Detail Page.
- Click Load and wait for it to appear on your page.
- Modify it with your project details – description, images, links, etc.
- Publish the page. Now this project has its own URL. You can use this page template as many as you want for all your portfolio page.
Step 6: Link the Project in Your Portfolio Index
- Go back to your main Portfolio page.
- Edit it and select the portfolio thumbnail or button for that project.
- Link it to the single portfolio page URL you just created.
- Repeat this for every new project you add.
Repeat for More Projects
Just repeat Steps 4–6 for each new portfolio item. Each one becomes a sub-page of your Portfolio index page and links back from the main layout.