Expanda o seu desenvolvimento visual globalmente sem código de backend.
O Webflow é a plataforma principal para desenvolvimento visual, mas a localização nativa pode ser complexa e dispendiosa. O MultiLipi integra-se diretamente na arquitetura do Webflow através de uma única injeção de script, transformando instantaneamente as suas páginas estáticas e coleções CMS numa infraestrutura multilíngue com indexação SEO completa.
Este guia detalha o processo de integração utilizando o Código Personalizado funcionalidade.
1. Pré-requisitos de Implementação
Antes de começar, certifique-se de que o seu ambiente cumpre os requisitos:
Plano de Site Webflow
Tem de estar num Plano Básico do Site (ou superior) para desbloquear a funcionalidade "Código Personalizado".
Chave API MultiLipi
Localize isto no seu Painel de Controlo em Definições > Geral.
2. Passo 1: Aceder à Arquitetura do Site
Injetaremos o motor de tradução no cabeçalho global para garantir que persiste em todas as páginas e modelos CMS.
- 1
Inicie sessão na sua Dashboard Webflow.
- 2
Localize o seu cartão de projeto e clique no Ícone de Configurações (⚙️) (ou selecione Definições do Site a partir do menu do Designer).
- 3
Navegue até às Código Personalizado separador na barra de navegação superior.
3. Passo 2: Injetar o Script de Infraestrutura
- 1
Desloque-se para baixo até ao campo rotulado "Código do Cabeçalho".
- 2
Nota: Não coloque isto em "Código do Rodapé", pois atrasará o carregamento da tradução e causará um "flash de conteúdo não traduzido".
Ação: Cole o Script de Ligação
Cole o seguinte script de ligação no campo:
⚠️ Configuração Crítica
- •Substituir
YOUR_API_KEY_HEREcom a Chave de API real copiada do seu painel MultiLipi. - •Clique no verde Guardar Alterações botão no canto superior direito.
4. Passo 3: Implementação e Verificação
O Webflow não executa código personalizado na visualização do Designer. Deve publicar para ver o motor em ação.
Publicar
Clique no azul Publicar botão e selecione o seu domínio de produção (ou .webflow.io domínio de staging).
Verificar
Abra o link em direto.
Verificação Visual
O Language Switcher deverá aparecer no canto inferior esquerdo.
Verificação do CMS
Navegue para uma página de Coleção do CMS (por exemplo, /blog/post-1) e alterne os idiomas para garantir que o conteúdo dinâmico é traduzido corretamente.
Protocolo de Resolução de Problemas
- •Switcher em Falta? Confirme que publicou o site após guardar o código.
- •Verificação do Plano: Certifique-se de que o seu plano de alojamento Webflow está ativo; os sites de staging gratuitos muitas vezes limitam a execução de código personalizado em domínios personalizados.
5. Otimização e Estilização
Uma vez implementado, o MultiLipi funciona silenciosamente em segundo plano.
Integridade do Design
Como apenas trocamos nós de texto, as suas Interações Webflow (IX2) e animações de scroll permanecem perfeitamente intactas.
Personalização do Seletor
Pode reposicionar o seletor utilizando as definições do nosso Painel ou substituir o seu CSS para corresponder à tipografia específica do seu site.
Automação de SEO
Geramos automaticamente o sitemap.xml entradas e hreflang etiquetas para o seu projeto Webflow, garantindo que classifica nos resultados de pesquisa globais sem trabalho manual de SEO.