MultiLipi bietet über 20 integrierte Vorlagen für Sprachumschalter, damit Sie schnell loslegen können. Wenn Sie jedoch möchten, dass Ihr Sprachumschalter perfekt zur einzigartigen Ästhetik Ihrer Marke passt, können Sie unsere verwenden Benutzerdefiniertes CSS Funktion zum Überschreiben der Standardstile.
Klicken Sie in Ihrem Switcher-Editor einfach auf das CSS bearbeiten Schaltfläche oben auf dem Bildschirm und fügen Sie Ihren Code ein.
Um Sie zu inspirieren, hat unser Designteam 5 Premium-CSS-VorlagenKopieren Sie einfach die unten stehenden Code-Snippets und fügen Sie sie in Ihren benutzerdefinierten CSS-Editor ein!
Was ist benutzerdefiniertes CSS und warum sollten Sie es verwenden?
CSS (Cascading Style Sheets) ist die Designsprache, die steuert, wie Websites aussehen. 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 anzufassen.
Markenkonsistenz
Passen Sie Ihre exakten Markenfarben, Schriftarten und Stilrichtlinien an
Hervorstechen
Erstellen Sie einzigartige Designs, die Sie von der Konkurrenz abheben
Kein Entwickler benötigt
Kopieren und fügen Sie fertigen Code ein – 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 Ihren Einstellungen für den Sprachumschalter.
Klicken Sie auf die Schaltfläche " CSS bearbeiten"
Suchen Sie die Schaltfläche "Benutzerdefiniertes CSS" oben in der Benutzeroberfläche Ihres Switcher-Editors.
Wählen Sie Ihr 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-Editorbereich 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 sich Ihren Schalter live auf Ihrer Website an!
5 Premium Designvorlagen
Klicken Sie auf "Code kopieren", um das CSS sofort zu erhalten. Diese Snippets zielen auf die Standard- .ml-switcher-container und .ml-switcher-btn Klassen.
1. Die "Enterprise-Pille"
Der Vibe: Ein klassischer, informationsdichter Dropdown-Auslöser, der Vertrauen aufbaut. Er verwendet klare Ränder, weiche Schatten und dezente Hover-Interaktionen, um solide und professionell zu wirken.
✨ Am besten für: Unternehmenswebsites, B2B-SaaS, Finanzen und Gesundheitswesen
/* Stil des Hauptschalters */
.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;
}
/* Stil des Dropdown-Menüs */
.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;
}
/* Stil der einzelnen Sprachelemente */
.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 Serifentypografie und ohne Rahmen. Es setzt auf eine dezente, animierte Unterstreichung, um Interaktivität zu zeigen, ohne die Ästhetik der Website zu beeinträchtigen.
✨ Am besten für: High-Fashion, Luxusmarken, redaktionelle Magazine und Boutique-Portfolios
/* Alle Hintergrundcontainer entfernen */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Text-Buttons gestalten */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Gedämpftes Grau */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* Die animierte Unterstreichung */
.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 für: Moderne Tech-Startups, Consumer-Apps und minimalistische Landingpages
/* Stil für den Hauptcontainer-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;
}
/* Stil für die einzelnen Pillen-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;
}
/* Aktiver Sprachstatus */
.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 Entwickler-Tools und Web3-Plattformen. Es verwendet ein kontrastreiches dunkles Thema, ein schlankes Monospace-Hybrid-Schriftlayout und ein dezentes elektrisch-blaues Leuchten beim Überfahren mit der Maus.
✨ Am besten für: Entwicklerdokumentation, Web3-Projekte, Kryptoplattformen und Dark-Mode-SaaS
/* Stil des Haupt-Umschalters-Buttons */
.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;
}
/* Stil des Dropdown-Menüs */
.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;
}
/* Stil der einzelnen Sprachelemente */
.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. Dieser brillante CSS-Hack zwingt ein Standard-Dropdown, sich zu lösen und in ein Vollbild-Overlay mit zentrierten Sprachkarten zu erweitern.
✨ Am besten für: Globale Unternehmen, massiven E-Commerce, komplexe Software-Suiten
/* 1. Stilisiere den Hauptauslöserknopf */
.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. DER HACK: Verwandle das Dropdown in ein Vollbild-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;
/* Zentriere die Elemente in der Mitte des Bildschirms */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Entferne Standard-Dropdown-Stile */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Stilisiere die einzelnen Sprachelemente als große Modal-Karten */
.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-Zustand für die Modal-Karten */
.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;
}Einfache Anpassungsanleitung (für Nicht-Techniker)
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 oder rgba(59, 130, 246, 0.5). Ersetzen Sie diese durch Ihre Markenfarben.
Beispiel: Ändern Hintergrund: #3B82F6; zu Hintergrund: #FF6B6B; (Ihre Markenfarbe)
📏 Größen anpassen
Ändern padding, Schriftgröße, oder border-radius Werte, um den Button größer oder kleiner zu machen.
Beispiel: padding: 8px 16px; → Abstand: 12px 24px; (größerer Button)
✍️ Schriftarten ändern
Aktualisieren font-family passend zu Ihrer Website-Typografie.
Beispiel: font-family: 'Inter'; → font-family: 'Roboto';
Best Practices & Optimierungstipps
Auf Mobilgeräten testen
Vorschau Ihres benutzerdefinierten Switchers immer auf Mobiltelefonen und Tablets. Über 60 % des globalen Webverkehrs ist mobil.
Verwenden Sie hohen Kontrast für Barrierefreiheit
Stellen Sie sicher, dass Text und Hintergrund genügend 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 das Überschreiben von Kernfunktionalitäten
Verstecken Sie den Schalter nicht vollständig oder 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 Ihr bestehendes Website-Design ergänzt. Lassen Sie es nicht unpassend hervorstechen.
Häufige Fehler, die es zu vermeiden gilt
Zu viele Animationen gleichzeitig – das verlangsamt Ihre Website
Schriftgrößen unter 12px – Benutzer können winzigen Text nicht lesen
Vergessen, in verschiedenen Browsern zu testen (Chrome, Safari, Firefox)
Kopieren von CSS aus nicht vertrauenswürdigen Quellen – verwenden Sie immer offizielle Vorlagen
Kein Speichern eines Backups vor größeren Änderungen
Leistungsauswirkung
Alle diese CSS-Designs sind ultraleicht und wird Ihre Website nicht verlangsamen. CSS wird vom Browser sofort gerendert, und diese Stile fügen Ihrer Seitengröße weniger als 2 KB hinzu.
Zur Referenz: 2KB sind etwa so groß wie ein einzelnes Emoji. Die Geschwindigkeit Ihrer Website und Ihre SEO-Rankings bleiben unberührt. ✨
Hinweis: Diese Snippets zielen auf die Standardeinstellung ab .ml-switcher-container und .ml-switcher-btn Klassen ab. Passen Sie die Klassennamen an, wenn Sie eine radikal andere Basisschablone verwenden.