Time to Complete Module: 1 hour 40 minutes
Last updated: March 17, 2025
IN THIS MODULE
4.1 Add a New Page4.2 Introduce Your First Portfolio Category (First Section)4.3 Add a Gallery of Your Work (Second Section)4.4 Add a Design Flair With a Scrolling Element (Third Section)4.5 Optimize for Mobile4.6 Save Your Portfolio Subpage4.7 Build Your Second Portfolio Category4.8 Build the Rest of Your Portfolio4.9 Add a Dropdown Menu in Your Site’s Main Navigation

Each module in this guide includes instructions for building a specific page based on a sample design created by our Squarespace expert (Digital Agency, Local Business, Portfolio Site). You can switch to an alternative version of this module by clicking a different design in the left sidebar under “Alternative Designs.“
Note that the Melissa Summers site (Portfolio) does not have a dedicated services page. Instead, the homepage acts as a central hub for multiple portfolio pages, with the combined setup divided into two modules. This is part 1 of 2. Click here for part 2.
4.1 Add a New Page
You’ll begin with a “Portfolio” template to harness its unique features. This page structure allows you to separate projects into different categories (subpages), making it easy for visitors to navigate your Portfolio page and find what they want.
- Open the “Pages” panel.

- Go to “Not Linked” and click the plus icon (
). - Select “Portfolio” from the list that will pop up. It’s under “Collections.”

- Pick a portfolio layout. We selected the option that displays a vertical list of category names that change the background image when hovered over.
- Rename the page to “Portfolio.”

- Click the new “Portfolio” menu item to open a list of all “Project” items.
- Delete the “Project” items from the template. You can do this by selecting each item’s checkbox (“Project One,” “Project Two,” “Project Three,” etc) and clicking “Delete.”

- Click the plus icon (
) to add a new project subpage.

- Click “Add a Blank Project.” This opens the “Project Settings” menu.
This project will act as a subpage that you can link to from your main Portfolio page (or in our case, the homepage). It will be a standalone page, representing a separate category of your work.
For example, we divided our portfolio into four categories on our website: “Portrait,” Food,” “Travel,” and “Wedding.” This way, visitors can go straight to the category that interests them without wasting time filtering through irrelevant work examples.
Step 3: Customize your portfolio project (subpage)

- In the “General” panel, replace the preset title with the name of your first portfolio category. This is how the page will appear in the navigation menu. On our photographer website, we titled our first project “Portrait.”
- Add an appropriate image that reflects the nature of your project. For instance, for our “Portrait” category, we added a black-and-white portrait image of a woman.
- Click “Save” in the upper left corner of the window.
4.2 Introduce Your First Portfolio Category (First Section)
It’s time to bring your Portfolio page to life by introducing your first category! This section includes your category title and a short description that gives visitors a glimpse into what this category is about. Step 1: Add a new blank section Step 2: Add text
- Add a text block.
- Type the name of your first portfolio category and format it to “Heading 1.” We wrote “Portrait” on our website.
- Duplicate the existing text block by clicking from the main block toolbar or add a new one.
- Place the duplicate text block below the category name and stretch its corners to widen it.
- Replace the duplicate text with a short, compelling description of your portfolio category and format it to “Paragraph 1.” We wrote “Revealing personalities, capturing connections. Your story, beautifully told.” for our “Portrait” category.
- Use the grid adjuster (
) to remove any unnecessary blank space.
4.3 Add a Gallery of Your Work (Second Section)
The gallery section is the heart of your subpage, especially if you’re a photographer or work in other visual fields. This is where your work truly speaks for itself, showcasing your skills and style. It allows potential clients to easily explore your work and envision the results they’ll get by hiring you. Remember, your gallery isn’t just a collection of images – it’s a curated experience that tells a story and sparks emotions. If done right, it’ll captivate viewers, draw them into your creative world, and encourage them to take the next step – book you – with confidence. Now, let’s get your gallery set up to wow your audience! Step 1: Add a “Gallery” section
- Click the “Add Section” button.
- Scroll down and select “Images” from the menu on the left side of the window.
- Select a gallery template with the “i” sign. It means you can add content items and switch between layouts without having to rearrange them manually. We chose a two-column grid layout with rounded-corner images.

- Click “Edit Gallery.”
- Hover over a sample image, click the trash can icon (
), and select “Confirm” in the dialog box to delete it. Repeat this step for the remaining images. - Click the plus icon (
) to add your images.
- Comment fonctionne le Bitcoin

You can use the settings in the “Gallery” tab to customize the design to your liking. For example, under “Gallery Type,” you have different layouts to choose from. We stuck to the default “Grid: Masonry” option, but play around and see what you like the most. Additionally, you can increase or lower the number of columns, add captions and animation, etc.
If you want to replicate the adjustments we made to our gallery, here’s what you need to do:- Set “Width” to “Inset.”
- Adjust the “Spacing” to 20.

- Enable “Lightbox” if you want people to be able to click on each image and view it in a bigger format.
4.4 Add a Design Flair With a Scrolling Element (Third Section)
As a creative, you know the power of a “wow” moment. Adding a scrolling element to your Portfolio page is one of those moments, bringing movement and energy to your site. Why settle for the ordinary when something can be extraordinary? The internet has enough boring websites already. Plus, it’s all about the presentation in visual industries! A scrolling element allows you to share any text in a visually stunning, motion-infused format. Let’s add that extra spark to your website and make it a fun space to explore! Step 1: Add a blank section Step 2: Add text
- Add a text block.
- Drag the text block to the upper middle part of the section.
- Add text encouraging visitors to take action and format it as “Heading 4.” We wrote, “Plan Your Shoot Today.”
- Center the text using
.
You’ll use the scrolling block to add your email address and, optionally, other contact information. The scrolling effect will make your contact information hard to miss and add a design flair to your website. We creatives love a little (or a lot) of visual drama, and this element brings the right dose!

