How the Resources & Downloads page works

‍

Everything on this page comes from the CMS — you never need to touch the design to add, remove, or reorganise documents. There are three collections that work together:

‍

1. Resource Sections — the big product blocks on the page (General Information, eFacade LITE, eFacade PRO). Each item holds the heading, the short intro text, and the button label/link. Add a new item here and a whole new block appears on the page automatically.

‍

2. Resource Categories — the tabs inside each section (Brochures, Data Sheets, CAD Details, etc.). Each category has a "Sections" field where you tick which product blocks it should appear in. That's the whole trick: one category can show up as a tab in several sections, or just one. The "Order" field controls tab order.

‍

3. Resource Documents — the actual files. Each document has:

• Name — what visitors see, and what the search box searches
• File URL — a link to the file (upload it in Webflow's Assets panel, then copy its link here)
• Size label — typed by hand, e.g. "2.4 MB". Webflow can't detect this automatically, so keep it accurate when you swap a file
• Document type — PDF, DWG, DOCX, XLSX, MP4 or ZIP. This drives the type filter at the top and decides whether a "view" (eye) button appears
• Section and Category — which block and which tab the file lives under. A document must have both to show up
• Locked — flip this on and the file can't be downloaded; visitors see a lock icon that opens a pre-filled email to request access instead
• Order — position within its tab

Adding a new file, start to finish: upload the file to Assets → create a new Resource Document → paste the file link, pick its section, category and type, type the size → publish. It appears in the right tab, in the search, in the filters, and in the "Download All" zip — no other steps.
‍

The search bar and the three dropdowns at the top search across every document at once. While a search or filter is active, a results list appears above the sections with removable tags showing the active filters; clear them and the page goes back to normal.
‍

How this differs from the Mitrex site it's modelled on

The Mitrex resources page was used as the reference, and this page has the same functionality: search, filters with removable tags, category tabs, multi-file selection, zip downloads, and locked files that open an email request.
‍

The build is different in a few ways:

Content management. The Mitrex page runs on custom code written specifically for their site. This page stores all content (sections, categories, documents) in the Webflow CMS, so documents are added and edited from the Webflow Editor.
‍

Filtering. The search and filters use Finsweet Attributes, a standard third-party library for Webflow.
‍

Zip downloads. On the Mitrex site, multi-file zips are prepared by a separate server. Here the zip is created in the visitor's browser, using the files hosted on Webflow. Files hosted elsewhere are included only if their host allows cross-site access; otherwise they fall back to downloading individually. Links from services like Google Drive or Dropbox point to a page rather than the file itself and shouldn't be used in the File URL field.
‍

File sizes are manual. The size shown next to each document (e.g. "2.4 MB") is typed in when the document is added; it isn't detected automatically. If a file is replaced, the size label needs updating too.