如何在 Bubble上设置语言切换器

带有人体模型的时尚风格网页设计。
目录

Bubble上设置语言切换器可以方便用户切换语言。对于面向全球用户的应用来说,这项功能尤为重要,它允许用户使用自己偏好的语言与平台互动。Bubble.ioBubble流行的无代码开发平台,它内置了本地化功能,使开发者无需掌握大量编码知识即可创建多语言应用。

要在 Bubble中实现语言切换器,开发者通常首先在应用设置中定义要支持的语言。然后,他们会创建一个下拉菜单或按钮元素,供用户交互以更改语言。本文将讨论如何使用自动翻译服务网站在 Bubble上设置语言切换器。

为什么 Bubble网站上的语言切换器很重要?

同事们正在用一台大电脑屏幕合作完成一个项目

在网站上添加语言切换器并非没有道理。以下是您需要在 Bubble 网站上设置语言切换器的原因。

  • 方便其他国家的用户:语言切换器允许国际用户用他们的母语浏览网站。例如,一位西班牙用户可以切换到西班牙语访问在线商店,从而更轻松地了解产品详情并完成购买。CSA Research 的研究表明, 76%的在线购物者更喜欢在信息以他们的语言呈现时购买产品,这凸显了该功能对于提升用户体验和便利性的重要性。
  • 优化网站在其他国家/地区的搜索结果:借助语言切换器,您的Bubble网站可以在外语搜索结果中获得更高的排名。例如,法语版本的网站更有可能出现在法语 Google 搜索结果中。这种曝光度的提升可以显著增加国际流量。
  • 提升销售转化率:提供多语言内容可以促进销售。允许用户切换语言的在线课程平台可以吸引更广泛的受众,并增加报名人数。这种方法之所以有效,是因为消费者更倾向于从提供其母语信息的网站购买产品,从而直接影响转化率。
  • 提升用户参与度和留存率:语言切换器可以延长用户在网站上的停留时间。例如,在社交网络应用上使用自己偏好语言的用户往往会保持更长时间的活跃度。这种参与度的提升意义重大,因为用户通常在使用母语的网站上花费的时间是使用第二语言网站的两倍,从而带来更高的用户留存率。
打破语言障碍
告别语言障碍,迎接无限成长! 立即试用我们的自动翻译服务。

如何在 Bubble上设置语言切换器

既然我们已经了解了在多语言 Bubble网站上切换语言的重要性,接下来让我们讨论如何实现它。网站翻译服务通常提供此功能,并且可以根据用户的需求进行定制。

然而,并非所有翻译服务都提供可定制且用户友好的语言切换器。因此,选择一款兼容多种框架并提供灵活语言切换功能的自动翻译服务至关重要。.

符合这些标准的自动翻译服务之一是LinguiseLinguise翻译提供高度可定制且易于使用的语言切换功能,并可与Bubble.io 等流行的内容管理系统和网站搭建工具Bubble

Linguise 与 Bubble无缝集成,使开发者能够轻松地将语言切换功能集成到多语言应用程序中。借助 Linguise的高级功能和用户友好界面,您可以简化 Bubble 网站上语言切换器的设置和维护。

Bubble网站安装Linguise并设置语言切换器的步骤

第1步:注册 Linguise 账户

首先创建一个免费的Linguise帐户并添加您的网站域名。您可以先享受 30 天免费试用期,然后再选择订阅方案。

