MultiLipi tarjoaa yli 20 sisäänrakennettua kielivalitsinmallia, joiden avulla pääset nopeasti alkuun. Jos kuitenkin haluat kielivalitsimesi vastaavan täydellisesti brändisi ainutlaatuista ilmettä, voit käyttää Mukautettu CSS -toimintoamme oletustyylien ohittamiseen.
Napsauta valitsinmuokkaimessa yksinkertaisesti Muokkaa CSS:ää -painiketta näytön yläreunassa ja liitä koodisi.
Innoitukseksi suunnittelutiimimme on luonut 5 premium-tason CSS-mallia. Kopioi vain alla olevat koodinpätkät ja liitä ne Mukautettu CSS -muokkaimeen!
Mikä on mukautettu CSS ja miksi sitä kannattaa käyttää?
CSS (Cascading Style Sheets) on suunnittelukieli, joka hallitsee verkkosivustojen ulkoasua. Ajattele sitä verkkosivustosi "meikkinä ja vaatetuksena". Mukautetun CSS:n avulla voit muuttaa värejä, muotoja, animaatioita, varjoja ja paljon muuta – ilman monimutkaisen koodin koskettamista.
Brändin yhtenäisyys
Vastaa tarkasti brändisi värejä, fontteja ja tyyliohjeita
Eotu joukosta
Luo ainutlaatuisia malleja, jotka erottavat sinut kilpailijoista
Kehittäjää ei tarvita
Kopioi ja liitä valmis koodi – koodausosaamista ei vaadita
SEO-ystävällinen
Kaikki mallit on optimoitu suorituskyvyn ja saavutettavuuden osalta
Näin sovelletaan näitä malleja (Vaihe vaiheelta)
Avaa vaihtimen muokkain
Kirjaudu sisään MultiLipi-hallintapaneeliisi ja siirry kielivalitsimen asetuksiin.
Napsauta " Edit CSS" -painiketta
Etsi Mukautettu CSS -painike vaihtimen muokkaimen käyttöliittymän yläosasta.
Kopioi valitsemasi malli
Vieritä alas alla oleviin mallipohjiin ja napsauta suosikkityylisi "Copy Code" -painiketta.
Liitä koodi
Liitä kopioitu CSS-koodi Mukautettu CSS -muokkauspaneeliin.
Mukauta (Valinnainen)
Säädä värejä, kokoja tai fontteja vastaamaan brändiäsi. Selitämme yleiset mukautukset alla.
Tallenna ja esikatsele
Napsauta "Tallenna muutokset" ja esikatsele vaihtajaa livenä verkkosivustollasi!
5 premium-suunnittelumallia
Napsauta "Kopioi koodi" saadaksesi CSS:n välittömästi. Nämä snippetit kohdistuvat oletusarvoisiin .ml-switcher-container ja .ml-switcher-btn luokkiin.
1. "Enterprise Pill"
Tunnelma: Klassinen, informaatiotiheä pudotusvalikon käynnistin, joka on suunniteltu rakentamaan luottamusta. Se käyttää selkeitä reunoja, pehmeitä varjoja ja hienovaraisia hover-interaktioita tuntuen vankalta ja ammattimaiselta.
✨ Parhaiten sopii: Yrityssivustot, B2B SaaS, rahoitus ja terveydenhuolto
/* Style the main toggle button */
.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;
}
/* Style the dropdown menu */
.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;
}
/* Style the individual language items */
.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 ei lainkaan reunoja. Se luottaa hellävaraiseen, animoituun alleviivaukseen osoittaakseen interaktiivisuutta häiritsemättä sivuston estetiikkaa.
✨ Parhaiten sopii: Huippumuoti, luksusbrändit, toimitukselliset lehdet ja boutique-portfoliot
/* Poista kaikki taustasäiliöt */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Tyylittele tekstipainikkeet */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Himmeä 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: Mobiilikeskeinen muotoilu, joka muotoilee vaihtimen tyylikkääksi pilleriksi korostaen aktiivista kieltä pehmeällä, sinisellä taustaa muovaavalla tehosteella.
✨ Sopii parhaiten: Modernit teknologiastartupit, kuluttajasovellukset ja minimalistiset aloitussivut
/* Style the main container wrapper */
.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;
}
/* Style the individual pill buttons */
.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;
}
/* Active Language State */
.ml-switcher-btn.active {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
font-weight: 600 !important;
}4. "Tumma teknologiaterminaali"
Tunnelma: Kehittäjätyökalujen ja Web3-alustojen inspiroima. Se käyttää korkean kontrastin tummaa teemaa, tyylikästä monilevyistä fonttiasettelua ja hienovaraista sähkönsinistä hehkua osoitettaessa.
✨ Sopii parhaiten: Kehittäjädokumentaatio, Web3-projektit, kryptosovellukset ja tumman tilan SaaS
/* Style the main toggle button */
.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;
}
/* Style the dropdown menu */
.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;
}
/* Style the individual language items */
.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 kohdistus" -modaali (CSS-kikka)
Tunnelma: Massiivisten globaalien brändien inspiroima. Tämä nerokas CSS-kikka pakottaa tavallisen pudotusvalikon irtoamaan ja laajenemaan koko näytön kokoiseksi, sumennetuksi peittokuvaksi keskitetyillä kielikorteilla.
✨ Sopii parhaiten: Globaalit yritykset, massiivinen verkkokauppa, monimutkaiset ohjelmistokokonaisuudet
/* 1. Style the main trigger button */
.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. THE HACK: Turn the dropdown into a full-screen overlay */
.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;
/* Center the items in the middle of the screen */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Remove default dropdown styling */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Style the individual language items as large modal cards */
.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 state for the modal cards */
.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 brändiäsi täydellisesti? Tässä ovat yleisimmät tekemäsi mukautukset:
🎨 Värien vaihtaminen
Etsi värikoodeja, kuten #3B82F6 or rgba(59, 130, 246, 0.5). Korvaa nämä brändisi väreillä.
Esimerkki: Muuta background: #3B82F6; to background: #FF6B6B; (brändisi väri)
📏 Kokojen säätäminen
Muuta padding, font-size, tai border-radius arvoja tehdäksemme painikkeesta suuremman tai pienemmän.
Esimerkki: padding: 8px 16px; → padding: 12px 24px; (isompi 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 mukautettu kytkin aina matkapuhelimilla ja tableteilla. Yli 60 % globaalista verkkoliikenteestä on mobiilia.
Käytä korkeaa kontrastia saavutettavuuden takaamiseksi
Varmista, että tekstin ja taustan välillä on riittävä värikontrasti (tavoittele 4.5:1-suhdetta) näkövammaisille käyttäjille.
Pidä animaatiot hillittyinä
Näyttävät animaatiot voivat häiritä käyttäjiä. Pysy pehmeissä siirtymissä, jotka ovat alle 0,3 sekuntia.
Vältä ydinominaisuuksien ohittamista
Älä piilota vaihtajaa kokonaan tai tee siitä klikkaamatonta. Käyttäjien on päästävä siihen helposti käsiksi.
Sovita verkkosivustosi teemaan
Valitse muotoilu, joka täydentää olemassa olevaa sivustosi suunnittelua. Älä tee siitä häiritsevän erottuvaa.
Yleiset vältettävät virheet
Liian monen animaation käyttäminen kerralla – se hidastaa sivustoasi
Fonttikokojen asettaminen alle 12 px – käyttäjät eivät voi lukea pientä tekstiä
Unohdetaan testata eri selaimilla (Chrome, Safari, Firefox)
CSS:n kopioiminen epäluotettavista lähteistä – käytä aina virallisia malleja
Varmuuskopion tallentamatta jättäminen ennen suuria muutoksia
Suorituskykyvaikutus
Kaikki nämä CSS-mallit ovat erittäin kevyitä eivätkä ne hidasta verkkosivustoasi. Selain渲染oi CSS:n välittömästi, ja nämä tyylit lisäävät sivusi kokoon alle 2 kt.
Vertailun vuoksi 2 kt on suurin piirtein yhden emojin kokoinen. Verkkosivustosi nopeus ja SEO-sijoitukset pysyvät ennallaan. ✨
Huomautus: Nämä koodinpätkät kohdistuvat oletusarvoiseen .ml-switcher-container ja .ml-switcher-btn luokkia. Säädä luokkien nimiä, jos käytät radikaalisti erilaista pohjapohjaa.