Mehrsprachigkeit

1 | Sprachenwechsler-Erweiterung installieren

Installieren Sie im Contao Manager als Erstes die Erweiterung Sprachenwechsler (terminal42/contao-changelanguage).

2 | Seitenstruktur duplizieren

Rufen Sie die Seitenstruktur auf und duplizieren den Startpunkt inklusive Unterseiten. Nach dem Duplizieren sind alle Seiten und Artikel unsichtbar, daher müssen Sie jede Seite und jeden Artikel auf sichtbar stellen, damit im Frontend eine Änderung sichtbar ist.

In den Seiteneinstellungen des Startpunkts für die neue Sprache tragen Sie unter DNS-Einstellungen -> Sprache das entsprechende Sprachkürzel ein, z. B. en.

3 | Seite in Hauptsprache auswählen

Bearbeiten Sie jede Seite der neuen Sprache und wählen unter Sprache & Übersetzung die entsprechende Seite in der Hauptsprache aus.

4 | Modul anlegen

Wählen Sie in der linken Navigationsleiste Themes aus und bearbeiten die Frontend-Module des Themes (Zahnrad-Symbol). Legen Sie ein neues Modul vom Typ Sprachenwechsler (zu finden unter Verschiedenes) an. Weitere Einstellungen müssen Sie nicht zwingend vornehmen.

5 | Modul in Layout platzieren

Wählen Sie in der linken Navigationsleiste wieder Themes aus und bearbeiten die Frontend-Module des Themes (rechts neben dem Zahnrad-Symbol). Im entsprechenden Layout duplizieren Sie unter Frontend-Module die erste Zeile und wählen das eben angelegte Modul aus. Das Modul muss ganz oben und innerhalb der Kopfzeile stehen.

6 | CSS für die Darstellung

Zum Schluss fügen Sie folgendes SCSS in der custom.scss ein. Diese finden Sie in der Dateiverwaltung unter 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;
  }
}

Beispiel

Am Ende sollte, wie im Screenshot zu sehen, oberhalb der Hauptnavigation eine Leiste mit dem Sprachenwechsler zu sehen sein.