You can create a multi-language blog in Webflow using a single CMS Collection Page by managing translations within the same CMS item and using conditional visibility. This lets you avoid duplicating CMS structures while displaying different languages based on user selection or URL structure.
1. Use a Language Field in the CMS
- In your "post" CMS collection, add a reference field or a multi-option switch (e.g., radio or dropdown) for Language (e.g., English, Spanish, French).
- Alternatively, for full control, create duplicate text fields for each translatable field (e.g., Title EN, Title ES, etc.).
2. Structure Multi-language Content in Each CMS Item
- For each blog post, create multiple language versions within the same CMS item.
- Example fields:
- Title EN, Title ES
- Content EN, Content ES
- Use a shared slug (e.g., “/blog/my-post”) and dynamically switch content display based on selected language.
3. Create a Language Switch Mechanism
- Use custom code with JavaScript or different URL parameters (e.g.,
/blog/my-post?lang=es
) to detect language. - Store selected language in localStorage or cookies if using a toggle globally.
4. Set Up Dynamic Content Filtering with Conditional Visibility
- On the CMS Template Page (e.g., Post Template), add multiple versions of content blocks.
- For each language field (e.g., Title EN, Title ES), create separate text elements.
- Set conditional visibility for each element:
- Example: Show Title EN only when the selected language is English.
- Use Webflow’s Element Settings Panel > Conditional Visibility to control what shows.
5. Optional: Use Weglot or Custom JS for Language Routing
- If you want full routing like
/en/blog/my-post
or /es/blog/my-post
, integrate Weglot (paid) or use custom routing logic with reverse proxy or JavaScript. - Keep in mind, Webflow alone doesn’t support native language folders unless you manually create them with duplicate pages.
Summary
To build a multi-language blog with one CMS Collection Page in Webflow:
- Store all language versions in one CMS item.
- Use conditional visibility to dynamically show/hide content based on selected language.
- Employ a language switcher (cookie, URL param, or JS) to control what's displayed.
This allows you to manage everything cleanly in a single CMS and page design.