Building a Documentation Site in Webflow
If you own a service or a digital product, having a robust and well-organized documentation website can be crucial for the user experience of your customers.
Webflow can be a great platform to use for your documentation sites without having to touch a single line of code. On top of that, it offers a full-fledged integrated CMS to manage all of your content.
In this guide, I’ll write down few pointers and tips which hopefully can help you out while building a documentation site in Webflow — from designing & planning your site’s structure to utilizing Webflow’s features.
I’ve built a few documentation templates for the Webflow marketplace. These are Webflow approved projects that can quite valuable, especially if you’re new to Webflow or just want to save time. Feel free to check them out.
1 — Layout
The typical layout of a documentation site is quite simple. You usually have a vertical navigation bar on the left hand side, and all readable content to the right. It might look something like this:
The easiest way of achieving this layout, while still keeping everything responsive and super-simple, is to use a simple two column container or grid.
This might look something like this inside the Webflow designer:
In the case of the template above, Dyno, I’m using a container that utilizes flex box to horizontally space out the left side navigation and the right side content wrapper.
The container also restricts the width of the whole page at the same time, in this case at a 1240px max-width.
On smaller breakpoints, the container simply spans down with a horizontal flex direction. Super simple. As it should be.
Since this layout will be used on every page of the documentation site (most likely), we can turn the whole layout “skeleton” into a single component.
This component can then have a blank slot element in place of the content, in which we can drop all content needed for the specific page.
If you’re unfamiliar with slots in Webflow components, take a look at the documentation (hah).
2 — CMS Structure
The simplest way of managing a content heavy site is by using the CMS. The CMS collections needed for a documentation may vary depending on complexity, but you probably need at least one of the following:
- Articles
- Categories
- Tags
- Authors
If we take my Dyno template as an example, it contains the following 3 collections:
The Webflow CMS also allows us to build relations between collections. For Dyno, each article has a single category and one or many authors.
Each category and each author then has their own template page on which all articles related to the category or author is listed using CMS collection filters.
This is a super simple but straightforward way of making sure the visitor is finding the content they’re looking for.
CMS Limitations
As of October 2024, Webflow does not allow us to use any kind of components inside CMS generated content.
For example, if you‘re building a internal documentation for your company’s Webflow components or design system, you won’t be able to display examples of your components inside the rich text content of your CMS generated pages.
Using static template pages instead of the CMS could be a viable solution to this problem though.
3 — Menus
Left side vertical navigations commonly displays all articles on documentation sites.
This can be done inside Webflow by having each category be its own collection list of articles, and using a CMS filter to filter out articles in the specific category that we want to load.
This makes it easy to write new articles and automatically have them show up in the navigation.
4 — Table of contents
Having a table of contents for each article is an absolute must when it comes to content heavy sites such as a documentation.
While Webflow doesn’t offer any native solution for this, a simple JS script can solve it pretty quickly.
If you want a quick table of contents solution, feel free to use my super-small script called TOC (available on Github). All instructions to get started are available on the repository page.
5 — Search functionality
Creating the search functionality for a site is super easy in Webflow. Simply add a search form somewhere on your site, and the search results page will be created automatically.
The same can be said for styling the search page. You’re easily able to style the search form and the search results however you want.
One tip I discovered embarrassingly late is the ability to change result length, snippet lengths and other settings by going into the search result item settings in the designer. So make sure you make use of that.
If you’re building a huge documentation and need a more robust search system, you should probably take a look at services such as Elastic search or Algolia, both of which works great together with Webflow.
With these, you’re able to create more advanced search systems that utilizes AI for example.
Conclusion
So that’s it. Hopefully this guide helped you out a bit on the way of building your new documentation site in Webflow.
As mentioned above, if you’re looking for documentation templates to save time or just don’t feel like learning Webflow from scratch, feel free to take a look at my Webflow templates on the marketplace.
If you have any questions, feel free to write them in the comments, contact me through my portfolio or send a DM on Instagram.
Bye bye
