Como alterar o design do alternador de idioma?

Neste artigo, aprenderá a personalizar o seletor de idioma e a alterar o seu aspeto.

Utilizando o Weglot, pode alterar o design do seu comutador de idiomas. Para o fazer, tem várias possibilidades:

1. Alterar as opções do alternador de idiomas

Se for ao Painel de Controlo do Weglot > Projectos > Selecionar um projeto > Definições > Comutador de idiomas, terá a opção de alterar alguns elementos e a apresentação:

• O nome da língua (como "en" para inglês, por exemplo)
• O nome completo da língua
• As bandeiras linguísticas e o tipo de bandeiras (quadrado, círculo, retângulo)
• O tipo de comutador (lista/deslocação)

Se efetuar quaisquer alterações aqui, certifique-se de que clica em "Guardar alterações".

Também pode encontrar a secção "Aspeto das línguas" mais abaixo na página, onde pode arrastar e largar a língua que pretende e alterar a sua posição no alternador de línguas:

Esta secção permite-lhe alterar as bandeiras apresentadas no seletor de idiomas. Pode apresentar a bandeira de outro país ou a sua própria bandeira. Também pode modificar o aspeto do seletor de idiomas, alterando os nomes dos idiomas e as bandeiras apresentadas. (Consulte: Como posso alterar as bandeiras do seletor de idiomas?)

2. Editar o nome e a bandeira da língua

Para alterar o nome e a bandeira da língua, pode ir à mesma página, ou seja, ao seu Painel de Controlo Weglot > Projectos > Selecionar um projeto > Definições > Comutador de línguas.

Vá à secção "Aparência das línguas" e utilize a caneta à direita.

Aí, pode editar o nome da língua, para que o nome que pretende seja apresentado no seu comutador no seu sítio Web ativo:

Depois de ter modificado a secção "Nome da língua local", pode clicar no botão "Editar".

Para alterar a bandeira, certifique-se de que activou a opção "Mostrar bandeiras de idioma no botão" nas definições do switcher.

Na secção "Aspeto das línguas", clique em "Selecionar uma bandeira" para selecionar uma bandeira (1). Também pode utilizar a barra de pesquisa (2) para o ajudar a encontrar uma bandeira:

Agora, volte ao seu sítio Web e poderá ver a bandeira recentemente adicionada no alternador de idiomas. Seguindo o nosso exemplo, temos a bandeira dos Estados Unidos da América abaixo:

Além disso, se pretender remover a bandeira adicionada anteriormente e voltar à bandeira original, clique em"Selecionar uma bandeira" no seletor de bandeiras e a bandeira será removida:

3. Utilizar o Editor de Switcher

Para uma utilização geral do Switcher Editor, consulte a seguinte documentação específica:

Como utilizar o Switcher Editor?

Encontrará várias secções para criar o seu próprio design de comutador ou para utilizar alguns dos modelos Weglot.

Para utilizar um, consulte a secção Estilo do Switcher:

Uma vez dentro da secção, encontrará uma série de modelos para utilizar no seu sítio Web.

Basta clicar nele para selecionar um e colocá-lo onde quiser na sua página Web.

4. Adicionar algumas CSS personalizadas

No seu Weglot Dashboard > Settings > Language switcher, tem a opção de adicionar algumas CSS personalizadas:

Sinta-se à vontade para se inspirar em diferentes estilos e adicionar as suas próprias CSS. Encontrará alguns exemplos de CSS personalizadas na próxima parte.

5. Criar o seu próprio comutador personalizado

Se preferir ter o seu próprio comutador concebido para corresponder aos códigos CSS do seu sítio Web, pode criar um comutador personalizado.

Terá de ser você a configurar o seu design e utilizar as funções Weglot para que as ligações sejam direcionadas para as línguas escolhidas.

Para o fazer, consulte a nossa documentação para programadores sobre as funções JavaScript úteis a utilizar:

https://developers.weglot.com/javascript/link-hooks

Tem alguma opinião sobre este artigo? Diga-nos!