Zweisprachige Webseiten mit DIVI

Fremdsprachige Seiten erstellen

  1. Eine Dummy-Seite ohne Inhalt erstellen, unter der alle fremdsprachigen Seiten eingeordnet werden. Diese Seite z.B. ‚englische Version‘ nennen.
    Den Permalink der Seite auf ein Sprachkürzel setzen (z.B. ‚en‘). Dies ist unter DIVI etwas unglücklich: In der WordPress-Seitenübersicht bei den entsprechenden Seite auf ‚bearbeiten‘ gehen, nicht ‚mit DIVI bearbeiten‘. Es öffnet sich nun die Standard-Seiteneinstellung von WordPress: Dort auf der rechten Seite unter ‚Seite / URL‘ den Permalink setzen. Sollte der rechte Reiter ausgeblendet sein, diesen mit dem Icon oben rechts, rechts neben dem Aktualisieren-Button, einblenden.
    (Den Status dieser Seite auf ‚Entwurf‘ lassen und nicht veröffentlichen.)
  2. Eine fremdsprachige Seite erstellen. Am einfachsten bei DIVI eine neue Seite erstellen, und als Vorlage die entsprechende deutsche Seite verwenden.
    In der WordPress-Seitenübersicht bei ‚Übergeordnete‘ die Dummy-Seite eintragen (im oberen Fall also ‚englische Version‘)

Der Vorteil ist, das hiermit alle fremdsprachigen Seiten unter einer eigenen URL (in dem Fall ‚(domain)/en‘ aufzurufen sind. Bringt einerseits Struktur in die Seite, zusätzlich erleichtert es Suchmaschinen, die Seiten richtig zu indizieren. Dazu ist es mit dieser Struktur ein leichtes, ein eigenes fremdsprachiges Menü unter DIVI zu erstellen.

Menü für die zweite Sprache erstellen

  1. Ein entsprechendes zweites fremdsprachiges Menü erstellen: In WordPress unter Design / Menüs / erstelle ein neues Menü. Aus der linken Seite nun die entsprechenden fremdsprachigen Seiten auswählen und dem Menü hinzufügen (z.B englisches Menü als Name).
  2. Bei DIVI im Theme-Builder eine neue Vorlage hinzufügen. ‚Neue Vorlage erstellen‘, dort ‚Kinder von bestimmten Seiten‘ wählen, dann die Dummy-Seite auswählen (‚englische Version‘). Dort im Header ein Menü einfügen, das alternative Menü (englisches Menü) auswählen.

Sprachumschalter in das Menü einfügen

Für die Nutzer am ersichtlichsten ist es, wenn andere Sprachen durch Flaggen-Symbole dargestellt werden. Dazu einfach per CSS kleine Grafiken in das Menü einbinden:

Flaggen: DIVI / Theme Optionen / Allgemeines / Allgemein / Eigene CSS:

.flag-en-png {
 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAACXBIWXMAAAHYAAAB2AH6XKZyAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAABhQTFRFAAAAVgAQ74M5AAAAGAAE2AAn+8NB/9pElmsrIAAAAAN0Uk5TAI6OVXbfPAAAADJJREFUSMdjYBgF1AGMggQUsCgRUMDEMKpgsChgEaRUwWhIjkb3qIIBUcBIqKQdBdQCAEYuAPq973sWAAAAAElFTkSuQmCC');
}

.flag-de {
	transform: scale(30%);
    width: 220px;
    height: 110px;
    background-image: linear-gradient(180deg, #000 0, #000 33%, #FF0000 33%, #FF0000 67%, #FFCC00 67%, #FFCC00 100%);
}

(oder wer statt der englischen Bitmap-Flagge es lieber als Vektorgrafik hat:)

.flag-en {
	transform: scale(30%);
    width: 220px;
    height: 110px;
   
  background: linear-gradient(180deg, transparent, transparent 44px, #c8102e 44px, #c8102e 66px, transparent 66px, transparent 100%), linear-gradient(90deg, transparent, transparent 99px, #c8102e 99px, #c8102e 121px, transparent 121px, transparent 100%), linear-gradient(180deg, transparent, transparent 37px, #FFF 37px, #FFF 73px, transparent 73px, transparent 100%), linear-gradient(90deg, transparent, transparent 92px, #FFF 92px, #FFF 128px, transparent 128px, transparent 100%), linear-gradient(26.56505deg, transparent, transparent 91px, #c8102e 91px, #c8102e 98px, transparent 98px, transparent 100%) 0 0/110px 100% no-repeat, linear-gradient(-26.56505deg, transparent, transparent 98px, #c8102e 98px, #c8102e 106px, transparent 106px, transparent 100%) 110px 0/110px 100% no-repeat, linear-gradient(26.56505deg, transparent, transparent 98px, #c8102e 98px, #c8102e 106px, transparent 106px, transparent 100%) 110px 55px/110px 100% no-repeat, linear-gradient(-26.56505deg, transparent, transparent 91px, #c8102e 91px, #c8102e 98px, transparent 98px, transparent 100%) 0 55px/110px 100% no-repeat, linear-gradient(27deg, transparent, transparent 87px, #FFF 87px, #FFF 109px, transparent 109px, transparent 100%), linear-gradient(153deg, transparent, transparent 87px, #FFF 87px, #FFF 109px, transparent 109px, transparent 100%), #012169;
}

Lohnt sich die Mühe?

Ist der Mehraufwand überhaupt sinnvoll? Nun, ich finde, es kommt auf die Zielgruppe an. Mittlerweile sind die Übersetzungsfunktionen der Browser dank guter Algorithmen und KI so gut, das für die überwiegende Fälle die eingebaute Funktion des Browsers reicht. Wenn man sich aber bewusst ein ein mehrsprachiges Publikum wendet, ist es den Aufwand wert. Vor allem, da dank KI (z.B. mit DeepL) Webseiten recht schnell in andere Sprachen übersetzt werden können.

Weitere Artikel