u-hide--mobile versteckt ein Element auf Smartphones, u-hide--desktop auf großen Bildschirmen. Als zusätzliche Klasse vergeben.
So gehst du vor
- Element oder Container anklicken, dessen Sichtbarkeit du steuern willst.
- Stil → Klassen: die Klasse zusätzlich zur bestehenden eintragen.
Beispiel: c-card u-hide--mobile — die Karte erscheint nur am Rechner.
Die Grenze
Umgeschaltet wird bei 768 Pixel Breite. Darunter gilt „mobil“, darüber „Desktop“. Tablets im Querformat zählen also zu Desktop.
Warum nicht die Elementor-Einstellung?
Elementor hat unter Stil → Layout → Anzeige eigene Schalter zum Ausblenden. Die funktionieren — sind aber eine Einstellung am einzelnen Widget statt einer Klasse. Der Wert steckt dann in der lokalen Klasse: Er gilt nur hier, taucht in keiner Übersicht auf und wird bei einer Layout-Änderung leicht übersehen. Mit einer Klasse steht dieselbe Entscheidung sichtbar im Klassen-Feld.
Mit der Klasse steht die Absicht sichtbar im Klassen-Feld — jeder, der die Seite später öffnet, sieht sie sofort.
Zwei Varianten desselben Inhalts
Manchmal braucht Mobil eine andere Reihenfolge oder eine kompaktere Fassung. Das Muster dafür: beide Varianten anlegen und jeweils die andere ausblenden.
| Element | Klassen |
|---|---|
| Ausführliche Tabelle | u-hide--mobile |
| Kompakte Liste derselben Daten | u-hide--desktop |
Im Editor sieht es anders aus
Die Elementor-Vorschau hat durch die Sidebar eine andere Breite als die fertige Seite. Ein u-hide--mobile-Element kann im Editor verschwinden, obwohl es live sichtbar ist. Prüfe immer auf der veröffentlichten Seite.