We rank vendors based on rigorous testing and research, but also take into account your feedback and our commercial agreements with providers. This page contains affiliate links. Advertising Disclosure

Module 5: Combined Homepage and Portfolio (Part 2/2)

Complete your Portfolio page with a CTA and About section, then set it as your homepage to invite exploration and earn trust.
Ivana Shteriova Written by:
David Alex Squarespace Web Designer: David Alex
Time to Complete Module: 2 hours
Last updated: March 17, 2025
Portfolio homepage 1 optimage1
Click the image above to preview the live page
Welcome to the second part of building your Portfolio page – the grand entrance to your art and craft. Take it as an opportunity to make a remarkable first impression and invite visitors to explore more.

You’ve already built your Portfolio section, neatly organizing your work into categories. In this module, you’ll complete the journey by adding a compelling call-to-action (CTA) telling your visitors to book and an About section. These elements will transform your Portfolio hub page from a gallery of stunning images into a page that can earn your visitors’ trust and convert them into clients.

We’ll then be able to set this as the homepage of your site so visitors can dive right in.

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.
Step 2: Add a blank section

Click the “Add Section” button above the Portfolio section.

Step 3: Add an image

5 melissa summer  1
  • 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.
Step 4: Edit the image

5 melissa summer  2
  • 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.
5 melissa summer  3
  • Enable “Overlay.”
5 melissa summer  4
  • 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%.
Step 5: Add text

5 melissa summer  5
  • 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.
Step 6: Add a button

5 melissa summer  6
  • Add a button block.
  • Place the button below the headline.
Step 7: Customize your button

5 melissa summer  7
  • 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.
5 melissa summer  8
  • Open the “Design” tab.
  • Select “Fit” to make the button match the text size with spacing around it.
Step 8: Add more text

5 melissa summer  9
  • 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.
Step 9: Make final edits to the section

5 melissa summer  10
  • 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.
Step 10: Make final edits to the image

5 melissa summer  11
  • Select the background image and click the pencil icon ( ).
  • Go to the “Design” tab.
5 melissa summer 1  1
  • 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.
You can edit the image effect in two ways:

1. Click the “Shuffle Settings” icon ( ) to randomize the settings automatically.

2. Click the “Edit Settings” icon ( ) to manually apply the desired edits.
5 melissa summer 1  2

Each image effect has different settings that can be customized. For example, if you choose “Parallax,” you can adjust the “Intensity” and “Angle.” We set the “Intensity” to 19 and the “Angle” to 228. You can also adjust the “Zoom start” and “Zoom end” under the “Zoom” settings, which we set to 8 and 18, respectively.

5 melissa summer 1  3

You’ve nailed this section! Let’s pour the same energy and creativity into your next 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

5 melissa summer 1  4
  • 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.
Step 2: Edit the saved section

Make edits to your recycled section if needed. In our case, we removed the gallery and made a few more adjustments to make it Portfolio-page-ready. If your About section looks the same or at least similar to ours, here’s what you need to do to transform its look:

5 melissa summer 1  5
  • 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.
5 melissa summer 1  6
  • 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

5 melissa summer 1  7
  • 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.
Move and resize the text block if needed. Then, use the grid adjuster ( ) to remove excess blank space.

Step 4: Add a divider

5 melissa summer 1  8
  • Go to “Edit Section.”
  • In the “Design” tab, toggle on the “Divider” switch.
  • Click the shape card to open the “Shape” settings.
5 melissa summer 1  9
  • Please select a shape. We chose “Scalloped Shape” and set the “Width” to L and “Height” to S.
5 melissa summer 1  10
  • Go back to the “Design” tab and remove the “Stroke” by clicking .
5 melissa summer 1  11

Congratulations on completing another section! You’re one section away from completing your entire Portfolio page.

Let’s make the rest of your Portfolio page shine!

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

5 melissa summer 1  12
  • Add a text block.
  • Type “PORTFOLIO” in this text block.
  • Apply “Heading 2” and “Scale Text” ( ) formatting to this text.
5 melissa summer 1  13
  • Drag the text to the upper center of the section. Stretch the corners of the text block to make it bigger.
Step 3: Add an emoji

5 melissa summer 1  14
  • Add a new text block.
  • Insert an emoji in this text block. We picked a white circle.
A reminder on how you can add emojis:
  • 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.
Step 4: Add another emoji

5 melissa summer 1  15
  • Duplicate the emoji by clicking in the main block toolbar.
5 melissa summer 2  2
  • 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.
Step 5: Customize the emojis

5 melissa summer 2  3
  • 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.
5 melissa summer 2  4
  • Enable “Blur” and select “Element.”
  • Set “Blur Amount” to 50 px or as desired.
  • Apply the same edits to the second emoji.
Step 6: Change the section’s color

5 melissa summer 2  5
  • Go to “Edit Section.”
  • Open the “Colors” tab.
  • Select a dark color theme. We went with “Darkest 1.”
Step 7: Adjust the section’s height

5 melissa summer 2  6
  • 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 melissa summer 2  7

Your hard work is paying off! There’s nothing left to create from scratch. All your Portfolio page sections are ready to grace the brightest corners of the internet.

Let’s complete your Portfolio page masterpiece!

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:

5 melissa summer 2  8
  • For “Layout,” select “Hover: Follow Cursor” from the dropdown menu.
  • Pick “Stacked” for “Link Format.”
  • “Selection in Front” should remain disabled.
5 melissa summer 2  9
  • Set “Vertical Link Spacing” to 4.
  • Select “Fade” as your “Animation Type” and “Medium” for “Animation Duration.”
5 melissa summer 2  10
  • Adjust “Image Size” to 100.
  • Set “Follow Speed” to 5%.
Step 2: Delete the preset portfolio section background image

5 melissa summer 3 1
  • Open the “Background” tab.
  • Click the trash can icon ( ) to delete the preset background image.
Step 3: Change the portfolio section’s background color

5 melissa summer 2  11
  • 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 melissa summer 2  12

You’ve officially conquered the Portfolio page. Now, let’s give it the final polish so it dazzles on every screen size!

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” ( )

Step 2: Optimize the first section for mobile

5 melissa summer 2  13
  • 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.
Step 3: Optimize the second section for mobile

5 melissa summer 2  14

This section looked fine on our end. We just needed to tighten it with the grid adjuster ( ).

Step 4: Optimize the third section for mobile

5 melissa summer 2  15
  • 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.
The Portfolio section (fourth section) looks great as is. Also, we’ve already optimized the portfolio subpages (Portfolio, Food, etc.) for mobile in the previous module. No further attention is needed for this section.

This is how the mobile version should look:

rrrt

Pop the champagne – your Portfolio page is complete, optimized, and ready to impress! Just make sure to save your progress.

5.6 Save Your Portfolio Page

Let’s save what you’ve built so far.

5 melissa summer 2  16
  • Click “Save” in the upper left corner.
  • Click “Exit” to leave the page.
The internet is officially your showroom!

Take a moment to celebrate – you’ve just completed your (almost) entire website!

112

But don’t hang up your creative hat just yet! In the next module, we’ll tie up the final loose ends like building the footer, finalizing your main navigation, optimizing SEO settings, and tackling those pesky common website mistakes.

You’re so close to launching your website and sharing your talent with the world! Get ready for the final steps – it’s almost time to hit publish and watch your site dazzle your visitors.

Let’s finish strong!

3529673
50
5000
114312663