O interlocutor de língua é o elemento principal de navegação para o seu tráfego internacional. O MultiLipi disponibiliza um editor de dupla interface, permitindo controlar o comportamento e a estética deste elemento de forma independente para as vistas de Desktop e Mobile.
Este guia aborda a configuração de Layouts , Posicionamento , e Estilização da Marca através do Centro de Comando MultiLipi.
1. Aceder ao Editor de Interface
Para começar a personalizar a sua integração frontend:
- 1 Navegue até ao seu Painel MultiLipi .
- 2 Aberto Configurações do menu à esquerda.
- 3 Selecione Comutador de Línguas .
💡 Dica profissional: Vai entrar no Editor da Switch, que apresenta uma tela de pré-visualização em tempo real. Use o botão de alternância no topo para alternar entre Versão desktop e ainda Telemóvel vistas para garantir a resposta entre dispositivos.
2. Passo 1: Seleção da Arquitetura (Posicionamento)
Defina como o switcher se comporta dentro do seu DOM. Tens dois modos de implantação:
Modo A: Flutuante (Padrão)
Comportamento: O comutador paira sobre o seu conteúdo, ancorado num canto específico do ecrã (por exemplo, no canto inferior direito).
Caso de uso: É ideal para visibilidade imediata sem alterar o código de layout existente do seu site.
Modo B: Embutido (Integrado)
Comportamento: O comutador é injetado num elemento HTML específico que define (por exemplo, dentro da Barra de Navegação ou rodapé).
⚠️ O Protocolo de Reserva
Se o seu contentor HTML especificado não for encontrado numa página específica, o do MultiLipi Lógica de Reserva reverte automaticamente o comutador para o "Modo Flutuante." Isto garante que os utilizadores nunca ficam bloqueados na seleção da língua, mesmo que o layout mude.
3. Passo 2: Identidade Visual (Modelos e Cores)
Alinhe o switcher com o Sistema de Design da sua marca.
Seleção de Modelos
Escolha da nossa biblioteca de padrões de interface pré-configurados para corresponder à estética do seu site:
Integração de Paleta
Substitua estilos predefinidos para corresponder às diretrizes da sua marca usando o Seletor de Cor incorporado ou valores RGB brutos:
- • Cor de Fundo: Combine com o estilo da barra de navegação ou dos botões.
- • Cor do Texto: Garantir um alto contraste para acessibilidade (conformidade com as WCAG).
4. Passo 3: Estilo Avançado (CSS Personalizado)
Para programadores que necessitam de controlo pixel-perfecto, pode injetar regras CSS personalizadas diretamente no DOM sombra do widget.
Selecionadores comuns de CSS:
#dynamicDropdown- Aponta para o contentor principal da lista suspensa.#lang-switcher-selected-lang .fi- Aponta ao ícone da bandeira da língua atualmente selecionada.
Exemplo de Configuração:
/* Remove border radius for a sharp, square design */
#lang-switcher-selected-lang .fi {
border-radius: 0px;
}
/* Customize the dropdown background */
#dynamicDropdown {
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}💎 Nota do Desenvolvedor: O CSS personalizado permite sobrepor qualquer propriedade visual mantendo a lógica funcional do switcher. Isto é particularmente útil para combinar sistemas de design complexos ou implementar variações em modo escuro.
5. Implementação e Verificação
Quando a sua configuração estiver concluída:
Pré-visualização
Alterne entre os modos Desktop e Mobile no editor para verificar a consistência visual.
Gravar
Clique em Gravar Para impulsionar as alterações instantaneamente para o seu local de produção ao vivo.
Repor
Se precisares de recomeçar, usa o Repor função para reverter aos estilos padrão MultiLipi.
✅ Sucesso: O seu interlocutor de língua já está ativo! As alterações propagam-se instantaneamente por todas as páginas onde o MultiLipi é implementado. Não é necessário limpar o cache nem atualizar a página para a maioria das configurações.