接下来,您需要注册您的域名以授权翻译。复制您的域名(包括“https://”),并将平台选择为“其他”。.

黑色背景,中间留有大片白色空白区域。

接下来,选择源语言和目标语言。.

黑色背景,白色占位文字。.

步骤 2:使用 Entri 自动添加 DNS

在 Linguise 控制面板上注册您的网站后,您将有两种安装选项。.

要自动添加 DNS 记录,请点击“自动连接您的 DNS”。这项名为 Entri 的功能可以自动管理 DNS 记录,从而简化安装过程。您也可以手动将 DNS 记录复制到您的域名提供商。

信息图展示了数字增长的周期

点击该按钮后,Entri 将分析您注册的网站 URL 并检查您的公共 DNS 记录,从而确定必要的提供商和 DNS 记录。.

这是网站分析工具的屏幕截图。该工具正在分析一个域名。.

接下来,点击“使用[您的域名提供商]进行授权” (例如,Cloudflare)。此操作会将您重定向到域名提供商的登录页面,您可以在该页面登录并继续操作。

Quantumult X 登录界面截图

登录后,Entri 会自动将相应的 DNS 记录(每种语言一条 DNS 记录,以及一条用于验证密钥的 TXT DNS 记录)添加到您的域中。.

授权来自第三方应用程序的DMS记录

授权成功后,Entri 会通知您所有 DNS 设置已成功配置。翻译功能通常会在所有 DNS 条目传播到您的域名后即可使用,这通常需要 20 到 30 分钟。.

网站维护中

如需手动安装,您可以按照以下步骤操作。.

步骤 3:复制 DNS 记录

对于手动安装,您将被重定向到一个屏幕,该屏幕显示设置多语言页面所需的 DNS 记录,例如 fr.domain.com 或 es.domain.com。.

将这些元素复制到您的 BubbleDNS 配置中。

电脑屏幕上显示着很多文字和方框,看起来像是一个技术界面。.

接下来,访问您的域名管理器并导航至 DNS 设置区域。按照说明进行复制:

  • 一条 TXT 记录用于域验证
  • 语言的一条或多条 CNAME 记录

以下是每种记录类型(TXT 和 CNAME)的示例。.

一张黑白电脑界面截图。这张图片展示了一个科技相关的背景。.

添加完所有记录后,您的配置应该如下所示。.

黑色背景和白色文字的屏幕截图。

第 4 步:验证 DNS

将所有记录添加到域 DNS 后,单击“检查 DNS 配置”按钮以验证 DNS 传播。.

DNS 验证通常需要 30 分钟到 1 小时。完成后,您应该会在 Linguise 控制面板的 DNS 列表旁边看到绿色指示器。您几乎可以开始翻译您的 Bubble网站了;剩下的就是链接到带有国旗的语言切换器。

表格显示网站内容变更情况。.

第 5 步:启用语言切换器

语言切换器是一个旗帜弹出窗口,允许用户选择他们偏好的语言。要实现此功能,请将域名注册流程结束时或域名设置中提供的代码复制到 Bubble网站页面的页眉中。之后,旗帜语言切换器将自动显示在您的公共网站上。

网页截图,显示模块安装提示。该模块需要添加到网页中。.

接下来,前往您的Bubble网站面板。点击左侧边栏菜单中的“设置”

SEO 和社交媒体 Open Graph 设置

向下滚动到“高级设置”下的“页眉中的脚本/元标签” 粘贴Linguise脚本,然后单击“保存”并发布您的网站。

服务器错误配置页面

步骤 5:配置主显示器

要开始设置语言切换器,请导航至Linguise中的“设置”>“语言标志显示”。在此页面上,您可以调整多个设置。

  • 旗帜图标样式:可从三种选项中选择:并排显示、下拉菜单或弹出窗口。
  • 位置:选择语言切换器在网站上的显示位置。有多种位置选项可供选择;请确保访客可以轻松访问它。
显示语言列表的设置

您可以将国旗和语言名称、国旗和语言缩写或仅语言名称组合显示。建议同时使用国旗和语言名称,以便用户更容易识别。.

第 6 步:设置旗帜的设计

配置好主显示屏后,进一步自定义要显示的旗帜设计。.

  • 显示语言名称:您可以选择根据国家/地区名称或语言名称本身来显示语言名称。例如,您可以显示“法语”或“Français”。
  • 英语旗帜类型:此选项适用于有多种变体的语言,例如美国英语或英国英语(也适用于西班牙语、台湾英语、德语和葡萄牙语)。
  • 旗帜样式:选择旗帜图标的形状,圆形或矩形。
设置旗帜样式和语言显示

第 7 步:定制颜色和尺寸

配置完旗帜图案后,您还可以进一步自定义旗帜的颜色和尺寸。以下是您可以调整的设置:

  • 旗帜边框半径:自定义矩形旗帜样式的半径(以像素为单位)。
  • 语言名称颜色:选择显示语言名称的默认文本颜色。
  • 弹出窗口语言颜色:设置弹出窗口或下拉区域中语言标题文本的颜色。
  • 旗帜大小:调整旗帜图标的大小。
  • 语言名称悬停颜色:设置用户将鼠标悬停在语言名称上时显示的文本颜色。
  • 弹出窗口语言悬停颜色:设置当用户将鼠标悬停在弹出窗口或下拉区域中的语言标题上时显示的文本颜色。
用于自定义旗帜和弹出窗口颜色的设置面板

步骤 8:设置旗帜框阴影

最后,您可以调整国旗图标的阴影设置。第一个选项允许您为网站上显示的每个国旗图标添加阴影效果。第二个选项控制用户将鼠标悬停在国旗图标上时的阴影效果。.

完成所有所需调整后,点击“保存”按钮应用自定义更改。然后,访问您的 Bubble 网站以验证配置是否已成功应用。语言切换器将如下所示。

设置完成后,您就可以在 Bubble 多语言网站上查看语言切换器的功能了。

一位头戴宽大草帽的女子坐在墨西哥地标建筑前。她似乎身处某个历史或文化场所。.

接下来,您可以将网站翻译成其他语言,例如西班牙语。.

一名身着墨西哥传统服饰的男子坐在台阶上

优化 Bubble语言切换器的最佳实践

在 Bubble 多语言网站上成功设置语言切换器后,需要考虑一些技巧来优化语言切换器,使其更好地服务于您的网站和访问者。

使用易于识别的语言旗帜标志

一幅色彩鲜艳的插图,画面中一台笔记本电脑屏幕上有一个人在教语言,周围环绕着书籍和旗帜。.

在 Bubble网站上实现语言切换器时,使用易于识别的语言旗帜或图标至关重要。这些视觉提示可以帮助用户快速识别并选择他们偏好的语言。例如,地球图标通常被广泛理解为代表语言选项。您也可以使用国旗,但请注意,这有时会带来问题,因为语言并非总是与单一国家/地区绑定。

例如:亚马逊网站在顶部导航栏中,当前选定语言(例如“EN”)旁边会显示一个小地球图标。这种简单而有效的方法使用户无论当前语言设置如何,都能快速找到语言选项。

将语言名称与国旗一起展示

电脑屏幕插图,包含编码元素和代表不同语言的标志。.

虽然旗帜很有用,但不应单独使用。在旗帜或图标旁附上该语言的本文字名称,可以更清晰地传达信息,避免潜在的混淆。对于在多个国家或地区使用的语言来说,这一点尤为重要。.

例如: Airbnb 网站上的语言切换器会显示语言名称和国旗。例如,它会显示“英语(美国)”和美国国旗,“法语”和法国国旗。这种组合确保用户能够准确找到自己偏好的语言选项。

仔细考虑语言切换按钮的位置。

一名开发人员正在进行网站项目开发。涉及各种网站元素。.

语言切换器的位置对于用户体验至关重要。常见的放置位置包括页眉右上角、页脚或主导航菜单内。关键在于既要方便用户找到它,又要避免影响主要内容区域的视觉效果。.

例如:在 tiffany.com 网站上,语言切换器位于页面右下角,始终可见且易于访问。这种一致的布局确保用户无论在网站的哪个位置都能快速找到并使用语言选项。

将语言切换器设计为响应式

两人正在使用笔记本电脑合作办公。他们似乎是在办公室里工作。.

确保您的语言切换器在所有设备上都能良好运行,包括台式电脑和智能手机。在较小的屏幕上,您可能需要调整设计——例如,使用下拉菜单而不是水平选项列表。.

例如:联合国教科文组织网站的语言切换器在不同设备上的适配性极佳。在电脑端,它以水平列表的形式显示在页面顶部;在移动设备上,它会变成一个简洁的下拉菜单,既保证了易用性,又不会影响移动端的布局。

确保语言切换器在各个页面上保持一致。

一位身穿黑色运动服的女子在沙发前的米色地毯上摆出瑜伽姿势。

在 Bubble网站的所有页面上,保持语言切换器的设计、功能和位置一致。这种一致性有助于用户更高效地浏览网站,因为无论他们当前位于哪个页面,都能准确地找到语言选项。

例如:该网站在所有页面(从首页到产品页面再到结账流程)的页脚都保持一致的语言切换按钮。这种一致性确保用户在浏览或购物过程中随时都能轻松切换语言。

准备好探索新市场了吗? 通过 1 个月的无风险试用,免费试用我们的自动翻译服务。 无需信用卡!

使用 Linguise在 Bubble 多语言网站上设置语言切换器!

 Bubbledio 自动翻译,高质量结果。

现在,您已经了解如何为 Bubble多语言网站选择语言。阅读语言选择器可以带来诸多好处,并可根据前面提到的几点进行进一步优化。

有效优化语言选择器可以显著提升用户体验。注册一个Linguise账号,将其与您的Bubble网站集成,并自定义语言选择器以改善用户体验。

您可能也有兴趣阅读

不要错过!
订阅我们的新闻

接收有关网站自动翻译、国际搜索引擎优化等的新闻!

Invalid email address
试试看。 每月一期,您可以随时退订。

不要不分享您的电子邮件就离开!

我们不能保证您会中奖,但我们可以承诺提供一些有关翻译和偶尔折扣的有趣信息。

不要错过!
Invalid email address

8折

年底促销