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 und Shopify verwenden.

1. Verwenden Sie die Funktion Switcher Editor

Mit dem Sprachumschalter-Editor können Sie den Sprachumschalter im Kontext Ihrer Website verschieben, indem Sie die Schaltfläche per Drag & Drop auf eine Vorschau Ihrer Website ziehen.

Um ihn zu verwenden, können Sie diesen Artikel lesen: Wie verwende ich den Switcher-Editor?

⚠️ Beachten Sie, dass Ihre Website aktiv und zugänglich sein muss, um den Switcher-Editor verwenden zu können.

2. Die Sprachverbindungshaken

Sie haben die Möglichkeit, z.B. Sprachelemente in Ihr natives Menü einzubauen und diese mit den Übersetzungshaken zu verknüpfen, wie in dieser Anleitung beschrieben

Sie erstellen zum Beispiel ein Menü"Sprachen" mit den Untermenüs "Englisch" und "Französisch".

Englisch wird der Link #Weglot-de und Französisch haben den Link #Weglot-fr

Beachten Sie, dass der Großbuchstabe des " W" wichtig ist.

Wenn Sie Probleme haben, die richtige Abkürzung zu finden, können Sie Ihre Sprache hier eingeben und die entsprechende Abkürzung verwenden: https://weglot.com/documentation/available-languages/

3. Die Option Weglot_here

Sie können den nachstehenden Code in Ihren Quellcode an der Stelle einfügen, an der die Sprachumschaltung angezeigt werden soll:

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

4. Die Option Wechsler

Sie können den Switcher auch manuell in beliebige Elemente Ihrer Website integrieren, indem Sie die Umschalter Option zu Ihrem Weglot.initialisieren Code

Gehen Sie dazu auf die Seite, auf der sich Ihr Weglot-Code-Snippet befindet. Sie sollten den folgenden Code sehen (mit Ihrem eigenen API-Schlüssel anstelle von "YOUR_API_KEY"):

<!--Start Weglot Script-->
<script src=“//cdn.weglot.com/weglot.min.js”></script>
<script id=“has-script-tags”>Weglot.initialize({ api_key:“YOUR_API_KEY” })</script>
<!--End Weglot 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
        }
    }
]
});
</script>

Wichtig: Vergessen Sie nicht das Komma nach Ihrem API-Schlüssel.

Der hier wichtige Teil des Codes ist die .header-nav , da dies die Position des Sprachumschalters bestimmt. Dieser muss durch den CSS-Selektor des übergeordneten Elements ersetzt werden, in dem der Sprachumschalter platziert werden soll.

⚠️ 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. Zusätzliche Informationen (Webflow und Squarespace)

Wenn Sie Squarespace verwenden, wird die Sprachumschaltung direkt von Squarespace verwaltet, daher empfehlen wir Ihnen, deren Dokumentation zu folgen.

Wenn Sie Webflow verwenden, sollten Sie nicht zögern, diese Anleitung auszuprobieren. Damit können Sie hübsche Sprachumschalter für Ihre Website erstellen.