Outra integração - Como mudar a posição do seletor de idioma?

Neste artigo, aprenderá a alterar a posição do comutador de idiomas Weglot se estiver a utilizar uma integração diferente do WordPress e do Shopify.

1. Utilizar a função Switcher Editor

O editor do alternador permite-lhe mover o alternador de idioma no contexto do seu sítio Web, arrastando e largando o botão numa pré-visualização do seu sítio Web.

Para o utilizar, pode seguir este artigo: Como utilizar o Switcher Editor?

⚠️ Tenha em atenção que o seu sítio Web deve estar ativo e acessível para poder utilizar o Switcher Editor

2. Os ganchos de ligação linguística

Tem a possibilidade de criar elementos linguísticos no seu menu nativo, por exemplo, e de os ligar aos ganchos de tradução de acordo com este guia

Por exemplo, cria um menu de itens"Línguas" com "Inglês" e "Francês" como sub-menus.

O inglês terá a ligação #Weglot-en , e o francês terá a ligação #Weglot-fr

Note-se que a letra maiúscula no " W" é importante

Se tiver dificuldade em encontrar o código curto correto, pode escrever aqui a sua língua e utilizar o código curto correspondente: https://weglot.com/documentation/available-languages/

3. A opção Weglot_here

Pode colar o código abaixo no seu código fonte no local onde pretende que o alternador de idioma seja apresentado:

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

4. A opção comutador

Também pode integrar o alternador manualmente em qualquer elemento presente no seu sítio Web, adicionando o comutadores opção para o seu Weglot.initialize código

Para o fazer, vá à página onde se encontra o seu fragmento de código Weglot. Deverá ver o seguinte código (com a sua própria chave API em vez de "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>

Importante: não se esqueça da vírgula a seguir à sua chave API.

O pedaço de código que é importante aqui é o .header-nav pois este determina a localização do seletor de idioma. Isto tem de ser substituído pelo seletor CSS do elemento principal onde pretende que o seletor de idioma seja colocado.

⚠️ Para encontrar o seletor CSS (o "alvo"):

• Clique com o botão direito do rato no elemento em que pretende colocar o alternador de idioma.
• Ir para "Inspecionar"
• Utilize a seta no canto superior esquerdo da consola.
• Clique com o botão direito do rato no elemento na consola.
• Copiar > Seletor de cópias
• Colar o campo de destino do código entre as aspas duplas

Assim, por exemplo, se quiser adicioná-lo ao seu menu:

<nav class="menu">

destino: "nav.menu",

Pode encontrar mais informações sobre este método na nossa documentação para programadores

5. Informações adicionais (Webflow e Squarespace)

Se estiver a utilizar o Squarespace, o alternador de idiomas aqui é gerido diretamente pelo Squarespace, pelo que recomendamos que siga a sua documentação.

Se estiver a utilizar o Webflow, não hesite em experimentar este guia. Permitir-lhe-á criar alternadores de línguas com bom aspeto para o seu sítio Web.