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).
- •Color de fondo al pasar el cursor: Establece el color de resaltado cuando un usuario pasa el cursor sobre una opción de idioma en el menú desplegable, proporcionando retroalimentación táctil inmediata.
✨ Configurar efectos interactivos al pasar el cursor
Dale a tu selector de idiomas una sensación premium y nativa añadiendo estados interactivos al pasar el cursor.
- 1Debajo de la pestaña Estilo Visual , localiza el recién añadido Color de fondo al pasar el cursor campo.
- 2Haz clic para abrir el selector de color, o introduce manualmente un valor exacto de RGB/RGBA para que coincida con las directrices de tu marca.
- 3Este color se mostrará dinámicamente cada vez que un usuario pase el cursor sobre una opción de idioma en el menú desplegable, proporcionando retroalimentación táctil inmediata.
Opciones de visualización: Orden del selector de idiomas
Ya no tienes que conformarte con una lista alfabética. Ahora puedes priorizar idiomas específicos en tu menú desplegable según tus mercados objetivo principales.
Establecer el orden del selector de idiomas
- 1Desplázate hacia abajo hasta la Orden del selector de idiomas en el panel lateral izquierdo del Editor de Selectores.
- 2Verás una lista de bloques de todos tus idiomas objetivo activos (por ejemplo,
EN,AR,FI,FR). - 3Haz clic en Arriba (↑) y Abajo (↓) flechas junto a cada bloque de idioma para reorganizar su prioridad de visualización.
- 4El idioma colocado en la parte superior de esta lista aparecerá primero cuando un usuario abra el menú desplegable.
💡 Consejo profesional: Fija tu idioma de mayor tráfico en la primera posición. Por ejemplo, si la mayoría de tus visitantes internacionales provienen de Alemania, colocar DE primero reduce los clics necesarios para cambiar, mejorando la experiencia del usuario y reduciendo la tasa de rebote en tus páginas traducidas.
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.