How to create a portfolio in Squarespace 7.1 // Portfolio Setup in Squarespace from InsideTheSquare

[@InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@valenecampbell]

Hi Becca, I've been a fan of yours for some time, thank you for all you do. Is it possible to embed a portfolio in an existing page?

[@InsideTheSquare]

Great question but unfortunately, it isn't possible to do this in Squarespace at this time. You can add page sections above and below a portfolio, recreating a similar effect, but the collection of projects is its own page. Hope that info helps and best of luck with your Squarespace site! :)

[@valenec5231]

Thank you for your reply. 😊

[@megandunford7997]

Hello, your videos are so helpful. Thank you! Is there a way to create a portfolio that when you click on it, it creates a pop up that you can scroll through the images instead of taking you to another page?

[@InsideTheSquare]

I'm not entirely sure if I understand, but It sounds like you want a portfolio to be a page section, but it can't be a part of another page; it's a stand alone page like a blog. You can add sections above and below the project list if that helps with your design concept! 😬

[@bychristineharris6485]

Thank you Becca! Is it possible to move content from one portfolio to another? They are set up as separate pages and I'd like to combine into 1.

[@InsideTheSquare]

Kind of! You can technically save any page section you’ve created in a project and reuse it in another page. It’s definitely not what that feature was designed for, but it’s a workaround that can help in a pinch! 🙌

[@bychristineharris6485]

@@InsideTheSquare Thank you!

[@danllinehan]

First - thank you so much for your videos... They have saved me so many times! I'm *finally* switching from my old Avenue template and getting started for the first time in 7.1... I have been creating a portfolio of projects but was wondering about some customizing of the "thumbnails" in the grid. In my old Avenue site, my portfolio was set up as an index and I had custom CSS that changed the thumbnail hover in a way that the image would be replaced with a different image (stored in my Custom Files) on mouseover. I have been digging and digging through the code on inspect and trying alllll sorts of things, but can't figure out how to replicate this in the 7.1 portfolio. Any help on this would be wildly appreciated! Thank you!

[@InsideTheSquare]

Hey Dan'l! Glad I can help you with your Squarespace journey! :) Are you part of my mailing list? I have something that might be helpful coming down my pipeline that might help. You can sign up at Insidethesquare.co if you haven't already.

[@shreyakothari3545]

how do i add this porfolio to my homepage? i want the portfolio to be on the main website page not a separate section

[@InsideTheSquare]

Look under the portfolio settings and you'll see an option to make it your homepage 👍👍

[@chrisbaxter5038]

can you nest projects within projects?

[@InsideTheSquare]

Great question Chris! Sadly at this point in time you cant - portfolios can only have one level of projects :( if that changes I'll be sure to post a tutorial about it! 😎

[@vishalbole3168]

Quick Question: Is this Squarespace 7.0 OR Squarespace 7.1 tutorial? Because I am using Squarespace 7.1 and on this portfolio page, I want all the product's thumbnails and videos showing on the Portfolio page so when I am adding the section there is not showing Gallery option in the dashboard. So how to add videos and Images to the portfolio page.

[@InsideTheSquare]

Hey Vishal! This is for 7.1 but they changed the name of those page sections a few months ago. You'll find gallery sections as your first few options in the image page section selection.

[@orsonelliott8835]

can you still change the background the projects as well?

[@InsideTheSquare]

Absolutely! The project pages are unique and can be edited like standard pages, the only exception being adding custom code to them requires a code block as there isn't page header code injection. Hope that info helps!

[@ethan-ytzheng2656]

Can you add descriptions under each portfolio title on the home page before you click into project page?

[@InsideTheSquare]

Technically you totally can with a lot of extra code, but I would recommend using image blocks with the thumbnail and text added to the page, linking them to the project just to help it stay responsive with out adding extra codes to add the content and adjust the font size for various screen sizes; Squarespace will do that for the image blocks automatically 👍👍

[@andykhouri]

Is there a way to create a project "offline" and then add it to a portfolio? Seems odd that every project within the portfolio has to be made first and then published all at once?

[@InsideTheSquare]

I am not quite sure what you are trying to create but I would love to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@erikgrosskopf6824]

What happens if you don’t see the portfolio as an option when you hit the + sign? Is there another name for it?

[@InsideTheSquare]

Hey Erik!! If you are using an older version of Squarespace you wont see the option; portfolios are only available in 7.1. A similar feature called a grid index can be found in a few themes in version7 - here is some more info for ya from the Squarespace support blog: support.squarespace.com/hc/en-us/articles/360035611791-Portfolio-pages

[@fezenstein]

hello - i love the portfolio settings - however is there anyway to tweak the design to get a mosaic layout? similar to the old mercer template layouts in 7.0?

[@InsideTheSquare]

Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. if I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!

[@fezenstein]

@@InsideTheSquare i was able to get it to "kinda work" with this.. it's a bit janky for sure - but it's less "equal sized grid" /* This makes the masonry view of the porfolio */ #gridThumbs .grid-item:nth-of-type(3n+1){ grid-column: span 2; }

[@fezenstein]

@@InsideTheSquare Can you randomize the portfolio layout? so that the projects load in a different order on reload of the "portfolio" page.

[@InsideTheSquare]

@@fezenstein unfortunately you can’t do that with css. CSS changes the style of a site (cascading style sheet) and not the way a site functions, like what order it loads collection item content in a list. You might be able to find a plug-in that can do that via JavaScript; I’d recommend posting in the forums to see if anyone has built one. Best of luck!

[@mohanr5001]

Hello, How can we password protect a particular project or a case study in the work section? In the particular example, you used in this video if we go inside WORK we find 2-3 projects or case studies and on-click of more options we find SETTINGS and inside setting we will be having only Title change and URL change how to get Password option?

[@InsideTheSquare]

Hey Mohan! Projects inside a portfolio are collection items so they don't have individual permissions. You could try creating pages instead, and place them inside a folder, with a main page containing links to the pages. The only things missing would be the nested URL and the pagination, but it's a good quick fix to password protect the content. Probably not the answer you were looking for but I hope that idea helps! 😬

[@mohanr5001]

@@InsideTheSquare Thank you, mam, it was really helpful and was looking for the same and I'm trying to find the pagination plugin if I get that's well and good else it's okay. Thank you once again mam for your reply in your busy schedule. Happy New Year mam have a great year ahead and keep inspiring. 🧡

[@MagaliSurLaMer]

Hi, one thing I'm confused about is how you include the portfolio in a continuous scroll page. The way it appears to me here is that you are going to be clicking on a completely separate page to get to the portfolio. How do I make it part of the continuous scroll? Thank you.

[@InsideTheSquare]

Hey MagaliSurLaMer - It sounds like you want a portfolio to be a page section, but it can't be a part of another page; it's a stand alone page like a blog. You can add sections above and below the project list if that helps with your design concept! 😬

[@MagaliSurLaMer]

@@InsideTheSquare Thank you.