Overlapping blocks & images with Squarespace Classic Editor & Blogs

In this video we’ll show you how to use SquareKicker’s position tools to move blocks and elements around your screen creating unique layouts by overlapping blocks and positioning images, all without needing to write a single line of code.

We’ll look at how to:

• Move blocks vertically and horizontally

• Change the layer level to bring a block to the font when overlapping other blocks

• Used SquareKicker’s Device Toggle to set unique designs per screen size.

• Explain the difference between between the Block Position Tool and the Image Position Tool on an Image Block.

Highlights:

0:00 - Introduction to Position Tools

0:40 - Overlapping an Image & Text Block

1:45 - Using the Block Layer Tool

2:17 - Image Position vs Block Position Tool

3:09 - Tethered Element (Remove White Space)

3:57 - Position Blocks on Specific Devices

5:00 - Position Tools with Presets (Save Design Settings)

Transcript:

Hi this is Nick from SquareKicker.

In this video I’m going to show you how to use SquareKicker’s position tools to move blocks and elements around your screen creating unique layouts by overlapping blocks and positioning images, all without needing to write a single line of code.

We’ll look at how to move blocks vertically and horizontally, change the layer level to bring a block to the font when overlapping other blocks, and explain the difference between between the Block Position Tool and the Image Position Tool on an Image Block.

Let’s get started.

For this example I’m using a text block and a spacer block. I’m going to give the spacer block a background color and round off the corners to create a circle.

It’s important to note that by default Squarespace automatically hides all spacers blocks on mobile so this spacer block will be hidden on mobile device. Another option you can use is an image block. Simply uploaded any photo to an image block and instead of a background color, use SquareKicker to give the image a solid overlay color.

I’ll head back to the beginning of the menu and make sure I’m in the Block Settings, and head to Layout.

Quick change to my blocks width then down to the positions tools. Use the vertical and horizontal sliders to move your block around the screen. 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.

Now that my block is in the right position overlapping my text block, I want to bring the text block to the front. To do this I’m going to open the Text Block’s Layout settings and head right to the bottom to change the layer level. I want change this number to any number higher than the image blocks layer level. Since the image block is still on the default level, I can choose any number higher than 0 to bring it to the font.

As you can see here in this design, using the Block Position tools, you can build some very creative layouts.

When using an image block, there will be times when you will want to use Image Position rather than Block Position. I’ll show you why with this example. First I’m going to add a background color to this block and a bit of spacing so you can see the difference between the block element and the image element.

As I head to the beginning of the menu, I’m going to select Image instead of Block. I head to Layout and then find the Image Position Tools. When I move the position sliders, you can now see that I’m moving the image element inside the image block rather than moving the entire block together. Sometimes you will want to move the block in it’s entirety but for designs like this, or with other image block layouts such as image cards, you may want to move an element inside an image block while leaving the other elements in the block in the same place.

Using the Block Position tools you can also move blocks up so that they overlap two sections.

When you use the Block Position Tools, by default the blocks will move independently, and not affect other blocks round them. However, if you move a block up and want the below blocks to follow, switch on the “tethered elements” toggle. This means that the blocks below will be tethered to the block’s vertical position. I’ll show you how this work on the next block.

Now, notice when I use the vertical block position my block moves independently from everything else on the screen, but when I switch on “tethered elements” the text below moves up with the selected blocks position.

A really important tip to 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.

Using SquareKicker’s device toggle in the upper right hand corner, select a device and reposition your blocks for screen size. This will change the settings for the selected device you are on and smaller screen sizes. Meaning any changes to a tablet, will also affect the mobile unless a specific mobile setting is also assign, but these settings will not affect the desktop and laptop screen sizes.

A recommended workflow tip is to do one block at a time, toggling through each device and make design changes per screen size.

Incredibly powerful and fast. SquareKicker's Position tool gives you the ability to create an unlimited amount of layout designs, and full control for each screen size.

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. For more information on presets, watch the SquareKicker presets tutorial.

Now it’s your turn!
SquareKicker. No-Code. Just Design.