Create Overlapping Blocks & Images in Squarespace (Classic Sections)

Create overlapping blocks & images using SquareKicker's Position Tool

In this tutorial we will explore how to use SquareKicker’s position tool to move blocks and elements around your screen to create unique layouts by overlapping blocks and positioning images, all without needing to write a single line of code.

Example One: Overlapping two Image Blocks

1.  Select the Image Block you want to move over the other.
2.  Click the SquareKicker icon.
   
3. Open the Image menu option.
   
4. Open the Layout menu option.
   
5. Scroll to the bottom - Under the Position heading you have the options to adjust the vertical and horizontal position of the block as well as the rotation angle.
   
6. Click Apply to save the design changes.

NOTE: Remember when using block position is to check how this will look on other screen sizes. All SquareKicker changes are cascading, meaning they flow down to smaller size screens. So if you move a block left on the desktop, you may want to reposition it on a mobile device so that it is not off your screen.

TIP: If you need to set multiple blocks on your site with the same image position changes, try saving these settings as a preset to speed up your workflow.

Example Two: Overlapping Text Block and Spacer Block

1. Select the Spacer Block
   
2. Click the Spacer Block SquareKicker icon
   
3. Remain in the Design tab (default).
   
4. Open the Block menu option.
   
5. Open the Background menu option.
   
6. Choose the color of your preference.
   
7. In this example we have rounded the corners of the Spacer Block.
   
8. Select Block in the top left to return to the previous menu page then select the Layout menu option.
   
9. In this window you can move the position of the Spacer Block around the screen.
   
10. Click Apply to save any design changes.
    

NOTE: Squarespace by default hides spacer blocks on mobile. You will need to toggle these back on manually.

TIP: If you want to move the block further than the sliders allow, you can type in a number or use the up and down arrow keys.Holding down shift allows you to increase or decrease in multiples of 10.

Adjusting layers

Sometimes you may need to change which block is on top or bottom.

1. Select the Squarespace Text Block.
2. Click the SquareKicker icon.
3. Remain in the Design tab (default).
   
4. Select the Block menu option.
5. Select the Layout menu option.
6. Change the Level number to any number higher than the Block you want it to sit on top of.
7. Click Apply to save any design changes.