We really like Webflow.

As do our clients—we recently rounded up a few of our favorite examples of beautiful Webflow sites with fluid, Weglot-powered translations.

What makes these multilingual sites stand out? 

For one, they take full advantage of Webflow’s animation capacities—check out the way the Wall Street Nacka Festival site’s text slides into view on their Webflow-built site (even on mobile).

The thing about Webflow is that, unlike Squarespace, Wix, and most other drag-and-drop or template-based website builders, Webflow really lets you start from scratch.

Its design interface is also intended to imitate code structure—so, instead of just placing elements wherever you want on your blank page, Photoshop-style (this is how web design works in Wix, for example), you have to follow certain “rules” that dictate responsive web design.

What’s the Point of Making Sure Your Webflow Site Is Responsive?

Why bother learning Webflow—which is objectively more complex than Squarespace, Wix, WordPress, and other widely-used site-builders—when you could just…use one of those? (And frankly, they’re all great for different reasons, from a design perspective—we’ve even got tips on how to optimize your multilingual WordPress and Squarespace site designs.)

Webflow’s relative intricacy allows free reign to the user over every element of the site’s design and interactivity; so, as a designer, you can test and decide exactly how you want your site elements to respond on desktop and mobile, at the same time.

On a site-builder like Squarespace, for example, your site will also be responsive—but that’s because it’s based on a template, which leaves less room for modification than a blank Webflow page. This is awesome if you’re not an experienced web designer—the template takes care of all the nitty-gritty work.

But if you do have some design experience, you’re probably more used to having control over how elements interact on your final product. And to exercise this kind of minute control, Webflow is a pretty amazing tool.

And how better to make your Webflow site responsive—in other words, tailored to any potential user, regardless of device, screen size, or location—than by adapting it not only to all of your user’s screens, but also to all of their native languages?

Design With Multilingualism in Mind, From Step 1

Since Webflow is meant to allow as much freedom as possible to designers, while still providing us with an organized workspace, it doesn’t have a lot of pre-set options—WordPress, for example, has an entire store’s worth of plugins; Wix has an app store for site-builders; and some sites, like Squarespace, offer so many built-in functions (down to designing Squarespace-managed e-mail campaigns) that needing help from third-party apps or integrations isn’t even really an issue.

So when you start out with Webflow, you’ll want to give some advance thought to your site’s final purpose and audience, so you can optimize it—as soon as you start designing—for their needs. 

If your audience is international, you’re probably already planning on making your site multilingual—and you’re on the right track.

1. Flexbox and Grid are Your Friends.

So how do you figure out where to begin? What kind of layout should you plan for your site, and what kinds of interactions will work universally, in any language that you end up translating it into?

Flexbox, a.k.a. web design “magic”

A good place to start is with Webflow’s built-in flexbox layout feature. 

Flexbox is a CSS property that adapts a page element to the size of a browser screen proportionally—so it’s not fixed in a particular position, and its dimensions aren’t determined by pixels. In their intro to flexbox tutorial, the Webflow University team literally refers to the flexbox element as “magic”—which, all things considered, it kind of is. 

Using a flexbox prevents you from having to manually adapt your text alignment and margins for different viewports (i.e. desktop vs. mobile vs. tablet)—and adapts its size and dimensions to fit its “children” elements, including text blocks.

This is really good news for multilingual site designers, since it means you won’t have to worry about re-defining your “parent” box sizes for different viewports or screen sizes and your site will remain fully responsive. 

When using a “Container”, “Columns”, or “Div Block” element, all you need to do is go under “Layout” in the element design settings section of your right-hand dashboard, and select “flex” (as shown in the screenshot below) in the “Display” options.

Once you’ve used this sorcery to turn your element into a flexbox, you can decide exactly how you want the flex magic to work. 

Let’s look at how this might help you when translating your website, especially if your character count is likely to change.

Let’s say we have three text boxes, and we want them to be consistently aligned on the page and distanced evenly from one another. 

To ensure that there’s some space between them, we start by setting the padding and margins manually. 

