Multilingual websites

1 | Install the language switcher extension

First install the extension Sprachenwechsler (terminal42/contao-changelanguage) in the Contao Manager.

2 | Duplicate the site structure

Open the site structure and duplicate the website root including its subpages. After duplicating, all pages and articles are invisible, so you have to make every page and every article visible for a change to show in the front end.

In the page settings of the website root for the new language, enter the corresponding language code under DNS settings -> Language, e.g. en.

3 | Select the page in the main language

Edit each page of the new language and select the corresponding page in the main language under Language & translation.

4 | Create a module

Select Themes in the left navigation and edit the front end modules of the theme (gear icon). Create a new module of type Change language (under Miscellaneous). Further settings are not strictly necessary.

5 | Place the module in the layout

Select Themes in the left navigation again and edit the page layouts of the theme (to the right of the gear icon). In the corresponding layout, duplicate the first row under Front end modules and select the module you just created. The module must be at the very top and in the header.

6 | CSS for the display

Finally, add the following SCSS to custom.scss. You find it in the file manager under naturetheme/scss.

body:not(.home):not(.contact) #header .inside {
  padding-top: 140px;
}

nav.mod_changelanguage {
  position: absolute;
  top: 0;
  width: 100%;
  height: 40px;
  background: #000;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 85px 0 50px;

  ul {
    display: flex;

    li {
      padding-left: 10px;
    }
  }

  + .mod_navigation {
    top: 40px;
  }
}

@media (max-width: 1023px) {
  .full-width-height-slider .text {
    padding-top: 160px;
  }

  nav.mod_changelanguage {
    padding: 0 20px;
  }
}

Example

In the end, as shown in the screenshot, a bar with the language switcher should appear above the main navigation.