5 Ways to make full-width blocks in Squarespace (7.0 and 7.1)
2022 Update
〰️
Coming soon.
〰️
2022 Update 〰️ Coming soon. 〰️
2022 update – Coming soon 🔥🔥🔥
See video👇👇👇
Want to be the first to try new version in my video above – @hire.
Real Life demo
2022 Update
〰️
Coming Soon.
〰️
2022 Update 〰️ Coming Soon. 〰️
ORIGINAL BLOG POST CONTINUES
Despite its popularity it has been surprisingly difficult to create full-width blocks in Squarespace. And when we say full-width, we mean full-width with no site margins, no paddings, no widgets around the blocks – just plain "edge to edge" design in all browser sizes and viewing devices.
I wanted to share 5 different ways how you can achieve the full-width design in Squarespace. Every technique has their pros and cons so before rushing into anything, do make sure that particular technique suits for your site & design needs. And get in touch to hire a freelance Squarespace pro.
1.I’ve made a Full-width blocks plugin for Squarespace.
By far easiest way to create full-width blocks (a little self-promotion here).
Pros:
+ Super easy to use, fast & painless solution
+ If you run into issues, you get 1-on-1 support
+ Easiest in terms of making quick changes in site content by yourself
+ Target only the blocks you want and leave the others intact
+ Full refund if it doesn’t work
Cons:
- It’s not free (sorry, I have rent to pay)
- Doesn’t work with Skye template family
- Ajax loading must be disabled
2. Use Squarespace 7.1
In Squarespace 7.1 it’s a lot easier to create full-width blocks. Squarespace 7.1 uses sections, so we can just create a section, make that section full-width and remove any whitespace. Below is a video of me showing my updated Squarespace 7.1 full-width blocks code.
Get the Squarespace ID Finder Chrome extension here. There are several extension for this, but this is my current favourite (thank you heathertovey.com)
Pros:
+ Full width sections are a lot easier to implement
+ Pure CSS solution without javascript
+ Simple
+ Reliable
+ Easiert to manage and edit which sections are full-width
+ Enjoy all the other features as well in 7.1
Cons:
- You can't simply upgrade from 7.0 to 7.1 with your existing site content– you need to build a new site from scratch
- It might be tricky to remove the vertical whitespace that the sections above and below the full-width section have.
3. Using index page in Brine template family
You can create an index page on Brine family. After that, add your gallery block to a sub-page of that index page.
Add your other content above and below this sub-page to different sub-pages and then use custom CSS to make this sub-page full-width.
You’ll need to use developer tools to find out the ID of the index page section you have the gallery block in.
If you go with this solution, your Custom CSS should look something like this:
section#ingredients .Index-page-content {
max-width: 100%;
padding:0 !important;
}
This will make the sub-page and gallery block full-width. It requires some coding skills, so if that's a no-no for you, we strongly suggest trying out our plugin.
Pros:
+ Free
Cons:
- Requires custom coding or hiring a developer
- Requires a Business plan on Squarespace
- Not easy to manage or edit what content is full-width and what´s not
- Works only on specific templates and index pages
4. Make site main wrapper 100%, restrict specific row widths and make a specific row full width with CSS
Now, if you are really comfortable with CSS and love playing around with the code, this one's for you:
• Make the page main wrapper full width. It has some kind of maximum width usually set in Site Styles. Make that 100%. Also disable paddings and margins for blocks or rows.
• Now, create the width restriction again for all blocks (or perhaps rows)
• Now you have site looking all normal but you can add exception to specific block/row using block ID in Custom CSS to make only certain sections fullwidth
Pros:
+ Free
+ Target only the blocks/rows you want
Cons:
- Requires A LOT of custom coding
- Requires a Business plan on Squarespace
- If you have any other custom scripts on your site, you probably need to further customize the code to make all the elements work effortlessly together
5. Developer Mode in Squarespace 7.0
You can enable developer mode and create a reusable open block field that is full-width. Details may vary depending on the template you're using but the general idea is this:
1. Enable Developer mode
2. Edit the entire template to be full-width. Restrict the width of header and navigation with CSS
3. Create 2 classes of Open Block fields, 1 full-width and 1 restricted width
4. Create separate Open Blocks fields for sections where you want to have full-width blocks or regular, narrower blocks
Pros:
+ Full freedom to create any design for any page
+ Works on any template, any page
+ Ajax loading supported, Ajax loaded gallery pages work perfectly
Cons:
- Expensive and complex solution
- Practically needs hiring a developer
- Hard to manage or edit what’s full-width and what’s not
As you see, there are multiple ways to create full width blocks on Squarespace. Free-of-charge solutions tend to intrigue the most but if you do need to make regular updates to your site design & block appearance, make sure you can easily modify yourself which blocks you want to make full-width and which you don't.
Our Full Width Blocks plugin gives you a total control of your Squarespace blocks for just a couple of dozen bucks. Check it out!