El selector de idioma es el elemento de navegación principal para tu tráfico internacional. MultiLipi proporciona un editor de doble interfaz, que te permite controlar el comportamiento y la estética de este elemento de forma independiente para los entornos de escritorio y móvil.
Esta guía cubre la configuración de Diseños, Posicionamiento, y Estilo de Marca a través del Centro de Comandos de MultiLipi.
1. Accediendo al Editor de Interfaz
Para comenzar a personalizar tu integración frontend:
- 1Navega a tu Panel de MultiLipi.
- 2Abrir Configuración desde el menú de la izquierda.
- 3Selecciona Selector de Idioma.
💡 Consejo profesional: Entrarás en el Editor de Conmutadores, que presenta un lienzo de vista previa en tiempo real. Usa el selector en la parte superior para cambiar entre Escritorio y Móvil vistas para asegurar la capacidad de respuesta en todos los dispositivos.
2. Paso 1: Selección de la Arquitectura (Posicionamiento)
Define cómo se comporta el selector dentro de tu DOM. Tienes dos modos de implementación:
Modo A: Flotante (Predeterminado)
Comportamiento: El selector se superpone a tu contenido, anclado a una esquina específica de la pantalla (por ejemplo, Abajo-Derecha).
Caso de Uso: Ideal para visibilidad inmediata sin alterar el código de diseño existente de tu sitio web.
Modo B: Incrustado (Integrado)
Comportamiento: El conmutador se inyecta en un elemento HTML específico que usted define (por ejemplo, dentro de la Barra de Navegación o el Pie de Página).
⚠️ El Protocolo de Respaldo
Si tu contenedor HTML especificado no se puede encontrar en una página en particular, MultiLipi's Lógica de Fallo revierte automáticamente el conmutador al "Modo Flotante". Esto asegura que los usuarios nunca queden bloqueados de la selección de idioma, incluso si el diseño cambia.
3. Paso 2: Identidad Visual (Plantillas y Colores)
Alinea el selector con el Sistema de Diseño de tu marca.
Selección de Plantilla
Elige de nuestra biblioteca de patrones de UI preconfigurados para que coincidan con la estética de tu sitio:
Integración de Paleta
Anula los estilos predeterminados para que coincidan con las pautas de tu marca utilizando el Selector de Color incorporado o valores RGB sin procesar:
- •Color de Fondo: Iguala los estilos de tu barra de navegación o botones.
- •Color del Texto: Asegura un alto contraste para la accesibilidad (cumplimiento WCAG).
4. Paso 3: Estilo Avanzado (CSS Personalizado)
Para desarrolladores que requieren control píxel a píxel, puedes inyectar reglas CSS personalizadas directamente en el shadow DOM del widget.
Selectores CSS Comunes:
#dynamicDropdown- Apunta al contenedor principal de la lista desplegable.#lang-switcher-selected-lang .fi- Apunta al ícono de la bandera del idioma actualmente seleccionado.
Configuración de Ejemplo:
/* 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 para el Desarrollador: CSS personalizado te permite anular cualquier propiedad visual manteniendo la lógica funcional del selector. Esto es particularmente útil para igualar sistemas de diseño complejos o implementar variaciones de modo oscuro.
5. Despliegue y Verificación
Una vez que tu configuración esté completa:
Vista previa
Alterna entre los modos de escritorio y móvil en el editor para verificar la consistencia visual.
Guardar
Haz clic Guardar para enviar los cambios a tu sitio de producción en vivo al instante.
Restablecer
Si necesitas empezar de nuevo, usa el Restablecer función para revertir a los estilos predeterminados de MultiLipi.
✅ Éxito: ¡Tu selector de idioma ya está activo! Los cambios se propagan instantáneamente en todas las páginas donde MultiLipi está implementado. No se requiere borrar caché ni actualizar la página para la mayoría de las configuraciones.