Styleguide & Page editing advice
Content is added by dragging different kinds of “blocks” onto the page. You arrange the blocks into a grid system, and Squarespace will rearrange the layout automatically to fit different screen sizes.
When entering text you use the predefined Normal and Heading styles, which gives every page a consistent design.
Use Spacer and Line blocks to separate content or add space on either side of blocks.
The design of all these styles is controlled via Design > Site Styles. Changing a style there changes every instance of that element on your site - eg changing Header 1 changes all Header 1 styles currently in use.
Heading 1
Heading 2
Heading 3
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Fusce dapibus, tellus ac cursus commodo.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla vitae elit libero, a pharetra augue.
Aenean lacinia bibendum nulla sed consectetur.
Maecenas faucibus mollis interdum.
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
WYSIWYG Quote
Nulla vitae elit libero, a pharetra augue.
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.”
Images / Videos / Audio
Most media is added via image, video or embed blocks. You can also upload audio directly to Squarespace.
These blocks are full width by default. To make the block narrower you can (see image examples below):
Add “Spacer” blocks to each side
Put it inline with a block of text
Put it side by side with one or more images in the grid system
Some of these block types can also be vertically cropped by dragging the handle at the centre bottom of the block.
Images
Upload a full page width image, Squarespace will resize it to fit the context.
All images can be edited in Squarespace, useful for quick crops and other tweaks.
In the “Design” tab you can choose from a straight image with or without a caption, or several different image with text styles.
Videos
Use a video block and paste the URL from Youtube or Vimeo
Audio
Use an “Embed” block for Bandcamp or Spotify and paste in page URL of album/playlist you want to display.
Use a “Soundclould” block for Soundcloud.
BLock resizing examples
Full width block. Image can be vertically cropped by dragging the handle at the centre bottom of the block.
Block inline with text. Adjust the image size by adjusting the width of the block grid, crop the image vertically using the handle at the bottom centre of the block.
Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Spacer block here makes the image smaller.
Image block with a spacer block on each side to make it smaller.
Spacer block here makes the image smaller.
Image, video and audio block types
Image
Caption is optional
Image stack
Image stack title
Image stack subtitle
Image overlap
Image overlap title
Image overlap subtitle
Image collage
Image collage title
Image collage subtitle
Image poster
Image poster title
Image poster subtitle
Image card
Image card title
Image card subtitle