How to Add and Customize Image Blocks in Squarespace

Written By Elwyn Davies

Learn how to add and customize image blocks in Squarespace to enhance your website’s visual appeal.

Navigate to Your Page

  1. Go to the menu on the left and click on “Website.”

  2. Click on “Pages” and find the page where you want to add your block.

  3. Click on that page and press “Edit” in the top left corner.

Add an Image Block

  1. Click on the button in the top left corner to add a new block.

  2. Choose “Image” from the menu.

  3. You’ll see an empty block with a dotted line and a plus sign.

Upload or Select Images

  1. Double-click on the image block.

  2. You can upload a file from your computer, select from your library, or browse stock images.

  3. For this tutorial, we’ll use stock images from Unsplash.

Customize Image Layout

  1. After adding the images, click on the pencil icon to edit settings.

  2. Align the image left, right, or center within the container.

  3. Use the design options to fit or fill the image to the frame.

Advanced Image Settings

  1. Edit the focal point to highlight specific parts of the image.

  2. Add alt text for accessibility.

  3. Use the built-in editor for further customization.

Duplicate and Align Images

  1. Duplicate image sections to maintain consistent dimensions.

  2. Align images centrally or adjust spacing as needed.

  3. Remove or adjust gaps between images for a seamless look.

Shape and Effects

  1. Use the shape option to create circular or elliptical images.

  2. Apply image effects like film grain sparingly.

  3. Customize corners by rounding them as needed.

Add Text Blocks

  1. Add text blocks next to your image blocks.

  2. Adjust the bounding box to fit the text neatly.

  3. Use bold text for emphasis and align text blocks for a balanced layout.

Mobile View

  1. Switch to mobile view to ensure compatibility.

  2. Adjust the mobile layout without affecting the desktop view.

  3. Fine-tune spacing and alignment for optimal mobile presentation.

NEW COMMUNITY!

I am launching my premium community to help you solve your biggest headaches when building your website or starting a web design business. If you would like to find out more, you can join the waitlist here: https://community.pixelhaze.academy/interest

We also have a free Skool community dedicated to website builders, including Squarespace, Wix (from Autumn 2024), and Hostinger here: https://www.skool.com/website-builders/about

Check Out Square Forge, our Squarespace Template Builder: https://squareforge.net

Elwyn Davies
Previous

Adding Links and Buttons in Squarespace 7.1
Next

Adding Text Content Blocks in Squarespace: A Step-by-Step Guide