El cambiador de idioma es el elemento principal de navegación para tu tráfico internacional. MultiLipi ofrece un editor de doble interfaz, que te permite controlar el comportamiento y la estética de este elemento de forma independiente para los viewports de escritorio y móviles.
Esta guía cubre la configuración de Distribuciones , Posicionamiento y Estilo de marca a través del Centro de Mando MultiLipi.
1. Acceso al editor de interfaz
Para empezar a personalizar tu integración frontend:
- 1 Navega hacia tu Panel de control MultiLipi .
- 2 Abierto Configuración Del menú de la izquierda.
- 3 Escoger Conmutador de lenguaje .
💡 Consejo profesional: Accederás al Editor de Switch, que incluye un lienzo de vista previa en tiempo real. Usa el interruptor de la parte superior para cambiar entre Escritorio y Móvil vistas para garantizar la respuesta en todos los dispositivos.
2. Paso 1: Selección de la arquitectura (posicionamiento)
Define cómo se comporta el switcher dentro de tu DOM. Tienes dos modos de despliegue:
Modo A: Flotante (por defecto)
Comportamiento: El conmutador flota sobre tu contenido, anclado a una esquina específica de la pantalla (por ejemplo, en la esquina inferior derecha).
Caso de uso: Lo mejor para una visibilidad inmediata sin alterar el código de diseño existente de tu web.
Modo B: Integrado (Integrado)
Comportamiento: El switcher se inyecta en un elemento HTML específico que defines (por ejemplo, dentro de la barra de navegación o el pie de página).
⚠️ El Protocolo de Respaldo
Si el contenedor HTML especificado no se encuentra en una página concreta, los de MultiLipi Lógica de respaldo automáticamente revierte el conmutador a "Modo Flotante." Esto garantiza que los usuarios nunca queden bloqueados para seleccionar idiomas, incluso si el diseño cambia.
3. Paso 2: Identidad Visual (Plantillas y Colores)
Alinea el switcher con el Sistema de Diseño de tu marca.
Selección de plantilla
Elige de nuestra biblioteca de patrones de interfaz preconfigurados para adaptarlos a la estética de tu sitio:
Integración de paletas
Anula los estilos por defecto para que coincidan con las directrices de tu marca usando el selector de color integrado o valores RGB en bruto:
- • Color de fondo: Combina con tu barra de navegación o estilos de botones.
- • Color del texto: Asegurarse de un alto contraste para la accesibilidad (cumplimiento WCAG).
4. Paso 3: Estilo avanzado (CSS personalizado)
Para desarrolladores que requieren control pixel-perfecto, puedes inyectar reglas CSS personalizadas directamente en el DOM sombra del widget.
Selectores comunes de CSS:
#dynamicDropdown- Apunta al contenedor principal de la lista desplegable.#lang-switcher-selected-lang .fi- Apunta al icono de la bandera del idioma seleccionado en ese momento.
Ejemplo de configuración:
/* 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 del desarrollador: El CSS personalizado te permite anular cualquier propiedad visual manteniendo la lógica funcional del switcher. Esto es especialmente útil para emparejar sistemas de diseño complejos o implementar variaciones en modo oscuro.
5. Despliegue y verificación
Una vez que tu configuración esté completa:
Avance
Alterna entre modos de escritorio y móvil en el editor para verificar la consistencia visual.
Salvar
Clic Salvar Para impulsar los cambios en tu sitio de producción en vivo al instante.
Restablecimiento
Si necesitas empezar de nuevo, usa el Restablecimiento función para volver a los estilos predeterminados de MultiLipi.
✅ Éxito: ¡Tu cambiador de idioma ya está activo! Los cambios se propagan instantáneamente en todas las páginas donde se despliega MultiLipi. No se requiere limpiar la caché ni actualizar la página en la mayoría de configuraciones.