*Pro tip: if you’ve got a group of similar-looking elements like these that you want to behave in the same way, think about making them all part of the same class so that when you apply design settings (i.e. changes to the typography style, spacing settings, background color, etc) to one of the objects, the others will follow suit automatically—without you having to manually update their settings to match.

Once you’ve done that, you can set your padding and margins under “Spacing” for any one of the elements of the class in question:

Now, we can start playing with how your elements behave on the page—even in different viewports or on different screen widths.

In the screenshot below, you can see how we’ve started out with a horizontal alignment for our full-screen desktop viewport. Maybe we want these text boxes to look like a nav bar menu, or something of that nature—doesn’t really matter.

Here’s the thing: when you switch to a mobile viewport, side-by-side horizontal elements tend not to look so great.  Without responsive design, your mobile users could end up seeing something like this:

Two of the elements are completely cut off, and impossible to find on the page.

Flexbox layouts are the easiest (some may even qualify it as the most magical) solution to this kind of problem. In the GIF below, look at how we haven’t changed the direction of the layout—it’s still classified as “Horizontal” (circled in green)—but it adapts and become vertical if the screen size is too narrow for a horizontal alignment to be UX-friendly and responsive. 

How did we do this? By wrapping our flexbox children elements (i.e. the text boxes themselves), selecting “Wrap” on the “Children” option of the container’s “Layout” design settings (circled in yellow).

So, how does this help you specifically in the context of making your website multilingual?

Well, imagine you have a translation that ends up using a lot more characters than the original text.  By using a smart wrapped flexbox layout, you don’t have to worry about manually setting the widths, heights, or positions of your text boxes for each screen/viewport size. Flexbox does it for you:

Notice how in the second frame—an example of a horizontal mobile screen—the longer translation text boxes are automatically put into a three-row vertical layout, as opposed to the two-row layout shown in the first GIF.

With the shorter text in the first GIF, the two-row layout looked pretty good, and preserved the right amount of spacing between the text boxes; however, with the second GIF’s longer text, this wouldn’t have been the case—over only two rows, the text boxes would probably have surpassed the viewport limits. 

The wrapped flexbox layout prevents this from happening, and you don’t have to manually change anything.

TL;DR: Flexbox is a multilingual website builder’s friend.

Grid: flexbox in the next dimension

Webflow already has a great tutorial that covers the fundamental differences between flexbox and grid layouts, as well as what situations are better-adapted to each one.

Basically, grids are like flexboxes with an added dimension. So, instead of organizing your parent container’s child elements along one axis (in the case of flexbox, as we saw above, that’s either a horizontal or a vertical axis), you assume that they’ll somehow be aligned along both of these axes—and choose, instead, how you want them to be distributed and aligned therein.

Grid is definitely a good option if you have four or more elements in a group that you’d like to keep evenly spaced apart, and it works pretty similarly to flexbox when the viewport changes: 

Grids are good for responsive multilingual site design in the same way flexboxes are. They allow you to organize your text content regardless of its length, so you can switch between languages—and, presumably, character counts—without having to worry about readjusting your element dimensions and positions.

2. Style Your Language-Switch Button.

If you’re going to make your Webflow website multilingual using Weglot, you’ll find that a default language-switch button will appear in the bottom right-hand corner of your website once you’ve connected your Weglot account to your site. 

It’s a pretty neutral-looking button, but if you’re using Webflow, it’s probably safe to assume you like to have a lot of control, down to the tiniest details, of your webpage design (and that’s what sets Webflow apart from other online design tools, in the end!)—so you might be more inclined to personalize it and assimilate it to the unique look and feel of your page.

Webflow is a particularly great tool for customizing your language-switch button, since you can pretty much do it all from the Design Editor. 

You may think about integrating your language-switcher into your existing design by adding it to your main nav bar or footer nav bar menus. These are both pretty common places to put localization info.

Some sites, like Uber’s, even have language selection in both the header and footer menus (even if they only have region selection in the footer):

On Webflow, you can add a “Dropdown” element (you can find the drag-and-drop option under “components” in the “Add an Element” tab on the left-hand menu) to any part of your page—including (and advisably) as part of one of your main navigation menus.

