Time to Complete Module: 2 hours
Last updated: March 17, 2025
IN THIS MODULE

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 2 of 2. Click here for part 1.
5.1 Create a Call-to-Action (First Section)
Your Portfolio page needs to start with a powerful opening section that sets the tone for the entire website. This is where you invite your audience to connect with your art and take action. For this section, you’ll create a catchy headline, encourage visitors to take the next step with a clear and inviting CTA button and display your (business) name front and center to make a strong personal connection. This combination draws attention and guides potential clients into action to explore your portfolio further or book a session. Let’s design an opening section that makes the first impression unforgettable! Step 1: Edit the Portfolio page Unlike before, you don’t need to start with a new page. You’ll continue building on the Portfolio page you created in the previous module.- Click the Portfolio page labeled with
from the “Not Linked” page list. - Select “Edit” to edit the page.

- Add an image block.
- Stretch the image block to fill the entire section.
- Add your image. This image will act as a background photo for the section. You need to choose a horizontal image to fill the entire section. We picked a visually pleasing sunset image as the background for our opening section.

- Click the pencil icon (
) from the main block toolbar. - Open the “Design” tab.
- Select “Fill” to stretch the image and cover the entire block size.
- Click
under “Corner Radius” to adjust the roundness of each corner of your image. We set the image’s bottom left and right corner radius to 45.

- Enable “Overlay.”

