O MultiLipi oferece mais de 20 modelos de seletor de idiomas incorporados 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 padrão.
No seu Editor de Switcher, basta clicar no Editar 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 CSS premium. Basta copiar os trechos de código abaixo e colá-los no seu editor de CSS Personalizado!
O que é CSS Personalizado e Porquê Utilizá-lo?
CSS (Cascading Style Sheets) é a linguagem de design que controla a aparência dos websites. Pense nela como a "maquilhagem e roupa" 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
Combine as suas cores exatas de marca, fontes e diretrizes de estilo
Destacar
Crie designs únicos que o diferenciam dos concorrentes
Não é Necessário Desenvolvedor
Copie e cole 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 Seu Editor de Switcher
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 no topo da sua interface do Editor de Switcher.
Copie o Seu Design Escolhido
Desloque para baixo até aos modelos de design abaixo e clique no botão "Copiar Código" no seu estilo preferido.
Cole o Código
Cole o código CSS copiado no painel do editor CSS Personalizado.
Personalizar (Opcional)
Ajuste cores, tamanhos ou fontes para corresponder à sua marca. Explicaremos as personalizações comuns abaixo.
Guardar e Pré-visualizar
Clique em "Guardar Alterações" e pré-visualize o seu switcher em tempo real no seu website!
5 Modelos de Design Premium
Clique em "Copiar Código" para obter instantaneamente o CSS. Estes trechos visam o padrão .ml-switcher-container e ainda .ml-switcher-btn classes.
1. A "Pílula Empresarial"
O Ambiente: Um gatilho de menu suspenso clássico e denso em informação, concebido para gerar confiança. Utiliza bordas limpas, 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
/* Estilizar o botão de alternância principal */
.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;
}
/* Estilizar o menu suspenso */
.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;
}
/* Estilizar os itens individuais de idioma */
.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 "Texto Editorial" Inline
O Ambiente: Design minimalista, centrado no texto, utilizando tipografia serif elegante e zero bordas. Depende de um subtil sublinhado animado para mostrar interatividade sem perturbar a estética do site.
✨ Ideal para: Marcas de alta-costura, de luxo, revistas editoriais e portfólios de boutique
/* Remove todos os contentores de fundo */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Estiliza os botões de texto */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Cinzento apagado */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* A linha animada por baixo */
.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 seletor como uma pílula elegante, destacando o idioma ativo com um efeito de transição de fundo azul suave.
✨ Ideal para: Startups de tecnologia modernas, aplicações para consumidores e páginas de destino minimalistas
/* Estilizar o wrapper do contentor principal */
.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;
}
/* Estilizar os botões de pílula individuais */
.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;
}
/* Estado da Língua Ativa */
.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 por ferramentas de desenvolvimento e plataformas Web3. Utiliza um tema escuro de alto contraste, um layout de fonte híbrido monospace elegante e um brilho azul elétrico subtil ao pairar o rato.
✨ Ideal para: Documentação de programadores, projetos Web3, plataformas de criptomoedas e SaaS com modo escuro
/* Estilizar o botão de alternância principal */
.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;
}
/* Estilizar o menu suspenso */
.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;
}
/* Estilizar os itens individuais de idioma */
.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 CSS)
O Ambiente: Inspirado em grandes marcas globais. Este brilhante truque CSS força um menu suspenso padrão a destacar-se e a expandir-se para um ecrã inteiro, com uma sobreposição desfocada e cartões de idioma centrados.
✨ Ideal para: Empresas globais, e-commerce massivo, suítes de software complexas
/* 1. Estilizar o botão principal de ativação */
.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. O HACK: Transformar o dropdown num overlay a ecrã inteira */
.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;
/* Centralizar os itens no meio do ecrã */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Remover estilo padrão do dropdown */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Estilizar os itens individuais da língua como cartões modais grandes */
.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;
}
/* Estado hover para os cartões modais */
.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 quer rgba(59, 130, 246, 0.5). Substitua estas pelas cores da sua marca.
Exemplo: Alterar fundo: #3B82F6; Para background: #FF6B6B; (a cor da sua marca)
📏 Ajustar Tamanhos
Alterar padding, tamanho da fonte, ou raio da borda valores para tornar o botão maior ou menor.
Exemplo: padding: 8px 16px; → padding: 12px 24px; (botão maior)
✍️ Alterar Tipos de Letra
Atualização font-family para corresponder à tipografia do seu site.
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 (aponte 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 a Funcionalidade Principal
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 Website
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 abaixo de 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 CSS são ultra-leve e não abrandará o seu site. 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 site e as classificações de SEO permanecerão inalteradas. ✨
Observação: Estes trechos visam o padrão .ml-switcher-container e ainda .ml-switcher-btn classes. Ajuste os nomes das classes se estiver a usar um modelo base radicalmente diferente.