Slider im Header bei mob Ansicht durch ein einzelnes Bild ersetzen

• Gebe dem Slider die CSS-Klasse: head-slider
• Importiere dein Bild für die Mobile Ansicht in die Bildverwaltung.
• Bild > Eigenschaften > Weiteres > Bild schützen
• Bild > Mehr > Objekt-ID kopieren und diese im Win-Editor zwischenlagern

Einstellungen > CSS:

<style>
.head-mobile {
width: 100%;
position: relative;
}
.head-mobile img {
width: 100%;
display: block;
}
@media (max-width: 379px) {.head-slider {display: none;}}
@media (min-width: 380px) {.head-mobile {display: none;}}
</style>

Direkt unter dem Slider Widget > Quelltext mit folgendem Inhalt:

<div class="head-mobile">
<img src="oid://image/deinbild">
</div>

• Den Teil oid://image/deinbild austauschen mit der Objekt-ID aus dem Win-Editor.
• Der Artikel bekommt die CSS-Klasse: zpBreakout und das Inline-CSS: margin-top:-2em
• Das margin-top:-2em musst du je nach Layout-Einstellungen noch anpassen.
• Das Widget Quelltext lässt sich anschließend nur über die Spalten-Ansicht aufrufen.

Ich frage mich ja immer, warum sollte ein Teil der Information einer Website für einen Besucher mit einem Tablett interessant sein, für einen Besucher mit einem Smartphone aber nicht? Warum stellt man abhängig vom Gerät unterschiedliche Inhalte bereit?

Da hast du natürlich grundsätzlich recht.

Aber:

1. Mit dem Smartphone ist man oft mit Mobilen Daten unterwegs. Hier ist es der Performance sicher zuträglich wenn anstatt vieler großer Bilder nur ein kleines geladen werden muss.
2. Von einem Breitbild-Format welches am Desktop (bei Randlos) gut aussieht kann man am Smartphone in der Regel nicht mehr viel erkennen. Hier macht es Sinn ein anderes Format zu wählen. In den Headern der neueren Layouts ist das auch super gelöst. Dies macht allerdings nur Sinn wenn der Focus der Bilder in der Mitte liegt. Blende ich ein neues Bild ein kann ich den Fokus selbst bestimmen.

PS: zu1. Viele kleine Bilder der Originale wären natürlich auch prima. Bildergrößen