MultiLipi tarjoaa yli 20 sisäänrakennettua kielenvaihtajamallia, joiden avulla pääset nopeasti alkuun. Jos kuitenkin haluat, että kielenvaihtajasi sopii täydellisesti brändisi ainutlaatuiseen estetiikkaan, voit käyttää meidän Mukautettu CSS ominaisuus oletustyylien ohittamiseksi.
Klikkaa vain Switcher Editorissasi Muokkaa CSS:ää painiketta näytön yläreunassa ja liitä koodisi.
Inspiraation saamiseksi suunnittelutiimimme on luonut 5 premium CSS-mallia. Kopioi vain alla olevat koodinpätkät ja liitä ne mukautettuun CSS-editoriisi!
Mitä on mukautettu CSS ja miksi sitä kannattaa käyttää?
CSS (Cascading Style Sheets) on suunnittelukieli, joka ohjaa verkkosivustojen ulkoasua. Ajattele sitä verkkosivustosi "meikkinä ja vaatteina". Mukautetun CSS:n avulla voit muuttaa värejä, muotoja, animaatioita, varjoja ja paljon muuta – koskematta mihinkään monimutkaiseen koodiin.
Brändin yhtenäisyys
Täsmää tarkasti brändisi värit, fontit ja tyyliohjeet
Erotu joukosta
Luo ainutlaatuisia malleja, jotka erottavat sinut kilpailijoista
Ei vaadi kehittäjää
Kopioi ja liitä valmiita koodinpätkiä – koodaustaitoja ei tarvita
SEO-ystävällinen
Kaikki mallit on optimoitu suorituskyvyn ja saavutettavuuden kannalta
Näiden mallien soveltaminen (askel askeleelta)
Avaa kytkimen muokkaustoiminto
Kirjaudu sisään MultiLipi-hallintapaneeliisi ja siirry kielenvalitsinasetuksiisi.
Napsauta " Muokkaa CSS:ää" -painiketta
Etsi mukautetun CSS:n painike kytkimen muokkaustoiminnon käyttöliittymän yläosasta.
Kopioi valitsemasi malli
Vieritä alas alta löytyviin suunnittelumalleihin ja napsauta "Kopioi koodi" -painiketta suosikkityylissäsi.
Liitä koodi
Liitä kopioitu CSS-koodi Mukautettu CSS -editoripaneeliin.
Mukauta (valinnainen)
Säädä värejä, kokoja tai fontteja vastaamaan brändiäsi. Selitämme yleisimmät mukautukset alla.
Tallenna ja esikatsele
Napsauta "Tallenna muutokset" ja esikatsele kytkintäsi suoraan verkkosivustollasi!
5 premium-suunnittelumallia
Napsauta "Kopioi koodi" saadaksesi CSS:n välittömästi. Nämä koodinpätkät kohdistavat oletuksen .ml-switcher-container ja .ml-switcher-btn luokkia.
1. "Yritys pilleri"
Tunnelma: Klassinen, tietotiivis pudotusvalikkokytkin, joka on suunniteltu rakentamaan luottamusta. Se käyttää selkeitä reunoja, pehmeitä varjoja ja hienovaraisia hover-interaktioita tuntumaan vankalta ja ammattimaiselta.
✨ Paras: Yrityssivustot, B2B SaaS, rahoitus ja terveydenhuolto
/* Tyylittele päävalintapainiketta */
.ml-switcher-container {
background-color: #ffffff !important;
border-radius: 50px !important;
padding: 8px 16px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
border: 1px solid #e2e8f0 !important;
transition: all 0.2s ease !important;
}
.ml-switcher-container:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
border-color: #cbd5e1 !important;
}
/* Tyylittele pudotusvalikkoa */
.ml-switcher-dropdown {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 6px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}
/* Tyylittele yksittäisiä kielikohteita */
.ml-switcher-dropdown-item {
border-radius: 8px !important;
color: #475569 !important;
font-family: 'Inter', sans-serif !important;
transition: background 0.2s, color 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: #f8fafc !important;
color: #0f172a !important;
}2. "Editorial Text" inline
Tunnelma: Minimalistinen, tekstiin keskittyvä muotoilu, joka käyttää eleganttia serif-typografiaa ja nollaa reunoja. Se luottaa hellävaraiseen, animoituun alleviivaukseen osoittamaan vuorovaikutteisuutta häiritsemättä sivuston estetiikkaa.
✨ Paras: Huippumuoti, luksusbrändit, toimitukselliset lehdet ja boutique-portfoliot
/* Poista kaikki taustakontit */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Tyylittele tekstipainikkeet */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Vaimennettu harmaa */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* Animoitu alleviivaus */
.ml-switcher-btn::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background-color: #000000 !important;
transition: width 0.3s ease-in-out !important;
}
.ml-switcher-btn:hover {
color: #000000 !important;
}
.ml-switcher-btn:hover::after {
width: 100% !important;
}3. "Dynaaminen saareke"
Tunnelma: Mobiili ensin -suunnittelu, joka tyylittelee kytkimen sulavaksi pilleriksi ja korostaa aktiivista kieltä pehmeällä sinisellä taustan muuntumistehosteella.
✨ Paras: Nykyaikaiset teknologiayritykset, kuluttajasovellukset ja minimalistiset laskeutumissivut
/* Tyylittele pääkontinaineria */
.ml-switcher-container {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 50px !important;
padding: 4px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}
/* Tyylittele yksittäisiä pillerin muotoisia painikkeita */
.ml-switcher-btn {
color: #64748b !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 6px 16px !important;
border-radius: 50px !important;
transition: all 0.2s !important;
}
.ml-switcher-btn:hover {
background: #f8fafc !important;
color: #0f172a !important;
}
/* Aktiivinen kielitila */
.ml-switcher-btn.active {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
font-weight: 600 !important;
}4. "Tumma tekninen terminaali"
Tunnelma: Inspiroitunut kehittäjätyökaluista ja Web3-alustoista. Se käyttää korkean kontrastin tummaa teemaa, tyylikästä monospace-hybridifonttiasettelua ja hienovaraista sähkönsinistä hehkua hiirellä osoitettaessa.
✨ Parhaat käyttökohteet: Kehittäjädokumentaatio, Web3-projektit, kryptofoorumit ja pimeän tilan SaaS
/* Tyylittele pääkytkinpainiketta */
.ml-switcher-container {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 8px 16px !important;
color: #9ca3af !important;
font-family: 'Space Mono', monospace !important;
transition: all 0.3s ease !important;
}
.ml-switcher-container:hover {
border-color: #3b82f6 !important;
color: #f3f4f6 !important;
}
/* Tyylittele alasvetovalikkoa */
.ml-switcher-dropdown {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 6px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
/* Tyylittele yksittäisiä kielikohteita */
.ml-switcher-dropdown-item {
border-radius: 4px !important;
color: #6b7280 !important;
font-family: 'Space Mono', monospace !important;
font-size: 12px !important;
transition: all 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: rgba(59, 130, 246, 0.1) !important;
color: #e5e7eb !important;
}5. "Keskitetty fokus" -modaalikkuna (CSS-temppu)
Tunnelma: Inspiroitunut valtavista globaaleista brändeistä. Tämä loistava CSS-kikka pakottaa tavallisen pudotusvalikon irtoamaan ja laajenemaan koko näytön kokoiseksi, sumennetuksi päällekäiseksi kerrokseksi, jossa on keskitetyt kielikortit.
✨ Paras: Globaalit yritykset, massiivinen verkkokauppa, monimutkaiset ohjelmistopaketit
/* 1. Tyylittele päävalitsinpainike */
.ml-switcher-container {
background: #ffffff !important;
border: 1px solid #d1d5db !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
color: #374151 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.ml-switcher-container:hover {
background: #f9fafb !important;
}
/* 2. HACK: Muunna pudotusvalikko koko näytön kokoiseksi */
.ml-switcher-dropdown {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
/* Keskitä kohteet ruudun keskelle */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Poista oletuspudotusvalikon tyylit */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Tyylittele yksittäiset kielikohteet suuriksi modaalikorteiksi */
.ml-switcher-dropdown-item {
background: #ffffff !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
padding: 16px 24px !important;
margin: 6px 0 !important;
width: 90% !important;
max-width: 400px !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #111827 !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
transition: all 0.2s ease !important;
}
/* Hover-tila modaalikorteille */
.ml-switcher-dropdown-item:hover {
border-color: #3b82f6 !important;
color: #2563eb !important;
transform: translateY(-2px) !important;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.15) !important;
}
Helppo mukautusopas (ei-teknisille käyttäjille)
Haluatko muokata näitä malleja vastaamaan täydellisesti brändiäsi? Tässä yleisimmät muokkaukset, joita voit tehdä:
🎨 Värien muuttaminen
Etsi värikoodeja, kuten #3B82F6 tai rgba(59, 130, 246, 0.5). Korvaa nämä brändiväreilläsi.
Esimerkki: Muuta background: #3B82F6; to tausta: #FF6B6B; (brändiväri)
█️ Kokojen säätö
Muuta täyte, font-sizetai border-radius arvoja painikkeen suurentamiseksi tai pienentämiseksi.
Esimerkki: täyte: 8px 16px; → padding: 12px 24px; (suurempi painike)
✍️ Fonttien vaihtaminen
Päivitä font-family vastaamaan verkkosivustosi typografiaa.
Esimerkki: font-family: 'Inter'; → font-family: 'Roboto';
Parhaat käytännöt ja optimointivinkit
Testaa mobiililaitteilla
Esikatsele kielenvaihtajaa aina mobiililaitteilla ja tableteilla. Yli 60 % maailman verkkoliikenteestä on mobiililiikennettä.
Käytä korkeaa kontrastia saavutettavuuden parantamiseksi
Varmista, että tekstillä ja taustalla on riittävä värikontrasti (tavoittele 4,5:1 suhdetta) näkörajoitteisille käyttäjille.
Pidä animaatiot hienovaraisina
Näyttävät animaatiot voivat häiritä käyttäjiä. Pysy pehmeissä siirtymissä alle 0,3 sekunnissa.
Vältä ydintoimintojen ylikirjoittamista
Älä piilota valitsinta kokonaan tai tee siitä napsautuskelvotonta. Käyttäjien on päästävä siihen helposti.
Yhdistä verkkosivustosi teemaan
Valitse malli, joka täydentää nykyistä sivustoasi. Älä anna sen erottua kömpelösti.
Yleiset virheet, joita kannattaa välttää
Liian monien animaatioiden käyttäminen kerralla – se hidastaa sivustoasi
Fonttikokojen asettaminen alle 12 pikseliin – käyttäjät eivät voi lukea pientä tekstiä
Testaamatta jättäminen eri selaimissa (Chrome, Safari, Firefox)
Kopioi CSS:ää epäluotettavista lähteistä – käytä aina virallisia malleja
Varmuuskopion tallentamatta jättäminen ennen merkittäviä muutoksia
Suorituskykyvaikutus
Kaikki nämä CSS-mallit ovat erittäin kevyt eikä hidasta verkkosivustoasi. selain renderöi CSS:n välittömästi, ja nämä tyylit lisäävät sivun kokoon alle 2 kt.
Vertailun vuoksi 2 kilotavua on noin yhden emojin kokoinen. Verkkosivustosi nopeus ja SEO-sijoitukset pysyvät ennallaan. ✨
Huomautus: Nämä koodinpätkät kohdistavat oletuksen .ml-switcher-container ja .ml-switcher-btn luokkia. Muuta luokkien nimiä, jos käytät radikaalisti erilaista pohjamallia.