Build visual

sitemaps all

within Webflow

With SiteFlow, building visual sitemaps is as easy as dragging and dropping symbols! 20+ sleek symbols, 3 unique templates and unlimited number of sections!

Easily map out your website pages visually

Impress clients while showing off the power of Webflow!

Easily add customisable sections to each page.
Build pages up to three levels.
20+ wireframe symbols to define your sections.
Step 001

Use the built-in symbols to add sections. You can than unlink them and pre-existing combo classes to style them easily!

Step 002

Again, use the symbols to add pre-built wireframes to define each of your sections! There’s over 20 wireframes so you have plenty of options!

Step 003

Remove the hide classes from the “second-row” element. This will show the pages on the second level. You can now repeat steps 1 and 2 for these pages as well. Once you’ve done, hit publish and voila!

Step 001

Use the built-in symbols to add sections. You can then unlink them and add pre-existing combo classes to style them easily!

Step 002

Again, use the symbols to add pre-built wireframes to define each of your sections! There’s over 20 wireframes so you have plenty of options!

Step 003

Remove the hide classes from the “second-row” element. This will show the pages on the second level. You can now repeat steps 1 and 2 for these pages as well. Once you’ve done, hit publish and voila!

how it works

Fast. Clean. Simple.

With the power of Webflow, building sitemaps is as easy as adding/removing symbols and classes!

Start building your visual sitemaps today.

Start from one of our three stunning templates

001
Modern
002
Candy
003
Old School

Frequently asked questions

How do you get started?

The very first step would be to clone this project, duh! Then, click the pages button and you should see three other pages. These pages are the templates that we created. Choose whatever one you fancy and then visit the how it works section to learn how to get started building out your sitemap.

How can you create more page levels?

You can add up to 3 levels!

Here's how to do it:

1. Go on the navigator
2. Remove the "hide" class from the element named "second-row" - this will reveal the second level
3. Remove the "hide" class from the element named "lines"
4. To add more pages on the second row, copy and paste the element named "screen-wrapper" within "second-row"
5. Done!

Is SiteFlow built using only Webflow?

Yes! SiteFlow is simply a tool built using purely native Webflow. No custom code. No APIs. Nothing of the sort. Only Webflow. SiteFlow is not a product. It is a symbol-powered cloneable that we thought would be helpful to freelancers/agencies as we use this tool on a daily!

Can you create more than one sitemap?

Yes! You can create as many as you like. Simply duplicate the page and rename it to your liking :)

What is the best way to show my SiteFlow sitemap to clients?

When using SiteFlow to show clients, we recommend purchasing a sub-domain called "client.yourwebsitename.com". You can then connect this domain to your SiteFlow cloneable project. Then, whenever creating a SiteFlow sitemap for a client of yours, change the page name to your client's name! E.g: "client.pristinedigital.co.uk/acme-inc".

This will just blow your client's mind, trust us!

Is SiteFlow free to use?

Yes! And it always will be! All of our tools/cloneables are free to use.

FAQs
Your questions, answered.
HOW IT WORKS
Read the full step-by-step guide
resources
Check out more cool cloneables
Built + designed by Shais
Ahmad
of Pristine Digital 🚀