The language switcher is the primary navigation element for your international traffic. MultiLipi provides a dual-interface editor, allowing you to control the behavior and aesthetics of this element independently for Desktop and Mobile viewports.
This guide covers the configuration of Layouts, Positioning, e Brand Styling via the MultiLipi Command Center.
1. Accessing the Interface Editor
To begin customizing your frontend integration:
- 1 Navigate to your Painel MultiLipi .
- 2 Open Configurações from the left-hand menu.
- 3 Selecione Comutador de Línguas .
💡 Dica profissional: You will enter the Switch Editor, which features a real-time preview canvas. Use the toggle at the top to switch between Versão desktop e ainda Telemóvel views to ensure responsiveness across devices.
2. Step 1: Selecting the Architecture (Positioning)
Define how the switcher behaves within your DOM. You have two deployment modes:
Mode A: Floating (Default)
Behavior: The switcher hovers over your content, anchored to a specific corner of the screen (e.g., Bottom-Right).
Caso de uso: Best for immediate visibility without altering your website's existing layout code.
Mode B: Embedded (Integrated)
Behavior: The switcher is injected into a specific HTML element you define (e.g., inside the Navigation Bar or Footer).
⚠️ The Fallback Protocol
If your specified HTML container cannot be found on a particular page, MultiLipi's Fallback Logic automatically reverts the switcher to "Floating Mode." This ensures users are never locked out of language selection, even if the layout changes.
3. Step 2: Visual Identity (Templates & Colors)
Align the switcher with your brand's Design System.
Template Selection
Choose from our library of pre-configured UI patterns to match your site's aesthetic:
Palette Integration
Override default styles to match your brand guidelines using the built-in Color Picker or raw RGB values:
- • Background Color: Match your navbar or button styles.
- • Text Color: Ensure high contrast for accessibility (WCAG compliance).
4. Step 3: Advanced Styling (Custom CSS)
For developers requiring pixel-perfect control, you can inject custom CSS rules directly into the widget's shadow DOM.
Common CSS Selectors:
#dynamicDropdown- Targets the main container of the dropdown list.#lang-switcher-selected-lang .fi- Targets the flag icon of the currently selected language.
Example Configuration:
/* 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);
}💎 Developer Note: Custom CSS allows you to override any visual property while maintaining the functional logic of the switcher. This is particularly useful for matching complex design systems or implementing dark mode variations.
5. Deployment & Verification
Once your configuration is complete:
Preview
Toggle between Desktop and Mobile modes in the editor to verify visual consistency.
Gravar
Clique em Gravar to push the changes to your live production site instantly.
Repor
If you need to start over, use the Repor function to revert to the default MultiLipi styles.
✅ Success: Your language switcher is now live! Changes propagate instantly across all pages where MultiLipi is deployed. No cache clearing or page refresh required for most configurations.