Give your pages more variety and contrast with section-specific style options. 

By default, page sections follow site-wide styles, but you can style individual sections to change the design, background, colors, or other section-specific settings.

Page sections and section styles are available on version 7.1.

Change section styles

To style individual page sections:

1. Open the Pages panel, then click Edit on the page.
2. Hover over the section and click Edit Section. The options vary depending on the section type.
3. To style section-specific options, click Design. This tab may use a different name, like Format or Gallery. Depending on the section type, you can create an anchor link in this tab.
4. To add a background image, video, or art, click Background. Background content can appear at full-bleed or inset from the edges of the section.
5. To choose a color theme, click Colors. Any changes made to a color theme affect all sections on your site that use that theme.

Customize Fluid Engine grid and spacing

After opening section styles on a Fluid Engine section, you can change these settings in the Design tab:

• Change the grid height - Use Row Count to set the number of rows in the section's grid. This is the only section style option where you can have different settings on the desktop and mobile layout, but the minimum number of rows is also dependent on how many blocks you've added and how they're arranged. You can also change the height directly on the page by clicking and dragging the blue arrow icon in the bottom-right corner of the section.
• Control block spacing - Use Gap to set how much padding appears between blocks in the grid. You can choose no gap, a preset gap, or click ... to set custom vertical and horizontal gaps.
• Add and customize section padding - Enable Fill Screen for more control over the height and alignment of your content. If you don't want padding around the section content, leave it disabled. These options only appear if Fill Screen is enabled:
  • Add padding to your section outside the section grid - Under Height, choose between small, medium, or large height, or click ... to set a custom height.
  • Set where the extra height padding appears - Under Alignment, align content to the top to add padding below the content. Align content in the center to add padding above and below the content. Align content to the bottom to add padding above the content.

Customize classic editor height and spacing

After opening section styles on a classic editor section, you can change these settings in the Design tab:

• Change the section height - Use Section Height to change how tall the section appears on the page. Sections with more content may display at a taller height than your setting. This also affects the amount of padding above and below your section's content.
• Change the content width - Use Content Width to set how much of the section's width your content spans.
• Change how the section content aligns with the section borders - Use Content Alignment to set how the content aligns with section borders.

Add section dividers

You can add a unique divider at the bottom of block sections, auto layouts, and gallery sections. After creating your site's first section divider, the settings for that divider apply to dividers you create later. If you want your section dividers to differ, customize each one manually as you create them.

To add a section divider:

1. Open the Pages panel, then click Edit on the page.
2. Hover over the section and click Edit Section.
3. Under Design, switch the Divider toggle on.
4. Use the settings that appear to customize the divider.

Customize a section divider

After switching the Divider toggle on, use these options to style the divider:

• Shape - Click the shuffle icon to randomize the settings, or click the settings icon to select a shape and change the settings manually.
• Stroke - Select a solid line border, dotted line border, or no border for your divider.
• Color - Select a color from your site-wide palette for the border's line.
• Thickness - Set the thickness of the border using the small, medium, or large options. Click ... to manually change the divider's thickness.

Sections without dividers

If your page includes a section that doesn't include section dividers, such as a store or blog section, you can replicate the look of a section divider with a blank block section.

Keep in mind, this divider won’t interact with the section above in exactly the same way as built-in section dividers. For example, if the section has a background image, the divider will appear below the image rather than bordering it directly.

To add a section divider below collection sections:

1. Open the Pages panel, then click Edit on the page with the section that doesn’t have a divider.
2. Click Add Section below that section.
3. Click + Add blank, then click Section.
4. Hover over the new section and click Edit Section.
5. Set the Height to small and switch on the Divider toggle.
6. Style the divider as you want. Don't add any blocks to this section.

What can I change with section styles?

What you can change with section styles depends on the section type.

Block sections and auto layouts

In block sections (either Fluid Engine or classic editor) and auto layouts, you can customize the background and colors, as well as section-specific design options. Learn more about section-specific styles:

• Fluid Engine
• Classic editor
• Auto layouts

Collection and gallery sections

In collection sections, like blog and store sections, and gallery sections, you can customize colors, as well as section-specific design options. Learn more about section-specific styles:

• Course sections
• Blog sections
• Calendar sections
• Gallery sections
• Portfolio sections
• Store sections
• Videos sections