Find inspiration and get ideas on how to use Squarespace for your own site
You may not realise that you can adapt the standard Squarespace page and item types to a number of different purposes. For example, you could use a Blog page as a job listing board. Or, you could use a Gallery as a visual way to showcase your downloadable PDF whitepapers.
In this section of the site, you will find some practical examples of the different ways that you can adapt Squarespace functionality to meet your specific business needs. Check out the subpages in this section for some ideas, or read on to see examples on real-life websites... (I'll be adding new examples soon).
Here's a sampling of some websites that are using Squarespace blocks, pages, or templates to do some pretty cool things (yes, they happen to be my clients - that's how I can tell you exactly what we did in each case).
View this on Amanda Dudman's website:
Using a Gallery Block to make a slider of client logos
Amanda wanted to showcase a list of her past clients in a visual way, but not make a big deal about them. Because she had a lot of clients in a wide range of business areas, there were a lot of logos to show. The solution we came up with was to use a Gallery Block set to Slider Display. We put this at the bottom of her Testimonials pages so people could flick through the client list if they wanted to see the breadth of her work.
How it's done:
- Create a Gallery Page and stick it in your Not Linked section, so it's not part of your main navigation. Upload all your logos there.
- On the page where you want to show the logos, insert a Gallery Block and set it to pull images from the Gallery Page you set up in Step 1.
View this on Dana Wood's website:
Using a Gallery Page as a place to showcase downloadable PDFs
Dana wanted to highlight the best of her written articles in a visual way, and ensure that visitors could easily flick through samples of her work to quickly get an idea of the types of content she writes. She wanted to make it easy for people to scan through and then download the full article if they wanted to read more in depth. We used the standard Gallery Page that comes with the Forte template (large, full-screen horizontal slider) with some custom CSS adjustments by yours truly.
How it's done:
- In the Forte template (or any template that shows a Gallery Page in the way you want it to display), create a Gallery Page. Upload screenshots or icons or whatever images you want to use as thumbnails for the articles.
- For each of these images, go into the image's Settings (using the cog icon) and type the title and description into the relevant boxes.
- Add the link to the PDF file in the description and Save.
View this on the Where There's Smoke website:
Using a bunch of Image Blocks for client testimonials
Helen & David had loads of great client testimonials, but wanted to display them in a more visually interesting way than just having a bunch of text on a page. We decided on a 3-column grid of client logos (with plenty of clean white space) which display the testimonial when you hover. The page is a normal Squarespace content page, with a bunch of individual Image Blocks set up in 3 columns.
How it's done:
Using Pixlr or Photoshop or image program of your choice, make white square images with the logos sitting nicely in the middle.
- Create a normal content page.
- One by one, add the square logo images you made in Step 1 by inserting a new Image Block for each. When you insert the Image Block, make sure to select Display caption on hover.
- Organize the images into columns
- Type the testimonials into the image captions. TIP: This is fiddly as hell. You may find it easier to change the settings in the Image Block to Display caption below image while you're doing all the typing, then once you're all done, change it to Display caption on hover.
View this on the Netfluential website:
Using a scrolling Index Page for case studies to give visual impact
Jeroen wanted to make his company's case studies really stand out by using strong imagery and a simple, easy to digest format for the text. We chose to use the scrolling Index Page of the Adversary template, and to apply a consistent use of color-popping with his brand colours on black & white photographs. The result is that all case studies within a category of work can be easily scanned through, and they all look stylistically uniform.
How it's done:
It's done in the same way as adding any Index page, but we used a little custom CSS to style the Page Title and Description text that floats over the images. It's worth having a browse around the site as you can see lots of use of the Index Page.
Have you seen an example of something clever, unique or really cool on a Squarespace website?
Do you have specific things you'd like to see here?
If so, drop me a line to let me know - your feedback is really important to me.