Externe Inhalte im Header

Manchmal möchte man externe Inhalte im Header darstellen. Sei es Google-Maps, Videos, Imagemaps oder wie in diesem Beispiel ein 360°Panorama.

Den wirklichen Header nutzen wir dazu nicht. Wir binden die Seite einfach per iFame ein, setzen den Artikel auf volle Breite und nutzen etwas CSS um den Header für die mobilen Ansichten zu skalieren.


Wir binden also den unten stehenden Quelltext per Widget > Quelltext ein. Um den Artikel auf volle Breite zu bekommen gehen wir im Widget auf das Mischpult ganz unten, dann auf mehr und geben als CSS-Klasse: zpBreakout an. Da es sich eigentlich um einen Inhaltsartikel handelt haben wir noch etwas Abstand nach oben. Deshalb geben wir als Inline-CSS: margin-top:-60px; an, je nach Layout muss dieser Wert eventuell angepasst werden.

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und gegebenenfalls anpassen.

📥 Download CSS-Code

Quelltext

Diesen Code per Widget > Quelltext einfügen und gegebenenfalls anpassen.

CSS-Klasse: zpBreakout
Inline-CSS: margin-top:-60px;

📥 Download Quelltext

support
Dutch English French German