O Webflow facilita o design de um site e sua publicação com um clique. Traduzir esse site é onde as coisas ficam lentas.
As opções comuns pedem para você duplicar páginas em pastas de idioma, copiar texto de e para uma ferramenta de tradução ou configurar cada local manualmente no Designer. Isso exige muita manutenção para um site que você construiu para ser de baixa manutenção.
A tradução por IA elimina a maior parte desse trabalho. Você adiciona uma linha de código ao Webflow, escolhe seus idiomas e os visitantes podem ler seu site em seu próprio idioma. E tudo isso é possível em poucos minutos usando Universally.
Neste guia, mostrarei como traduzir seu site Webflow usando IA.
Por que Traduzir Seu Site Webflow?
Uma página bem projetada não pode fazer seu trabalho se o visitante não conseguir ler o conteúdo. Se você está recebendo tráfego de outros países, a tradução é o que transforma essas visitas em leitores e clientes.
O problema é que as maneiras usuais de fazer isso no Webflow vêm com trabalho extra:
- Duplicar páginas dobra sua manutenção. Com o método de pastas, cada edição em uma página em inglês deve ser repetida em cada pasta de idioma.
- A opção integrada adiciona configuração e custo. O Webflow Localize é um complemento pago, e você configura e traduz cada local dentro do Designer.
- Sites de clientes precisam de um retorno rápido. Se você cria sites Webflow para clientes, adicionar um idioma não deve significar reestruturar o projeto.
Uma ferramenta de tradução por IA que fica fora do seu projeto Webflow evita os três, e essa é a abordagem que usarei neste guia.
Traduza Seu Site Webflow Com Universally
Universally é uma ferramenta de tradução de sites por IA que traduz seu site para mais de 110 idiomas usando IA ciente do contexto. No Webflow, ele se conecta com uma única tag de script no código do cabeçalho do seu site. Não há plugin para instalar e nenhuma página duplicada para manter.
A melhor parte é que as traduções são aplicadas no navegador do visitante nas mesmas páginas, nos mesmos URLs, para que seu projeto Webflow permaneça exatamente como você o construiu.
Universally não se limita ao Webflow. Ele também funciona com WordPress, Framer, Squarespace, Lovable e várias outras plataformas. Você pode ver a lista completa na página Plataformas suportadas.
Veja o que você obtém em um site Webflow:
- Uma tag de script: Você cola uma única linha no código do cabeçalho do Webflow. Nada mais em seu projeto muda.
- Seu design permanece intacto: Layouts, interações e URLs permanecem os mesmos em todos os idiomas.
- Seletor de idioma integrado: Ele aparece no canto inferior direito com bandeiras e nomes de idiomas, e os visitantes de primeira viagem são correspondidos ao idioma do navegador deles.
- Mais do que texto do corpo: Títulos de página, conteúdo meta e atributos como texto alternativo, placeholders e aria-labels também são traduzidos.
- Lançamento idioma por idioma: Cada idioma fica oculto dos visitantes até que você o ative.
- Glossário e edição manual: Em planos pagos, você pode fixar termos da marca e corrigir qualquer linha traduzida.
Universally tem um plano gratuito com 1 site, 1 idioma e 2.000 palavras traduzidas. Isso é o suficiente para testá-lo em algumas páginas. Planos pagos começam em US$ 7,50/mês (cobrados anualmente) e adicionam mais palavras e idiomas, além de regras de glossário e o editor visual.
Passo 1: Crie um Projeto Webflow no Universally
Para começar, inscreva-se para uma conta gratuita no site da Universally. Assim que estiver no painel, clique em + Adicionar Projeto.
Em seguida, você precisará selecionar a plataforma em que seu site está.
Vá em frente e, em ‘Selecione Sua Tecnologia’, escolha Webflow.
Em seguida, insira o Domínio do seu site, como exemplo.com, e dê um Nome de Projeto ao seu projeto.
Em seguida, confirme o Idioma de Origem, que é o idioma em que seu site está escrito. O padrão é Inglês (Americano). Verifique este item com atenção, pois um idioma de origem incorreto fornecerá traduções ruins sem nenhuma mensagem de erro.
Simplesmente clique em Próximo quando terminar.
Passo 2: Adicione o Script do Universally ao Webflow
Universally agora mostra uma tag de script com a chave exclusiva do seu projeto. Ela se parece com isto:
<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>Clique em Copiar linha.
Em seguida, você pode ir para o seu projeto Webflow que deseja traduzir.
Simplesmente clique no ícone do Webflow no canto superior esquerdo e vá para Configurações do site.
Depois disso, você pode ir para Código personalizado » Código do cabeçalho e colar o script.
Certifique-se de usar o campo de código do cabeçalho para todo o site em vez das configurações de código personalizado de uma única página. Dessa forma, o script é carregado em todas as páginas do seu site.
A partir daqui, clique em Salvar alterações e, em seguida, Publique essas alterações em seu site.
Observação: O código personalizado no Webflow requer um plano de Site ativo ou um plano Workspace Core, Growth, Agency ou Freelancer. Se você não vir o campo de código do cabeçalho, seu plano é a primeira coisa a verificar.
Quando isso for feito, volte para Universally e clique em Verificar conexão.
Universally carrega sua página inicial e confirma que o script está no lugar.
Dica Pro: Se a verificação falhar, certifique-se de ter publicado após salvar. Alterações não publicadas no Webflow não incluem o script, e a verificação olha apenas para sua página inicial.
Passo 3: Escolha Seus Idiomas e Publique
Assim que a conexão for confirmada, você pode escolher os idiomas que deseja oferecer.
Vá em frente e clique em Adicionar idioma.
Em seguida, você pode clicar no menu suspenso e selecionar entre mais de 110 idiomas.
Após selecionar um idioma, você pode selecionar uma Região e um Formato de URL.
Quando terminar, simplesmente clique em Adicionar idioma.
É isso! Seu site Webflow agora será traduzido automaticamente para os idiomas que você adicionou.
Para desativar um idioma, você pode desligar o interruptor Ao vivo ao lado dele.
Isso é útil se você estiver trabalhando no site de um cliente. Você pode instalar o script antecipadamente, revisar as páginas traduzidas e ativar cada idioma ao vivo assim que o cliente aprovar. Se um mercado não estiver pronto, desative seu interruptor, e as traduções salvas permanecerão onde estão.
Agora, se você quiser adicionar mais idiomas, vá em frente e repita esta etapa.
Passo 4: Teste Seu Site Webflow Traduzido
Para verificar se tudo funciona, abra seu site publicado em uma janela de navegador anônima, para que você não veja uma versão em cache.
Você deve ver o seletor de idioma no canto inferior direito. Escolha seu novo idioma e o texto da página será alterado.
A primeira carga em um novo idioma pode levar um momento enquanto a página é traduzida. Depois disso, as traduções são armazenadas em cache, então visitas repetidas carregam sem demora.
Bônus: Ajuste Fino Suas Traduções Webflow
A tradução por IA te leva a maior parte do caminho. Estas três configurações ajudam com o resto.
- Edite qualquer linha traduzida. Em um plano pago Universally, abra o Editor Visual na barra lateral do seu projeto, filtre por idioma e clique no texto que deseja alterar. Isso é realmente útil se você quiser garantir que seu site fique visualmente deslumbrante, mantendo o conteúdo traduzido.
- Mantenha os termos da marca consistentes. As regras de glossário instruem a IA a manter palavras como nomes de sua marca ou produto sem tradução, ou a sempre traduzir um termo de uma maneira específica. Nosso guia sobre como configurar um glossário de tradução explica o processo. As regras funcionam da mesma forma no Webflow.
- Deixe algum conteúdo sem tradução. Vá para Regras de Tradução e adicione os elementos que deseja pular no campo Selecionadores CSS de Exclusão, um por linha, como
.pricing-tableou#code-examples. Você também pode adicionartranslate="no"a um elemento no Webflow. Tenha em mente que a configuração Excluir Páginas não se aplica a sites Webflow, então os seletores CSS são o caminho a seguir. Para mais detalhes, consulte nosso documento incluir e excluir seletores CSS.
Perguntas Frequentes Sobre a Tradução de um Site Webflow
1. Preciso de um plano pago do Webflow para usar o Universally?
Universally precisa do recurso de código personalizado do Webflow, que requer um plano de Site ativo ou um plano de Workspace Core, Growth, Agency ou Freelancer. O lado Universally pode começar no plano gratuito, que cobre 1 site, 1 idioma e 2.000 palavras traduzidas.
2. Como o Universally se diferencia do Webflow Localize?
O Webflow Localize é o recurso de localização integrado do Webflow, onde você configura cada localidade e gerencia seu conteúdo dentro do Designer. Universally funciona de fora do seu projeto com uma tag de script e traduz páginas sob demanda com IA.
3. Traduzir meu site Webflow afetará meu SEO?
Seus rankings existentes permanecem os mesmos, porque seus URLs e páginas de origem não mudam. Os motores de busca continuam vendo seu conteúdo no idioma original. Isso também significa que as versões traduzidas não são indexadas separadamente, e Universally não adiciona tags hreflang em sites Webflow.
4. O Universally traduz o conteúdo do CMS do Webflow?
Universally traduz o texto no HTML da sua página publicada, o que inclui conteúdo CMS que o Webflow renderiza na página. Texto que o JavaScript adiciona após o carregamento da página, como alguns widgets de terceiros, pode permanecer no idioma original.
5. Posso editar as traduções da IA?
Cada tradução pode ser editada em um plano pago. Abra a tela Traduções em seu projeto, encontre a linha e clique nela para editar. Sua alteração substitui a versão de IA e é marcada como Verificada. Universally mantém as últimas 50 versões de cada tradução, para que você possa restaurar uma anterior.
6. O que o Universally não traduz em um site Webflow?
Algumas coisas permanecem no seu idioma original. Isso inclui páginas protegidas por senha, texto adicionado por JavaScript após o carregamento da página e dados estruturados JSON-LD. Há também um limite de cerca de 2.000 strings de texto por página, o que a maioria das páginas não chega nem perto.
Depois que o script estiver ativo e seu primeiro idioma estiver no ar, adicionar outro mercado levará alguns cliques.
Espero que este artigo tenha ajudado você a aprender como traduzir seu site Webflow usando IA. Você também pode consultar nosso guia sobre como configurar um glossário de tradução e como traduzir páginas de checkout do WooCommerce.
Adicionar um Comentário