- Click “Color.” Under the “Palette” tab, select a color from your site palette or click “Custom” to pick a custom shade. We selected the darkest color from our site palette (HEX code: #221C1C) and set the opacity to just below 20%.

- Add a text block. Move it to the center of the background image.
- Insert your headline in this text block. We wrote, “Capture the Moment.”
- Vertically align the text as desired. We moved it to the bottom of the block using
from the main block toolbar. - Click the pencil icon (
) and format the text to “Heading 1.” - Align the text to the center of the text block using
. - Change the text color (if needed). To do so, click the colored dot icon (
) in the editing toolbar and select the desired color. Since the black text wasn’t visible on our background, we changed it to yellow (HEX code: #FFD52E) from our site palette.

- Add a button block.
- Place the button below the headline.

- Click the pencil icon (
) to edit your button. - Open the “Content” tab.
- Write your button text. We wrote “BOOK TODAY” in all capital letters to make it more prominent against our background image.
- Link the button to your Contact page. Click the “Attach Link” button and type the name of your Contact page in the search bar. Then, select it from the list.

- Open the “Design” tab.
- Select “Fit” to make the button match the text size with spacing around it.

- Add a new text block and type your (brand) name. For example, our fictional photographer’s personal name doubles as their brand name, so we wrote “MELISSA SUMMER” in all capital letters in this text block.
- Format this text to “Heading 1,” and apply “Scale Text” (
). - Stretch the text block across the entire width of the section.
- Change the text color if needed. This time, we went with the light gray color (HEX code: #F1F1F1) from our site palette.
- Place the text at the bottom of the section.

- Go to “Edit Section.”
- Open the “Design” tab.
- Disable “Fill Screen.” This adjusts the section’s height to fit only the content (image and text blocks) inside it.

- Select the background image and click the pencil icon (
). - Go to the “Design” tab.

- If you, like us, want to add an effect to your background image, click on “Image Effect.”
We selected “Parallax,” which adds a subtle parallel movement when you scroll over the section.


5.2 Introduce Yourself & Your Craft (Second Section)
The About section is your chance to connect with visitors on a personal level, giving them a glimpse into the artist behind the craft. This section isn’t just about sharing who you are and the main focus of your work – it’s about creating a connection that sets you apart from the crowd. Potential clients want to know what inspires your work, what drives your creativity, and why they should choose you. Whether it’s your love for storytelling through (insert your craft here), your years of experience, or the unique approach you take, this is the place to let your passion shine. The good news is you already built an entire About page, so why not recycle a section from there? You can start from scratch if you want to, but I suggest you take the shortcut here. Step 1: Add a saved section
- Click “Add Section” and go to “Saved Sections.”
- Pick a section from your About page. We selected the second section from our About page, which includes personal and work details about our fictional photographer.

- Select all the images on the right side of the section. Then press Backspace or Delete to remove the gallery.
- Stretch the text block across the entire section.

- Write “ABOUT” (in all caps) above the existing text and format it to “Monospace.”
- Scroll down to the bottom of the text and write “Learn more” as this section’s CTA.
Note: We added an arrow next to “Learn more.” As we mentioned in Module 3, our paragraph font of choice, Instrument Sans, automatically creates an arrow when you type a hyphen (-) and a greater-than sign (>) one after the other. This doesn’t apply to all fonts.
Step 3: Add a link to your About page

- Highlight the “Learn more” text.
- Click the “Link” icon (
) from the editing toolbar. - Add a link to your About page for visitors interested in learning more.

- Go to “Edit Section.”
- In the “Design” tab, toggle on the “Divider” switch.
- Click the shape card to open the “Shape” settings.

- Please select a shape. We chose “Scalloped Shape” and set the “Width” to L and “Height” to S.

- Go back to the “Design” tab and remove the “Stroke” by clicking
.

5.3 Build the Intro for Your Portfolio Section (Third Section)
Use this section to introduce what’s next and clearly separate the Portfolio from the rest of the page. This is one of the simplest sections you’ll build, featuring only a title like “Portfolio” or “My Work.” Without further ado, let’s tackle this microsection! Step 1: Add a new blank section Step 2: Add text
- Add a text block.
- Type “PORTFOLIO” in this text block.
- Apply “Heading 2” and “Scale Text” (
) formatting to this text.

- Drag the text to the upper center of the section. Stretch the corners of the text block to make it bigger.

- Add a new text block.
- Insert an emoji in this text block. We picked a white circle.
- Windows: Right-click on your device and select “Emoji.” Alternatively, press the Windows key + period.
- Mac: Press Fn + E,
+ E, or Command + Control + Spacebar. - Click the “Scale text” icon (
) to scale your emoji so that it fills the entire block.

- Duplicate the emoji by clicking
in the main block toolbar.

- Replace the emoji with another emoji. For example, we selected the yellow circle emoji to add a splash of color that matches the sunset vibes from the opening section.

- Place the two emojis behind the text by clicking the “Move Backward” icon (
). - Select the first emoji. Click the “Style Background” icon (
) in the main block toolbar.

- Enable “Blur” and select “Element.”
- Set “Blur Amount” to 50 px or as desired.
- Apply the same edits to the second emoji.

- Go to “Edit Section.”
- Open the “Colors” tab.
- Select a dark color theme. We went with “Darkest 1.”

- Open the “Design” tab.
- Set “Height” to S.
- Drag
up if you need to reduce the grid rows and shorten the section height further.

5.4 Edit the Portfolio Section
With the structure of your Portfolio page complete, it’s time to add the sparkle and flair and focus on the final touches that will make it truly stand out. This step is all about refining the design, ensuring consistency, and adding any last details to create a polished and professional look. Let’s transform your Portfolio section into a stunning showcase that wows your audience. Step 1: Adjust your section’s settings- Go to “Edit Section.”
Under the “Format” tab, you can find different settings to customize your portfolio section further. These include different layout options, spacing settings, animation effects, etc.
We applied a few more edits within the “Format” tab to the portfolio section we built in the previous module. If you want to replicate this on your site, here’s exactly what you need to do:

- For “Layout,” select “Hover: Follow Cursor” from the dropdown menu.
- Pick “Stacked” for “Link Format.”
- “Selection in Front” should remain disabled.

- Set “Vertical Link Spacing” to 4.
- Select “Fade” as your “Animation Type” and “Medium” for “Animation Duration.”

- Adjust “Image Size” to 100.
- Set “Follow Speed” to 5%.

- Open the “Background” tab.
- Click the trash can icon (
) to delete the preset background image.

- Go to the “Colors” tab.
- Select a dark color theme. We chose “Darkest 1,” the same color theme we applied to the section above. These two sections need to appear as one visually.

5.5 Optimize for Mobile
Many people will open your Portfolio page on the go from their phone or tablet. That’s why optimizing for mobile is a must. A well-designed mobile experience ensures your work looks just as stunning on a smaller screen as it does on a larger one. When optimizing your Portfolio page, pay attention to readability, layout, and interactivity. Make sure your text is easy to read, your images load quickly and adjust seamlessly to fit smaller screens, and your CTA buttons are prominent and clickable. The last thing you want is for a potential client to struggle to navigate your site or miss out on key details because of poor mobile formatting.Note: If your site features elements not covered in this guide, your mobile version will differ from ours. Carefully evaluate what needs to be done and apply the necessary adjustments to provide a seamless mobile experience.
Let’s make your site shine on every screen and give mobile users the VIP treatment too!
Step 1: Go to “Mobile View” ( 
- Drag the image’s corners to make it taller.
- Bring the headline text up and place it in the upper central part of the section. Resize it to fit the mobile view if needed.
- Drag the “Book Today” button’s corners to make it wider. Place it below the headline.
- Bring your (brand) name higher so it sits at the bottom of the image.
- Use the grid adjuster (
) to eliminate blank space.


- Make the graphics smaller. On our end, the emojis were too big and covered the entire section.
- Place them on the left side of the section or as you prefer.
- Make sure the text sits in front of the emojis. Use
to move the text forward or to move the emojis backward. - Drag the grid adjuster (
) up to remove blank space.

5.6 Save Your Portfolio Page
Let’s save what you’ve built so far.
- Click “Save” in the upper left corner.
- Click “Exit” to leave the page.
