Webflow 教程：如何使用多种语言

在Webflow 上创建网站的可能性和自由度是无限的。

我们非常喜欢无代码工具Webflow ，因为它为我们的许多用户带来了灵活性。我们甚至在网络公司Finsweet的帮助下建立了自己的多语言Webflow 网站，您可以自由克隆。

除了超级灵活和用户友好之外，Webflow 最近还推出了Webflow 本地化，这是他们的本地化解决方案，可让您为新市场创建多语言网站。

对于那些网站规模较小且没有扩展计划的用户来说，该选项是个不错的选择，但如果您正在寻找一个Webflow 本地化解决方案，并希望它能与您的网站一起成长，那么 Weglot 可能更适合您的需求。

因此，如果您已经准备好将Webflow 网站转变为多语言网站，我们将逐步向您展示如何使用Webflow 本地化或 Weglot 来实现这一目标。无论您最终使用哪种解决方案，请查看文章末尾的自定义语言切换器库，您现在就可以在自己的网站上克隆这些切换器！

‍ 使用 Webflow 本地化创建多语言网站

Webflow 最近推出了Webflow 本地化功能，使您的网站可以使用多种语言。有了它，您可以直接在Webflow Designer 中设计、构建和定制本地化网站。下面是您可以做的事情：

• 以可视化方式建立本地化网站。
• 自定义您的本地。
• 原生自动翻译内容
• 允许游客选择自己喜欢的语言。

有了这些功能，Webflow 就能让您的网站适应各种语言群体，并通过一系列多语言搜索引擎优化功能确保网站针对搜索引擎进行优化。  

要添加Webflow 本地化，只需按照以下步骤操作：

进入设置面板，单击本地化。

1. 从相应的下拉菜单中选择您的主要地区--这将是您要添加到网站的地区或语言。
2. 配置本地语言的显示名称、子目录和发布状态。
3. 保存更改。
4. 如果想添加更多本地语言，请单击 "添加新本地语言"并重复步骤 2-4。

对于许多Webflow 用户来说，Webflow Localization 还不具备创建多语种网站所需的全部功能，而这些功能还可以扩展和简化翻译项目的工作流程。

某些关键的本地化功能，如语言重定向、媒体翻译和简单的翻译管理工具，只有在更高的计划中才能使用，而后者只有在您额外付费购买翻译管理系统插件后才能使用（起价为每月 125 欧元）。

此外，按照目前的设置方式，您的翻译人员或本地化专家可以访问您的网站内容。这就意味着有可能对整个网站或其内容进行不必要的更改，因为本地化界面并没有与后端隔离。

请注意，要进行同类比较，您可以查看我们的Webflow 本地化与 Weglot页面。

如果您喜欢视频，也可以查看我们的对比视频：

或者，今天就在您的Webflow 网站上免费试用 Weglot，看看使用多语言是多么容易。

使用 Weglot 实现多语种Webflow

Webflow本地化解决方案自然是以设计为中心的网站翻译方法，这对于那些希望在网页设计阶段直接创建多语种网站的人来说是非常好的。

不过，正如我们提到的，它还缺少一些功能，而这些功能可以让多语言使用更加方便。

这就是 Weglot 的作用所在。它可以即时 翻译您的Webflow 网站，让您只需几步就能创建一个多语种的Webflow 项目。

Weglot 提供端到端网站翻译解决方案，包括自动内容检测和翻译、通过独立界面处理的完整翻译编辑控制、多语言搜索引擎优化设置等，从而消除了网站翻译的复杂性。

Weglot 的付费计划价格 结构清晰，所见即所得。  

Weglot 还提供多语种搜索引擎优化功能，让您的网站能够覆盖全球受众。您可以选择子目录或子域、自动添加 hreflang 标签，并让您的网站在国际搜索引擎上可见--所有计划都提供这些功能，甚至免费计划也不例外。

教程：如何在Webflow

使用 Weglot 只需 5 分钟即可在Webflow 网站上添加语言。请观看视频，或按照以下书面步骤操作。

