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

一个带有模特人台的时尚与风格网页设计。.
Table of Contents

在 Bubble.io 网站上设置语言切换器可以让用户更轻松地切换语言。此功能对于面向全球受众的应用尤其有价值,允许用户以他们偏好的语言与平台互动。 Bubble.io 是一个广受欢迎的无代码开发平台,提供内置的本地化功能,使开发者无需大量编码知识即可创建多语言应用。

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

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

同事们围着一台大屏幕电脑协作开展项目

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

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

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

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

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

符合这些条件的一款自动翻译服务是 Linguise。 Linguise 自动翻译提供高度可定制且易于使用的语言切换功能,该功能 可与流行的 CMS 和网站构建器集成,例如 Bubble.io。

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

以下是安装 Linguise 在 Bubble网站上并设置语言切换器的步骤。

第 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.io 网站了;剩下的就是将语言切换器与国旗链接起来。.

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

第 5 步:启用语言切换器

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

一个网页的截图,显示模块安装提示。该模块将被添加到页面中。.

接下来,前往您的 Bubble 网站面板。点击左侧边栏菜单中的 “设置” ,然后选择“SEO / 元标签”。

SEO 和社交媒体 Open Graph 设置

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

服务器错误配置页面

步骤 5:配置主显示器

要开始设置语言切换器,请前往 “设置” > “语言旗帜显示” 部分,在 Linguise 仪表板中。在此页面上,您可以调整多项设置

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

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

第 6 步:设置旗帜的设计

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

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

第 7 步:自定义颜色和尺寸

配置完旗帜设计后,您可以进一步自定义旗帜的颜色和大小。以下是您可以调整的设置:

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

第 8 步:设置旗帜框阴影

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

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

设置完成后,您可以看到语言切换器在您的 Bubble 多语言网站上的运行情况。.

一位戴着大草帽的女士坐在墨西哥地标前。她似乎身处历史或文化场景中。.

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

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

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

在 Bubble 多语言网站上成功设置语言切换器后,重要的是要考虑为您的网站和访客优化语言切换器的技巧。.

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

一幅色彩丰富的插画,画面中有一台笔记本电脑,屏幕上有一位男士正在教授语言,周围环绕着书籍和旗帜。.

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

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

将语言名称与旗帜一起显示

带有编码元素和代表不同语言的旗帜的电脑屏幕插图。.

虽然国旗图标可能有所帮助,但不应单独使用。在国旗或图标旁同时以该语言的母语文字标注语言名称,能够提升清晰度并避免潜在混淆。对于在多个国家或地区使用的语言而言,这一点尤为重要。.

示例: Airbnb 网站上的语言切换器会同时显示语言名称和国家旗帜。例如,它会显示“English (US)”并配以美国国旗,以及“Français”并配以法国国旗。这种组合可确保用户准确识别其偏好的语言选项。

合理放置语言切换按钮

一位正在开发网络项目的开发者。各种网页元素。.

语言切换器的位置对用户可访问性至关重要。常见位置包括页眉右上角、页脚或主导航菜单中。关键是要让它易于发现,同时不使主要内容区域显得杂乱。.

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

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

两个人正在笔记本电脑上协作。他们似乎是在办公室环境中工作。.

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

示例: 联合国教科文组织网站的语言切换器在各种设备上都能完美适配。在桌面端,它以水平列表的形式显示在页眉中。在移动端,它会变成一个紧凑的下拉菜单,确保可用性,同时不影响移动端布局。

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

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

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

示例: 该网站在所有页面(从首页到产品页面以及结账流程)的页脚中始终保持语言切换器的一致性。这种一致性确保用户可以在浏览或购物体验期间随时轻松切换语言。

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

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

为 Bubbledio 提供自动翻译,高质量结果。.

现在,您已经了解如何为 Bubble.io 多语言网站选择语言。阅读语言选择器可以带来各种好处,并进一步基于前面提到的要点进行优化。.

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

您可能还感兴趣阅读

别错过!
订阅我们的新闻简报

获取有关网站自动翻译、国际SEO等的最新资讯!

Invalid email address
试一试吧。每月一次,您可以随时取消订阅。.

别走,留下您的邮箱!

我们无法保证您会中彩票,但我们可以承诺提供一些关于翻译的有趣资讯以及偶尔的折扣。.

别错过!
Invalid email address