Once you’ve done so, head over to your new dropdown menu’s “Element Settings” on the right-hand dashboard:

Under “Dropdown Settings,” you’ll have an option to “Add Link”—this just allows you to add a new item within your dropdown menu. Instead of adding a link to a particular page or URL, you can type in “#Weglot-” followed by the appropriate two-letter language code (and we’ve got a list of all of those here) for the version of your site you’d like to link out to. 

For example, if you’ve used Weglot to translate your site into French, Spanish, and Japanese, you’d want to add the following links:

• #Weglot-fr
• #Weglot-es
• #Weglot-ja

The same principle applies for any other language on that list into which you could potentially want to translate your website.

That’s one way to do things. Or, you can also check out our 14 new Webflow language switchers we’ve created within our Webflow UI Kit. Clone them and follow this simple tutorial to see how to add them to your Webflow multilingual website:

We've also just released a new language switcher collection with Digidop that you can customize and reuse on your Webflow website (a bonus: the language switchers are compatible with any website technology!)

3. Update Your Imagery.

A picture’s worth a thousand words—and sometimes even more, if it actually contains words. 

This is one of the easiest details to overlook when designing a webpage for a multilingual audience. Take a look at the following screenshots of the Airbnb homepage, one from its English site and the other from its Turkish site:

From a UX perspective, the language transition between these two different language-versions is pretty fluid: the layout remains exactly the same, the Airbnb branding stays visible, and the typography even seems to accommodate the change in character count when taken from English to Turkish.

One thing sticks out on the Turkish version, though: the text within the two rightmost images is still in English.

If you plan on using any visuals that include text, you’ve got two options for making sure that the in-image text gets translated along with the rest of your site.

Option 1: Take the text out of the image, and make it a text block instead.

If the image in question here hasn’t already been saved in a static format (like a JPEG or PNG) and you can still remove the text from it, you probably should—having text in a static image necessarily makes the full-site-translation process longer. 

Once you’ve removed the text and uploaded your nice, plain image into your “Media” section on Webflow, go ahead and place it where you want it on the page, then drag a text block over it. At first, the text block will probably be placed somewhere next to the image—that’s because overlapping elements have to be explicitly defined as such in CSS, and aren’t a default setting.

And the good news is, you can define this setting to make your text element overlay your image. All you’ve got to do is play around a bit with its position, in the “Design” tab for your text block on the right-hand side of the Design Editor; you’ll likely want to change it to “Absolute” or “Relative” so that it is tied to the parent element (or entire page, if there is no parent element) just like the image is. Do the same for the image itself, and adjust the X- and Y-values, padding, and margins of each element so that the text overlays the image exactly how and where you want it to.

Option 2: Translate your image(s).

If you’re set on keeping your text pixellated into your image, that’s fine, too—you’re just in for a bit longer of a process.

You’ll have to use Photoshop or a similar software to manually replace the image’s text and save the image separately for each language (Weglot can also help you with those manual translations, if you need it—we’ve got professional human translators on command for special jobs). 

The best way to make sure that the appropriate image shows up on each translated version of your page is sync it with your translation software. Weglot has a built-in “media translator,” for example—it’s part of the interface that allows you to manually assign images to each translated version of your site.

Once you’ve saved these images, go into your Weglot dashboard, where, under “Project Settings,” you’ll be able to “Enable Media Translation.”

Head over to your “Translations” tab, and—right next to the search bar at the top of your translations table—you’ll have access to a menu, called “Type,” that allows you to filter through your translations for text and/or media elements. If you filter for “Media,” you’ll see that all the images on your site have been identified by Weglot—and you’ll be able to upload replacement ones for each language you’ve gotten your site translated into.

4. Don’t Forget About Fonts.

Typography often figures among designers’ obsessions. It’s another one of those little details that’s easy to forget, but actually one of the most important to keep in mind. Not only does it convey the ethos of your site, but also literally determines how much readers will want—and even be able to—interact with your site content.

First, check: is your font alphabet-accessible?

