Como adicionar um menu suspenso de idiomas à sua Webflow

Criar um site multilíngue significa oferecer aos visitantes internacionais um caminho claro para o conteúdo que eles procuram. Um menu suspenso de idiomas na Webflow faz exatamente isso. Vamos mostrar três maneiras de criar um: o elemento de lista “Locales” Webflow, um botão de alternância programado em JavaScript e uma configuração automatizada com Weglot. Para cada uma delas, você verá o caminho exato de cliques, como elas se comparam e qual se adapta melhor à sua forma de trabalhar.

Em resumo:

• O elemento de lista “Locales” nativo Webflowgera automaticamente opções de menu suspenso a partir das configurações regionais ativadas, para que você não precise criar manualmente um link para cada idioma.
• Em configurações com vários projetos ou subdomínios, nas quais o seletor nativo não é adequado, um pequeno código JavaScript de alternância no código personalizado pode redirecionar os visitantes entre as versões de idioma.
• Ferramentas de tradução por IA, como Weglot o menu suspenso, as tags hreflang e URLs otimizadas para SEO em uma única configuração, e são compatíveis com Webflow (ao contrário do Webflow ).
• A acessibilidade em dispositivos móveis é importante: defina áreas de toque com pelo menos 44x44 pixels e use a função “Abrir ao clicar” em vez de “passar o cursor” em telas sensíveis ao toque.

Três maneiras de adicionar um menu suspenso de idiomas no Webflow

Antes de escolher um método, é bom saber o que cada um oferece.

A lista de configurações regionais Webflowé ideal para equipes que já utilizam Webflow e estão bem organizadas. Caso ainda não tenha feito isso, o esforço de configuração é moderado. É necessário um Webflow pago Webflow com a localização ativada, e ela não é compatível com Webflow .

Um botão de alternância em JavaScript programado sob medida é ideal para configurações com vários projetos ou subdomínios. O esforço de configuração é baixo a médio. É flexível, mas você terá que fazer a manutenção do código.

Weglot ideal para equipes que buscam uma solução completa que inclua tradução de alta qualidade, alternância de idiomas e configuração de SEO, sem precisar se preocupar com nada. A configuração é simples. Ele é compatível com qualquer Webflow (incluindo o de comércio eletrônico) e adiciona tags hreflang automaticamente.

Método 1: Criar um seletor de idioma nativo usando a lista de idiomas Webflow

• Use este método se você já tiver ativado Webflow no seu projeto.

Passo 1: Ative a localização e adicione suas configurações regionais

No Webflow , acesse Configurações > Localização e clique em Ativar localização. Escolha sua localidade principal e, em seguida, clique em Adicionar localidade para cada idioma que deseja oferecer.

Para cada nova configuração regional, defina seu nome de exibição e subdiretório, e ative a opção “Ativar publicação neste subdiretório”. As configurações regionais sem a publicação ativada não aparecerão no seletor posteriormente, portanto, não pule esta etapa.

Passo 2: Insira um menu suspenso na sua barra de navegação

Abra o painel “Adicionar” e vá até “Avançado”. Arraste um elemento “Dropdown” para a sua barra de navegação. Abra o “Navegador”, expanda o “Dropdown” para exibir seus elementos filhos e exclua os três links de preenchimento (Link 1, Link 2, Link 3). Suas localizações aparecerão aqui depois que as configurarmos na próxima etapa.

Passo 3: Adicionar uma lista de configurações regionais

No painel “Adicionar” > “Avançado”, arraste um elemento da lista “Locales” para o elemento “Navegação” do menu suspenso. A lista “Locales” funciona como uma lista de coleção: ela gera automaticamente um item por localidade publicada, de modo que você não precisa criar um link separado para cada idioma.

Passo 4: Escolha o que será exibido no menu suspenso

Clique no elemento “Link” dentro de um item de localidade, abra o painel de configurações do elemento e clique no ícone de ponto roxo ao lado do campo “Texto”. Em “Item da lista de localidades”, escolha como cada opção deve ser rotulada: “Localidade (en-US)”, “Idioma (en)”, “País (US)” ou “Nome de exibição (Inglês (Estados Unidos))”.

Para fazer com que o botão suspenso mostre a localidade ativa, selecione o Bloco de Texto dentro do botão suspenso, clique no ponto roxo ao lado de Texto e, em Localidade Atual, escolha o mesmo formato de rótulo.

Passo 5: Adicionar bandeiras e otimizar para dispositivos móveis

