Eine Smart-Slider-Überschrift soll auf einem breiten Desktop groß und präsent wirken, auf dem Smartphone aber weder winzig noch abgeschnitten sein. Der häufigste Fehler ist, nur eine Desktop-Schriftgröße einzustellen und zu erwarten, dass Smart Slider daraus automatisch auf jedem Gerät die ideale Typografie berechnet.
Smart Slider arbeitet geräteabhängig
Smart Slider 3 besitzt eigene Responsive-Funktionen für Layer. Entscheidend ist, ob dein Text als Default Layer oder Absolute Layer angelegt ist und welche Responsive-Einstellungen aktiv sind.
Die offizielle Dokumentation weist darauf hin, dass die Textgröße grundsätzlich auf den Geräten gleich bleibt und über Text Scale gerätespezifisch angepasst werden kann.
Text Scale ist der zentrale Regler
Wenn die Überschrift auf Mobil zu groß oder zu klein wirkt, solltest du nicht sofort mit externem CSS beginnen. Prüfe zuerst den Text Scale-Wert des Layers in der jeweiligen Geräteansicht.
Vorgehen:
- Smart-Slider-Editor öffnen.
- Gewünschte Folie auswählen.
- Headline-Layer anklicken.
- Responsive-/Geräteansicht auf Tablet oder Mobile umstellen.
- Text Scale für dieses Gerät anpassen.
Dadurch bleibt die Grundtypografie konsistent, während die Darstellung auf kleineren Bildschirmen angepasst wird.
Warum sich die Schriftgröße im Editor manchmal scheinbar nicht ändert
Wenn du einen Zahlenwert änderst, aber in der mobilen Vorschau kaum einen Unterschied siehst, kann das an mehreren Faktoren liegen:
- Text Scale überschreibt beziehungsweise beeinflusst die Darstellung.
- Der Layer hat eine feste Breite.
- Die Überschrift bricht früher um.
- eine globale Typografie oder CSS-Regel greift ein.
- du bearbeitest den falschen Gerätezustand.
Darum nicht nur die Font Size anschauen, sondern immer Layerbreite und Text Scale gemeinsam prüfen.
Default Layer versus Absolute Layer
Smart Slider unterscheidet grob zwischen Layern im normalen Layoutfluss und frei positionierten Layern.
Default Layer: verhält sich eher wie ein normales Website-Element. Es beeinflusst Höhe und Anordnung der umliegenden Inhalte.
Absolute Layer: kann frei positioniert werden und liegt unabhängig vom normalen Layout. Das bietet mehr gestalterische Freiheit, erhöht aber das Risiko von Überlappungen auf kleinen Bildschirmen.
Für Text möglichst Default Layer bevorzugen
Für normale responsive Überschriften ist ein Default Layer häufig robuster. Der Text kann umbrechen und das Layout kann seine Höhe anpassen.
Absolute Layer sind sinnvoll, wenn der Text exakt an einer Bildposition sitzen muss. Dann muss die mobile Position jedoch bewusst getestet werden.
Textbreite ist genauso wichtig wie Font Size
Eine große Überschrift wirkt auf Mobil oft deshalb zu klein, weil der Layer nur einen kleinen Teil der verfügbaren Breite nutzt. Prüfe:
- Layerbreite
- Padding links/rechts
- Spaltenbreite
- maximale Breite
Wenn unnötig viel Innenabstand vorhanden ist, kann der Text früher umbrechen und Smart Slider muss stärker skalieren.
Padding auf Mobil reduzieren
Gerade in Content-/Default-Layouts ist zu viel seitlicher Innenabstand eine häufige Ursache. Auf dem Desktop wirken 40 oder 60 Pixel elegant, auf dem Smartphone können sie einen großen Teil der nutzbaren Breite auffressen.
In der mobilen Ansicht sollte Padding deshalb separat kontrolliert und gegebenenfalls reduziert werden.
Zeilenumbrüche bewusst steuern
Eine Headline wie „Professioneller DJ für Hochzeiten und Events in Thüringen“ kann auf Desktop in zwei Zeilen perfekt aussehen und auf Mobil in vier oder fünf unschöne Zeilen zerfallen.
Dann gibt es mehrere Möglichkeiten:
- Textbreite erhöhen.
- Text Scale reduzieren.
- eine kürzere mobile Textfassung verwenden.
- bewussten Zeilenumbruch setzen.
Eigener Text für Mobilgeräte
Smart Slider erlaubt laut aktueller Dokumentation bei Text-Layern einen separaten mobilen Text. Das ist sehr hilfreich, wenn nicht nur die Größe, sondern auch die Formulierung angepasst werden soll.
Beispiel:
Desktop: „Professionelle mobile Diskothek für Hochzeiten und Events“
Mobil: „DJ für Hochzeiten & Events“
So bleibt die Botschaft lesbar, ohne die Desktop-Headline künstlich kurz zu halten.
Separate mobile Texte nicht leer lassen
Wenn der mobile Text aktiviert wird, aber leer bleibt, kann der Layer auf Mobil verschwinden. Deshalb nur aktivieren, wenn tatsächlich ein eigener Text eingetragen wird.
Geräteansichten richtig verwenden
Smart Slider bietet Desktop-, Tablet- und Mobile-Ansichten. Änderungen sollten in jeder Ansicht kontrolliert werden.
Das Ziel ist nicht, für jedes Smartphone-Modell eine eigene Pixelgröße zu definieren, sondern drei robuste Layoutzustände zu bauen.
clamp() nicht als erste Lösung
CSS clamp() ist für responsive Typografie grundsätzlich sehr nützlich, aber innerhalb eines Smart-Slider-Layers oft nicht die erste Wahl. Smart Slider besitzt bereits eigene Responsive-Mechanismen.
Erst wenn Text Scale und Layerbreite nicht ausreichen, kann eigenes CSS sinnvoll sein.
Wann eigenes CSS sinnvoll wird
Zum Beispiel, wenn eine Überschrift auf kleinen Screens bewusst größer werden soll als im engen Desktop-Grid oder wenn du sehr spezielle Breakpoints benötigst.
Dann ist eine eigene Klasse am Layer sauberer als globale Regeln für alle Smart-Slider-Überschriften.
CSS nur gezielt anwenden
Eine globale Regel wie .n2-ss-layer { font-size: ... !important; } kann viele andere Slider-Elemente zerstören. Verwende stattdessen eine eindeutige Klasse nur für die betreffende Headline.
Theme-CSS kann Smart Slider überschreiben
Wenn die Schriftgröße trotz korrekter Slider-Einstellungen nicht reagiert, untersuche den Layer mit den Browser-Entwicklertools. Suche nach Regeln mit font-size, line-height oder !important.
Ein WordPress-Theme oder zusätzliches Custom CSS kann die Slider-Typografie stärker überschreiben als erwartet.
Line-height ebenfalls responsiv prüfen
Bei großen Headlines ist nicht nur die Schriftgröße wichtig. Zu große Zeilenhöhe erzeugt auf Mobil riesige Lücken; zu kleine Zeilenhöhe lässt Buchstaben kollidieren.
Als Ausgangspunkt funktioniert häufig eine Zeilenhöhe zwischen etwa 1.0 und 1.2 für große Überschriften, abhängig von Schriftart und Design.
Mehrzeilige Headline nicht zu breit machen
Auf sehr breiten Desktop-Slidern muss der Text nicht zwingend die volle Bildschirmbreite nutzen. Eine begrenzte maximale Breite erhöht Lesbarkeit und sorgt für kontrollierte Umbrüche.
Mobile Vorschau ist nicht das echte Smartphone
Die Geräteansicht im Editor ist hilfreich, ersetzt aber keinen echten Test. Öffne die veröffentlichte Seite zusätzlich auf einem Smartphone und drehe das Gerät einmal in Hoch- und Querformat.
Browserleisten, tatsächliche Viewport-Größe und Schrift-Rendering können sich von der Editorvorschau unterscheiden.
Performance und Webfonts
Wenn eine Webfont spät lädt, kann sich die Überschrift nachträglich verschieben. Eine Ersatzschrift hat andere Zeichenbreiten und erzeugt möglicherweise andere Zeilenumbrüche.
Deshalb Webfonts lokal und performant laden beziehungsweise sicherstellen, dass die verwendeten Schnitte wirklich vorhanden sind.
Empfohlener Workflow
- Desktop-Headline sauber gestalten.
- Layerbreite und Padding sinnvoll begrenzen.
- Tabletansicht öffnen und Text Scale prüfen.
- Mobile Ansicht öffnen und Text Scale anpassen.
- Zeilenhöhe kontrollieren.
- Bei Bedarf mobilen Text verwenden.
- Erst danach eigenes CSS ergänzen.
- Auf echtem Smartphone testen.
Fazit
Eine responsive Smart-Slider-Headline entsteht nicht nur durch eine kleinere mobile Schriftgröße. Entscheidend sind Text Scale, Layerbreite, Padding, Umbruch und Layer-Typ. Smart Slider bietet dafür bereits gerätespezifische Werkzeuge. Wer zunächst diese Funktionen sauber nutzt und erst danach zu CSS greift, erhält deutlich stabilere Slider auf Desktop und Smartphone.