How to Create a Multilingual Site in Joomla 4 Using Helix Ultimate - JoomShaper

How to Create a Multilingual Site in Joomla 4 Using Helix Ultimate

06 December 2021
Hits 1,255
8 min read
How to Create a Multilingual Site in Joomla 4 Using Helix Ultimate

Having a multilingual website can come to your benefit in more ways than you can imagine. From increasing traffic to your website to increasing sales, building a brand, and giving off a trustworthy impression - the advantages of having a multilingual website go a long way. As the demand for multilingual sites continues to rise, more companies are embracing this cost-effective way of populating websites for years. 

Today we will take a look at how we can create a multilingual site in Joomla 4 using the best Joomla template framework - Helix Ultimate. Follow through the detailed steps of this tutorial carefully and you will get your multilingual panel and site ready in no time.

So without further ado let’s jump into the tutorial.

Step 1: Install the Required Languages

First things first - to start making your site multilingual, we need to install the languages that you want your website to display. 

Simply log in to your Joomla administration control panel first. From your dashboard go to System > Install > Languages. From the list choose your preferred languages and hit Install. 

For this tutorial, we will install Arabic, Chinese Simplified, and Finnish languages and keep English as the default language.

Extension: Languages

 The system will show the message “Installation of the language pack was successful” upon the language installation. 

Step 2: Enable Content Language

Now we need to enable the languages that we have installed in Step 1. To do so go to System > Manage > Content Languages. Select the languages you installed and choose Publish from the Actions drop-down menu.

Content Languages

After publishing, you will get a message showing “Content Languages Published”

Step 3: Install the Language Plugins

Next comes the installation of the Language Filter and Language Code plugins. Language Filter plugin help the CMS to recognize what languages you have installed and displays the relevant content and the Language Code improves SEO for the generated HTML document. Let’s take a look at how we can enable these plugins.

Language Plugins

Go to System > Manage > Plugins. Type in Language in the search bar and hit enter. You will get a list of plugins related to language. From the list, enable Language Filter and Language Code.

Step 4: Assign Languages to Specific Pages

Hopefully, you were able to follow the steps so far. Now it’s time to create copies of web pages for your installed languages. For this tutorial, we will demonstrate using the Legacy Home page of Helix Ultimate. 

Go to your Joomla Dashboard and navigate to Components > SP Page Builder. From the list of pages choose Home - Legacy. 

 

Edit Page

From the dropdown menu of the Save button click Save as Copy. 

Repeat this process for the number of languages you have installed. In this tutorial, we will be saving four copies of the Home page each for English, Arabic, Chinese and Finnish. 

Let’s see how we can edit and assign the Arabic language to one of the pages we have just created. Go back to the Sp Page Builder - Pages and scroll down to the copy of the Home page “Home - Legacy (2)” you have just created. 

Edit Page 2

Rename the Title as “Home - Arabic” and navigate to the Publishing tab from the sidebar. 

From the dropdown list of the Language option choose Arabic. Click Save and Close.

Repeat the same process for the rest of the languages.

Step 5: Set up Menu for the Multilingual Site

The next step is to create a menu for each of the languages you have installed and want to display on your website. This step is necessary for better control and easy navigation for your website. Let’s see how we can do that.

Menu

From your dashboard navigate to the Menu option and choose Manage. Click on the New button.

Add Menus

For the Arabic Menu, you can set the Title of your menu as “Home - AR” and the Unique Name as “Home - Ar”. Hit Save & Close. 

Repeat the same process for the rest of the languages.

Step 6: Add Menu Items for the Languages

Once you have created the menus for each of the languages, it is time to add menu items for each main menu. From your dashboard go to the Menus. From the dropdown items, you should be able to see the list of the menus you have just created.

Menu Items

Here we will demonstrate adding menu items for the Arabic menu.

Go to Menus > Home - AR > New

Menu Items 2
  • Title Home - AR
  • Menu Item Type: SP Page Builder > Page
  • Select Page: Home Arabic ( Previously created in Step 4 )
  • Menu: Home - AR
  • Language: Arabic

Once everything is set, hit Save & Close.

Repeat the same process for each of the Menus you had created.

Menu Items 3

 Click on this Set As Home button shown on the screenshot above for the language flag to appear. This will become the default Home item for Arabic language pages.

Step 7: Menu Association via the Menu Item

Language Associations

