Squarespace Image Blocks | Resizing, Formatting, and More
Download the FREE and fillable website design checklist👇
https://www.clintmally.com/squarespac...
Check out the full list of courses👇
https://www.clintmally.com/squarespac...
How to Use Image Blocks
Click the plus icon when hovering over a block and then click the image block.
To add an image, click "Upload Image" or drag it into the upload box.
You'll notice that the image will appear super big, but fear not—I'll show you how to customize all your blocks using spacer blocks in a later section.
You can use Squarespace's built-in image editor that can be accessed right below the image. Here you can crop, change a filter and more.
Next, if you click the design tab, you'll see the different ways that you can show your image.
Styling the Font and Layout of Your Image
When using layout options for a text block, you want to move between your page editor and your style editor.
To adjust the settings of an image layout, click the paintbrush icon.
To change general spacing and alignment, click "Image Blocks" and you can adjust those here.
If you click "Show All," you can see all the options for each image layout.
You can add buttons to images or link images under content. You can link the whole image so that if someone clicks on it, it takes them to that URL, or you can add a button.
You can adjust the spacing of buttons under site styles for that specific image layout.
To adjust the colors of an image block, click "Colors" and select the theme of the block. Notice it will show you on the left what color theme that website section is in.
Then click your image block. Here you can adjust image overlay colors as well as font colors. Remember: Whatever you set the styles to here will affect all other blocks of that design on that color theme.
Something else that is helpful is if you click onto another item like a button, you can adjust the color for those here, too.
Other Image Options
Poster allows you to add text right in the middle of an image.
The card layout aligns the image on one side with the text on the other side. You can toggle between left and right under "Design."
The overlap allows the text to slightly overlap the image.
Collage puts a square or rectangle directly over the image as if you were scrapbooking.
Stack puts the text directly below the image.
Note: Each image type has different customization options.
Image Animations
You can add animations to images by clicking the "Design" tab of an image and selecting "Animations." Toggle between the different animations and it will show you an example of what it looks like.
Note: Animations can slow down a page's load time. Use them sparingly and only when they truly add value to the section.
#Squarespacewebdesign #Squarespacetutorial #Squarespace