刷新您的最佳实践：Squarespace多语言网站设计

我们最近展示了一些令人钦佩的多语言 Squarespace 网站案例。是什么让我们选择了这些特殊的页面？是什么让它们与众不同？

废话少说：这些网站都很漂亮。

我们以前说过，现在再说一遍：Squarespace的模板很有美感。早在 2017 年，Squarespace 自己的主网站就获得了威比奖（这基本上是网络公司可能获得的最高成就之一），此后他们的品牌形象不断提升。

既然 Squarespace 主网站本身如此时尚，那么该平台为用户提供的建站选项也同样时尚。一言以蔽之、 Squarespace 遵循自己的规则.

作为Squarespace网站的所有者，您可能有兴趣将自己的网站推向全球--在2019年及以后，无论您是推出个人网站、电子商务商店（70%的电子商务供应商证实，跨境销售为他们带来了利润），还是为您的企业建立网站，这都是非常有把握的事情。

一旦您决定在国际上大展拳脚，网站内容的首要因素之一就是语言。

Squarespace 可以让你用自己的语言轻松创建网站。您可以安装自己选择的模板（非常光滑、非常美观），然后就可以玩转大量的设计参数--从字体、颜色到间距和网格选项，所有这些都可以通过设计仪表板直观地访问。

Squarespace 多语种

Squarespace 所缺乏的一项简化功能是用于制作 多语言网站.

他们确实提供了如何手动复制网页并自行翻译的说明，虽然这种解决方案可能适用于较小的网站（如作品集），但不适用于较大的网站。对于多语言搜索引擎优化来说，这也不是一个可行的解决方案，因为搜索引擎不喜欢重复的页面。

点击此处了解更多有关多语言搜索引擎优化最佳实践的信息：

使用集成解决方案，如 Weglot等集成解决方案来制作一个 Squarespace 多语言网站，是一种更快捷、更省力的解决方案。

Squarespace 多语言设计

不过，一旦您翻译了网站，您可能会注意到翻译版本在屏幕上的显示方式与原始版本的显示方式存在一些差异。

这是意料之中的； 不同的语言只是看起来不同而已。英语单词 "shell "只有五个字母长，但在法语中却翻译成 "coquillage"--简直是字母数的两倍。

在大多数精简的网页设计环境中（例如，如果您从头开始创建网站），翻译页面可能会扰乱段落对齐方式和文本块之间的交互方式。Weglot与所有 Squarespace 模板的兼容性 通常可以避免这个问题；Squarespace 模板是由专业人士设计的，具有很强的适应性。

但这并不意味着 您不应该遵循以下指导原则 ：a）为您的多语言 Squarespace 网站选择合适的模板 ；b）对其进行定制。

我们将参观 Squarespace 的设计界面，同时考虑到多语言性。

1.现在是使用 Squarespace 多语言模板的时候了。

您可能已经发现，如果您已经进入Squarespace的世界，您的设计参数就会被整合到模板中；Squarespace的模板是出了名的简约、图片多，而且比例匀称，适用于手机和桌面屏幕。

以下是Weglot 客户目前正在使用的一些模板，这些模板在使您的 Squarespace 网站支持多种语言方面久经考验：

特长：线条简洁，对比鲜明

Forte 可以说是 "白立方概念"的数字化体现：它的外观和感觉就像一个当代艺术画廊。它甚至可以将多幅图片以自动背景幻灯片的形式放在主页上。

Forte 可根据背景图片的亮度，将徽标从黑色切换到白色（再切换回黑色），在视觉上具有更强的适应性。

来看看布拉格建筑师斯捷潘-哈夫利克（Stepan Havlik）使用Forte设计的在线作品集吧；他的英文和捷克文网站同样清晰明了，内容丰富。

影响：名称说明一切

Impact 的最大特点可能就是其主标题空间非常大。在 Impact 主页上，您的企业名称或第一关键词才是真正的主角。

看看驻罗马和柏林的律师 瓦伦蒂娜-迈尔（Valentina Mayer）是如何 提升个人品牌的，同时为她的意大利语和英语客户维护翻译精美的界面：

