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. I head to Layout and then find the Image Position Tools. 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.Īs I head to the beginning of the menu, I’m going to select Image instead of Block. When using an image block, there will be times when you will want to use Image Position rather than Block Position. Since the image block is still on the default level, I can choose any number higher than 0 to bring it to the font.Īs you can see here in this design, using the Block Position tools, you can build some very creative layouts. I want change this number to any number higher than the image blocks layer level. 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. Now that my block is in the right position overlapping my text block, I want to bring the text block to the front. Holding down shift allows you to increase or decrease in multiples of 10. 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. Use the vertical and horizontal sliders to move your block around the screen. Quick change to my blocks width then down to the positions tools. I’ll head back to the beginning of the menu and make sure I’m in the Block Settings, and head to Layout.
Simply uploaded any photo to an image block and instead of a background color, use SquareKicker to give the image a solid overlay color. Another option you can use is an image block. 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.
I’m going to give the spacer block a background color and round off the corners to create a circle.
#Squarespace overlay text on image how to
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.įor this example I’m using a text block and a spacer block. 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.
0 kommentar(er)