1.创建 Weglot 账户：在这里，您可以在一个单独的控制面板上管理所有翻译。这意味着您无需邀请他人使用Webflow 项目中的设计编辑器。

2.添加域名：网站的母语和要添加的语言（注意，如果使用的是临时Webflow 域名，请使用此集成或等到购买了自定义域名后再继续）。

3.配置 DNS 记录：创建子目录或子域（Weglot 提供两种选择）。进入域名提供商账户和 DNS 记录选项卡。创建新条目--选择 CNAME。在 "名称 "中添加要添加的语言的语言代码，在 "数据 "中添加在 Weglot 控制面板中提供的值。然后点击 "检查 DNS"。

4.配置设置： 最后一步需要进入Webflow 管理区 "设置"-"自定义代码"。转到 "标题代码 "和 "在标题标签末尾添加代码"。从您的 Weglot 账户复制并粘贴 JavaScript HTML 代码段

‍

5.结束： 保存更改并发布网站。

就这样，您现在正式拥有了一个多语言网站Webflow ，为您的国际客户提升了用户体验！

Weglot 可即时检测、翻译和显示您的Webflow 网站。我们使用领先的翻译服务提供商 DeepL、Google Translate 和 Microsoft（包含在您的月度计划中）为您提供第一层自动翻译，并提供全面的编辑控制，让您可以按照自己的意愿编辑网站翻译。无论您是保持原样、在项目中加入翻译团队，还是直接在 Weglot 项目中订购专业翻译，我们都将为您提供选择。

这是一项突出的功能，因为这意味着您无需像使用Webflow Loalization 那样，在每个页面上手动激活每种语言的翻译，而且在添加新页面或进行更新时还需要重复这一步骤。

这里还需要补充的一点是，如果在Webflow 项目之外处理翻译工作，您就不需要为您的团队或翻译人员提供设计编辑器的访问权限（因此需要购买更多席位，每月 19 美元）。

定制您的Webflow 语言切换器：无代码

我们还要谈谈语言切换器。Webflow Localization 和 Weglot 都有一个默认的语言切换器，您可以对其进行自定义。这样，网站访客就可以在网站的不同语言版本之间进行切换。

将 Weglot 添加到Webflow 项目后，网站右下方会自动添加语言切换器。

编辑的第一种方法是使用我们简单的语言切换器可视化编辑器。这样，您就可以轻松地将下拉切换器拖放到网站设计中的不同位置。

您还可以选择一些简单的设计变更，包括

• 显示语言名称
• 添加标记
• 显示语言代码
• 更改尺寸

这一实用功能还可以让您在移动设备上查看切换器。这样，您就可以进行自定义编辑，确保无论屏幕大小如何，用户体验都保持不变。

Webflow 可以克隆的语言切换器

接下来是可以直接克隆的语言切换器选项，因此在设计时无需动一根手指。

作为Webflow 的忠实粉丝，Weglot HQ 与两家领先的Webflow 机构合作开发了语言切换器，您无需定制代码即可将其添加到您的多语言网站中。

2020 年，我们与 Finsweet 合作，使用我们的用户界面工具包设计了 16 种不同的语言切换器；2024 年初，我们又与 Digidop 合作设计了 5 种新的语言切换器。

事实上，我们与 Finsweet 合作的语言切换器非常受欢迎，被克隆了 8000 多次，这促使我们再次与该团队合作，为您带来 2024 年的更新版本Weglot UI Kit 2.0！Weglot UI Kit 2.0 是原Webflow 语言切换器项目的更新版本，另外还有一些新的语言切换器，让您可以使用 20 种切换器来匹配任何网站的设计。

请查看 Finsweet 的Webflow 添加自定义语言切换器的教程。

‍

下面是我们使用 Digidop 制作的语言切换器，请参阅 Digidop 下拉链接👉（附教程）。

‍

因此，您现在可以从 25 种不同的设计和模板中进行选择，并通过Webflow 设计器轻松添加。

