Content inset on version 7.0

Add stylized spacing to your site's layout in certain version 7.0 templates.

Last updated February 22, 2023

Some version 7.0 templates have a site-wide layout feature called "content inset." This indents some content, creating a narrower column, while other content appears at the full width. Varying the margins in this way makes your text appear more dynamic, similar to the way magazines draw attention to quotes with creative layouts.

The inset affects areas where you can add blocks, such as layout pages, blog posts, and footers.

Accessing this feature

Content inset is a specific feature available on some version 7.0 templates. For similar effects in version 7.1, see Inset features on version 7.1.

Templates supporting the content inset

The content inset feature is available in these template families:

  • Brine
  • Farro
  • Pacific - Blog posts only
  • Skye

Using content inset

When adding blocks to your site, you can use a block by itself to create a single column, or add multiple blocks side-by-side to create multiple columns.

Only certain blocks use content inset. When these blocks are in a single column, they appear at the narrower width. When laid out in multiple columns, the columns extend to the borders of the content area.

Blocks that aren't affected by the content inset continue to display at the width of the main content area.

Mixing and matching content inset blocks with full-width content creates varied margins as visitors scroll down the page, providing visual relief from large unbroken text.

Here's an example of the content inset in the Farro template: 

farro-inset.png

Affected blocks

Only certain single-column blocks follow the content inset. Different blocks are affected in each of these template families:

Brine

These blocks appear full-width (no inset):

  • Archive blocks
  • Bandsintown blocks
  • Calendar blocks
  • Gallery blocks
  • Image blocks
  • Instagram blocks
  • Map blocks
  • Menu blocks
  • Video blocks

All other blocks are inset.

Farro

These blocks appear full-width (no inset): 

  • Archive blocks
  • Bandsintown blocks
  • Calendar blocks
  • Gallery blocks
  • Image blocks
  • Instagram blocks
  • Map blocks
  • Menu blocks
  • Video blocks

All other blocks are inset.

Pacific

On blog posts, these blocks follow the inset:

  • Text blocks
  • Markdown blocks 

All other blocks appear full-width (no inset). 

Skye

When the Full Bleed Images, Video, and Gallery tweak is checked, these blocks appear full-width (no inset): 

  • Image blocks
  • Gallery blocks
  • Video blocks

When Full Bleed Images, Video, and Gallery is unchecked, all blocks follow the content inset.

Creating sophisticated layouts

Content inset lets you vary content width on a page, grabbing your visitors' attention.

For example, because image blocks don't have a content inset, they display wider than single-column text blocks. Alternating narrow text and wider images makes the images stand out.

KB Guide Image

Or you can alternate single column blocks (with content inset) with multi-column blocks (no inset) to break up the flow of text or other content on the page.

KB Guide Image

Float blocks to create wrapped text around the block. To learn more, visit Moving blocks.

KB Guide Image

Change the inset width

Use the tweaks below to change the width of your content inset in these template families:

  • BrineContent Inset in the Main section of site styles. There must be at least one affected block on the page for this tweak to appear.
  • FarroContent Inset in the Main section of site styles.
  • Pacific - Can't be adjusted.
  • SkyeContent Inset in the Site section of site styles. Full Bleed Images, Video, and Gallery removes the inset for those blocks.

Keep in mind:

  • Use the slider for that tweak to set the inset. This ranges from 0 to 5, with 5 being the narrowest.
  • To remove the content inset, set the Content Inset tweak to 0.
  • The content inset relates to the overall site width, so site width and padding tweaks affect the width of the content inset.

Inset features on version 7.1

If your site is on version 7.1, you can achieve similar indenting effects using section styles:

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.

Content inset on version 7.0