Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Content inset

Certain templates use a special 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 using creative layouts.

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

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.

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.

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

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.
Was this article helpful?
22 out of 48 found this helpful