7 Clever ways to create a unique Squarespace site, without code

So, want to know how you can get creative with your Squarespace site design WITHOUT using code? Well, here are 7 ways...

Whether you want to switch up your site's layout or use a different template and start from scratch, it's not always easy to create a unique-looking layout out of thin air.

Particularly if that's what you do for a living.

However, there are a couple of things you can keep in mind that can help you think outside the box, or in this case outside the block... (nope, not sorry for that pun!)

7 ways to create a unique Squarespace layout design for your site without using code

 

1. Alternate rows and columns

When creating your Squarespace site, remember that you don't have to place your content horizontally all the time as if you're stacking it. You can create columns as well by:

  • Breaking up your text into two.
  • Setting the section title next to the rest of the text.
  • Adding a quote to one side of the text.
  • And adding images next to text BUT, in different proportions, like this:
Example of Squarespaces image card to create different layouts

 

HOW TO ACHIEVE THIS

1. Upload your desired image to an image block.

How to add an image block in Squarespace

2. In the design tab of your image block select card.

How to add a card in Squarespace

3. Click on the text next to the image where it says "Write here" and add your text.

How to add text next to an image block in Squarespace

4. If you want to add a button, select button under "Image Link" and add your button's text too.

How to add a button or link to an card in Squarespace

5. Go to your Style editor and click on the card to select it and see the editable options, there you can alter the title text, subtitle text, button, and play around with the separation you want between text and image!

How to change the font of an image card in Squarespace

6. To achieve the uneven column style of the example, set the image width to something larger or smaller than 50%.

 

2. Create illusions with imagery

You can take advantage of templates that allow indexes and banners, to use background images and create illusions.

For example, you can add a background image where the photograph doesn't cover the entire height of your banner section by filling some space at the bottom the same color as your next section. This way, when you upload it and add elements over it, it will look like they're floating over two sections of your page!

Example of how to create floating elements in Squarespace without code

 

HOW TO ACHIEVE THIS

1. Check that you're using a template that allows for indexes, or at least banners.

How to add an index page in Squarespace

2. Choose the background image you want to use (in this case solid white) and open it in Photoshop or Canva or any other image editing software.

3. Add a rectangle at the bottom (or top) of your photo with the same color as the continuing section of your page.

How to add a floating effect to your background in Squarespace

4. Upload your edited image as the thumbnail or banner image of your floating section. Adjust with the focus feature if necessary (the little dot that appears over your image).

How to add a background to an index page in Squarespace

5. You might need to fix the padding of your sections through the Style editor to improve the effect.

How to fix the space or padding of an index page in Squarespace

Note: if you're using a specific color, other than white or black, it might be best to add another banner filled with your desired color as the background of the continuing section (grey in the example). This way you'll make sure that the color of the background and of the rectangle you're adding to your floating section match perfectly, since even if you use the exact same color code in Squarespace's color picker to add the full background color, the one from your modified image will most likely look different.

 

3. Create uneven grids

When you have a number of uneven elements like services, products or different places of your site that you want to highlight on your homepage, you can do more than just setting the three items side by side in a row or stack them one over the other.

By using blocks like Squarespace's image cards, you can achieve great looking layouts, what most of us forget (yep, me included!) is that image blocks can be stretched out or shrinked down vertically! So for example, if you're using imagery to showcase those amazing services of yours, you can set them up with a "Poster" image card in two columns: the first one with ONE image, and the second one with TWO. Like so:

Using Squarespace's image cards as poster to feature your services in a creative way

 

HOW TO ACHIEVE THIS

1. Create 3 separate image blocks and turn them all into "Poster" under the design tab.

How to add a poster image block in Squarespace

2. Create a column, next to the first image, with a spacer or simply start dragging one of your other image blocks to the side of the first block.

3. Place the third poster image block right below the second one.

How to create image columns in Squarespace

4. Adjust the size of your blocks by shrinking down or stretching vertically your block images.

How to shrink down images in Squarespace

 

4. Add floating shapes

If you don’t want to use photography as banner backgrounds but still want a little something more than the plain white canvas, you can create a banner image with small details or geometrical shapes, as if they’re floating around in the background.

You can also do something similar to idea #2 but by using your logo or a small detail over the division of the two backgrounds.

Example of how you can add small floating details in your Squarespace site

 

HOW TO ACHIEVE THIS

1. Check that you're using a template that allows for banners or indexes.

How to add an index page in Squarespace

