Como configurar um alternador de idioma no Craft CMS

Captura de tela em preto e branco do site Cybroone.
Índice de Conteúdo

Configurar um seletor de idiomas no Craft CMS é um recurso crucial para qualquer site que pretenda alcançar um público global. Na era da globalização atual, a capacidade de alternar entre vários idiomas sem problemas é uma necessidade premente.

Configurar um seletor de idiomas no Craft CMS melhora a acessibilidade para visitantes de diversos países, pode otimizar o posicionamento nos mecanismos de busca e construir confiança global na marca. Embora possa parecer complexo, este guia passo a passo ajudará você a fazer isso de forma simples e eficiente em seu Craft CMS .

Importância de configurar um seletor de idiomas no Craft CMS

Uma coleção de elementos de design e desenvolvimento web. Vários ícones e símbolos relacionados ao desenvolvimento web.

Antes de explicarmos como configurar um seletor de idiomas no Craft CMS, vamos primeiro discutir a importância de configurá-lo. Aqui estão alguns dos motivos.

  • Melhor experiência do usuário: um seletor de idiomas permite que os visitantes acessem facilmente o conteúdo em seu idioma preferido, melhorando assim sua compreensão e interação com o site.
  • Reduzindo as taxas de rejeição: Visitantes que não encontram o idioma desejado podem abandonar seu site imediatamente. Um seletor de idiomas que ofereça várias opções pode evitar que eles saiam do site.
  • Aumentando as conversões: Compreender os detalhes do produto, as políticas e o processo de compra no idioma do visitante pode incentivá-lo a comprar ou realizar outras ações.
  • Otimizando SEO Multilíngue: Os mecanismos de busca consideram fatores de experiência do usuário ao classificar sites. Um seletor de idiomas intuitivo pode melhorar seu SEO multilíngue , facilitando o acesso dos visitantes ao conteúdo em seu idioma. Traduzir o conteúdo corretamente também envia sinais positivos aos mecanismos de busca, demonstrando que seu site é relevante para diversas consultas em diferentes idiomas.
Quebre as Barreiras Linguísticas
Diga adeus às barreiras linguísticas e dê as boas-vindas ao crescimento ilimitado! Experimente nosso serviço de tradução automática hoje mesmo.

Como configurar um alternador de idioma no Craft CMS

Após entendermos a importância de usar um seletor de idiomas em um site multilíngue Craft CMS , vamos discutir como fazê-lo. Normalmente, os serviços de tradução de sites oferecem esse recurso, que pode ser personalizado de acordo com as suas necessidades.

No entanto, nem todos os serviços de tradução oferecem um seletor de idiomas facilmente personalizável e intuitivo. Portanto, é importante escolher um serviço de tradução automática compatível com diversas plataformas e que ofereça um recurso flexível de troca de idiomas.

Um serviço que atende a esses critérios é Linguise . Linguise oferece um recurso de troca de idiomas que é facilmente personalizável e intuitivo, podendo ser integrado ao Craft CMS .

Graças à integração perfeita do Linguise com o framework Craft CMS , você pode adicionar facilmente um seletor de idiomas ao seu aplicativo multilíngue. Com os recursos avançados e a interface intuitiva do Linguise, configurar e manter um seletor de idiomas em seu site Craft CMS será muito mais simples.

A seguir, apresentamos os passos para instalar Linguise em um site Craft CMS e configurar o seletor de idiomas.

#1: Cadastre-se para obter uma conta gratuita Linguise

Crie uma conta Linguise e aproveite um mês de teste grátis para começar. Basta inserir seu endereço de e-mail para gerar um nome de usuário e uma senha.

Durante o período de avaliação, você terá acesso a todos os recursos incríveis que Linguise oferece. Ao término do período de avaliação, você será redirecionado para o painel de controle Linguise .

#2: Adicionando um site de domínio Craft CMS

Após a criação da sua Linguise , você será direcionado ao painel de controle para inserir o domínio do seu Craft CMS . Selecione “Adicionar domínio” e preencha os campos indicados:

  • Conta
  • URL
  • Plataforma usada (Craft CMS)
  • Idioma padrão
  • Idiomas de tradução
  • Traduzir URLs
  • Tradução de conteúdo dinâmico
Fundo preto. Texto e linhas brancas.
Como configurar um alternador de idioma no Craft CMS

Você pode obter a chave da API, que deverá colar na etapa seguinte.

Captura de tela do site financeiro Investopedia com texto desfocado

#4: Carregar o script Linguise

Em seguida, você precisará enviar o script de tradução Linguise para o servidor onde Craft CMS está instalado.

 

Baixe o script de tradução PHP-JS, descompacte-o e faça o upload para o diretório raiz da sua instalação Craft CMS .

Certifique-se de que o script seja colocado no diretório raiz do seu site, onde estão localizados os arquivos Craft CMS , e que a pasta mantenha seu nome original, “linguise”

Listagem de diretório do gerenciador de arquivos com pastas