语言切换器的灵感来自Webflow Weglot 用户

我们可以暂时抛开理论，看看那些使用 Weglot 为网站添加多种语言和定制语言切换器的公司的成功案例。

1.韦格洛

首先，我们不能不提到我们自己的Webflow 网站 Weglot 😉。当我们说我们是Webflow 的粉丝时，我们并没有撒谎，我们选择用它来展示我们的全球影响力也反映了这一点。

我们定制了语言切换器，以适应我们的新品牌。作为网站本地化的冠军，我们选择了我们的母语名称，以确保英语、法语、德语、意大利语、西班牙语、日语和荷兰语网站访客的用户体验清晰明了。  

2. i-Mesh

下一个例子来自纺织品创作者 i-Mesh，他的作品更偏向于定制化（只有使用Webflow 才是正确的）。 

他们在左侧粘贴式侧边栏中添加了语言切换器，因此所有在网站上滚动的访客都能看到它。他们没有使用语言代码或名称，而是简单地使用了单词的一半，与网站现代简洁的风格相得益彰。 

语言切换器并不需要很复杂，i-Mesh 就是一个很好的例子。  

3.纳普塔

法国资源管理软件Napta选择Weglot在欧洲开展业务，这得益于我们的自动化功能。

这大大减少了团队的内部翻译管理工作流程，在找到翻译插件之前，该流程完全是手工操作。

"拥有一个多语言网站，并且无需任何技术能力就能对其进行管理，再加上手动优化已翻译内容的省时过程，这些都改变了我们的多语言搜索引擎优化性能。"
Estelle Barthes，Napta 公司通信和内容部。

语言切换器呢？放在导航条上（看来这是一个常见的主题！），与网站的其他部分完美匹配。

通过选择语言代码，他们明确表示自己的网站具有多语言功能。

‍

4.跌落接触

与 Weglot 一样，Dropcontact 也来自巴黎，并通过基于Webflow 的网站展示其实力。他们的网站不仅注重美观，还采用了引人入胜的滚动动画和舒缓的双色调，给人一种平静、和谐的感觉。

真正使 Dropcontact 与众不同的是其无缝集成的语言切换器，位于主导航栏的战略位置。这一功能不仅增强了网站的美感，还彰显了 Dropcontact 对无障碍和包容性的承诺。

5.大蓝

这家物流供应商在语言切换器的位置和设计上都略有不同。它位于页脚，每种语言在下拉菜单中都有一个标志。

虽然旗帜可能不是每个人都喜欢的，但它们确实有其存在的意义--尤其是当你专门在使用旗帜的国家开展业务时。 

(仅供参考，这不是一个好主意：例如，如果您希望与西班牙语国家做生意，而使用西班牙国旗，您最终会疏远拉美国家）。 

他们最初使用的是语言代码的微妙效果。但后来，他们在下拉菜单中加入了完整的语言名称和一个标志，这使得语言切换器既微妙又醒目。

6.盔甲钱包

最后是一款名为 Armor Wallet 的人工智能 Web3 钱包。与 Napta 的主题相同，他们也采用了下拉语言代码，而不是完整的语言名称。

我们还注意到，Weglot x Finsweet 的语言切换器设计被直接克隆到了他们的网站上！在他们的网站上有日语和简体中文，无论每种语言的字符长度如何不同，整体设计都保持不变。

‍

即时创建多语言Webflow 网站

我们通过Webflow Localization 和 Weglot 向您介绍了如何创建多语种Webflow 网站，希望您现在已经找到了使Webflow 网站成为多语种网站的完美解决方案。

此外，对于那些想要定制语言的用户，我们与 Finsweet 合作，创建了 14 种不同的语言切换器，您现在就可以添加到您的网站上！

Weglot 的价格为每月 15 欧元起，您可以开始为期 10 天的免费试用，并立即进行测试。我们提供从免费计划到企业级计划，因此您可以找到最适合您需求的计划。