Once you have added a menu item and assigned languages, you should be able to find the Associations tab like shown in the screenshot. Choose the menu items for the associated languages that you have previously created the menu of. 

To do so go to Menus > Site. From each menu type choose the associated languages individually.

Step 8: Enable Language Switcher Module 

The next thing you need to do is to enable the language switcher module. This module displays the available content languages that you want to display and enables users to switch between the list of available content languages in a multilingual site. 

Go to Content > Site Modules > New and select the Language Switcher module.

Now the Language Switcher module should appear in your Site Module. Click on the Module.

Language Switcher Module

Rename the Title as Language Switcher. Click on the Title bar to Hide the main title from appearing on your webpage. Then select the Position to Top 2.

Hit Save & Close.

Step 9: Duplicate Template Style

With each language that we installed, we will assign the Helix Ultimate template to its content. To do that, we have to create duplicates of our Helix Ultimate template so that we get the same look and feel for each of our multilingual pages. 

Navigate to System > Templates > Site Template Styles.

Template Style

Select shaper_helixultimate - Default and click on the Duplicate tab on the top.

Once you are done, it’s time to assign languages to each of the duplicated templates. Let’s see an example of how we can do that.

Template Style 2

Click on the shaper_helixultimate - Default (2) that you have just created and rename the Style Name as “shaper_helixultimate - English”. From the default language menu choose English. Hit Save and go to the Menu Assignment tab beside the Details tab.

Template Style 3

Choose the respective language menu for each language like shown in the screenshot. Hit save and close.

Template Style 4

Choose shaper_helixultimate - English from Site Templates Styles. Now click on Template Options.

Helix Ultimate

This should take you to the front end of your Helix template. From the sidebar, navigate to Menu and select Home - EN from the Select Menu Type dropdown list. Hit the Save button on the top.

Repeat the same process for each of your template styles that you have just duplicated. In our case, we repeated the same process for shaper_helixultimate - Arabic, shaper_helixultimate - Chinese, haper_helixultimate - Finnish duplicated templates.

Step 10: Content Localization Method

Please note that the methods you followed so far allow you to have a separate panel for languages that you have installed and wish to display to your audience. Your content language will still be in the default language. The contents of each language should be localized manually. Let’s see how we can do that.

From your Joomla 4 dashboard go to Components > SP Page Builder.

From the list of pages scroll down to the home pages you had initially created in Step 4. Once you hover over the pages you should be able to see the two options Preview and Frontend Editor. Click on the Frontend Editor.

Localization

This should take you to the frontend editing page of Helix Ultimate from where you can localize your webpage as your preference.

Helix Ultimate 2

Let’s see what the translated pages look like after localization.

Congratulations! You have successfully created a multilingual site in Joomla 4 using Helix Ultimate.

Final Words

So in this article, we have tried to solve any confusion or difficulties you might have had for creating a multilingual site in Joomla 4 using Helix Ultimate. Localizing your website can effectively increase web traffic and consequently expand audience reach. So if you are looking to increase your global brand presence it’s definitely worth it to give it a try today! 

Hope this article was helpful to you and don’t forget to leave your experience and feedback in the comments section below.

Download Helix UltimateBrowse All Joomla Templates

Sreema

Sreema

Technical Content Writer
Sreema is a technical content writer at JoomShaper. In her copious free time she enjoys good food with good friends and loves moonlit strolls on the beach!

Comments (6)

Samuel Desloges
Samuel Desloges
This comment was minimized by the moderator on the site

Thank you Sreema for this good and useful article!

Sreema
Sreema    Samuel Desloges
This comment was minimized by the moderator on the site

You’re welcome. Glad it helped!

Ugur Uygur
Ugur Uygur
This comment was minimized by the moderator on the site

Thanks for a helpful tutorial

Sreema
Sreema    Ugur Uygur
This comment was minimized by the moderator on the site

Thank you so much for the appreciation!

DL
Dawid Lisowski
This comment was minimized by the moderator on the site

Nice one. Can you write one more tutorial with JoomShaper template as a example? Why Jooshaper templated do not have multilangual version by default?

Sreema
Sreema    Dawid Lisowski
This comment was minimized by the moderator on the site

Hi Dawid Lisowski,
All our templates have multilingual support. You have to follow the same steps as mentioned in this tutorial to make your Joomla site multilingual.

There are no comments posted here yet

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.