- Click “Add Block” and select “Scrolling” from the list.
- Place the scrolling block below the text block.

- Click the pencil icon (
) and open the “Content” tab.
Tip: Use the “Add Item” option if you need to add more elements. This could be useful if you want to add more contact details like your phone number in addition to your email.

- Click the first item to add your email. Type your email address in the “Text” box.
- Click the second item to add an emoji. To add an emoji, you need to:
- Windows: Right-click on your device and select “Emoji,” or press the Windows key + period.
- Mac: Press Fn + E,
+ E, or Command + Control + Spacebar.
- Open the “Design” tab.
The “Design” tab has many tools to customize the scrolling block. For example, you can make it stop when someone hovers over it, add fading edges, choose a solid or dashed border, or add a background to make it stand out.
We liked most of the default settings but made a few minor tweaks to improve the design of our scrolling block. Here’s how to copy what we did:

- Increase “Text Size” to “M.”
- Change the “Speed” to 0.5x.

- Set “Item Spacing” to 0.2 em.

- Stretch the scrolling block horizontally from one end of the section to the other.
- Use the grid adjuster (
) to remove any unnecessary blank space.
4.5 Optimize for Mobile
Your website should be as polished on mobile devices as it is on desktop. A seamless, mobile-friendly design ensures visitors can see your portfolio no matter the device used. Ensure your layout works well on smaller screens, with readable text, appropriately sized images, and visible and clickable buttons. If you’ve customized your design beyond the recommendations in this guide, your mobile site may differ from the example provided. Take the time to review and test your site on mobile devices, making any adjustments needed to ensure it looks professional and functions flawlessly. Step 1: Go to “Mobile View” (
Note: We’ll edit and mobile-optimize the Portfolio menu section in Part 2.
This is what the mobile version should look like:

4.6 Save Your Portfolio Subpage
Let’s save what you’ve built so far so you can reuse it for your other Portfolio categories. Step 1: Save your first Portfolio category
- Click “Save” in the upper left corner.
- Click “Exit” to leave the page.
4.7 Build Your Second Portfolio Category
Building the rest of your Portfolio categories is a breeze. You only need to duplicate the first subpage and swap it for your new content. With just a few clicks, you’ll have a brand-new subpage ready to showcase the versatility of your talent. We’ll show you how to duplicate your existing layout and replace it with fresh content. Step 1: Duplicate the first subpage you just built
- Click the three dots icon (
) - Select “Settings” from the menu.

- A window with “General” settings will pop up. Scroll down to the bottom of the “General” menu and click “Duplicate.” Then, select “Confirm” in the dialog box to create a copy.

- Click the three dots icon (
) next to the duplicated project and open its “Settings” menu.

- Replace the existing image with a new image relevant to your second Portfolio category.
- Add the title of your new Portfolio subpage. We renamed the second subpage to “Food.”
- Change the URL slug to reflect the new category. For example, we wrote “food” as the URL slug for our second subpage.
Note: A URL slug is the part of a web address that comes after the primary domain name and describes the specific page’s content. For example, in “www.example.com/portfolio/portrait,” the slug is “portrait,” indicating that the URL is for a “Portrait” subpage under the “Portfolio” page.
- Click “Save” and exit the “General” window.
- Replace the duplicated title, description, and gallery images with new content to reflect your new portfolio category.
4.8 Build the Rest of Your Portfolio
Repeat the entire process described in 4.7 until you complete all your Portfolio page categories. There are four portfolio categories on our website: “Portrait,” “Food,” “Travel,” and “Wedding,” meaning we had to repeat the process three more times after building the first subpage.
Each portfolio project is easily accessible from your main portfolio section. Open the main portfolio section in the editor and click “Manage Projects.” The portfolio projects will appear on your left.
Remember to save your work every time you finalize a portfolio project. When you have completed all your portfolio categories, exit the editor.
Look at you, framing your portfolio page like a pro. There are only a few more steps until your portfolio page is ready to tell your talent story to the world.
4.9 Add a Dropdown Menu in Your Site’s Main Navigation
When your portfolio is divided into different category subpages (like on our website), attaching a dropdown menu with direct links to the separate categories can help visitors quickly find what they are looking for. When visitors hover over the Portfolio page in your site’s main navigation (the top menu of your site), a dropdown menu will show all your portfolio subpages. Clicking on any of them will take them directly to the category that they want to see.

- Back to the “Pages” menu, click the plus icon (
) to open the “Main Navigation” menu. - Select “Dropdown” from the menu.

- Click the gear wheel icon (
) to configure your dropdown menu. - Add the “Page Title,” “Navigation Title,” and “URL Slug” of your main Portfolio page. In our case, the page and navigation title is “Portfolio,” and the slug is “portfolio.”

- Open the dropdown menu by clicking the left arrow icon (
). - Click “Add Page.”

- Scroll down to the bottom of the list and click “Link.”
- Add the name of your portfolio subpage under “Link Title.” For example, we wrote “Portrait” for the first portfolio category on our website.
- Insert a link to the relevant portfolio category in the “URL” box. For example, we typed “/portfolio/portrait” in the field, so the link text directs users to your “Portrait” subpage on the “Portfolio” page.
Note: Website pages are often organized in a hierarchy to create a clear structure. For example, a “Portfolio” page can act as a parent page, while subpages like “Portrait” or “Food” sit beneath it. This structure is reflected in URLs: the parent page is followed by the subpage, like “/portfolio/portrait.”
- Optionally, toggle on “Open link in new tab.”
- Repeat the process for all your portfolio categories.
