Responsive: Inhalte abhängig nach Endgerät anzeigen

Erklärung

Wird VereinOnline auch als Webseite genutzt, sehen Inhalte unter Umständen auf dem Desktop gut, auf dem Handy aber nicht so gut aus. Vielleicht sind sie auch für den mobilen Einsatz gar nicht gemacht. Beispielsweise weil der Inhalt zu lang ist. Oder aber Sie möchten, dass der Webseiten-Besucher mobil nach unten scrollen kann, auf dem Desktop die Inhalte aber auf Seiten aufgeteilt sind um diese über Menüpunkte zu öffnen.

Um diese Anforderungen zu realisieren, können Sie bestimmen, auf welchem Endgerät Inhalte angezeigt werden oder nicht.

Damit eröffnen sich auch für den Einsatz von VereinOnline als Webseite neue Möglichkeiten.

Beispiel

Ein Webpart auf der Startseite soll mobil aber nicht auf dem Desktop angezeigt werden.
Hierfür tragen Sie „hidden-lg“ in das Feld [CSS Class] des entsprechenden Webparts ein.

Wichtig: Ausgeblendet heißt nicht ausgeblendet!
Für Administratoren wäre es natürlich fatal, wenn diese ausgeblendete Inhalte nicht mehr sehen würden. Wählen Sie für die Sichtbarkeit im Dropdown-Menü der Webparts „Alle Webparts anzeigen (unabhängig von CSS-Klasse)“. Ist kein Eintrag vorhanden, wird dieses Untermenü nicht angezeigt…

Weitere Classes finden Sie hier oder unter w3schools

ClassesExtra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)
.visible-xs-*VisibleHiddenHiddenHidden
.visible-sm-*HiddenVisibleHiddenHidden
.visible-md-*HiddenHiddenVisibleHidden
.visible-lg-*HiddenHiddenHiddenVisible
.hidden-xsHiddenVisibleVisibleVisible
.hidden-smVisibleHiddenVisibleVisible
.hidden-mdVisibleVisibleHiddenVisible
.hidden-lgVisibleVisibleVisibleHidden