Getting Started with Notate

Welcome to Notate, a clean and flexible documentation template for Webflow.
This article will guide you through the basics of setting up your documentation site, customizing layouts, and using advanced features like code snippets and callouts.

Introduction

Notate is designed to make technical documentation both readable and beautiful.
Whether you’re writing product docs, API references, or internal knowledge bases, Notate gives you the right structure out of the box.

Key Features

• Pre-built documentation layouts
• Easy navigation with sticky sidebar
• Styled code blocks
• Blockquotes and callouts for emphasis
• Responsive and fast

Basic Structure

Every Notate project is organized into three main parts:

1. Navigation – a sidebar for quick access to docs.
2. Content Area – where your articles live.
3. Search – built-in search for finding content quickly.

Example: Adding a Code Snippet

When writing technical documentation, you often need to include code.
Notate comes with styled code blocks for better readability.

1// Example JavaScript
2
3function greet(name) {
4	return `Hello, ${name}!`;
5}

Quoting Important Notes

Sometimes you want to highlight an important reminder or a best practice:

🚨 Pro tip: Keep your articles short and focused. Long walls of text reduce readability.

Subsection: Lists

Both ordered and unordered lists are supported.

Unordered list example:

• Markdown-like writing
• Easy formatting
• Clean typography

Ordered list example:

1. Open your Notate project.
2. Duplicate the documentation page.
3. Start customizing your content.

1<div class="card">  
2	<h2>Hello, Notate!</h2>
3	<p>This is a sample code block inside your docs.</p>
4</div>

Conclusion

With Notate, you can focus on writing great documentation instead of wrestling with design.
Use headings, lists, quotes, and code blocks to create clear and helpful guides for your users.