March 20, 2017 - Articles, Resources, Round Ups

How to create One Page websites using Squarespace

Squarespace Logo

There is no question Squarespace has the best designed templates of all online website builders. With our niche being One Page websites, a common question I get asked: I want to use Squarespace but where do I start?

I’ve spent some time curating their impressive collection of 65 pre-designed templates down to 8 templates which are your best starting points to build a One Page website online.

Each template has noteworthy points including (no audio) video previews so you can experience them a bit more:)


One Page Love Exclusive Coupon

OPL10

Squarespace has been kind enough to give One Page Love readers the exclusive coupon OPL10 for 10% Off your first website or domain purchase. (There is a free 14-day trial with no credit card needed, so you can try risk free.)


Review Index:

  • Sonora – landing page, event, parallax scrolling
  • Flatiron – portfolio, AJAX loading, case-study
  • Ishimoto – photography, minimal, horizontal slider
  • Pacific – multi-use, restaurant, long page, sticky header
  • Momentum – photography, portfolio, horizontal slider
  • Horizon – artist, musician, long page
  • Rover – multi-use, landing page, service
  • Avenue – portfolio, grid, AJAX loading

Sonora (landing page, event, parallax scrolling)

Sonora is a gorgeous long scrolling template with fancy Parallax Scrolling effects and stunning typography. The template can be used for any Landing Page really but this demo is geared to kick-start your event.

Sonora

Features include lovely big imagery (with parallax effects), spacious typography, more image gallery grids, event information, Google Maps integration and testimonials.

With Sonora’s full-screen 3D scrolling effects and customizable gallery layouts, you can do more than share your event—you can put it on the map.

Sonora Video Preview:

Note the parallax scrolling effect – this is how the foreground text moves faster than the (slower) background images as you scroll down.

Suggested Customizations:

I removed the header page navigation items (top right) and replaced with a clear Buy Tickets button. Further down in the divider section with the clothing rail I added a big call-to-action button promoting Buy Weekend Tickets $199.


Flatiron (portfolio, AJAX loading, case-study)

Flatiron is a unique portfolio template that loads projects with AJAX. This means loading content within the page without actually reloading your browser tab.

Flatiron

The template supports multiple images per project including text. This can act like a case study portfolio if needed.

Like the iconic Manhattan building, Flatiron is unconventional. With a portfolio experience that supports multiple portfolio projects side by side, Flatiron is popular with art directors, illustrators, and photographers.

Flatiron Video Preview:

Note how the mixed grid of project thumbnails are below each project. In other words the project you select loads at the top of the page. Also notice the neat arrows to browse easily between all projects.

Suggested Customizations:

I removed the top-left page navigation items as they weren’t needed. I also added my email address in the footer that appears if you move your cursor away from the browser.


Ishimoto (photography, minimal, horizontal slider)

Ishimoto is a minimal One Page template showcasing imagery in a horizontal scrolling strip.

Ishimoto

The different between Ishimoto and Momentum (further down) is there is no additional description on each photograph. Your visitor simply scrolls uninterrupted and let’s the images do the talking.

A one-of-a-kind template with a one-of-a-kind name. Ishimoto is a portfolio template with an innovative, horizontal gallery slider that makes it preferred among photographers, artists, and restaurants.

Ishimoto Video Preview:

Note how you can click the images or the arrows to navigation. Also notice how well the template accommodates imagery with different widths, something a lot of other photography templates struggle with.

Suggested Customizations:

I simply removed the page navigation top right and added my email bottom right. A perfectly minimal photography portfolio.


Pacific (multi-use, restaurant, long page, sticky header)

Pacific is a solid, striking Landing Page template suited for just about any industry.

Pacific

The imagery and design fills a big resolution so well and adapts down to mobile gracefully.

Perfect for agencies, restaurants, bands, wedding sites, and more. Pacific allows you to create long scrolling pages with background images and beautiful full-width galleries or albums.

Pacific Video Preview:

Note how a sticky header navigation appears once you’ve scrolled down a bit. This allows your visitor to easily smooth scroll between sections.

Suggested Customizations:

None. Pacific is One Page out the box and easy to use. I used Unsplash images for this custom demo.


Momentum (photography, portfolio, horizontal slider)

Momentum is a unique One Page template showcasing full-screen imagery in a slick horizontal scrolling slider.

Momentum

The difference between Momentum and Ishimoto (further up) is each photograph can include a text overview to give context to the work.

Momentum is a beautiful template built especially for photographers and designers who need full-screens, high resolutions, and the ability to show work in a slideshow interface.

Momentum Video Preview:

Note the slick slider transitions and the unique off-canvas animation when you click the info icon.

Suggested Customizations:

I replaced page navigation items (next to the footer logo) with my social media accounts and email address. Perfectly sufficient for my needs.


Horizon (artist, musician, long page)

Horizon is a gorgeous long scrolling template perfect for any artist, musician or band to promote their new material and tours.

Horizon

Features include big image backgrounds, spacious intro announcement, band members, tour dates, blog feed, Twitter feed, a stunning media player and ends with a row of social icons.

When you put on a show, you put it all on stage. Designed to be a One Page website experience for bands with a gigantic presence, Horizon lets your content take center stage like never before.

Horizon Video Preview:

Note how a sticky header navigation appears once you’ve scrolled down a bit. This allows your fans to easily skip to sections they want to see faster.

Suggested Customizations:

I removed a few navigation items to keep the template One Page and relevant to the scrolling sections within the long page. I used Unsplash images for this custom demo.


Rover (multi-use, landing page, service)

Rover is a stunning Landing Page template that tells a story while you scroll.

Rover

Features include lovely whitespace, stylish typography, services, big imagery, rates table, clients and contact form.

The difference between Rover and Sonora (further up) is that Rover has no fancy parallax effects but includes a pricing table.

Showcase your professional services with Rover. Its spacious layout and neat typography give any amount of text an organized, elegant look. And its long-scroll landing page is perfect for mobile.

Rover Video Preview:

Note the gorgeous whitespace and big imagery as you scroll.

Suggested Customizations:

I removed the top navigation in the header as you can simply scroll to all the sections.


Avenue (portfolio, grid, AJAX loading)

Avenue is a minimal portfolio template that showcases your work in a clean grid layout.

Avenue

Features include AJAX loading portfolio items that supports multiple images per project including text.

The difference between Avenue and Flatiron (further up) is that Avenue has a more structured, grid approach vs the more arty scattered display of imagery in Flatiron.

A classic template with a timeless look, Avenue’s clean, straight lines and adaptive grid-based layout are especially popular with photographers, illustrators and designers.

Avenue Video Preview:

Note how the project you select loads at the top of the page followed by the grid of thumbnails. This allows you to easily browse more projects instead of scrolling up after each read.

Suggested Customizations:

I added my email address in the top-right header area.


FAQ: What are the benefits of using Squarespace?

Squarespace is one of the leading online website builders. What sets them apart from the rest is their superior level of design and customer support. They have a support team of over 300 strong and are available 24/7. Other main benefits are:

  • No Website Hosting Needed – their platform is fast and secure
  • Easy Content Management – all edits are done online, no software needed
  • Free Domain Name if you pay annually
  • Blog Sections can easily be added to start sharing your journey
  • eCommerce Solutions are an upgrade away if you want to start selling products

That’s a wrap! Don’t forget your 10% Off coupon: OPL10

OPL10

I hope you found value in the article, props to Squarespace for creating a platform where we can create beautiful Single Page websites, easily. I’m working on a follow up article (+/- 2 weeks) on how to create a long-scrolling Landing Page from scratch with Squarespace.