Headerbild 4

Manchmal liegt der Focus nicht in der Mitte des Bildes, deshalb positionieren wir den Text hier frei im Bild. Mit den Prozentangaben im CSS könt ihr bestimmen wo dieser platziert wird.

Dieses Headerbild wird in voller Seitenbreite angezeigt. Wenn die Bildschirmbreite grösser ist als das Bild wird dieses auf die Seitenbreite skaliert. Der Text im Bild wird für kleinere Bildschirmbreiten etwas verkleinert. Achtet hierbei darauf das der Text auch am Handy noch gut lesbar ist.

Hier habe ich relativ viel Text verwendet. Da man zu viel Text am Smartphone nicht mehr lesbar im Bild darstellen kann wird dieser für die Mobile Ansicht ausgeblendet und unter dem Bild dargestellt.

• "Erweitert > Bilder" hier dein Bild Importieren

• Anschließend mit der Maus über das Bild fahren und auf das Zahnrad-Symbol klicken "Eigenschaften > Weiteres > Haken bei Bild schützen setzen".

• Anschließend mit der Maus über das Bild fahren und auf das Zahnrad-Symbol klicken "Mehr > Objekt-ID kopieren"

• Ersetze im Quelltext DEIN_BILD durch die kopierte Objekt-ID.
• Das "Widget > Quelltext erhält die "CSS-Klasse: zpBreakout" sowie das "Inline-CSS: margin-top: -85px". Den Wert -85px musst du je nach Layout noch anpassen.
• Für den Text der in der Mobilen Ansicht unter dem Bild eingeblendet werden soll erstellst du unter dem Bild einfach ein "Widget > Text" Dieser erhält die CSS-Klasse: header-text-mobile . Somit wirde dieser über einer Bildschirmbreite von 1080px ausgeblendet. Um den Artikel in ZP bearbeiten zu können wechsele mit der Taste "F8" in den Spaltenmodus oder ziehe einfach den Seitenbaum links so weit nach rechts bis der Artikel eingeblendet wird.