Creating Dynamic Layouts with Content Insets

Last Edited Time

Jun 25, 2025 09:35 PM

Do not index

Suggested Tag

Squarespace

layout customization

content insets

Tags Synced

AI summary

Use content insets in Squarespace 7.0 to create dynamic, magazine-style layouts by indenting specific blocks. Adjust inset widths in supporting templates like Brine and Farro, and achieve similar effects in version 7.1 with section styles. Understanding these features enhances visual appeal and user engagement.

Last edited by

Platform

Squarespace

Content Insets in Squarespace 7.0

Learn how to use content insets to create dynamic, magazine-style layouts in Squarespace 7.0.

Tags: Squarespace, web design, Squarespace 7.0, content insets, layout customization

Key Points

Content inset creates dynamic, varied page layouts by indenting specific blocks

Available in Squarespace version 7.0, particularly in Brine, Farro, Pacific, and Skye template families

Adjust content inset width using template-specific site styles

Achieve similar effects in Squarespace 7.1 with section styles

Understanding Content Inset

Content inset is a feature in some Squarespace 7.0 templates that lets you indent certain blocks, creating a narrower column for text or images whilst other content stretches to full width. This alternating of widths adds visual variety, like the layout techniques used in magazines.

How to Use Content Inset

To use content inset, first make sure your site uses one of the supporting templates: Brine, Farro, Pacific (blog posts only), and Skye. When you add blocks to these templates, specified ones will automatically adjust to the content inset settings.

Which Blocks Are Affected

Different templates impact different blocks:

Brine and Farro: Non-inset blocks include Archive, Bandsintown, Calendar, Gallery, Image, Instagram, Map, Menu, and Video blocks. All other blocks are inset

Pacific: Within blog posts, Text and Markdown blocks are inset

Skye: When the Full Bleed Images, Video, and Gallery setting is off, all blocks are inset. If on, Image, Gallery, and Video blocks will display full-width

Adjusting the Inset Width

You can customise the width of your content inset within the Site Styles:

Brine: Accessible under the Content Inset option in the Main section

Farro: Similar to Brine, adjust it in the Content Inset under Main

Pacific: Modification not available

Skye: Found in the Site section, adjustable unless Full Bleed Images, Video, and Gallery is active

Tip: When mixing inset and full-width blocks, aim for a balance that guides the reader's eye and improves the visual flow of your page.

Version 7.1 Alternative

In Squarespace 7.1, you can create similar effects using section styles. Use the Content Width tweak for individual sections, or employ Spacing tweaks for changes across the site.

FAQs

How do I know which blocks are affected by the content inset?

The affected blocks vary by template family. For example, in Brine, blocks like the Gallery appear full-width whilst others are inset based on settings in Site Styles.

Can I adjust the width of the content inset?

Yes, most supporting templates (except Pacific) allow width adjustments through tweaks in site styles, ranging from 0 (no inset) to 5 (max inset).

How can I create similar effects in version 7.1?

Use the Content Width tweak or Spacing tweaks in section styles to achieve a similar indentation effect in version 7.1.

Definitions

Content Inset: Indenting specific content, narrowing a column whilst other areas go full-width

Blocks: Elements used to add content like text, images, and more

Site Styles: Design and layout customisation settings available in Squarespace

Tweaks: Settings that customise specific aspects of site styles or blocks in Squarespace

Content insets in Squarespace 7.0 can dramatically improve your site's appearance and user engagement by creating visually dynamic layouts. Whether you're staying with version 7.0 or moving to 7.1, understanding these layout options helps you craft sophisticated and visually engaging pages that stand out.