Here’s how you can create a scrolling homepage experience – similar to ilovecreatives studio. Follow the steps below!

1. Take a full-page screenshot

Download the GoFullPage Chrome extension to take a full-page screenshot of your homepage.

Or you can do it using the Developer Tool:

Open Developer Tool (cmd+opt+I)
Click on the 3 dots in the top-right corner and select “Run Command”
Start typing “full-size screenshot…”
Select “Capture full-size screenshot” — this takes a screenshot of the page you’re currently on and saves it as an image

*TIP: Check your screenshot to see if it captured everything

2. Upload your image

In Custom CSS > Custom Files, upload your image. Click on your image and copy the image URL.

https://static1.squarespace.com/static/64cda2630d5d2b3109502a03/t/65d79afd7de0e93152152c05/1708628742145/ilovecreatives-studio-dedcool-home.jpg

3. Add the HTML below into a code block

<div class="scroll-preview" style="width:100%; height:800px; overflow:auto;">
  <img src="YOUR URL HERE" width="100%">
</div>

Replace “YOUR URL HERE” with your image URL
You can adjust the width and height depending on how you like it

And voila! Scrolling preview here we gooo ⭐️

FAQ

What if I want to style the preview window?

You can target this in CSS, like this:

.scroll-preview {
  INSERT CODE HERE;
}

Can I use iframes instead?

This is another way to embed a live site onto your site.

We don’t suggest it here because 1) sometimes your client will make edits so any design changes they make will show up on your portfolio, and 2) not all sites allow iframe connections.

For example, Squarespace has set a policy to not allow their 7.1 sites to be loaded via iframes unless they’re being embedded onto a site with the same domain.

Creating a Scrolling Preview