Common Squarespace blocks (part 2)
Success is neither magical nor mysterious. Success is the natural consequence of consistently applying the basics fundamentals – Jim Rohn
First of all Merry Christmas Everyone!
Welcome back everyone to part 2 of this mini blog series about the common Squarespace blocks. Now if you missed part 1, not to worry click right here to read about the text block & Links and the Button Block.
To add an image block you click on the insert point (horizontal raindrop) and you can either choose a basic image block or you can choose from 5 image layouts.
Basic (inline) image block
We will start off with the basic image block. This is the classic Squarespace image block. Once you have clicked on the image block a pop up will appear giving you the option to download an image from your computer. Make sure you have optimised your images for your website. If you’re not sure on how to optimise images for your website click right here!
The basic image block is also called an inline block. With this block you can write the source of an image or a description underneath the image. To edit, hover over the image and click Edit. In the pop up that appears you can edit the content and the design. In the Content Tab you can chance or delete the image and change the name of the image. In the design tab you can switch over to a different image layout and you can edit the caption. When it comes to the caption options I would suggest to play around with it and see what best fits your website.
Poster Image block
With this block can write on top of the image and add a link e.g. buttons. To edit the way this looks you will have to go to site styles to make some changes. So you have to work between Site Styles and the Page itself to create the look you like! Again play around with this, it is so much fun discovering what works and what doesn’t. Should you ever decide to change the template please note that the site styles you have set will reset, however changes made within the image block editor are related to that block alone and therefor won’t change if you change templates.
So to change the layout of the image and text go to home, design and then site styles. Click on the image, which will direct you to the section of Site styles you need instead of scrolling through the whole list of options.
Card Image block
This is an image block that allows you to have text to the left or the right of the image. You can also add a link or a button to this block. To do this block justice keep the text short. You want a nice balance between the text and the image. Shorter text will also keep the text visible on mobiles. You can add a link to this block as well by turning the image itself into a link or creating a button. If you click to edit the image block and head over to the design tab you have the option to change the Image Link by clicking on the drop down menu. The same goes just like the previous block to change the look of the text, buttons etc you have to work together with Site Styles to create the look you want.
Overlap Image block
With this block you have an image to the right or the left of the text. The title in this block can overlap the image. You can add a link to this block as well by turning the image itself into a link or creating a button. In Site Styles you can add a background colour to the title to give it a highlight. As mentioned in the Card Image block keep the text short and sweet!
Collage Image Block
The collage image block shows the image on one side and text on the other side. The text in this block has a background colour and is overlapping the image.
Stack image block
The stack image block is a similar to the basic/inline image block. You add an image and then it allows you to have title and subtitle below the image. The difference with the basic/inline block is that you can edit the design and you can have a background colour to the text.
You can mix and match different image blocks to create a beautiful page or post.
See below an example of mixing image blocks together. Each image block has its own style options, but once you set the styles for each image block, they will be all styled in the same way. So if you style the Stack image block in a certain way, when you chose this block for another page of your website it will have the same style options. If you change it, it will change for all the stack image blocks on your website.
The next block type were are going to discuss is the Gallery block. Head over to your insert point and when the pop up comes up go over to the Gallery options. There are 4 options you can choose from; Slideshow, Carousel, Grid and the stack gallery block.
The slideshow shows one image at a time and it can auto play the images. It can display the titles and descriptions of the image however this might not work on mobile. When you choose the Slideshow Gallery block, a pop up will appear with Content tab and the design tab. In the content tab you add all the images you want in the slide show. Once uploaded you can click and drag to change the order of the images. If you head over to the design tab you will see all the other gallery block options and settings to change the appearance of whichever gallery block you choose. You can choose to automatically change the slides and how much seconds you want between the transitions. You can add next and previous controls which is very handy because otherwise your website visitor might not know there are other images to view. Show thumbnails will show a preview underneath the main image of all the other images to come. The Crop image option will crop the images all to the same size. So if you have for example 2 horizontal images and 2 vertical it can look a bit strange. Hit the crop button and it will crop them to the same size, which just looks a bit better and neater. Now the automatic crop function is great but one thing to look out for is where the vocal point is of your image. Head back to content and you can see each image has a small round circle on them. So for example if you have a vertical portrait image, make sure the vocal point is not somewhere near the legs, but near the face. To change this drag the wee round circle to where you want your vocal point to be. You can also make all pictures linkable. If you head to content and hover over a picture you want to make linkable, click on the gear icon and the options will appear.
Carousel Gallery Block
This block is displayed as a horizontal strip with no padding. This gallery block has also the option of automatically transition between images. This block does not display titles or description of the images.
Grid Gallery Block
The grid gallery block is an equal proportioned grid with several options to change the aspect ratio. When you in the editor you can decide how many images you want per row or change the padding between the images in the grid. Lightbox is a feature that allows to image to pop up and become bigger when you click on it. It greys out the background and you then also can slideshow through the images.
Stack gallery Block
This block displays one image after the next on top of each other. It has one pixel of padding between the images. Plus it has the option to display titles and descriptions.
Now if you are a photographer the best Gallery blocks to display our image in a nice overview would be the Grid and Stack gallery block. Because if you have about 100 pictures to show it is a bit of a hassle to click through the Carousel or the slide show block.