Sonstige Integration - Wie lässt sich die Position des Sprachumschalters ändern?

In diesem Artikel erfahren Sie, wie Sie die Position des Weglot-Sprachumschalters ändern können, wenn Sie eine andere Integration als WordPress oder Shopify verwenden.

1. Verwenden Sie das Switcher Editor

Mit dem „ Switcher Editor “ können Sie den Sprachumschalter direkt in der Vorschau Ihrer Website verschieben, indem Sie ihn per Drag & Drop an die gewünschte Position ziehen.

Um die Funktion zu nutzen, befolgen Sie bitte unsere spezielle Anleitung: Wie nutzt man die Funktion „ Switcher Editor “?

⚠️ Der „ Switcher Editor “ kann nur auf Websites verwendet werden, die online und öffentlich zugänglich sind. Er kann nicht auf passwortgeschützten oder lokalen Websites verwendet werden. Die URL Ihrer Website muss außerdem in Ihrem Weglot-Dashboard unter „Einstellungen > Allgemein“ eingegeben werden.

2. Sprachliche Aufhänger verwenden

Sie können im nativen Menü Ihrer Website eigene Sprachelemente erstellen und diese mithilfe von Sprachlink-Hooks mit Weglot verknüpfen.

Sie können beispielsweise einen Menüpunkt „Sprachen“ mit den Unterpunkten „Englisch“ und „Französisch“ anlegen und dabei die folgenden Links verwenden:

• Englisch: #Weglot-en
• Französisch: #Weglot-fr

Das große W in Weglot  ist erforderlich.

Der Wert nach #Weglot-  entspricht dem Sprachcode. Zum Beispiel: en  ist Englisch und fr  ist Franzose.

Den jeweiligen Code für jede verfügbare Sprache finden Sie in unserer Liste der verfügbaren Sprachen.

Weitere Informationen zu Sprachlink-Hooks finden Sie in unserer Entwicklerdokumentation unter „Sprachlink-Hooks“.

3. Verwenden Sie die Option „weglot_here“

Sie können den Weglot-Sprachumschalter an einer bestimmten Stelle einfügen, indem Sie das folgende HTML-Element an der Stelle in Ihren Quellcode einfügen, an der der Umschalter erscheinen soll:

<div id="weglot_here"></div>

Weglot zeigt die Sprachauswahl automatisch innerhalb dieses Elements an.

4. Verwenden Sie die Umschaltoption

Sie können den Sprachumschalter auch innerhalb eines bestimmten Elements Ihrer Website einfügen, indem Sie die switchers  Option in Ihrem Weglot.initialize()  Konfiguration.

Ihre Weglot-Integration sollte ein Skript enthalten, das in etwa so aussieht:

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>

<script>
  Weglot.initialize({
    api_key: "your_api_key",
  });
</script>

 switchers: [
    {
    button_style: {
        full_name: true,
        with_name: true,
        is_dropdown: true,
        with_flags: true,
        flag_type: "circle"
    },
    location: {
        target: ".header-nav", // You'll probably have to change it (see the step below in order to find the correct CSS selector)
        sibling: null
        }
    }
]
});

Ersetzen Sie "your_api_key"  mit Ihrem Weglot-API-Schlüssel.

Die wichtige Einstellung für die Position des Sprachumschalters lautet:

Ziel: „.header-nav“

Die target  Der Wert muss der CSS-Selektor des Elements sein, in dem Sie die Sprachauswahl einfügen möchten.

⚠️ Um den CSS-Selektor (das "Ziel") zu finden:

• Klicken Sie mit der rechten Maustaste auf das Element, in das Sie die Sprachumschaltung einfügen möchten.
• Gehen Sie zu "Inspektion".
• Verwenden Sie den Pfeil oben links auf der Konsole.
• Klicken Sie mit der rechten Maustaste auf das Element in der Konsole.
• Kopieren > Selektor kopieren
• Fügen Sie das Code-Zielfeld zwischen den Anführungszeichen ein

Wenn Sie es also zum Beispiel in Ihr Menü aufnehmen wollen:

<nav class="menu">

Ziel: "nav.menu",

Weitere Informationen zu dieser Methode finden Sie in unserer Entwicklerdokumentation

5. Weitere Informationen zu Squarespace und Webflow

Squarespace

Wenn Sie die native Weglot-Integration von Squarespace nutzen, wird die Sprachauswahl direkt über Squarespace verwaltet.

Sie können dies in den Spracheinstellungen von Squarespace anpassen. Weitere Informationen finden Sie in der Squarespace-Dokumentation unter „Erstellen einer mehrsprachigen Website mit Weglot“.

Bitte beachten Sie, dass die native Weglot-Integration von Squarespace derzeit für die Squarespace-Version 7.1 verfügbar ist.

Webflow

Wenn Sie Webflow verwenden, können Sie auch das Weglot UI Kit von Finsweet nutzen, um einen individuellen Sprachumschalter zu erstellen.