2017 New Style Cheat Sheet


To access new image options you may...  

A. Insert a new image block just as you would a normal image, choosing the IMAGE LAYOUT option you want as you insert it. Then upload your image and tweak options using the DESIGN panel:

 
squarespace imgs 2.png
 

B. Insert a plain ("inline") image as you normally would, then click DESIGN to select and formal the type of image you want to insert:

 
Sqspace Images.png
 

You may get more help here: https://support.squarespace.com/hc/en-us/articles/205814528-Image-Blocks-Overview Remember, if you want to change the look of a block, contact us for help. Don't try to do this work yourself!

Scroll down for examples of all image block layout styles and options, styled to match your theme. 


Poster images

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Poster no button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor. Proin ultricies faucibus velit volutpat eleifend. In faucibus congue dolor eget scelerisque. Maecenas nec mauris interdum, varius ligula et, sagittis tellus. Integer eu diam diam.

A link looks like this
 

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Poster w/button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

 

Side by side to make a grid

You may put as many images in a row as you want. Text and images will resize automatically based on number of images in each row. You may have as many rows/columns as you want.

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Poster no button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Poster no button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

Card image options


0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Card no button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

A link looks like this
 

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Card w/button

This one is RIGHT JUSTIFIED! Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur.

Side by side to make a grid

You may put as many images in a row as you want. Text and images will resize automatically based on number of images in each row. You may have as many rows/columns as you want.

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Card no button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Card no button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.


Overlap images

01 kittens.jpg

Overlap no button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

A link looks like this

01 kittens.jpg

Overlap w/button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

 

Overlap images in a grid - will resized based on number of images per row

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Overlap one

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Overlap two

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.


Collage image options

01 kittens.jpg

Collage no button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

A link looks like this

01 kittens.jpg

Collage w/button

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

Collage images in grid - will resize automatically based on number of images in row.

01 kittens.jpg

Collage one

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

A link looks like this

01 kittens.jpg

Collage two

Mauris quis condimentum lacus, in hendrerit dui. Cras aliquet suscipit nulla non efficitur. Nunc elementum neque nec sapien volutpat, eu tempor diam auctor.

A link looks like this

 

Stacked image options

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Stack no button

Morbi tristique ex orci, eget sodales lorem aliquet vitae. Integer posuere fringilla tortor, eu condimentum lorem pretium id. Vivamus nisl libero, tincidunt eget elementum eu, scelerisque et elit. Nulla id purus lectus. Curabitur a consectetur metus. This is a link.

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Stack w/button

Morbi tristique ex orci, eget sodales lorem aliquet vitae. Integer posuere fringilla tortor, eu condimentum lorem pretium id. Vivamus nisl libero, tincidunt eget elementum eu, scelerisque et elit. Nulla id purus lectus. Curabitur a consectetur metus. Fusce cursus fringilla lacus eget facilisis. Nulla venenatis porta urna.

Stack images in grid - will resize automatically based on number of images in row.

0AC87431-30ED-4045-89C2-0EB79611238B@home.jpeg

Stack image left

Morbi tristique ex orci, eget sodales lorem aliquet vitae. Integer posuere fringilla tortor, eu condimentum lorem pretium id. Vivamus nisl libero, tincidunt eget elementum eu, scelerisque et elit. Nulla id purus lectus. Curabitur a consectetur metus. Fusce cursus fringilla lacus eget facilisis. Nulla venenatis porta urna.

Stacked image right

Morbi tristique ex orci, eget sodales lorem aliquet vitae. Integer posuere fringilla tortor, eu condimentum lorem pretium id. Vivamus nisl libero, tincidunt eget elementum eu, scelerisque et elit. Nulla id purus lectus. Curabitur a consectetur metus. Fusce cursus fringilla lacus eget facilisis. Nulla venenatis porta urna.