Kielivalitsin on ensisijainen navigointielementti kansainväliselle liikenteellesi. MultiLipi tarjoaa kaksoiskäyttöliittymäeditorin, jonka avulla voit hallita tämän elementin toimintaa ja estetiikkaa itsenäisesti työpöytä- ja mobiilinäkymille.
Tämä opas kattaa konfiguroinnin Ulkoasut, Sijoittelu, ja Brändin tyylittely MultiLipi Command Centerin kautta.
1. Käyttöliittymäeditoriin pääsy
Aloita käyttöliittymäintegraatiosi muokkaaminen:
- 1Siirry MultiLipi-koontinäyttö.
- 2Avaa Asetukset vasemmasta valikosta.
- 3Valitse Kielivalitsin.
💡 Pro-vinkki: Siirryt Switch Editoriin, joka sisältää reaaliaikaisen esikatselupohjan. Käytä yläosan kytkintä vaihtaaksesi Työpöytä ja Mobiili näkymien välillä varmistaaksesi responsiivisuuden kaikilla laitteilla.
2. Vaihe 1: Arkkitehtuurin valinta (Sijoittelu)
Määritä, miten kytkin toimii DOMissasi. Sinulla on kaksi käyttötilaa:
Tila A: Kelluva (Oletus)
Käyttäytyminen: Kytkin leijuu sisällön päällä, kiinnitettynä näytön tiettyyn kulmaan (esim. Alaoikea).
Käyttötapaus: Paras välittömään näkyvyyteen muuttamatta verkkosivustosi olemassa olevaa asettelukoodia.
Tila B: Sulautettu (Integroitu)
Käyttäytyminen: Kytkin upotetaan tiettyyn HTML-elementtiin, jonka määrität (esim. Navigointipalkin tai Alatunnisteen sisään).
⚠️ Varmistusprotokolla
Jos määritettyäsi HTML-säiliötä ei löydy tietyltä sivulta, MultiLipi:n Varmistuslogiikka palauttaa kytkimen automaattisesti "Kelluvaan tilaan". Tämä varmistaa, että käyttäjät eivät koskaan menetä kielivalintaa, vaikka asettelua muutettaisiin.
3. Vaihe 2: Visuaalinen ilme (Mallit ja värit)
Yhdenmukaista valitsin brändisi suunnittelujärjestelmän kanssa.
Mallin valinta
Valitse valmiiksi määriteltyjen käyttöliittymämallien kirjastostamme sopimaan sivustosi estetiikkaan:
Väripaletin integrointi
Ohita oletustyylit vastaamaan brändiohjeitasi sisäänrakennetun värivalitsimen tai raakojen RGB-arvojen avulla:
- •Taustaväri: Vastaa navigointipalkin tai painikkeiden tyylejä.
- •Tekstin väri: Varmista korkea kontrasti saavutettavuuden takaamiseksi (WCAG-yhteensopivuus).
- •Kohdistuksen taustaväri: Asettaa korostusvärin, kun käyttäjä siirtää osoittimen kielen valinnan päälle pudotusvalikossa – tarjoaa välitöntä palautetta.
✨ Määritä interaktiiviset kohdistusefektit
Anna kielivalitsimellesi ensiluokkainen, natiivi tuntuma lisäämällä interaktiivisia kohdistustiloja.
- 1Etsi uusi Visuaalinen tyylittely välilehden alta Kohdistuksen taustaväri kenttä.
- 2Avaa värivalitsin napsauttamalla tai syötä manuaalisesti tarkka RGB/RGBA arvo vastaamaan brändiohjettasi.
- 3Tämä väri näytetään dynaamisesti aina, kun käyttäjä vie kohdistimen kielen valinnan päälle pudotusvalikossa, antaen välitöntä palautetta.
Näyttöasetukset: Kielenvaihtimen järjestys
Sinun ei enää tarvitse tyytyä aakkoselliseen luetteloon. Voit nyt priorisoida tiettyjä kieliä pudotusvalikossasi ensisijaisten kohdemarkkinoidesi perusteella.
Aseta kielenvaihtimen järjestys
- 1Selaa alas kohtaan Kielenvaihtimen järjestys osio vasemmassa sivupalkissa olevassa Vaihtaja-editorissa.
- 2Näet luettelon kaikista aktiivisista kohdekielistäsi (esim.
EN,AR,FI,FR). - 3Napsauta Ylös (↑) ja Alas (↓) nuolet kielen lohkon vieressä järjestääksesi niiden näyttöprioriteetin uudelleen.
- 4Kieli, joka asetetaan tämän luettelon alkuun näytetään ensimmäisenä, kun käyttäjä avaa pudotusvalikon.
💡 Pro-vinkki: Kiinnitä korkeimman liikenteen kielesi ylimpään paikkaan. Jos esimerkiksi suurin osa kansainvälisistä kävijöistäsi tulee Saksasta, asettamalla DE ensimmäiseksi vähennät vaihdon vaatimia klikkauksia — parantaen käyttökokemusta ja vähentäen poistumisprosenttia käännetyillä sivuillasi.
4. Vaihe 3: Edistynyt muotoilu (Mukautettu CSS)
Kehittäjille, jotka vaativat pikselintarkkaa hallintaa, voit lisätä mukautettuja CSS-sääntöjä suoraan widgetin shadow DOM:iin.
Yleiset CSS-valitsimet:
#dynamicDropdown- Kohdistaa pudotusvalikon pääkonttiin.#lang-switcher-selected-lang .fi- Kohdistaa valitun kielen lippuikoniin.
Esimerkkikokoonpano:
/* 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);
}💎 Kehittäjän huomautus: Mukautetun CSS:n avulla voit ohittaa minkä tahansa visuaalisen ominaisuuden säilyttäen samalla kytkimen toiminnallisen logiikan. Tämä on erityisen hyödyllistä monimutkaisten suunnittelujärjestelmien yhdistämisessä tai pimeän tilan muunnelmien toteuttamisessa.
5. Käyttöönotto ja vahvistus
Kun kokoonpanosi on valmis:
Esikatselu
Vaihda editorissa työpöytä- ja mobiilitilojen välillä varmistaaksesi visuaalisen yhdenmukaisuuden.
Tallenna
Napsauta Tallenna puskeaksesi muutokset välittömästi live-tuotantosivustoosi.
Nollaa
Jos haluat aloittaa alusta, käytä Nollaa toimintoa palauttaaksesi oletusarvoiset MultiLipi-tyylit.
✅ Onnistui: Kielivalitsimesi on nyt käytössä! Muutokset leviävät välittömästi kaikille sivuille, joilla MultiLipi on käytössä. Useimmissa konfiguraatioissa ei tarvita välimuistin tyhjennystä tai sivun päivitystä.