Em seguida, insira a chave da API Linguise no arquivo Configuration.php que você carregou para o seu servidor. Abra o arquivo para edição e cole sua chave da API entre as aspas, substituindo o texto REPLACE_BY_YOUR_TOKEN.

Como configurar um alternador de idioma no Craft CMS

#5: Ativar e personalizar o seletor de idiomas

O link do script Linguise JS precisa ser incorporado em todas as páginas do seu Craft CMS para exibir o seletor de idiomas com as opções de idioma e para incluir URLs alternativas nos seus cabeçalhos HTML, visando benefícios de SEO.

Para obter o link do script, acesse as configurações do domínio no painel de controle Linguise e copie o link fornecido.

Uma imagem com fundo branco.

Uma maneira fácil de incorporar esse código ao Craft CMS é adicioná-lo ao índice do seu modelo. Acesse a pasta /template e edite o arquivo index para incluir o link do script na seção de cabeçalho.

Para exibir o seletor de idiomas, representado pela bandeira que permite selecionar o idioma desejado, você pode carregá-lo copiando o código fornecido ao final da configuração do site e colando-o no cabeçalho da sua página HTML. Essa ação habilitará o carregamento automático do seletor de idiomas.

uma tela de computador exibindo linhas de código em um editor de programação

O seletor de idiomas será exibido inicialmente em seu formato padrão, mas você pode personalizá-lo. Personalize o seletor de idiomas através do Linguise , acessando Configurações > Exibição de indicadores de idioma . Esta seção inclui várias opções de personalização, incluindo a exibição principal, os nomes dos idiomas e os elementos de design.

#6 Configurar tela principal

Para iniciar a configuração do seletor de idiomas, acesse a “Configurações” > “Exibição de sinalizadores de idioma” no Linguise .

Nesta seção, você pode personalizar diversas configurações. Primeiramente, estão as configurações principais de exibição, onde você pode modificar vários elementos, como:.

  • Estilo do ícone da bandeira: você pode escolher entre exibição lado a lado, menu suspenso ou janela pop-up.
  • Posição: Esta configuração define a localização do seletor de idiomas no seu site. Existem várias opções de posição, portanto, certifique-se de selecionar uma que seja de fácil acesso para os visitantes.
Um fundo completamente preto

#7 Defina o desenho da bandeira

Após ajustar as configurações principais de exibição, você pode prosseguir para a personalização do design das bandeiras exibidas.

  • Exibição do nome do idioma: Você pode exibir o nome do idioma com base no nome do país ou no próprio idioma. Por exemplo, você pode exibir "Francês" ou "Français".
  • Tipo de bandeira em inglês: Este recurso beneficia idiomas com múltiplas variações, como o inglês americano ou britânico. Também se aplica ao espanhol, taiwanês, alemão e português.
  • Estilo da bandeira: Esta opção permite selecionar o formato do ícone da bandeira, redondo ou retangular.
Uma imagem desfocada de várias telas de computador.

#8 Defina a cor e o tamanho

Após concluir a configuração do design da bandeira, você pode personalizar a cor e o tamanho. Abaixo estão algumas configurações disponíveis para ajuste.

  • Raio da borda da bandeira: Ajuste o raio da borda para o estilo de bandeira retangular, medido em pixels.
  • Cor do nome do idioma: Selecione a cor padrão do texto para exibir o nome.
  • Cor do idioma na janela pop-up: Defina a cor do texto do título do idioma na janela pop-up ou na área suspensa.
  • Tamanho da bandeira: Modifique o tamanho dos ícones da bandeira.
  • Cor do nome da linguagem ao passar o mouse: Especifique a cor do texto que aparece quando o usuário passa o mouse sobre o nome da linguagem.
  • Cor do idioma no pop-up ao passar o cursor: Defina a cor do texto que aparece quando o usuário passa o cursor sobre o título do idioma no pop-up ou na área suspensa.
Retângulos delineados em um fundo preto

#9 Configurar sombra da caixa

Por fim, você pode ajustar as configurações de sombra das bandeiras. A primeira opção permite adicionar um efeito de sombra a cada ícone de bandeira exibido no seu site. A segunda opção controla o efeito de sombra quando os usuários passam o mouse sobre as bandeiras dos idiomas.

Após realizar todos os ajustes necessários, clique no botão Salvar para implementar as alterações de personalização. Em seguida, acesse seu site Craft CMS para confirmar se a configuração foi aplicada com sucesso. A exibição do seletor de idiomas será semelhante a esta.

Captura de tela da tabela de comparação de especificações técnicas.

Após concluir o processo de configuração, você poderá observar a funcionalidade do seletor de idiomas em seu site multilíngue Craft CMS .

Captura de tela em preto e branco de um site com um menu.

Em seguida, traduziremos automaticamente o Craft CMS para outros idiomas, como o alemão.

Uma página web escura com uma mensagem de boas-vindas em alemão. Vários ícones são visíveis ao fundo.

