We’ve recently put some admirable examples of multilingual Squarespace sites on display. What made us choose these particular pages? What sets them apart?

Let’s not mince words: these sites are pretty.

We’ve said it before, and we’ll say it again: Squarespace templates are aesthetically appealing. Squarespace’s own main website won a Webby award (which is basically one of the highest possible achievements for an online company) back in 2017, and they’ve only boosted their branding since.

And it makes sense that, since the main Squarespace site is so sleek itself, the platform’s site-building options for users are just as sleek too. In a nutshell, Squarespace follows its own rules.

As a Squarespace site owner, you may be interested in taking your site global—and, in 2019 and beyond, this is a pretty sure bet, whether you’re launching a personal site, an ecommerce store (70% of ecommerce vendors confirm that selling across borders has been profitable for them), or a site for your business.

Once you’ve decided to take the international plunge, one of the first elements of your site content that you’re going to have to take into account is its language.

Squarespace makes building your site—in your own language—super easy. You install the (very slick, very seemly) template of your choice, and can then play around with loads of design parameters—from fonts, to colors, to spacing and grid options—that are all intuitively accessible via your design dashboard.

Squarespace multilingual

One simplifying feature that Squarespace lacks is a native solution for making a Squarespace multilingual site.

They do provide instructions on how to manually duplicate your pages and translate them yourself, and, while this solution might work if you have a smaller site, such as a portfolio, it’s not going to work for a bigger site. It’s also not a viable solution for multilingual SEO, as duplicated pages aren’t favoured by search engines.

Learn more about multilingual SEO best practices here:

Using an integrated solution, like Weglot, to make a Squarespace multilingual site is a much faster and energy-saving solution.

Squarespace multilingual design

Once you’ve translated your site, however, you’ll probably notice a few differences between the way the translated versions render on your screen, and the way your original version looks.

This is to be expected; different languages simply look different. The English word “shell,” only five letters long, translates to “coquillage”—literally double the letter count—in French.

In most stripped-down web design environments (so, if you’re building a site from scratch, for example), translating your page might mess up your paragraph alignments and the way your text blocks interact with each other. Weglot’s compatibility with all Squarespace templates generally prevents this from being a problem; Squarespace templates are designed by professionals to be highly adaptable.

That doesn’t mean, though, that there aren’t a few guiding principles you should follow to a) choose the right template for your multilingual Squarespace site and b) customize it.

We’ll take a tour of the Squarespace design interface, with multilingualism in mind.

1. It’s Squarespace multilingual template time.

As you may have already discovered, if you’ve forayed into the Squarespace world at all, your design parameters are rounded up into templates; Squarespace templates are notoriously minimalist, image-heavy, and well-proportioned for both mobile and desktop screens.

Here are some of the templates currently being used by Weglot customers  that are tried & true for taking your Squarespace site multilingual:

Forte: clean lines and contrast

Forte is what you might call a digital manifestation of the White Cube Concept: it’s made to look and feel like a contemporary art gallery. It even allows you to put multiple images in an automated background slideshow on your homepage.

With a preset that switches your logo from black to white (and back) depending on the brightness of the background image on view, Forte is visually adaptable in more ways than one.

Take a look at Prague-based architect Stepan Havlik’s online portfolio, designed using Forte; his English and Czech sites are equally sharp and informative.

Impact: the name says it all

Impact’s defining feature is probably the sheer size of its main title space. Your business name or #1 keyword is truly the star of the show on an Impact homepage.

Check out how Rome- and Berlin-based attorney Valentina Mayer has boosted her personal brand, all while maintaining a beautifully translated interface for both her Italophone and anglophone clients:

Brine: power to the parallax

Adding a bit of motion to your page (especially when you don’t have to program it yourself) is an easy way to catch a reader’s eye. This is precisely what sets the Brine template family apart from its minimalist homologues on Squarespace; on Brine, your full-screen banner images scroll just a little bit slower than the rest of your page content.

It’s pretty widely-acknowledged in the web design world that this is one of the easiest hacks to give your site a 3D feel, and immerse the user even further into your world.

What else is great about Brine? It’s multilingual-ready.

(In fact, one of Squarespace’s own multilingual site demos was made with Nueva, a template from the Brine family—we’ll talk about that a little later, but you can take a peek at it here.)

French graphic designer Emmanuelle Ciamous chose Brine to breathe some life into her delicate drawings on her personal gallery site, and the effect is quite breathtaking.

2. Use text blocks on top of your images, rather than images containing text.

If you’re an avid Photoshop, Illustrator, or Canva user, you may be partial to creating background images or other graphics that have text in them. This is something a lot of designers like to do when they want to use custom fonts, for example, that might not be available on site builders.

But, this isn’t such a great idea if you’re planning on making your Squarespace site content multilingual.

While apps like Weglot can translate the metadata around your images—like their names, captions, and the keywords that describe them and allow them to appear on search engines like Google Images—the text within a static image (usually in JPEG, PNG, or GIF format) cannot be translated.

(It’s also good to note that the Weglot dashboard does allow you to upload different images for each of your languages; so if you wanted to re-create your image with static text for each language, you would have a place to link each one with its appropriate language.)

But if we’re being honest, photoshopping your image text into multiple languages—especially if you have a bunch—can quickly become a long and tedious process.

Instead of pre-designing your own Squarespace banner image with text already on it, like this…