2. To give the illusion of floating elements, create an image in Photoshop or Canva with the same background color as the rest of your site and add your small shapes in random places. If you don't want your shapes to be cropped, make sure to leave enough room between them and the edges of your background.

How to add floating elements to your backgrounds in Squarespace

3. Upload your new banner to the "Media" tab of your selected page and adjust the focus if necessary.

Adding a background to your Squarespace pages

 

5. Repeat blocks

You can use the same block twice but with different layouts to create something different.

For example, if you want to display your work or latest blog posts, you can create an uneven grid similar to the one with the image cards (#3), but with summary blocks! 

Here, I'm linking them to blog posts:

Here's one way how you can use Squarespace's summary block to create a unique layout

 

HOW TO ACHIEVE THIS

1. To avoid having the same post or project displayed twice, go to your corresponding blog page and decide which one you want to set as featured (the big one). Give it a specific tag/category or simply mark it as Featured.

How to mark a blog post in Squarespace as featured

2. Decide which other blog posts you want to showcase and give them all the same tag/category, but different from the one you gave your featured blog post (if any).

3. Now, on the page you want to display them, create a list summary block, set it to show only 1, and filter it by adding the corresponding tag you gave it or selecting the featured option.

How to add a list summary block in Squarespace to display featured blog posts

4. Next, create another summary block right below that one and make it a carousel or grid, delete the title if using a carousel, and filter your posts by choosing the corresponding tag you gave them.

How to filter blog posts shown in a summary block in Squarespace

 

6. Mix titles and images in a grid

In #3 you saw how you can use uneven grids to display links to your services, products or different parts of your site. But there's another way you can do it if you're looking to add some decorative elements to your text.

You can use Squarespace's gallery blocks to create unique looking layouts without code

 

HOW TO ACHIEVE THIS

1. First, create your image titles in Photoshop or Canva and add any decorative element you want.

How to add decorative titles in Squarespace without code

2. Add a gallery grid block and upload your images with their corresponding titles.

How to use the gallery block in Squarespace for creative layouts

3. Set the grid to have no space between the images, and to show only 2 images per row. This is how you can ensure that both text and the corresponding image will always be together (how romantic) even when reducing your screen size – without using code.

4. You can choose to make the text image a link, just the image, or both.

How to add a link to an image gallery block in Squarespace

5. Also, you can add spacers to the sides of the gallery block so the images don't look too big!

 

7. Combine image blocks

If your main objective is to display your work or products with imagery, use image blocks and gallery grids together, to create interesting layouts. This is a neat trick if your template doesn't allow gallery pages in indexes.

Here's an example of gallery blocks and image blocks combined:

Combine gallery blocks and image blocks in Squarespace to create a unique design

 

HOW TO ACHIEVE THIS

1. Add a regular image block.

How to add images in Squarespace

2. Add a gallery grid block next to it, set it to square, 4 images and 2 per row and add some spacing between them if you like.

How to add an image grid in Squarespace

3. Create another gallery grid block below your first image, set it to "Anamorphic Widescreen" and make it 2 images total but one per row.

How to make rectangular images in Squarespace gallery grid

4. Add your last regular image block to finish the square!

5. If you want to avoid issues with slight misalignments, due to the difference in inner margins of image blocks and gallery blocks, use only gallery blocks for all the images! Just set the big ones to display 1 image. 

 

8. Bonus: look for inspiration on Pinterest... the right way

"Uhm... what?"

The thing with Pinterest is that there's too much going on at once, and when you're looking through results for "web design", "web design inspiration", "creative web design" and so on, you get bombarded with designs that have many different styles and imagery.

But the problem is, if you're looking for layout inspiration, you need to find the way to look past the pretty aspect of the designs and focus on the actual structure.

 

You want to pay attention to the way the content is laid out, not if the colors or the images match the ones you're using.

 

It's not an easy thing to do, not always.

You'll most likely lean towards the minimal design with the pastel colors because that's what your brand looks like, but by doing that you're ignoring the bold and bright design next to it that can give you an awesome idea on how to structure your services section.

So, next time you're browsing through Pinterest, try to focus on how things are laid out instead of all the extra style details.

 

As always, I really hope you found this information helpful and if you have any extra tips, please share in the comments below!

 

Until next time,
B.

 

PS: if you try these ideas, leave a link in the comments, I'd love to see how it worked out for you!


GRAB YOUR GUIDE

Make sure to get your copy of the Homepage Inspiration Guide to further brainstorm a fresh layout for your Squarespace site!

OOH, I WANT ONE!