调整内容和设计

根据每个地区定制您网站的内容和风格。
开始之前: 查看本地化介绍以熟悉本地化。

默认情况下,您在网站上添加的任何其他语言环境都会继承网站主要语言环境的内容和样式。您可以覆盖或 定制 设计师画布上的任何内容都可以满足特定地区客户的文化和语言需求。

将元素插入到主要语言环境后,您可以选择 区域设置视图 选项,选择所需的语言环境,然后像平常一样修改元素 — 但是,这些调整现在只会影响所选语言环境。本地化元素以“地球”图标。

请注意: 您的布局(即元素和组件的排列)受主要语言环境影响。在次要语言环境中无法添加或删除元素或组件。此外,在次要语言环境中进行的任何本地化修改都将仅影响该次要语言环境。
请注意: 某些本地化功能是某些本地化订阅包所独有的。 查看本地化订阅和功能的全面比较.

通过本教程,您将了解:

  1. 如何自定义画布上的文本
  2. 如何调整资产
  3. 如何个性化元素可见性
  4. 如何个性化风格
  5. 如何定制组件

如何自定义画布上的文本

请记住: 本地化功能仅在设计器中可用。内容编辑者可以在编辑模式下自定义内容。

要调整设计器画布上的文本,请点击 区域设置视图 顶部栏中的下拉菜单并选择您喜欢的语言环境。随后,您可以使用希望在该语言环境中显示的内容来修改画布上的任何文本(包括链接、按钮、表单等)。

如果您打算翻译文本内容,可以右键单击任何包含文本的元素,然后选择“翻译为(当地语言)”。

请注意: 自动翻译包含子 span 元素的元素时,span 元素的文本不会自动翻译。虽然您可以单独自动翻译 span 元素,但我们建议手动翻译 span 元素中的文本,以确保翻译与上下文保持相关性。

如果页面上的某个特定内容没有翻译,则可能是因为该内容没有翻译。

专家提示: 如果您希望翻译整个页面,请选择 身体 元素,然后右键单击并选择“翻译为(当地语言)”。

您还可以手动翻译文本或使用翻译应用程序,例如 本地化.

自定义从右到左的文本

Webflow 自动在已发布的网站上为阿拉伯语 (ar)、波斯语 (fa)、希伯来语 (he)、乌尔都语 (ur) 和意第绪语 (yi) 语言环境以及这些语言的区域方言环境(例如,阿拉伯语(伊拉克))提供 RTL(从右到左)脚本支持,即使文本尚未自定义。如果您不想显示具有自动 RTL 的文本元素,请包含自定义属性 目录=“ltr” 或者 目录=“自动” 到元素。

如何自定义资产

有多种原因需要自定义您的资产 — 例如,如果您网站上的资产包含文本,并且需要针对特定语言或语言环境的翻译版本,或者资产在多个语言环境之间共享,但需要针对每个语言环境翻译替代文本。或者,您可能需要针对每个语言环境提供不同的资产,以满足您网站的本地化要求。您可以管理每个语言环境的替代文本和资产。

要替换特定区域的资产:

  1. 点击 区域设置视图 顶部栏中的下拉菜单
  2. 选择您想要的区域设置
  3. 在画布上选择资产
  4. 导航 元素设置 > 图像设置
  5. 点击 替换图片
  6. 在“资产”面板中选择资产或上传新资产

要跨地区分发资产,但个性化替代文本 全部 该资产在次要语言环境中的实例:

  1. 点击 区域设置视图 顶部栏中的下拉菜单
  2. 选择您想要的区域设置
  3. 访问 资源面板
  4. 将鼠标悬停在您想要自定义的资产上
  5. 点击设置“齿轮“ 图标
  6. 输入资产的自定义替代文本

要跨语言环境共享资产,但自定义替代文本 在次要语言环境中该资产的实例(即,自定义次要语言环境中资产的替代文本,而不将该替代文本传播到该次要语言环境中该资产的所有其他实例):

  1. 点击 区域设置视图 顶部栏中的下拉菜单
  2. 选择您想要的区域设置
  3. 在画布上选择资产
  4. 继续 元素设置 > 图像设置
  5. 从中选择“自定义描述” 替代文本 落下
  6. 输入资产的自定义替代文本

