MultiLipi oferece mais de 20 modelos de selecionador de idiomas integrados para começar rapidamente. No entanto, se quiser que o seu alternador de idiomas corresponda perfeitamente à estética única da sua marca, pode usar o nosso CSS Personalizado funcionalidade para substituir os estilos predefinidos.
No seu Editor de Seletor, clique simplesmente no Edit CSS botão no topo do ecrã e cole o seu código.
Para o ajudar a inspirar-se, a nossa equipa de design criou 5 modelos premium de CSS. Basta copiar os trechos de código abaixo e colá-los no seu editor de CSS Personalizado!
O que é CSS Personalizado e Por Que Deve Usá-lo?
CSS (Cascading Style Sheets) é a linguagem de design que controla a aparência dos websites. Pense nele como a "maquilhagem e o vestuário" do seu website. Com CSS Personalizado, pode alterar cores, formas, animações, sombras e muito mais, sem tocar em nenhum código complexo.
Consistência da Marca
Corresponder às suas cores exatas de marca, fontes e diretrizes de estilo
Destaque-se
Crie designs únicos que o diferenciam dos concorrentes
Não é Necessário Desenvolvedor
Copiar e colar código pronto a usar — não são necessárias competências de programação
Otimizado para SEO
Todos os designs são otimizados para desempenho e acessibilidade
Como Aplicar Estes Designs (Passo a Passo)
Abrir o Editor do Seletor
Inicie sessão no seu painel MultiLipi e navegue até às definições do seu Seletor de Idiomas.
Clique no Botão " Editar CSS"
Procure o botão CSS Personalizado na parte superior da interface do seu Editor do Seletor.
Copiar o Design Escolhido
Desloque-se para baixo até aos modelos de design abaixo e clique no botão "Copiar Código" no seu estilo preferido.
Colar o Código
Cole o código CSS copiado no painel do editor CSS Personalizado.
Personalizar (Opcional)
Ajuste cores, tamanhos ou fontes para combinar com a sua marca. Explicaremos as personalizações comuns abaixo.
Guardar e Pré-visualizar
Clique em "Guardar Alterações" e veja uma pré-visualização do seu seletor no seu website!
5 Modelos de Design Premium
Clique em "Copiar Código" para obter instantaneamente o CSS. Estes trechos visam as classes padrão .ml-switcher-container e .ml-switcher-btn classes.
1. A "Pílula Empresarial"
O Ambiente: Um gatilho de menu suspenso clássico e rico em informações, concebido para gerar confiança. Utiliza bordas nítidas, sombras suaves e interações subtis ao passar o rato para transmitir solidez e profissionalismo.
✨ Ideal para: Sites corporativos, B2B SaaS, Finanças e Saúde
/* Style the main toggle button */
.ml-switcher-container {
background-color: #ffffff !important;
border-radius: 50px !important;
padding: 8px 16px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
border: 1px solid #e2e8f0 !important;
transition: all 0.2s ease !important;
}
.ml-switcher-container:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
border-color: #cbd5e1 !important;
}
/* Style the dropdown menu */
.ml-switcher-dropdown {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 6px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}
/* Style the individual language items */
.ml-switcher-dropdown-item {
border-radius: 8px !important;
color: #475569 !important;
font-family: 'Inter', sans-serif !important;
transition: background 0.2s, color 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: #f8fafc !important;
color: #0f172a !important;
}2. O "Editorial Text" Inline
O Ambiente: Design minimalista, centrado em texto, utilizando tipografia serif elegante e sem bordas. Confia numa animação subtil e animada de sublinhado para mostrar interatividade sem perturbar a estética do site.
✨ Ideal para: Moda de alta costura, marcas de luxo, revistas editoriais e portfólios de boutique
/* Remove all background containers */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Style the text buttons */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Muted grey */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* The Animated Underline */
.ml-switcher-btn::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background-color: #000000 !important;
transition: width 0.3s ease-in-out !important;
}
.ml-switcher-btn:hover {
color: #000000 !important;
}
.ml-switcher-btn:hover::after {
width: 100% !important;
}3. A "Ilha Dinâmica"
O Ambiente: Um design mobile-first que estiliza o alternador como uma pílula elegante, destacando o idioma ativo com um efeito de morphing de fundo azul suave.
✨ Ideal para: Startups de tecnologia modernas, aplicações para consumidores e páginas de destino minimalistas
/* Style the main container wrapper */
.ml-switcher-container {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 50px !important;
padding: 4px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}
/* Style the individual pill buttons */
.ml-switcher-btn {
color: #64748b !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 6px 16px !important;
border-radius: 50px !important;
transition: all 0.2s !important;
}
.ml-switcher-btn:hover {
background: #f8fafc !important;
color: #0f172a !important;
}
/* Active Language State */
.ml-switcher-btn.active {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
font-weight: 600 !important;
}4. O "Dark Tech Terminal"
O Ambiente: Inspirado em ferramentas de desenvolvedor e plataformas Web3. Utiliza um tema escuro de alto contraste, um layout de fonte elegante monoespaçada-híbrida e um subtil brilho azul elétrico ao passar o rato.
✨ Ideal para: Documentação de programadores, projetos Web3, plataformas de criptomoedas e SaaS com modo escuro
/* Style the main toggle button */
.ml-switcher-container {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 8px 16px !important;
color: #9ca3af !important;
font-family: 'Space Mono', monospace !important;
transition: all 0.3s ease !important;
}
.ml-switcher-container:hover {
border-color: #3b82f6 !important;
color: #f3f4f6 !important;
}
/* Style the dropdown menu */
.ml-switcher-dropdown {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 6px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
/* Style the individual language items */
.ml-switcher-dropdown-item {
border-radius: 4px !important;
color: #6b7280 !important;
font-family: 'Space Mono', monospace !important;
font-size: 12px !important;
transition: all 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: rgba(59, 130, 246, 0.1) !important;
color: #e5e7eb !important;
}5. O Modal "Foco Centrado" (Truque de CSS)
O Ambiente: Inspirado em marcas globais massivas. Este brilhante truque de CSS força um menu suspenso padrão a destacar-se e a expandir-se para um ecrã inteiro, com um fundo desfocado e cartões de idioma centrados.
✨ Ideal para: Empresas globais, e-commerce massivo, suítes de software complexas
/* 1. Style the main trigger button */
.ml-switcher-container {
background: #ffffff !important;
border: 1px solid #d1d5db !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
color: #374151 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.ml-switcher-container:hover {
background: #f9fafb !important;
}
/* 2. THE HACK: Turn the dropdown into a full-screen overlay */
.ml-switcher-dropdown {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
/* Center the items in the middle of the screen */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Remove default dropdown styling */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Style the individual language items as large modal cards */
.ml-switcher-dropdown-item {
background: #ffffff !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
padding: 16px 24px !important;
margin: 6px 0 !important;
width: 90% !important;
max-width: 400px !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #111827 !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
transition: all 0.2s ease !important;
}
/* Hover state for the modal cards */
.ml-switcher-dropdown-item:hover {
border-color: #3b82f6 !important;
color: #2563eb !important;
transform: translateY(-2px) !important;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.15) !important;
}Guia de Personalização Fácil (Para Utilizadores Não Técnicos)
Quer ajustar estes designs para corresponderem perfeitamente à sua marca? Aqui estão as personalizações mais comuns que pode fazer:
🎨 Alterar Cores
Procure códigos de cores como #3B82F6 or rgba(59, 130, 246, 0.5). Substitua estas pelas cores da sua marca.
Exemplo: Alterar background: #3B82F6; to background: #FF6B6B; (a cor da sua marca)
📏 Ajustar Tamanhos
Alterar padding, font-size, ou border-radius valores para tornar o botão maior ou menor.
Exemplo: padding: 8px 16px; → padding: 12px 24px; (botão maior)
✍️ Alterar Tipos de Letra
Atualizar font-family para corresponder à tipografia do seu website.
Exemplo: font-family: 'Inter'; → font-family: 'Roboto';
Melhores Práticas e Dicas de Otimização
Testar em Dispositivos Móveis
Pré-visualize sempre o seu seletor personalizado em telemóveis e tablets. Mais de 60% do tráfego global da web é móvel.
Use Alto Contraste para Acessibilidade
Certifique-se de que o texto e o fundo tenham contraste de cor suficiente (apontar para uma proporção de 4,5:1) para utilizadores com deficiências visuais.
Mantenha as Animações Sutis
Animações chamativas podem distrair os utilizadores. Opte por transições suaves com menos de 0,3 segundos.
Evite Sobrescrever Funcionalidades Principais
Não oculte completamente o seletor nem o torne não clicável. Os utilizadores precisam de o aceder facilmente.
Combine com o Tema do Seu Site
Escolha um design que complemente o design do seu site existente. Não o faça sobressair de forma estranha.
Erros Comuns a Evitar
Usar demasiadas animações ao mesmo tempo — isso abrandará o seu site
Definir tamanhos de letra inferiores a 12px — os utilizadores não conseguem ler texto minúsculo
Esquecer de testar em diferentes navegadores (Chrome, Safari, Firefox)
Copiar CSS de fontes não confiáveis — utilize sempre modelos oficiais
Não guardar uma cópia de segurança antes de fazer alterações importantes
Impacto no Desempenho
Todos estes designs de CSS são ultra-leve e não abrandará o seu website. O CSS é renderizado instantaneamente pelo navegador, e estes estilos adicionam menos de 2KB ao tamanho da sua página.
Para referência, 2KB é aproximadamente o tamanho de um único emoji. A velocidade do seu website e as classificações de SEO permanecerão inalteradas. ✨
Nota: Estes trechos visam o padrão .ml-switcher-container e .ml-switcher-btn classes. Ajuste os nomes das classes se estiver a usar um modelo base radicalmente diferente.