MultiLipi bietet über 20 integrierte Sprachumschalter-Vorlagen, damit Sie schnell loslegen können. Wenn Sie jedoch möchten, dass Ihr Sprachumschalter perfekt zum einzigartigen Stil Ihrer Marke passt, können Sie unseren verwenden Benutzerdefiniertes CSS Funktion zum Überschreiben der Standardstile.
Klicken Sie in Ihrem Switcher Editor einfach auf Edit CSS Schaltfläche oben auf dem Bildschirm und fügen Sie Ihren Code ein.
Um Ihnen Inspiration zu geben, hat unser Designteam 5 Premium-CSS-VorlagenKopieren Sie einfach die unten stehenden Code-Snippets und fügen Sie sie in Ihren Custom CSS-Editor ein!
Was ist Custom CSS und warum sollten Sie es verwenden?
CSS (Cascading Style Sheets) ist die Designsprache, die das Aussehen von Websites steuert. Stellen Sie es sich als "Make-up und Kleidung" für Ihre Website vor. Mit benutzerdefiniertem CSS können Sie Farben, Formen, Animationen, Schatten und mehr ändern – ohne komplexen Code anfassen zu müssen.
Markenkonsistenz
Passen Sie Ihre exakten Markenfarben, Schriftarten und Stilrichtlinien an
Hervorstechen
Erstellen Sie einzigartige Designs, die Sie von der Konkurrenz abheben
Kein Entwickler erforderlich
Fertigen Code kopieren und einfügen – keine Programmierkenntnisse erforderlich
SEO-freundlich
Alle Designs sind für Leistung und Barrierefreiheit optimiert
So wenden Sie diese Designs an (Schritt für Schritt)
Öffnen Sie Ihren Switcher Editor
Melden Sie sich bei Ihrem MultiLipi-Dashboard an und navigieren Sie zu den Einstellungen Ihres Sprachumschalters.
Klicken Sie auf die Schaltfläche " CSS bearbeiten"
Suchen Sie die Schaltfläche „Benutzerdefiniertes CSS“ oben in Ihrer Umschaltflächen-Editor-Oberfläche.
Wählen Sie Ihr gewünschtes Design aus
Scrollen Sie nach unten zu den Designvorlagen und klicken Sie auf die Schaltfläche "Code kopieren" bei Ihrem bevorzugten Stil.
Code einfügen
Fügen Sie den kopierten CSS-Code in den Custom CSS-Editor ein.
Anpassen (Optional)
Passen Sie Farben, Größen oder Schriftarten an Ihre Marke an. Wir erklären gängige Anpassungen unten.
Speichern & Vorschau
Klicken Sie auf „Änderungen speichern“ und sehen Sie Ihre Umschaltfläche live auf Ihrer Website in der Vorschau an!
5 Premium Designvorlagen
Klicken Sie auf "Code kopieren", um den CSS-Code sofort zu erhalten. Diese Snippets zielen auf die Standardeinstellungen ab .ml-switcher-container und .ml-switcher-btn Klassen.
1. Der „Enterprise Pill“
Der Vibe: Ein klassischer, informationsreicher Dropdown-Auslöser, der darauf ausgelegt ist, Vertrauen aufzubauen. Er verwendet klare Ränder, weiche Schatten und subtile Hover-Interaktionen, um solide und professionell zu wirken.
✨ Am besten für: Unternehmenswebsites, B2B-SaaS, Finanzen und Gesundheitswesen
/* 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. Der "Editorial Text" Inline
Der Vibe: Minimalistisches, textzentriertes Design mit eleganter Serifenschrift und ohne Ränder. Es setzt auf eine dezente, animierte Unterstreichung, um Interaktivität zu signalisieren, ohne die Ästhetik der Website zu beeinträchtigen.
✨ Am besten für: High-Fashion, Luxusmarken, redaktionelle Magazine und Boutique-Portfolios
/* Remove all background containers */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Style the text buttons */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Muted grey */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* The Animated Underline */
.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. Die "Dynamic Island"
Der Vibe: Ein Mobile-First-Design, das den Schalter als schlanke Pille gestaltet und die aktive Sprache mit einem sanften blauen Hintergrund-Morphing-Effekt hervorhebt.
✨ Am besten geeignet für: Moderne Tech-Startups, Consumer-Apps und minimalistische Landingpages
/* 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. Das "Dark Tech Terminal"
Der Vibe: Inspiriert von Entwicklertools und Web3-Plattformen. Es verwendet ein kontrastreiches dunkles Thema, ein schlankes Monospace-Hybrid-Schriftlayout und einen dezenten elektrisch blauen Schimmer beim Hover.
✨ Am besten für: Entwicklerdokumentation, Web3-Projekte, Kryptoplattformen und SaaS im Dark-Mode
/* 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. Das „Zentrierte Fokus“-Modal (CSS-Hack)
Der Vibe: Inspiriert von riesigen globalen Marken. Dieses brillante CSS-Hack zwingt ein Standard-Dropdown dazu, sich zu lösen und sich zu einem Vollbild-Overlay mit zentrierten Sprachkarten zu erweitern, das mit Unschärfe versehen ist.
✨ Am besten für: Globale Unternehmen, massives E-Commerce, komplexe Software-Suiten
/* 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;
}Einfacher Anpassungsleitfaden (für nicht-technische Benutzer)
Möchten Sie diese Designs perfekt an Ihre Marke anpassen? Hier sind die gängigsten Anpassungen, die Sie vornehmen können:
🎨 Farben ändern
Suchen Sie nach Farbcodes wie #3B82F6 or rgba(59, 130, 246, 0.5). Ersetzen Sie diese durch Ihre Markenfarben.
Beispiel: Ändern background: #3B82F6; to background: #FF6B6B; (Ihre Markenfarbe)
📏 Größen anpassen
Änderung padding, font-size, oder border-radius Werte, um die Schaltfläche größer oder kleiner zu machen.
Beispiel: padding: 8px 16px; → padding: 12px 24px; (größerer Button)
✍️ Schriftarten ändern
Aktualisieren font-family passend zur Typografie Ihrer Website.
Beispiel: font-family: 'Inter'; → font-family: 'Roboto';
Best Practices & Optimierungstipps
Test auf Mobilgeräten
Vorschau Ihres benutzerdefinierten Switchers immer auf Mobiltelefonen und Tablets. Über 60 % des globalen Webverkehrs ist mobil.
Hoher Kontrast für Barrierefreiheit
Stellen Sie sicher, dass Text und Hintergrund einen ausreichenden Farbkontrast aufweisen (streben Sie ein Verhältnis von 4,5:1 an) für Benutzer mit Sehbehinderungen.
Animationen dezent halten
Auffällige Animationen können Benutzer ablenken. Bleiben Sie bei sanften Übergängen unter 0,3 Sekunden.
Vermeiden Sie die Überschreibung der Kernfunktionalität
Verstecken Sie den Switcher nicht vollständig und machen Sie ihn nicht unklickbar. Benutzer müssen leicht darauf zugreifen können.
Passen Sie das Design Ihrer Website an
Wählen Sie ein Design, das zum Design Ihrer bestehenden Website passt. Lassen Sie es nicht unpassend hervorstechen.
Häufige Fehler, die es zu vermeiden gilt
Zu viele Animationen auf einmal verwenden – das verlangsamt Ihre Website
Schriftgrößen unter 12px festlegen – Benutzer können winzigen Text nicht lesen
Das Testen in verschiedenen Browsern (Chrome, Safari, Firefox) vergessen
Kopieren von CSS aus nicht vertrauenswürdigen Quellen – verwenden Sie immer offizielle Vorlagen
Keine Sicherung vor größeren Änderungen speichern
Leistungsauswirkung
Alle diese CSS-Designs sind ultraleicht und wird Ihre Website nicht verlangsamen. CSS wird sofort vom Browser gerendert, und diese Stile fügen Ihrer Seitengröße weniger als 2 KB hinzu.
Zur Referenz: 2KB ist ungefähr die Größe eines einzelnen Emojis. Die Geschwindigkeit Ihrer Website und Ihre SEO-Rankings bleiben unberührt. ✨
Hinweis: Diese Snippets zielen auf die Standardeinstellungen ab .ml-switcher-container und .ml-switcher-btn Klassen. Passen Sie die Klassennamen an, wenn Sie eine radikal andere Basisvorlage verwenden.