要重置资产或替代文本以从主要语言环境继承:

  1. 点击 区域设置视图 顶部栏中的下拉菜单
  2. 选择您想要的区域设置
  3. 在画布上选择资产
  4. 使用权 元素设置 > 图像设置
  5. 点击 图像 和/或 替代文本 (取决于您想要的重置)
  6. 点击 重置为主要区域设置

如何自定义元素可见性

虽然次要语言环境的所有元素和组件均从主要语言环境继承而来,但您可以使用元素可见性来个性化次要语言环境的页面显示。

要修改特定元素的可见性:

  1. 点击 区域设置视图 顶部栏中的下拉菜单
  2. 选择您想要的区域设置
  3. 使用权 元素设置 > 能见度
  4. 选择元素的可见性设置(即“显示”或“隐藏”)

元素在服务器端被隐藏 - 意味着隐藏元素不会出现在您的网站设计中,也不会反映在您网站的 HTML 代码中。

如何自定义样式

您还可以通过本地化给定元素的样式来个性化特定区域设置的呈现。

专家提示: 断字、换行和文本换行样式有助于遵守特定语言的规则,并保证在不同语言环境中获得良好的用户体验。了解有关文本换行和换行的更多信息。
请注意: Webflow 自动支持已发布网站上的阿拉伯语 (ar)、波斯语 (fa)、希伯来语 (he)、乌尔都语 (ur) 和意第绪语 (yi) 语言环境以及这些语言的区域方言环境(例如,阿拉伯语(伊拉克)),无论文本中是否没有本地化。如果您不想显示具有自动 RTL 的文本元素,请附加自定义属性 目录=“ltr” 或者 目录=“自动” 到相应的元素。探索有关如何本地化从右到左文本的更多详细信息。

要本地化特定元素的样式: 

  1. 点击 区域设置视图 上方栏中的下拉菜单
  2. 选择您喜欢的地区
  3. 选择画布上的元素 
  4. 根据需要修改样式

要恢复元素样式以从主要区域设置继承: 

  1. 区域设置视图 顶部栏中的下拉菜单
  2. 选择您想要的区域设置
  3. 选择画布上的元素 
  4. 击中任何风格 样式面板 (例如字体、颜色、断线等等) 
  5. 重置

如何本地化组件

重要的: 在将元素转换为组件之前,如果在次要语言环境中对元素及其子元素进行本地化,则本地化内容将被主语言环境中的组件默认内容覆盖。因此,建议在本地化元素内容之前将其转换为组件。

您可以采用与本地化元素相同的方式对组件进行本地化。您可以本地化主要组件,以确保该组件的本地化值在特定语言环境中的每个组件实例中均保留。

例如,如果您拥有一个导航栏并希望本地化文本和链接: 

  1. 点击 区域设置看法 上方栏中的下拉菜单
  2. 选择您的首选语言环境
  3. 双击画布上的导航栏组件以调整主要组件
  4. 修改或解释主要部分中的文本和链接
  5. 退出主组件 

此后,该区域内每次出现的导航栏都将采用这些本地化值。

或者,你可以本地化组件属性的默认值: 

  1. 区域设置视图 顶部栏中的下拉菜单
  2. 选择您的首选语言环境
  3. 双击要定位的组件来调整主要组件
  4. 继续 元素设置面板 > 组件属性 > 管理属性
  5. 点击您想要本地化的组件属性 
  6. 修改默认值(例如文本、可见性、图像等) 

您还可以通过本地化属性字段来本地化组件实例。要启动此操作,首先确保组件具有为要本地化的元素指定的属性。然后: 

  1. 区域设置视图 顶部栏中的下拉菜单
  2. 选择您的首选语言环境 
  3. 揭示您想要本地化的组件实例 
  4. 修改或本地化组件实例中的值
  5. 退出组件实例

组件实例中的本地化值不会传播到同一组件的其他实例,即使在同一语言环境内。 

笔记: 在辅助区域设置视图中,您无法附加新的组件属性、删除或断开组件属性,或者更改组件属性类型或设置。
麦宜云
Ewan Mak 的最新帖子 (查看全部)