Design Features On The New Squarespace Home Page That Aren’t Actually Native To Squarespace

Squarespace is a great platform for the average user to produce high-quality, professional websites, while requiring little knowledge of design or code to achieve that. With built-in design elements and multiple customization options, anyone could create a stunning page for their business, friend, client, etc. Unfortunately some features showcased on the new Squarespace home page require a lot more UX experience and customized code than what’s actually offered at a basic level. Let’s take a look at some of these beautiful, but ultimately difficult to achieve design elements not actually native to Squarespace.

Table of Contents in Detail Hide

Motion Elements

When you open the Squarespace home page the first thing you see is the graphic of a laptop playing the animation of a scrolling sample Squarespace website. This is not an idea you could replicate using just native Squarespace customizations. While it’s an effectively beautiful feature, it would be pretty complicated for the average user with limited design and code experience to copy.

An alternative would be using the embedded code block to add a video in lieu of an animation. This would display a video that plays automatically when someone visits your website. While it won’t be as “minimalistic” as the video display on the Squarespace homepage, you do have some creative options available if a video or animation display appeals to you.

Sticky Text

As you scroll further through the homepage you’ll see large text that sticks in place to the background as the next segment of images scrolls upward. The text ultimately disappears and does not resurface once you’ve scrolled past that segment. Sticky text in general allows you to keep text at the top of your website no matter how far down the page someone scrolls, and while it is a common feature for modern website styles, it requires custom code to be added into a Squarespace website.

Hovering Over a Word To Show An Image

In the “Templates for every purpose” sample, you’ll see a list of text that allows you to hover to reveal images on the right side of the screen. Squarespace does natively offer a feature to hover over text to reveal an image, however the image will fill the entire backend of the screen. Again, a custom code is required to mirror the type of placement featured on the website.

No Change In Text Alignment 

Although you can add spacers to customize the alignment/placement of text boxes, the Squarespace homepage features a code to ensure text stays in place next to their featured images in a way that is super elegant and clean.

One workaround for this is to use the HTML code. Go to the Code tab in the Squarespace editor and select "HTML." Then, enter the code for the alignment that you want to use and click "Save." You can also customize the font, size, and color of your text. 

Text Slide

One of the more beautiful design elements from the homepage is the sliding text feature that has two lines of text move toward each other as you scroll down, settling into place and sticking once you’ve reached the full display. There is no easy way to add this type of text slide to your website without custom coding. It could possibly be done using iframe but this is a bit advanced for anyone without much design experience.

Adding Multiple Frames In One Page 

Adding multiple frames to one image block is not a native feature. This was displayed on the homepage as two images that stayed in place but transitioned to the other as you scrolled. You could try a more limited version of this by using the Slideshow block. To do this, go to the Blocks tab in the Squarespace editor and select "Slideshow." Then, enter the URL of the website that you want to embed and click "Add." 

Should You Stick With Squarespace?

While it does feel a little misleading to showcase designs that require more design experience than what the advertised user generally has, these samples are still proof of what you can create and the type of beauty that’s within reach of the Squarespace platform. Custom codes may be more of a challenge but they can be worth exploring, evident by the elegant examples we’ve just walked through. Additionally, while these may seem like complicated processes to understand, they can sometimes be more user-friendly than you expect.

If you’d like more help understanding more advanced Squarespace techniques, or just want to get started as a beginner, our free guides can help you pick up tricks and tips that can move you forward in developing your skillset.

And for more design and SEO help check out our channel here.