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

Neste artigo, irá aprender a alterar a posição do seletor de idiomas do Weglot, caso esteja a utilizar uma integração que não seja o WordPress ou o Shopify.

1. Utilize o Switcher Editor

O « Switcher Editor » permite-lhe mover o seletor de idiomas diretamente na pré-visualização do seu site, arrastando-o e soltando-o na posição pretendida.

Para o utilizar, siga o nosso guia específico: Como utilizar o Switcher Editor?

⚠️ O « Switcher Editor » só pode ser utilizado em sites que estejam ativos e sejam acessíveis ao público. Não pode ser utilizado em sites protegidos por palavra-passe ou em sites locais. A URL do seu site também tem de ser introduzida no Painel de Controlo do Weglot > Definições > Geral.

2. Utilizar elementos de ligação linguística

Pode criar os seus próprios itens de idioma no menu nativo do seu site e associá-los ao Weglot através de «hooks» de ligação de idiomas.

Por exemplo, pode criar um item de menu «Idiomas» com «Inglês» e «Francês» como subitens e utilizar as seguintes ligações:

• Inglês: #Weglot-en
• Francês: #Weglot-fr

O W maiúsculo em Weglot  é obrigatório.

O valor após #Weglot-  corresponde ao código do idioma. Por exemplo, en  é inglês e fr  é francês.

Pode encontrar o código correspondente a cada idioma disponível na nossa lista de Idiomas Disponíveis.

Para mais informações sobre os «hooks» de ligação de idiomas, consulte a nossa Documentação para programadores — Hooks de ligação de idiomas.

3. Utilize a opção «weglot_here»

Pode colocar o seletor de idiomas do Weglot num local específico, adicionando o seguinte elemento HTML ao seu código-fonte, no local onde pretende que o seletor apareça:

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

O Weglot irá apresentar automaticamente o seletor de idioma dentro deste elemento.

4. Utilize a opção do comutador

Também pode inserir um seletor de idioma num elemento específico do seu site utilizando o switchers  opção no seu Weglot.initialize()  configuração.

A sua integração com o Weglot deve incluir um script semelhante a este:

<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
        }
    }
]
});

Substituir "your_api_key"  com a sua chave API do Weglot.

A configuração importante para a posição do seletor de idioma é:

alvo: «.header-nav»

O target  O valor deve ser o seletor CSS do elemento no qual pretende colocar o seletor de idioma.

⚠️ 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 sobre o Squarespace e o Webflow

Squarespace

Se estiver a utilizar a integração nativa do Weglot no Squarespace, o seletor de idiomas é gerido diretamente a partir do Squarespace.

Pode personalizá-lo nas definições de idioma do Squarespace. Para mais informações, consulte a Documentação do Squarespace - Criar um site multilingue com o Weglot.

Note-se que a integração nativa do Weglot com o Squarespace está atualmente disponível para a versão 7.1 do Squarespace.

Webflow

Se estiver a utilizar o Webflow, também pode recorrer ao Weglot UI Kit da Finsweet para criar um seletor de idioma personalizado.