5 dicas para otimizar o seletor de idiomas no Craft CMS

Depois de configurar o seletor de idiomas no seu Craft CMS , é importante entender as melhores práticas para projetar um seletor de idiomas e otimizar seu desempenho, beneficiando tanto o seu site quanto os visitantes.

Use um logotipo de bandeira de idioma facilmente reconhecível

Desenho técnico do layout de uma interface digital. Inclui diversos elementos.

Utilizar ícones ou bandeiras de idiomas universalmente reconhecidos é crucial para que os visitantes possam identificar e selecionar rapidamente a opção de idioma de sua preferência. Certifique-se de que os ícones ou bandeiras utilizados sejam claros, tenham bom contraste de cores e sejam amplamente compreendidos em diferentes culturas para evitar confusão ou ambiguidade.

Símbolos ou ícones familiares ajudam a criar uma experiência intuitiva e fácil de usar, permitindo que os visitantes naveguem facilmente até a versão do idioma desejada. É fundamental escolher ícones ou bandeiras universalmente reconhecidos para evitar mal-entendidos ou confusão.

Usando nomes de idiomas e bandeiras

Captura de tela de um site futurista com fundo preto. A imagem exibe uma interface de usuário com um gráfico de montanhas e vários ícones.

Além de usar apenas bandeiras, é recomendável considerar a inclusão tanto das bandeiras quanto dos nomes originais dos idiomas. Essa abordagem pode ajudar a evitar confusões, já que alguns idiomas são falados em vários países com bandeiras diferentes.

Utilizar os nomes dos idiomas diretamente elimina ambiguidades e garante que os visitantes possam identificar e selecionar claramente o idioma desejado, sem mal-entendidos. Além disso, usar os nomes dos idiomas pode ser mais inclusivo e respeitoso com a diversidade cultural.

Posicione o botão de troca de idioma estrategicamente

Os desenvolvedores visualizam o site na tela do computador.

Vamos posicionar o botão de troca de idioma em uma área de destaque e de fácil acesso no seu site. Os locais mais comuns incluem o cabeçalho, o rodapé ou o menu de navegação principal. Essas localizações são intuitivas para a maioria dos usuários da internet e estão de acordo com suas expectativas ao procurar opções de idioma.

A disposição consistente em todas as páginas garante que os visitantes possam acessar facilmente o seletor de idiomas, independentemente do ponto de entrada ou da página específica que visitam. Essa consistência contribui para uma experiência de usuário fluida e previsível.

Implemente um design responsivo para o seletor de idiomas

Projetos de hardware e dispositivos de computador. Esquemas técnicos.

Certifique-se de que o botão de troca de idioma seja responsivo e funcione bem em diversos dispositivos e tamanhos de tela, incluindo computadores, tablets e smartphones. Teste-o em diferentes dispositivos e resoluções de tela para garantir uma experiência de usuário perfeita, sem cortes ou sobreposições de elementos.

Um design responsivo garante que os visitantes possam acessar facilmente as opções de idioma a partir de qualquer dispositivo que utilizem, aumentando a acessibilidade e a conveniência na troca de idiomas.

Certifique-se de que o seletor de idioma seja consistente em todas as páginas

Esboço do design de um site em um fundo preto

Garanta que o seletor de idiomas mantenha uma aparência e um comportamento consistentes em todo o seu site. Os usuários devem conseguir alternar entre idiomas sem problemas, independentemente da página em que estejam ou do conteúdo que estejam visualizando. A consistência não só proporciona uma experiência de usuário coesa, como também fortalece a acessibilidade e a disponibilidade das opções de idioma, construindo confiança em seu site multilíngue.

Qualquer inconsistência no seletor de idiomas pode confundir e frustrar os usuários, potencialmente levando-os a abandonar o seu site.

Pronto para explorar novos mercados? Experimente nosso serviço de tradução automática gratuitamente com nossa avaliação gratuita de 1 mês. Não é necessário cartão de crédito!

Configure o seletor de idiomas no Craft CMS com Linguise!

Neste ponto, você já deve ter percebido que está configurando o seletor de idiomas para um site multilíngue Craft CMS . A implementação de um seletor de idiomas oferece diversas vantagens e pode ser otimizada com base nos pontos mencionados anteriormente.

Otimizar o seletor de idiomas pode melhorar significativamente a experiência geral do usuário. Em seguida, crie uma conta Linguise , integre-a ao seu Craft CMS e ajuste o seletor de idiomas para aprimorar ainda mais a experiência do usuário.

Você também pode estar interessado em ler

Não perca!
Inscreva-se na nossa Newsletter

Receba notícias sobre tradução automática de sites, SEO internacional e muito mais!

Invalid email address
Experimente. Uma vez por mês, e você pode cancelar a qualquer momento.

Não vá embora sem compartilhar seu e-mail!

Não podemos garantir que você ganhará na loteria, mas podemos prometer algumas notícias informativas interessantes sobre tradução e descontos ocasionais.

Não perca!
Invalid email address