Specbee: How to make a Multilingual Website using Drupal 9

Drupal CMS

How to make a Multilingual Website using Drupal 9
Shefali Shetty
21 Jun, 2022

It’s a fact. You can’t go global without localized focus. Yeah, that sounds like a  paradox, but it makes sense from a user perspective. Many organizations are reaping the benefits of multilingual web experiences to connect with their customers across the world. And it’s almost a requirement these days. Not only do Multilingual websites enable you to reach new target audiences more effectively, but it adds credibility to your brand, offers familiarity to visitors and makes users more likely to turn into customers.

In a recent research conducted on a list of top 150 global brands across industries, Wikipedia, Google, Nestlé, Airbnb and Adobe emerged as the top 5 brands that scored the best in terms of multilingual support, localization and global user experience. If you’re looking at localizing your brand as you go global, Drupal is a great CMS to opt for because of its fantastic support for multilingual websites. In this article we will describe how Drupal 9’s multilingual feature works and how content editors or content teams can utilize the feature.

Multilingual Support Modules

As I mentioned previously, Drupal 9 makes it really easy to build multilingual sites. It offers 4 multilingual support modules that are already built in core. All you have to do is enable them. In your administrator view, go to Extend, select the 4 modules under Multilingual and click on Install.

Configuration Translation Module – This one is not visible for the end users but especially useful for site builders. It translates configuration text like views names, 
Content Translation Module – Allows to translate content entities and types like blocks, comments, taxonomy terms, custom menu links, and more.
Interface Translation Module – Helps translate user interface elements such as Home, Forms, Title, Body, Description, etc. 
Language Module – The real magic happens here. Here’s where you can choose from a whole range of languages (>100) and add it to your configuration.

You can then further configure these modules to have them enabled for all or for only a selected set of content types, entities, configurations or interface elements. 

For more details on each of these modules, make sure you read this article.

Implementing the Multilingual Feature

Once you have enabled these 4 modules, let’s dive right into configuring them.

Step 1: Add a Language (or multiple languages)

In your Drupal 9 admin interface, navigate to Configuration -> Regional and language -> Languages. Once you’re on the Languages page, click on the + Add language button

 

I’ve chosen Spanish as my language and added it to the list of languages.

Once added, you can select it as your default language or have English as the default.

Adding a Language

Step 2: Update Translations

Now click on the right part of the Edit button and you will get two options as a dropdown – Delete and Translate. When you select Translate, your Drupal site gets updated with all the interface and configuration translations for that language from localize.drupal.org. Here thousands of Drupal contributors help translate interface and configuration strings in regional languages.

Importing translations

Step 3: Language switcher

You can add a language switcher block to any region of your page so the user can switch between their preferred languages.

Adding a Language Switcher block

Step 4: Adding translations to content types and entities

You can have translations for all your content types and entities or you can select the ones as per your requirement.

For this, on your Admin screen go to Configuration -> Regional and language -> Content language and translation

I have selected custom language settings for Content, Redirect and URL alias. Under Content, I’m going to only have translations for my “Ad Page” content type (as shown below). All my fields under “Ad Page” content type are selected to be translated.

 

Now we’re all set to add translated content to the required content types.

Translating the Content

Now that you know how to enable and configure the multilingual modules in Drupal 9, let’s move on to learning how to actually translate the content. Let’s look at a super simple, 3 step process on how content teams can leverage this functionality to add their translated content. If you want to read about migrating multilingual content from CSV to Drupal, check out this article.

Step 1: Create a new page or Edit an existing one

Since I had opted to have translations for all my Ad page content types, I have created a test page under this content type. Now you will see that along with the usual View, Edit, Delete and Revisions tabs, I also have a new Translate tab.

 

Step 2: Select the Language

On clicking the Translate tab, you will be able to see all your languages listed (see below). Observe that the Spanish language that we added does not have a translation yet. Now click on Add to create a Spanish translation page.

Step 3: Add translated content to the respective field

Notice how all your fields and elements of your admin interface have translated themselves to Spanish (see below). All you have to do is add your translated content as per requirement!

 

Step 4: Save and Review!

We’re almost there! After adding in all your translated content, don’t forget to Guardar your translation! 🙂

And here’s what your Multilingual web page will now look like.

Spanish Version

You will notice the URL generated for the translated version (here Spanish) will contain a language prefix (here: es).

English Version

One of our recent Multilingual projects on Drupal 9 was for SEMI. SEMI is a global industry association that connects more than 1.3 million professionals and 2500 members worldwide through its programs, initiatives, market research and advocacy. SEMI members are responsible for innovation and advancements in electronics manufacturing and design supply chain. With 8 regional offices located around the world, having a multilingual setup was imperative for them to enable focus and customization. Read more about how we helped them build a cohesive multisite, multi language experience with Drupal 9.

https://www.semi.org/region-selector

Final Thoughts

Did you see how easy it was to build a multilingual website in Drupal 9? If you’re looking for Drupal development assistance in creating your next multi language website so you can reach a bigger target audience, feel free to talk to us.