O seletor de idioma é o elemento de navegação principal para o seu tráfego internacional. O MultiLipi fornece um editor de interface dupla, permitindo controlar o comportamento e a estética deste elemento independentemente para os ambientes de desktop e mobile.
Este guia abrange a configuração do Layouts, Posicionamento, e Estilo 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:
- 1Navegue até ao seu Painel MultiLipi.
- 2Abrir Definições no menu lateral.
- 3Selecionar Seletor de Idioma.
💡 Dica Pro: Entrará no Editor de Seletores, que apresenta uma tela de pré-visualização em tempo real. Utilize o alternador na parte superior para alternar entre Desktop e Mobile vistas para garantir a responsividade em todos os dispositivos.
2. Passo 1: Selecionar a Arquitetura (Posicionamento)
Defina como o seletor se comporta dentro do seu DOM. Tem dois modos de implementação:
Modo A: Flutuante (Padrão)
Comportamento: O seletor paira sobre o seu conteúdo, ancorado a um canto específico do ecrã (por exemplo, Canto Inferior Direito).
Caso de Uso: Ideal para visibilidade imediata sem alterar o código de layout existente do seu website.
Modo B: Embutido (Integrado)
Comportamento: O seletor é inserido num elemento HTML específico que definir (por exemplo, dentro da Barra de Navegação ou Rodapé).
⚠️ O Protocolo de Fallback
Se o seu contentor HTML especificado não for encontrado numa página específica, o MultiLipi Lógica de Fallback reverte automaticamente o seletor para o "Modo Flutuante". Isto garante que os utilizadores nunca fiquem bloqueados na seleção de idioma, mesmo que o layout mude.
3. Passo 2: Identidade Visual (Modelos e Cores)
Alinhe o seletor com o Sistema de Design da sua marca.
Seleção de Modelo
Escolha da nossa biblioteca de padrões de UI pré-configurados para corresponder à estética do seu site:
Integração de Paleta
Substitua os estilos predefinidos para corresponder às diretrizes da sua marca utilizando o Seletor de Cores incorporado ou valores RGB brutos:
- •Cor de Fundo: Combine os estilos da sua barra de navegação ou botões.
- •Cor do Texto: Garanta alto contraste para acessibilidade (conformidade WCAG).
4. Passo 3: Estilização Avançada (CSS Personalizado)
Para programadores que necessitam de controlo pixel a pixel, pode injetar regras CSS personalizadas diretamente no shadow DOM do widget.
Seletores CSS Comuns:
#dynamicDropdown- Alveja o contêiner principal da lista suspensa.#lang-switcher-selected-lang .fi- Alveja o ícone da bandeira do idioma atualmente selecionado.
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: CSS personalizado permite-lhe substituir qualquer propriedade visual, mantendo a lógica funcional do seletor. Isto é particularmente útil para corresponder a sistemas de design complexos ou implementar variações de modo escuro.
5. Implementação e Verificação
Assim que a sua configuração estiver completa:
Pré-visualizar
Alterne entre os modos Desktop e Mobile no editor para verificar a consistência visual.
Guardar
Clique Guardar para enviar as alterações para o seu site de produção em tempo real instantaneamente.
Repor
Se precisar de recomeçar, utilize o Repor função para reverter para os estilos padrão do MultiLipi.
✅ Sucesso: O seu seletor de idioma já está ativo! As alterações propagam-se instantaneamente em todas as páginas onde o MultiLipi está implementado. Não é necessária a limpeza de cache nem a atualização da página para a maioria das configurações.