Como configurar um seletor de idiomas no Craft CMS

Captura de ecrã a preto e branco do site da Cybroone.
Índice

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

Configurar um seletor de idiomas no Craft CMS melhora a acessibilidade para visitantes de diversos países, pode melhorar o ranking nos motores de busca e pode construir confiança global na marca. Embora possa parecer complexo, este guia passo a passo ajudará você a fazê-lo de forma tranquila e eficiente no seu site 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 nos aprofundarmos em como configurar um seletor de idiomas no Craft CMS, vamos primeiro discutir a importância de configurar um seletor de idiomas. Aqui estão algumas delas.

  • Melhor Experiência do Usuário: Um seletor de idiomas permite que os visitantes acessem facilmente o conteúdo no idioma de sua preferência, melhorando assim sua compreensão e engajamento com o site.
  • Reduzir a taxa de rejeição: Os visitantes que não encontram o idioma desejado podem sair imediatamente do seu site. Um seletor de idiomas que oferece vários idiomas pode impedi-los de abandonar o site.
  • Aumentar as Conversões: Compreender os detalhes do produto, as políticas e o processo de compra no seu idioma pode incentivar os visitantes a comprar ou a realizar outras ações.
  • Otimização do SEO multilíngue: Os mecanismos de busca consideram fatores de experiência do usuário ao classificar sites. Um seletor de idiomas fácil de usar pode melhorar seu SEO multilíngue ao facilitar o acesso dos visitantes ao conteúdo em seu idioma. Traduzir o conteúdo corretamente também envia sinais positivos aos mecanismos de busca de que seu site é relevante para diversas consultas em diferentes idiomas.
Quebre Barreiras Linguísticas
Diga adeus às barreiras linguísticas e olá ao crescimento sem limites! Experimente hoje o nosso serviço de tradução automática.

Como configurar um seletor de idiomas no Craft CMS

Depois de entender a importância de usar um seletor de idiomas em um site multilíngue Craft CMS , vamos discutir como fazer isso. Normalmente, os serviços de tradução de sites oferecem esse recurso, que pode ser personalizado de acordo com suas necessidades.

No entanto, nem todos os serviços de tradução oferecem um seletor de idioma facilmente personalizável e amigável. Portanto, é importante escolher um serviço de tradução automática compatível com vários frameworks e que ofereça um recurso de seletor de idioma flexível.

Um serviço que atende a esses critérios é o Linguise. O Linguise oferece um recurso de seletor de idiomas facilmente personalizável e amigável, que pode ser bem integrado ao Craft CMS.

Ao utilizar a integração perfeita do Linguise com a estrutura do Craft CMS , você pode facilmente adicionar um seletor de idiomas à sua aplicação multilíngue. Com os recursos avançados e a interface amigável do Linguise, configurar e manter um seletor de idiomas no seu site Craft CMS será muito mais simples.

Abaixo estão os passos para instalar o Linguise em um site Craft CMS multilíngue  e configurar o seletor de idiomas.

#1: Registe-se numa conta Linguise gratuita

Registe-se para obter uma conta Linguise gratuita e beneficie de um mês de teste gratuito para começar. Basta introduzir o seu endereço de e-mail para gerar um nome de utilizador e uma palavra-passe.

Durante todo o período de teste, você terá acesso a todos os recursos atraentes que a Linguise tem a oferecer. Você será direcionado para o painel da Linguise ao final do período de teste.

#2: Adicionar site de domínio Craft CMS

Assim que sua conta Linguise for criada, você será direcionado ao painel para inserir o domínio do seu site Craft CMS . Selecione “Adicionar domínio” e preencha os campos fornecidos:

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

Você pode obter a chave de API, que deve colar no passo seguinte.

Captura de tela do site financeiro Investopedia com texto desfocado

#4: Enviar o script Linguise

Em seguida, você precisará fazer o upload do script de tradução Linguise para o seu servidor onde o 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 do Craft CMS .

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

Listagem de diretórios do gestor de ficheiros com pastas

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

Como configurar um seletor de idiomas no Craft CMS

#5: Ativar e personalizar o seletor de idiomas

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

Para obter o link do script, navegue até as configurações de domínio no painel Linguise e copie o link do script fornecido a partir daí.

Uma imagem de fundo branca em branco.

Uma maneira fácil de incorporar este código no Craft CMS é adicioná-lo ao índice do seu template. 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 pelo pop-up de bandeira para selecionar o idioma desejado, você pode carregá-lo copiando o código fornecido no final da configuração do site e colando-o no head da sua página HTML. Esta ação permitirá o carregamento automático do seletor de idiomas com bandeira.

um ecrã de computador a exibir linhas de código num editor de programação

O seletor de idiomas será inicialmente exibido no seu formato padrão, mas você pode personalizá-lo. Personalize o seletor de idiomas através do painel Linguise acessando Configurações > Exibição das bandeiras 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 a exibição principal