…upload the image all by itself:

…use Squarespace’s image editor to give it the desired effects (blurring, brightness alterations, they’ve got the whole gamut):

…add the image as a banner image (that’s what’s shown in the screenshot below) or as the background image of a block, and then add a text block directly on top of it.

This will ensure that your text is detectable, and that no letter gets left behind when you create your multilingual site.

Pro-tip for images: While this isn’t always the case if you’re used to designing websites from scratch (where best practices usually state that images should be “optimized for screen” in their size—so, not necessarily super high-res), on Squarespace, bigger is better when it comes to images.

Most Squarespace templates are centered around a large banner (think Brine, Bedford, or Hyde), that sometimes occupies the entire page in the style of a background image (more in the vein of Keene, Polaris, or Marta).

You’ll also want to make sure whatever you choose as your main banner image looks good on all devices—you can preview your tablet and mobile pages by clicking on the down arrow at the top of your page and changing over to a different view format on this menu:

3. Tailor your typography.

Typography is evidently one of a web designer’s primary considerations in any linguistic context—if someone’s going to be reading your site, you’ll want to make the experience as enjoyable as possible for them.

When it comes to multilingual typography decisions, you usually don’t have to worry too much unless you’re translating your Squarespace site into languages that use different alphabets/scripts.  If that’s the case, you’ll want to pay closer attention to this part.

Squarespace is super-streamlined, and most Squarespace templates look best when you don’t switch around your fonts too much. Most designers will tell you that there is such a thing as too many fonts (#9 on this list of typographic best practices from Canva explains why).

This is good news for multilingual Squarespace site designers. Even though in theory, you can assign a different font for each language if you need to using custom CSS, it’s a lot easier on the eyes—and on your design chops—to keep things simple, and use fonts that will render universally in all of your languages. This will also keep your branding consistent between languages, which can be really important if you’re trying to appeal to a global audience.

You can start by checking out the fonts available on Google Fonts and/or Adobe Fonts (the first is free—for Adobe, however, you usually have to have an account to download any font that you want for personal use).

While these font bases contain many more styles than are actually available on Squarespace, it’s the best way to figure out which font families support multiple alphabets—there’s no way to do this on Squarespace.

On Google Fonts, for example, you can see which fonts support which scripts by selecting your desired script in the “language” menu.

(The name of this menu is a bit misleading; you might notice that the options are actually not the names of languages, but rather of the scripts in which languages can be written online. There are a few languages that share the name of their script—the Arabic language, for example, uses what is conventionally called the Arabic script—but many do not; English, French, German, and many other languages use the Latin script, even though not all are necessarily derived from Latin.)

Once you find a font that supports both (or all) of the scripts you’ll need, double check that it’s available within Squarespace—you can find Squarespace’s full list of fonts here.

4. Customize your Squarespace language-switch button.

Decide whether you want to use flag icons or not.

This can sometimes be a tough decision. From a traditional design perspective, associating a flag with a language on a language-choice menu sounds super intuitive: it’s a visual landmark, a way to recognize your own language, even if you’re totally lost in the site’s original homepage language.

However, keep in mind that flags technically represent countries—not languages. Not only are most languages spoken in more than one country, but many countries have more than one official language.

Having the flag of India represent Hindi, for example, makes little practical sense: even though Hindi is technically the most-spoken language in India, it’s only one of the country’s 16 official languages! Trying to appeal to an Indian audience, in this case, would merit not only translating your Squarespace site into more than just one of these regional languages, but also avoiding giving any of them symbolic preference over another.

Include it in your main navigation menu.

Even though the standard Weglot language-switch button is pretty neutral, you may want to make your site-wide branding as coherent as possible—and the best way to ensure that your language button is a part of this strategy is by including it in your main navigation menu.  

This will ensure that it’s always visible on every page of your site in the same position, plus it will look like the other nav buttons in terms of its color and font style.

You can do this by going into the “Pages” section of your Squarespace site editor. Under “Main navigation,” you’ll see a “+” button that allows you to add a button to your main navigation bar; click on this, and you’ll see a little window pop up, like in the screenshot below:

You can title the link as the language name that it will lead toward, and, in the “Link” content box, enter “#Weglot-” followed by the two-letter language code for the language in question.

Back to basics: Four main takeaways for multilingual Squarespace success

Now that we’ve covered some of Squarespace’s multilingual-adaptable design features and gone through a few examples, let’s recap what you should keep in mind when bringing your Squarespace site into the multilingual sphere:

• Choose your template wisely. This is essentially the most fundamental decision any Squarespace user makes: your template choice defines the rest of your workflow. Make sure you pick one that will look just as good in translation.

• Keep your text separate from your images. Avoid uploading images with text already on them, if you’d like your users to be able to read it; instead, upload text-less images as banners or media items and use Squarespace’s multiple text-block options to type over or around them.

• Type is key. Use fonts that are available, on Squarespace, in all the scripts you need—this will ensure consistent branding across your site, for all of your visitors.

• Give your button a boost. A customized language-switch button will sit more fluidly on your multilingual Squarespace site and won’t look out of place—another tiny detail that will make your target-language users feel like they’re being taken into consideration just as much as your original-language ones.

Like on any other CMS, Weglot works really well on Squarespace. Give it a try with a free trial today.

Discover how to install Weglot on your Squarespace site.