Sample Page

Text and image blocks

This is a Squarespace page. In fact, it is a Page within a Folder. The Folder is the link in the navigation above, that says VIEW DEMOS. If you are on a desktop computer, hover your mouse over those words and you will see the folder contents (on a tablet or phone, tap to look inside the folder). Each of the items in that folder is a Squarespace Page.

You can arrange content on a Squarespace page in many ways. Here are 2 columns of content:

See examples of all the Squarespace functions and the different page types

This section contains working demonstrations of all the Squarespace page types, functions and features. You can navigate through the different pages in this section to try things out for yourself, and see the differences between some of the similar pages and content blocks, such as a Gallery Page and a Gallery Block.

Take things for a test drive

This is the place for you if you learn best by doing things yourself. For example, if you are wondering how the different Squarespace product types will look to your customers, or how an Events calendar works, you can safely play around with things here, before committing to using Squarespace or worrying about breaking things on your own site.


You can also have divider lines or spacers to fine-tune your page layouts.


Here are the same 2 columns as above, but this time I have put a spacer block between them so they don't sit so close to each other:

See examples of all the Squarespace functions and the different page types

This section contains working demonstrations of all the Squarespace page types, functions and features. You can navigate through the different pages in this section to try things out for yourself, and see the differences between some of the similar pages and content blocks, such as a Gallery Page and a Gallery Block.

 

Take things for a test drive

This is the place for you if you learn best by doing things yourself. For example, if you are wondering how the different Squarespace product types will look to your customers, or how an Events calendar works, you can safely play around with things here, before committing to using Squarespace or worrying about breaking things on your own site.


You can have columns with different widths, too. This column has text and it is 2/3 the width of the page, whereas the column with the photo in it is taking up the remaining 1/3 of the width.

This is a quote block, which you can use for client testimonials or inspirational quotes. Your template determines how this text is styled, and on most templates, you can adjust it using Style Editor.
— Miko Coffey
This is an image, with a caption below it. You can have a link in your caption.

This is an image, with a caption below it. You can have a link in your caption.


You can have different subheaders, too.

This is a smaller one.

miko-coffey-squarespace-5.jpg

You can also wrap text so it flows around another element. In this case, I have added another photo into this page, and I am placing the image so that this text will flow around the photo, like a photo in a magazine or newspaper. And, as you can see, the photo can be smaller and take up 1/6 of the page, with the rest of the text taking up the remaining 5/6 of the page. Squarespace uses a (hidden) 12 column grid for page layouts, so you can have widths of items that are divisible by 12. This means widths of 1/2 or 1/3 or 1/4 or 1/6 are fine, but you could not have a column that was 1/5 width. Squarespace automatically 'snaps' to the grid, so when you are dragging to resize items, you will notice that it doesn't allow you to resize on a pixel-by-pixel level - it will pull to the nearest width. Hope that makes sense - it's hard to explain, but when you are resizing things, you will get the idea. The reason for this 12 column grid is to ensure that your pages look nice and tidy. Imagine how difficult it would be to perfectly align columns of content without having this grid: you would spend ages dragging your columns trying to make them exactly the same width.