If you’re translating your site into languages that don’t use the same alphabet—for example, translating between French, which uses the Latin alphabet, and Arabic, which uses the Arabic script—this is an extra consideration you’ll have to take. 

Good news for type geeks: you can connect your Webflow account to both Google Fonts and Adobe Fonts, which are two of the best-supplied font bases for multilingual scripts (in other words, they have a lot of fonts that aren’t exclusively adapted to the Latin script, which is kind of a font-hog). Plus, you can upload your own personal fonts, if you’ve bought or created custom fonts and have the files readily available.

No matter where you’re getting your fonts from, you’re going to want to double-check that your ultimate choice(s) is/are available in all of the alphabets you’ll be using.

Unfortunately, neither Adobe Fonts nor Webflow has a built-in feature to verify the compatibility of a font with different scripts—both only show their available fonts in Latin characters. However, Google Fonts has a handy “language” filter that allows you to view all of the fonts available for a particular script (and yes, the filter is somewhat misleadingly named—most alphabets/scripts are used for more than one language; for example, the Latin script, which is what you’re reading right now, is used not only for English, but also for French, Spanish, and hundreds of other languages). 

Once you’ve got a particular font in mind, you can add a language filter for any of the alphabets you may need, search your font, and see if it’s available. You can also work in the opposite direction: select your alphabet of choice first, and scroll through the Google database to get some ideas as to what your options may be.

Now, ask yourself: how many is too many?

It’s no secret that less is more (at least most of the time) when it comes to good design. This is particularly true of typography. Mixing fonts can be fun, it can diversify the style of your page, and can even help readers distinguish between different categories of text (i.e. having titles in one font and paragraphs in another will ensure that your viewers know which is which). 

But with typography, as with many elements of design, enough is enough, and too much is definitely way too much; mixing too many fonts will likely make your page look haphazard. Plus, if you’re planning on going multilingual, ensuring that every single font you’re using looks good in—and even is compatible with—all of the alphabets/languages you want to display becomes exponentially more complicated.

In short, keep it simple—and if you’re still not convinced, or are just interested in the logic behind type minimalism, Canva has a fantastic font-optimization article that explains, in a bit more detail, why keeping your font count low is ideal.

Using multiple scripts? Avoid bold & italics.

Most of the fonts that we use on word processors are readily available in bold and italics—so it’s natural to take these styles for granted. However, not all fonts are available in these styles—particularly non-Latin fonts. 

Right-to-left (RTL) scripts—such as the Arabic and Hebrew scripts—are rarely ever used with italics, for example; this means that certain fonts may technically be compatible with these scripts, but still may not exist in bold or italic forms for them. 

Overall, if you’re going not only multilingual but also multi-script, keep the bold and italics to a minimum—it will likely save you a lot of frustration and ▯▯▯▯▯▯▯▯.

Ready to go with the (Web)flow?

Website design—especially UX-friendly, responsive website design—is a process that requires careful planning. Even though it’s technically never too late to make your Webflow site multilingual—you can install a translation plugin like Weglot at any stage of your development process—your best bet for making a truly beautiful Webflow site for a multilingual audience is to account for multilingualism from the very beginning.

So, grosso modo, 

• Stick with responsive layout styles that will adapt to different text lengths in different languages—think flexbox and grid.
• Make your language-switch button a fluid part of your user interface by integrating it into a menu and/or styling it to fit in with your site’s look and feel.
• Update your imagery to reflect the language of each version of your site.
• Keep it simple when it comes to typography—and double-check multi-script font availability if your target languages don’t use the same alphabet.

At this point, you’re probably ready to start designing your (soon-to-be) multilingual Webflow site (check out Udesly for some more great tips on utilizing Webflow and discover our very own Weglot x Webflow multilingual showcase).  

To get started, check out this video tutorial on how to make your Webflow site multilingual with Weglot.

Remember: multilingual design provides more possibilities than constraints—you’ll be able to reach brand new audiences on all corners of the planet, and your site will be just as whimsical for all of them. The world (…Wide Web) is your oyster.