Is it possible to create a portfolio site in Webflow where clicking on a project loads the CMS page on the right side without affecting the 'work navigation' on the left side?
Published on
September 22, 2023
Yes, it is possible to create a portfolio site in Webflow where clicking on a project loads the CMS page on the right side without affecting the 'work navigation' on the left side. You can achieve this by using dynamic content and interactions in Webflow. Here's a step-by-step guide on how to do it:
- Set up your CMS collection:
- In the Webflow Designer, go to the Collections panel and create a new collection for your portfolio projects.
- Add the necessary fields to your collection, such as project name, description, images, etc.
- Design the portfolio page:
- Create a new page in Webflow for your portfolio.
- Design the left side of the page with your 'work navigation' elements, which should remain fixed and unchanged.
- Design the right side of the page where the CMS page will be loaded when a project is clicked.
- Add CMS elements:
- In the Webflow Designer, drag and drop a CMS collection list onto the right side of the page.
- Connect the CMS collection list to your portfolio collection.
- Design the layout for each CMS item, including any dynamic content fields you want to display for each project.
- Create interactions:
- Select the CMS collection list on the right side of the page.
- Create an interaction triggered by a click event.
- Set the action of the interaction to show/hide the CMS page on the right side.
- Connect interactions to CMS pages:
- Go to the Navigator panel and select the dynamic template page within your CMS collection.
- Set the initial state of the CMS page to hidden.
- Connect the interaction created in the previous step to the CMS page.
- Customize CMS page:
- Design the layout and content of the CMS page, making sure to use dynamic fields to display the project details.
- You can also add a back button or navigation to return to the portfolio page.
By following these steps, you can create a portfolio site in Webflow where clicking on a project loads the CMS page on the right side without affecting the 'work navigation' on the left side. This will provide a seamless experience for users, allowing them to view project details without leaving the main portfolio page.
Additional questions:
- How do I create a CMS collection in Webflow?
- Can I customize the design of CMS pages in Webflow?
- Is it possible to filter CMS items on a portfolio site in Webflow?
