Think of Sections as ready-made building blocks for common elements like navigation bars, headers, footers, and more. Instead of constructing these elements from scratch each time, you can simply insert a Section and then customize it to fit your specific design needs. This not only saves you valuable time but also ensures a consistent look and feel across your website.

Inserting Sections into Layouts

Clutch allows you to easily insert pre-designed sections, such as navbars and footers, directly into your project layouts. This eliminates the need to build these common website elements from scratch, saving you significant time and effort.

Sections can be inserted either by clicking on one from the Insert menu (keyboard shortcut: i)

or drag and drop in the Composition panel.

When you insert a section, all associated styles are automatically copied into your project, ensuring design consistency across your site.

The newly added classes can be seen via the Class manager.

Section features

Sections in Clutch offer several key features:

• Pre-designed Templates: Choose from a variety of pre-built sections for common website elements.

• Automatic Style Integration: Styles associated with a section are automatically applied to your project.

• Consistent Layout: Sections are designed to maintain a clean layout when placed above or below page content.

• Easy Swapping: Quickly replace sections within the same category to test different design options.

Sections are designed to be placed above or below other sections. This is represented by the top and bottom lines for sections. Sections can not be nested inside another.

You can also easily swap one header for another within the same category to experiment with different designs.

Clicking + Section button allows you to search for and insert another section after or below the current section.

Clicking the section swap button enables you to swap out the current section with another one from the same category.

Creating your own Sections

You can create your own custom sections in Clutch by designing elements within a layout and then marking them as a section. This allows you to build a library of reusable components tailored to your specific needs. These custom sections can be added to your library for easy access and reuse in other projects.

Here is a proposed workflow for building custom sections that you want to re-use in this or other projects:

1. Insert a blank layout.

2. Move any existing pages from the Site layout into this new nested layout.

3. Select the Site layout and move navbar and footer into the new layout.

4. Select the new layout and move page slot so it is in between the navbar and footer.

5. Select site layout and insert a blank page.

6. Rename it to say, Sections.

7. Set its path to /sections and mark it as Draft.

Now you are ready to begin building your own sections inside this Sections page.

Example:

1. Press c to insert a column. Rename it to Section . Add a class of section.
   

   

2. Click on + MORE PROPERTIES above the properties panel at the right and then on “tag”. Click on the default div and select section. We are setting the HTML tag to section.

3. Press c again to insert a column inside the Section. Rename it to Container. Add a class of container.
   

   

4. Add a H1 heading and paragraph inside by pressing 1 followed by p.

5. Right click on the Section and Mark as section. This makes it so other sections can’t be inserted inside.

6. Right click on the Section and Add to library.
   

   

Click on any of your actual content pages and test inserting your new section. It should be visible under Sections → Project → Sections.

Clicking on the swap Sections button enables you to replace the above custom section with another one (if present in the Sections page).

Categorizing Sections

Sections in Clutch are organized into libraries, categorized by the page name they were created on. This allows for a structured and easily navigable collection of headers, footers, or any other type of section you create.

This means you could create pages named My Headers, My Footers etc. and begin building your own library of frequently used designs.

This categorization makes it easy to find and reuse the specific sections you need for different parts of your website.

Publishing and sharing Sections

Clutch allows you to publish your section library and share it with others. This feature is useful for easily making the current project’s sections in another project (your own or another Clutch user’s), collaborating on projects or for sharing your design system with a wider audience.

Click the Publish button in the app bar, select the Library option and proceed.

Sharing sections promotes consistency and efficiency across multiple projects or teams.

Summary

• Inserting Sections: Clutch allows you to insert pre-designed sections such as navbars and footers into your project, saving you the time and effort of building them from scratch. When you insert a section, any associated styles are automatically copied into your project, ensuring consistency.

• Section Placement: Sections are designed to be placed above or below your page content, maintaining a clean layout. You can easily swap one header (or any other section) for another within the same category.

• Customization: When you modify a style within a section, like the radius of an outline button, the change is reflected across all instances of that style in your project. This ensures design consistency as you build your site.

• Creating Custom Sections: You can create your own sections by designing elements within a layout and then marking them as a section. These custom sections can be added to your library for easy reuse.

• Section Library: Sections are categorized by the page name they are created on, allowing for organized libraries of headers, footers, or other elements. You can also publish your section library and share it with others.