Wie fügen Sie einer Webnode-Website oben einen Sprachwechsel-Button hinzu

Möchten Sie die Sprachwechselposition auf einer Webnode-Website ändern?

In dieser Anleitung erfahren Sie, wie die mehrsprachige Website bei Webnode funktioniert.

Wir zeigen Ihnen auch, wie Sie oben in die Kopfzeile der Website den Flaggen-Button hinzufügen, um zwischen den Sprachversionen der Website zu wechseln.

#Wie funktioniert eine mehrsprachige Website in Webnode?

Mit einem aktiven Standard- oder Profi Premium-Paket können Sie auf Ihrer Website eine neue Sprachversion der Seite erstellen. Preisliste der Dienste anzeigen (Webnode).

Mit dem Standardpaket können Sie die Website in 2 Sprachen anzeigen. Mit dem Profi-Paket können Sie eine unbegrenzte Anzahl von Sprachversionen der Website erstellen.

Hinweis: Mit Webnode können Sie nach dem Kauf der Dienste eine Sprachversion erstellen.

Dies bedeutet nicht, dass Webnode die Website für Sie übersetzt. Sie müssen sie selbst übersetzen!

#Ich habe eine mehrsprachige Website aktiviert, aber die Seite wird in einer anderen Sprache angezeigt…

Ihre Website wird automatisch in der Sprache angezeigt, in der der Browser des Besuchers eingerichtet ist. Wenn ein Engländer Ihre Website besucht und sein Browser auf Englisch ist, wird Ihre Website auf Englisch angezeigt (wenn Sie eine englische Version der Website haben).

Wenn Sie die Website öffnen und Ihr Browser beispielsweise auf Deutsch eingerichtet ist, werden die Seiten auf Deutsch angezeigt. (Wenn eine deutsche Version der Website existiert)

Das Wechseln der Sprache ist also überhaupt nicht erforderlich, da die Sprache automatisch ausgewählt wird, je nachdem, welche Sprache in den Browsereinstellungen des Besuchers festgelegt ist.

Sie geben die Primärsprache an, damit das System die richtige Sprache auswählt, wenn Sie keine Sprachübersetzung für ein Land haben.

Wenn Sie die Primärsprache im Abschnitt (Einstellungen – Sprachen) auf Englisch eingestellt haben und Ihre Website beispielsweise von einem Tschechischen User besucht wird, wird die englische Version Ihrer Website angezeigt.

#Anweisungen zum Ändern der Position des Flaggen-Buttons für den Sprachwechsel bei Webnode

Fangen wir an!

1. Wenn Sie eine Website in 2 Sprachen haben ( Deutsch und britisches Englisch), verwenden Sie bitte diesen Code

2. Fügen Sie den Code über „Einstellungen“ – „Einstellungen Website“ – „Kopf- und Fußzeile der Webseite“ ein und klicken Sie auf Speichern.

3. Änderungen veröffentlichen und fertig – Sie sehen Flags in der veröffentlichten Version der Site (oben rechts).

TIPP: Flags werden möglicherweise nicht auf jeder Vorlage auf Handys / Tablets korrekt angezeigt. Verwenden Sie daher diesen Code, der die Flaggen bei dem mobilen Aufruf erst anzeigt, nachdem Sie auf “Menü” geklickt haben.

1 2 3 4 5 6 7 8 9

<script> if (window.innerWidth < 767) {     var div = document.createElement("div");     div.setAttribute("style", "text-align:right;height:32px;");     var flags = document.querySelector(".flags");     div.appendChild(flags);     document.querySelector("#menu").prepend(div); } </script>

Fügen Sie den Code in die Fußzeile aller Seiten ein.

TIPP2: Wenn Sie eine Website auf Deutsch und US-amerikanische Englisch haben, verwenden Sie bitte diesen Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<style>             .flags {                 position: absolute;                 top: 10px;                 right: 5px;                 z-index: 99;             }             .flags ul {                 margin: 0;                 padding-left: 0;             }             .flags ul li {                 margin-left: 5px;                 list-style-type: none;                 display: inline-block;             }             @media screen and (max-width: 767px) {.flags {left: 165px;}}         </style>              <div class="flags">             <ul>                 <li>                     <a href="/home/">                         <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/DE.png" alt="DE">                     </a>                 </li>                 <li>                     <a href="/en/">                         <img src="https://www.wpromotions.eu/wp-content/uploads/2018/12/americky-flag.png" alt="USA">                     </a>                 </li>             </ul>         </div>

Fügen Sie den Code in die Fußzeile aller Seiten ein.

Weitere tolle Tutorials