MultiLipi ofrece más de 20 plantillas de selector de idioma integradas para que comiences rápidamente. Sin embargo, si deseas que tu selector de idioma coincida perfectamente con la estética única de tu marca, puedes usar nuestra CSS personalizado función para anular los estilos predeterminados.
. Simplemente copia los fragmentos de código a continuación y pégalos en tu editor CSS personalizado. Editar CSS button at the top of the screen and paste in your code.
(botón más grande) 5 plantillas CSS premiumGuardar y previsualizar
¿Qué es CSS personalizado y por qué deberías usarlo?
CSS (Hojas de Estilo en Cascada) es el lenguaje de diseño que controla la apariencia de los sitios web. Piénsalo como el "maquillaje y la ropa" de tu sitio web. Con CSS personalizado, puedes cambiar colores, formas, animaciones, sombras y más, sin tocar ningún código complejo.
Consistencia de marca
Combina los colores, fuentes y directrices de estilo exactos de tu marca
Destaca
Crea diseños únicos que te diferencien de la competencia
No se necesita desarrollador
Copiar y pegar código predefinido: no se requieren conocimientos de codificación
Optimizado para SEO
Todos los diseños están optimizados para el rendimiento y la accesibilidad
Cómo aplicar estos diseños (paso a paso)
Abre tu editor de selector
Inicia sesión en tu panel de MultiLipi y navega a la configuración de tu selector de idioma.
Haz clic en el botón " Editar CSS"
Las animaciones llamativas pueden distraer a los usuarios. Limítate a transiciones suaves de menos de 0.3 segundos.
Copia tu diseño elegido
Desplázate hacia abajo hasta las plantillas de diseño de abajo y haz clic en el botón "Copiar código" en tu estilo favorito.
Pega el código
Pega el código CSS copiado en el panel del editor CSS personalizado.
Personalizar (Opcional)
Ajusta colores, tamaños o fuentes para que coincidan con tu marca. Explicaremos las personalizaciones comunes a continuación.
Busca el botón CSS personalizado en la parte superior de la interfaz de tu editor de Switcher.
Haz clic en "Guardar cambios" y previsualiza tu selector en vivo en tu sitio web.
5 plantillas de diseño premium
Haz clic en "Copiar código" para obtener el CSS al instante. Estos fragmentos se dirigen a los valores predeterminados .ml-switcher-container y .ml-switcher-btn clases.
1. La "Píldora Empresarial"
El ambiente: Un disparador de menú desplegable clásico y denso en información diseñado para generar confianza. Utiliza bordes limpios, sombras tenues e interacciones sutiles al pasar el cursor para que se sienta sólido y profesional.
✨ Lo mejor para: Sitios corporativos, SaaS B2B, Finanzas y Salud
/* Estiliza el botón de alternancia 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;
}
/* Estiliza el menú desplegable */
.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;
}
/* Estiliza los elementos de idioma individuales */
.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. El "Texto editorial" en línea
El ambiente: Diseño minimalista centrado en el texto que utiliza una elegante tipografía serif y cero bordes. Se basa en un suave subrayado animado para mostrar la interactividad sin alterar la estética del sitio.
✨ Ideal para: Marcas de alta costura, de lujo, revistas editoriales y portafolios boutique
/* Remove todos los contenedores de fondo */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Estiliza los botones de texto */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Gris apagado */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* La línea inferior animada */
.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. La "Isla dinámica"
El ambiente: Un diseño mobile-first que estiliza el selector como una pastilla elegante, resaltando el idioma activo con un efecto de morphing de fondo azul suave.
✨ Ideal para: Startups tecnológicas modernas, aplicaciones de consumo y páginas de destino minimalistas
/* Estilo del contenedor 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;
}
/* Estilo de los botones de píldora individuales */
.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 del idioma activo */
.ml-switcher-btn.active {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
font-weight: 600 !important;
}4. La "Terminal Tecnológica Oscura"
El ambiente: Inspirado en herramientas para desarrolladores y plataformas Web3. Utiliza un tema oscuro de alto contraste, un elegante diseño de fuente híbrida monoespaciada y un sutil brillo azul eléctrico al pasar el ratón por encima.
✨ Ideal para: Documentación para desarrolladores, proyectos Web3, plataformas de criptomonedas y SaaS en modo oscuro
/* Estilo del botón de alternancia 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;
}
/* Estilo del menú desplegable */
.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;
}
/* Estilo de los elementos individuales 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. El modal "Enfoque centrado" (truco de CSS)
El ambiente: Inspirado en marcas globales masivas. Este brillante truco de CSS fuerza a un menú desplegable estándar a separarse y expandirse en una superposición a pantalla completa y desenfocada con tarjetas de idioma centradas.
✨ Lo mejor para: Empresas globales, comercio electrónico masivo, suites de software complejas
/* 1. Estiliza el botón principal del selector */
.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. EL TRUCO: Convierte el desplegable en una superposición a pantalla completa */
.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;
/* Centra los elementos en medio de la pantalla */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Elimina el estilo predeterminado del desplegable */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Estiliza los elementos individuales del idioma como grandes tarjetas modales */
.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 las tarjetas modales */
.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;
}
Guía de personalización sencilla (para usuarios no técnicos)
¿Quieres ajustar estos diseños para que coincidan perfectamente con tu marca? Estas son las personalizaciones más comunes que puedes hacer:
🎨 Cambiar colores
Busca códigos de color como #3B82F6 o rgba(59, 130, 246, 0.5). Reemplaza estos con los colores de tu marca.
Ejemplo: Cambiar background: #3B82F6; Para fondo: #FF6B6B; (el color de tu marca)
✂ Ajustar tamaños
Cambio relleno, tamaño de fuenteo border-radius valores para hacer el botón más grande o más pequeño.
Ejemplo: padding: 8px 16px; → padding: 12px 24px; botón en la parte superior de la pantalla y pega tu código.
✂️ Cambiar fuentes
Actualizar font-family para que coincidan con la tipografía de su sitio web.
Ejemplo: font-family: 'Inter'; → font-family: 'Roboto';
Mejores prácticas y consejos de optimización
Probar en dispositivos móviles
Previsualiza siempre tu selector personalizado en teléfonos móviles y tabletas. Más del 60 % del tráfico web global es móvil.
Utiliza alto contraste para la accesibilidad
Asegúrate de que el texto y el fondo tengan suficiente contraste de color (apunta a una relación de 4.5:1) para usuarios con discapacidades visuales.
Mantener las animaciones sutiles
Para ayudarte a inspirarte, nuestro equipo de diseño ha creado
Evitar anular la funcionalidad principal
No ocultes el selector por completo ni lo hagas no clicable. Los usuarios necesitan acceder a él fácilmente.
Combina con el tema de tu sitio web
Elige un diseño que complemente el diseño de tu sitio web existente. No hagas que destaque de forma extraña.
Errores comunes a evitar
Usar demasiadas animaciones a la vez—ralentiza tu sitio
Establecer tamaños de fuente inferiores a 12px—los usuarios no pueden leer texto diminuto
Olvidar probar en diferentes navegadores (Chrome, Safari, Firefox)
Copiar CSS de fuentes no confiables—usa siempre plantillas oficiales
No guardar una copia de seguridad antes de realizar cambios importantes
Impacto en el rendimiento
Todos estos diseños CSS son ultraligero y no ralentizarán tu sitio web. El navegador renderiza CSS instantáneamente y estos estilos añaden menos de 2 KB al tamaño de tu página.
Como referencia, 2 KB es aproximadamente el tamaño de un solo emoji. La velocidad de tu sitio web y tus rankings de SEO no se verán afectados. ✨
Nota: Estos fragmentos se dirigen al .ml-switcher-container y .ml-switcher-btn clases. Ajusta los nombres de las clases si estás utilizando una plantilla base radicalmente diferente.