Se você tiver carregado imagens de exibição para cada localidade, adicione um elemento `Image` dentro do elemento `Locale`, clique no ponto roxo ao lado de `Image` e, em `Locales List Item`, selecione `Locale Image`. Repita essa ação dentro do botão de alternância do menu suspenso usando `Current Locale > Locale Image` para exibir uma bandeira na localidade ativa.

Para dispositivos móveis, selecione o menu suspenso e defina Menu > Abrir ao clicar (não ao passar o cursor, já que isso não funciona em telas sensíveis ao toque). Verifique se as áreas de toque têm pelo menos 44x44 pixels para que o seletor possa ser tocado com facilidade.

Método 2: Botão de alternância em JavaScript personalizado

Use esse método quando as versões em outros idiomas estiverem em Webflow separados Webflow ou em subdomínios diferentes (por exemplo, example.com e es.example.com), nos casos em que a lista de configurações regionais nativas não for suficiente. Você certamente precisará ter algum conhecimento de programação ou contar com um desenvolvedor na equipe que possa fazer isso por você.

Add a button or link to your navbar and give it a class like language-toggle. Then paste a short script into Page Settings > Custom Code > Before </body> tag that redirects the visitor to the equivalent page on your alternate domain, preserving the path so they don’t land on the homepage of the other language.

Para três ou mais idiomas, amplie essa abordagem incluindo um atributo de dados em cada botão (por exemplo, data-language=”fr”) e um objeto de consulta que mapeie cada código para seu domínio.

Método 3: Seletor automático com Weglot

Use este método se você não quiser lidar com código e desejar que o seletor de idioma, as traduções, as tags hreflang e as URLs otimizadas para SEO sejam gerenciados em uma única configuração. Isso é particularmente útil em lojas Webflow , que não são compatíveis com Webflow .

Comece criando uma Weglot e adicione o domínio Webflow seu Webflow .

Selecione os idiomas de origem e de destino, copie osnippet Weglot snippet cole-o em Configurações Webflow > Código personalizado > Código do cabeçalho. Publique seu site e um seletor de idiomas aparecerá automaticamente. Pronto! Seu conteúdo será traduzido e exibido em subdiretórios ou subdomínios otimizados para SEO, com as tags hreflang e os metadados traduzidos gerenciados automaticamente para você.

Você pode editar o seletor de idiomas visualmente no Weglot : arraste-o para qualquer lugar da página, ative ou desative as bandeiras e escolha se deseja exibir os nomes dos idiomas, os códigos dos idiomas ou os códigos dos países.

Para designs Webflow, o KitWeglot inclui mais de 20 seletores de idioma que podem ser copiados e estão prontos para serem inseridos no Designer.

As equipes que utilizam Webflow optar Weglot alguns motivos. A detecção automática de conteúdo significa que novas páginas são traduzidas sem a necessidade de intervenção manual. As traduções ficam em um painel separado, de modo que os tradutores não precisam de licenças Webflow . Ele é compatível com Webflow , ao contrário Webflow . Além disso, o SEO multilíngue está integrado em todos os planos.

Webflow nativo Webflow Weglot: comparação lado a lado

Se você está avaliando as duas opções mais comuns, veja a seguir como elas diferem nos pontos que costumam ser mais importantes:

• Configuração do seletor: No Webflow manual (arrastar o menu suspenso, arrastar a lista de idiomas, vincular o texto e definir o estilo). Weglot o seletor automaticamente durante a instalação.
• Sincronização de conteúdo entre idiomas: Webflow nativo Webflow uma atualização manual em cada página quando você altera o conteúdo. Weglot novos conteúdos e os traduz automaticamente.
• Webflow : Webflow nativa Webflow não é compatível com lojas Webflow . Weglot .
• Hreflang e URLs otimizadas para SEO: Webflow disso para você se utilizar a configuração de subdiretórios do Localization, mas você ainda precisará definir os nomes de exibição e a publicação por idioma. Weglot automaticamente as tags hreflang e URLs otimizadas para SEO.
• Acesso da equipe: Webflow exige licenças pagas do Workspace para qualquer pessoa que edite traduções no Designer. Weglot as traduções em um painel separado, incluído em todos os planos.

Tornando seu Webflow acessível globalmente

Um menu suspenso de idiomas é um pequeno elemento da sua barra de navegação, mas é o sinal mais visível de que seu site foi criado para mais de um público. Quer você o crie usando a lista de configurações regionais Webflow, desenvolva o código por conta própria ou o automatize com Weglot, o objetivo é o mesmo: direcionar os visitantes para o idioma certo rapidamente, sem complicações.

Se você deseja que o seletor de idiomas, as traduções e o SEO multilíngue sejam gerenciados em uma única configuração (incluindo Webflow ), experimente Weglot por 14 dias no seu Webflow .