盐水：视差的力量

为页面添加一点动感（尤其是不用自己编程的情况下）是吸引读者眼球的一个简单方法。这正是 Brine 模板系列有别于 Squarespace 上简约风格同类产品的地方；在 Brine 上，全屏横幅图片的滚动速度要比页面其他内容稍慢一些。

网页设计界普遍认为，这是一种最简单的方法，可以为网站带来 3D 的感觉，让用户进一步沉浸在自己的世界中。

Brine 还有哪些优点？它支持多种语言。

(事实上，Squarespace 自己的一个多语种网站演示就是用 Nueva 制作的，Nueva 是 Brine 系列中的一个模板，我们稍后再谈，不过你可以在这里看一看）。

法国平面设计师 Emmanuelle Ciamous 选择 Brine 为其个人画廊网站上的精美图画注入活力，效果令人叹为观止。

2.在图片顶部使用文本块，而不是包含文本的图片。

如果你是 Photoshop、Illustrator 或 Canva 的忠实用户，你可能会喜欢创建带有文字的背景图片或其他图形。很多设计师都喜欢这样做，例如，当他们想使用自定义字体 时，网站建设工具可能无法提供这些字体 。

但是，如果您打算让您的 Squarespace 网站内容使用多种语言，这就不是一个好主意了。

虽然Weglot 等应用程序可以翻译图片的元数据，如图片名称、标题和描述图片的关键字，并让图片出现在 Google Images 等搜索引擎上，但静态图片 （通常为 JPEG、PNG 或 GIF 格式）中的文本 无法翻译。

(值得注意的是，Weglot 仪表板允许您为每种语言上传不同的图片；因此，如果您想为每种语言重新创建带有静态文本的图片，您就可以将每种语言的图片与相应的语言链接起来）。

但老实说，将图片文字修改为多种语言（尤其是当你有很多语言时）很快就会变成一个漫长而乏味的过程。

而不是像下面这样，预先设计好自己的 Squarespace 横幅图片，并在上面添加文字...

...自行上传图像：

......使用 Squarespace 的图片编辑器为图片添加所需的效果（模糊、亮度改变，应有尽有）：

...将图片添加为横幅图片（如下截图所示）或块的背景图片，然后直接在上面添加文本块。

这将确保您的文本可以被检测到，并且在创建多语言网站时不会遗漏任何字母。

图片小贴士： 如果您习惯于从头开始设计网站（最佳实践通常规定图片大小应 "针对屏幕进行优化"，因此不一定要超高清），那么情况并非总是如此，但在 Squarespace 上，图片越大越好。

大多数 Squarespace 模板都以大型横幅为中心（如Brine、Bedford 或Hyde），有时会以背景图片的形式占据整个页面（如Keene、Polaris 或Marta）。

您还需要确保您选择的主横幅图片在所有设备上都美观大方--您可以通过点击页面顶部的向下箭头预览平板电脑和手机页面，并在此菜单上切换到不同的视图格式：

3.量身定制排版。

在任何语言环境下，排版显然都是网页设计师的首要考虑因素之一--如果有人要阅读你的网站，你就要尽可能让他们有愉快的阅读体验。

说到多语言排版的决定，您通常不必太担心，除非您要将 Squarespace 网站翻译成使用不同字母/脚本的语言。 如果是这种情况，您就需要密切关注这部分内容。

Squarespace 超级精简，大多数 Squarespace 模板在字体切换不多的情况下看起来效果最好。大多数设计师都会告诉你，字体太多是不对的（Canva 的排版最佳实践清单第 9 条解释了原因）。

这对多语言 Squarespace 网站设计师来说是个好消息。虽然从理论上讲，如果需要，您可以使用自定义 CSS为每种语言指定不同的字体，但保持简洁，并使用能在所有语言中通用的字体，会让您的眼睛和设计更轻松。这还能让你的品牌在不同语言间保持一致，如果你想吸引全球受众，这一点就非常重要了。

首先，您可以查看 Google Fonts 和/或 Adobe Fonts 上提供的字体（前者是免费的，但 Adobe 通常需要一个账户才能下载个人使用的字体）。

虽然这些字体库包含的样式比Squarespace上实际可用的样式要多得多，但这是了解哪些字体家族支持多种字母的最佳方法，而Squarespace上却无法做到这一点。

例如，在 Google Fonts 上，只要在 "语言 "菜单中选择所需的脚本，就可以看到哪些字体支持哪些脚本。

(该菜单的名称有点误导；您可能会注意到，这些选项实际上并不是 语言而是 脚本而是在线书写语言的脚本名称。有几种语言的脚本名称是相同的--例如，阿拉伯语使用的就是约定俗成的阿拉伯脚本，但许多语言并不是这样；英语、法语、德语和许多其他语言使用的都是拉丁脚本，尽管并非所有语言都源自拉丁语）。

找到支持两种（或所有）所需脚本的字体后，请仔细检查该字体是否在 Squarespace 中可用--您可以在此处找到 Squarespace 的完整字体列表。

4.定制您的 Squarespace 语言切换按钮。

决定是否要使用国旗图标。

这有时是一个艰难的决定。从传统设计的角度来看，在语言选择菜单上将国旗与语言联系起来听起来非常直观：这是一个视觉地标，是一种识别自己语言的方式，即使你完全不知道网站主页的原始语言。

不过，请记住，从技术上讲，国旗代表的是国家而不是语言。不仅大多数语言在不止一个国家使用，而且许多国家有不止一种官方语言。

例如，让印度国旗代表印地语就没有什么实际意义：尽管印地语在技术上是印度使用人数最多的语言，但它只是印度16 种官方语言 之一！ 在这种情况下，要想吸引印度受众，不仅要将您的 Squarespace 网站翻译成不止一种地区语言，还要避免将其中任何一种语言置于另一种语言之上。

将其纳入主导航菜单。

尽管标准的Weglot 语言切换按钮非常中性，但您可能还是想让整个网站的品牌形象尽可能一致，而确保语言按钮是这一策略的一部分的最佳方法就是将其包含在主导航菜单中。

这将确保导航按钮在网站的每个页面上都能以相同的位置显示，而且在颜色和字体风格上与其他导航按钮相似。

您可以进入Squarespace网站编辑器的 "页面 "部分来实现这一功能。在 "主导航 "下，您会看到一个 "+"按钮，该按钮允许您在主导航栏中添加一个按钮；点击该按钮，您会看到一个小窗口弹出，如下面的截图所示：

您可以用链接指向的语言名称作为链接标题，并在 "链接 "内容框中输入 "#Weglot-"，然后输入相关语言的双字母语言代码。

返璞归真：多语言 Squarespace 成功的四大要点

现在，我们已经介绍了Squarespace的一些多语言适应设计功能，并列举了几个例子，让我们来回顾一下在将Squarespace网站引入多语言领域时应该注意的事项：

• 明智选择模板。 这是所有 Squarespace 用户做出的最基本的决定：模板的选择决定了工作流程的其余部分。请确保您选择的模板在翻译时同样美观。

• 将文字与图片分开。 如果您希望用户能够阅读图片上的文字，请避免上传带有文字的图片；相反，请将无文字的图片作为横幅或媒体项目上传，并使用 Squarespace 的多个文本块选项在图片上方或周围输入文字。

• 字体是关键。 在 Squarespace 上使用您需要的所有脚本中可用的字体，这将确保您整个网站的品牌形象与所有访问者保持一致。

• 为您的按钮加分。 定制的语言切换按钮将使您的多语言 Squarespace 网站更加流畅，不会显得格格不入--这又是一个微小的细节，它将让您的目标语言用户感觉到，他们和您的原语言用户一样受到了重视。

与其他内容管理系统一样，Weglot 在 Squarespace 上也能很好地运行。今天就来免费试用一下吧。

了解如何在您的Squarespace 网站上安装Weglot 。