To create a multi-language blog in Webflow using a single CMS Collection Page for the "post" collection, you’ll use conditional visibility and dynamic fields to manage language-specific content within the same item.
1. Structure the CMS Collection
- Use a single CMS Collection called “Post”.
- Add duplicate sets of fields for each supported language. For example:
- Title (EN), Title (FR)
- Body (EN), Body (FR)
- Slug (EN), Slug (FR)
- Add a Language reference field or option field only if needed for filtering or logic; otherwise, field sets per language are sufficient.
2. Set Up Language-Specific Slugs Manually
- Since Webflow supports only one slug per CMS item, you cannot use different slugs per language on Webflow hosting.
- Instead, let the blog live at a single URL like
/blog/your-article
, and dynamically show language versions based on the user's selection or input (e.g., locale toggle or browser language detection).
3. Design with Conditional Visibility
- Use multiple text and rich text blocks on the CMS Template Page (for “Post”) for each language version.
- Set conditional visibility for each block:
- Example: Show “Title (EN)” if the URL contains
?lang=en
. - This requires embedding custom URL parameter-based visibility logic with JavaScript.
4. Use JavaScript to Switch Language Dynamically
- Webflow does not natively support URL parameter detection for conditional visibility; you must use JavaScript to read the query parameter (e.g.,
?lang=fr
) and: - Add or remove classes (like
.hide
, .show
) - Show/hide elements tied to each language’s fields
- For example, show all elements with
.lang-fr
class and hide .lang-en
when ?lang=fr
.
5. Optional: Use Localization Integrations
- If budget allows, use Weglot or Polyflow, which handle multi-language logic and UI without manual field duplication.
- These tools detect all visible text and auto-translate or sync with CMS content.
6. Limitations
- Only one slug per CMS item means full-language-specific SEO-friendly URLs (e.g.,
/fr/mon-poste
) aren't possible without custom front-end routing or external hosting (like using Webflow as a headless CMS). - Manual setup is labor-intensive if you support more than 2–3 languages.
Summary
To create a multi-language blog using one CMS Collection Page, duplicate your content fields per language, control their display based on URL parameters using JavaScript, and use conditional visibility in the Webflow Designer. For better scalability and SEO, consider third-party localization tools or custom hosting solutions.