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.
En tu Editor de Selector, simplemente haz clic en el botón Editar CSS en la parte superior de la pantalla y pega tu código.
Para ayudarte a inspirarte, nuestro equipo de diseño ha creado 5 plantillas premium de CSS. ¡Simplemente copia los fragmentos de código a continuación y pégalos en tu editor de CSS personalizado!
¿Qué es CSS personalizado y por qué deberías usarlo?
CSS (Cascading Style Sheets) 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
Coincide con los colores exactos de tu marca, fuentes y pautas de estilo
Destaca
Crea diseños únicos que te diferencien de la competencia
No se necesita desarrollador
Copia y pega código prefabricado, no se requieren habilidades 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"
Busca el botón CSS personalizado en la parte superior de la interfaz de tu editor de selector.
Copia el diseño elegido
Desplázate hacia abajo hasta las plantillas de diseño a continuación 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.
Guardar y Previsualizar
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 instantáneamente el CSS. Estos fragmentos se dirigen a las clases predeterminadas .ml-switcher-container y .ml-switcher-btn predeterminadas.
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 suaves e interacciones sutiles al pasar el cursor para sentirse sólido y profesional.
✨ Lo mejor para: Sitios corporativos, SaaS B2B, Finanzas y Salud
/* 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. 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 interactividad sin alterar la estética del sitio.
✨ Lo mejor para: Marcas de alta costura, de lujo, revistas editoriales y portafolios 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. La "Isla Dinámica"
El Ambiente: Un diseño mobile-first que estiliza el interruptor como una píldora 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
/* 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. La "Terminal Tecnológica Oscura"
El Ambiente: Inspirado en herramientas de desarrollador y plataformas Web3. Utiliza un tema oscuro de alto contraste, un diseño de fuente híbrido monospaciado elegante y un sutil brillo azul eléctrico al pasar el cursor.
✨ Ideal para: Documentación de desarrolladores, proyectos Web3, plataformas de criptomonedas y SaaS en modo oscuro
/* 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. El Modal "Enfoque Centrado" (Hack de CSS)
El Ambiente: Inspirado en marcas globales masivas. Este brillante hack de CSS fuerza a un menú desplegable estándar a separarse y expandirse en una superposición de pantalla completa y difuminada con tarjetas de idioma centradas.
✨ Ideal para: Empresas globales, comercio electrónico masivo, suites de software complejas
/* 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;
}Guía de Personalización Fácil (Para Usuarios No Técnicos)
¿Quieres ajustar estos diseños para que coincidan perfectamente con tu marca? Aquí tienes las personalizaciones más comunes que puedes hacer:
🎨 Cambiar Colores
Busca códigos de color como #3B82F6 o rgba(59, 130, 246, 0.5). Reemplázalos con los colores de tu marca.
Ejemplo: Cambia background: #3B82F6; to background: #FF6B6B; (color de tu marca)
📏 Ajustar Tamaños
Cambio padding, font-size, o 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 más grande)
✍️ Cambiar Fuentes
Actualiza font-family para que coincida con la tipografía de tu sitio web.
Ejemplo: font-family: 'Inter'; → font-family: 'Roboto';
Mejores Prácticas y Consejos de Optimización
Prueba en Dispositivos Móviles
Siempre previsualiza tu selector personalizado en teléfonos móviles y tabletas. Más del 60% del tráfico web global es móvil.
Usa Alto Contraste para 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.
Mantén las Animaciones Sutiles
Las animaciones llamativas pueden distraer a los usuarios. Limítese a transiciones fluidas de menos de 0,3 segundos.
Evite alterar la funcionalidad principal
No oculte el selector por completo ni lo haga imposible de hacer clic. Los usuarios deben poder acceder a él fácilmente.
Combine con el tema de su sitio web
Elija un diseño que complemente el diseño existente de su sitio. No permita que destaque de manera extraña.
Errores comunes que se deben evitar
Usar demasiadas animaciones a la vez: esto ralentiza su sitio
Establecer tamaños de fuente inferiores a 12px: los usuarios no pueden leer texto diminuto
Olvidar realizar pruebas en diferentes navegadores (Chrome, Safari, Firefox)
Copiar CSS de fuentes no confiables: utilice siempre plantillas oficiales
No guardar una copia de seguridad antes de realizar cambios importantes
Impacto en el rendimiento
Todos estos diseños CSS son ultraligeros y no ralentizarán su sitio web. El navegador procesa el CSS de forma instantánea y estos estilos añaden menos de 2 KB al tamaño de su página.
Como referencia, 2 KB equivalen aproximadamente al tamaño de un solo emoji. La velocidad de su sitio web y su posicionamiento SEO no se verán afectados. ✨
Nota: Estos fragmentos se dirigen a la opción predeterminada .ml-switcher-container y .ml-switcher-btn clases. Ajusta los nombres de las clases si estás utilizando una plantilla base radicalmente diferente.