Para iniciar a configuração do seletor de idiomas, acesse a seção "Configurações" > "Exibição das bandeiras de idioma" no painel do Linguise .

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

  • Estilo do ícone de bandeira: Você pode escolher entre exibição lado a lado, menu suspenso ou pop-up.
  • Posição: Esta configuração determina a colocação do seletor de idiomas no seu site. Existem várias opções de posição, portanto, certifique-se de escolher uma que seja conveniente para os visitantes acessarem.
Um fundo completamente preto

#7 Defina o design da bandeira

Depois de ajustar as configurações principais de exibição, você pode personalizar o 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 mostrar “French” ou “Français”.
  • Tipo de bandeira do inglês: Este recurso beneficia idiomas com múltiplas variações, como o inglês americano ou britânico. Também é aplicável ao espanhol, taiwanês, alemão e português.
  • Estilo da bandeira: Esta opção permite que você selecione o formato do ícone da bandeira, redondo ou retangular.
Uma imagem desfocada de vários monitores de computador.

#8 Defina a cor e o tamanho

Depois de concluir a configuração do design das bandeiras, você pode personalizar a cor e o tamanho das bandeiras. Abaixo estão algumas configurações disponíveis para ajuste.

  • Raio da borda da bandeira: Personalize o raio da borda para o estilo de bandeira retangular, medido em pixels.
  • Cor do nome do idioma: Selecione a cor de texto padrão para exibir o nome.
  • Cor do idioma no popup: Defina a cor do texto do título do idioma na área de popup ou menu suspenso.
  • Tamanho da bandeira: Modifique o tamanho dos ícones de bandeira.
  • Cor de foco do nome do idioma: Especifique a cor do texto que aparece quando o usuário passa o mouse sobre o nome do idioma.
  • Cor de foco do idioma no popup: Defina a cor do texto que aparece quando o usuário passa o mouse sobre o título do idioma na área de popup ou menu suspenso.
Retângulos delineados em um fundo preto

#9 Configurar sombra de caixa

Por último, pode ajustar as definições de sombra da caixa de bandeiras. A opção inicial permite-lhe adicionar um efeito de sombra a cada ícone de bandeira apresentado no seu site. A opção seguinte gere o efeito de sombra quando os utilizadores passam o rato sobre as bandeiras de idioma.

Depois de fazer todos os ajustes necessários, clique no botão Salvar para aplicar as alterações de personalização. Em seguida, acesse seu site Craft CMS para confirmar que a configuração foi aplicada com sucesso. É mais ou menos assim que o seletor de idiomas será exibido.

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

Depois de concluir o processo de configuração, você pode observar a funcionalidade do seletor de idioma no seu site multilíngue Craft CMS .

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

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

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

5 dicas para otimizar o seletor de idiomas no Craft CMS

Depois de configurar o seletor de idiomas no seu site multilíngue Craft CMS , é importante entender as melhores práticas para projetar um seletor de idiomas e seu desempenho para beneficiar 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.

Usar í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 usados 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 para a versão do idioma desejada. É extremamente importante escolher ícones ou bandeiras universalmente conhecidos para evitar mal-entendidos ou confusão.

Usando nomes de idiomas e bandeiras

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

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

Usar diretamente os nomes dos idiomas elimina a ambiguidade 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 alternância de idioma de forma estratégica

Os desenvolvedores visualizam o site na tela do computador.

Vamos posicionar o botão de alternância de idioma em uma área de destaque e de fácil acesso no seu site. Os posicionamentos padrão incluem o cabeçalho, o rodapé ou o menu de navegação principal. Esses locais são intuitivos para a maioria dos usuários da internet e estão alinhados com suas expectativas ao procurar opções de idioma.

A colocaçã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 colocação consistente ajuda a criar uma experiência de usuário fluida e previsível.

Implemente um design responsivo de seletor de idiomas

Esquemas de hardware e dispositivos informáticos. Esquemas técnicos.

Certifique-se de que o botão do seletor de idioma seja responsivo e funcione bem em vários dispositivos e tamanhos de tela, incluindo desktops, tablets e smartphones. Teste-o em diferentes dispositivos e resoluções de tela para garantir uma experiência de usuário perfeita, sem cortar ou sobrepor elementos.

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

Garanta 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 comportamento consistentes em todo o seu site. Os usuários devem poder alternar entre idiomas de forma fluida, 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, mas também fortalece a acessibilidade e a disponibilidade das opções de idioma, construindo confiança e segurança em seu site multilíngue.

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

Pronto para explorar novos mercados? Experimente nosso serviço de tradução automática gratuitamente com nosso teste sem risco 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ê deve reconhecer que está configurando o seletor de idiomas para um site multilíngue Craft CMS . Estabelecer um seletor de idiomas pode proporcionar várias vantagens e pode ser ajustado com base nos pontos mencionados anteriormente.

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

Você também pode se interessar por ler

Não perca esta oportunidade!
Assine a nossa Newsletter

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

Invalid email address
Experimente. Uma vez por mês, e pode cancelar a subscrição a qualquer momento.

Não saia sem compartilhar seu e-mail!

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

Não perca esta oportunidade!
Invalid email address