Headerbereich anpassen

Das Header-Widget in Zeta Producer ist mit Werten verknüpft, die bei den mitgelieferten Basis-Layouts in den Varianten enthalten sind. Da bei einem eigenen Layout keine Varianten vorhanden sind, werden diese Werte in der Datei layout.json gespeichrt.

Im Beispiel-Layout ist das Partial header.html für den Headerbereich in der Seitenvorlage default.html bereits vorhanden.

Markup

<$ if ( page.anyAreaArticles("Header") || (system.preview && system.showEmptyPreviewAreas) ) { $>
	<$= system.partial("header.html", "Header") $>
<$ } $>

Die If-Abfrage bewirkt, dass der Headerbereich nur angezeigt wird, wenn auch ein Header-Widget im Bereich vorhadnen oder die Einfügen-Ansicht aktivieren ist.

1. Header-Werte anpassen

Für das aktuelle Beispiel soll die Höhe der Header-Bilder auf 400 Pixel geändert werden. Enthält das Header-Widget mehrere Bilder, sollen diese beim Aufruf der Seite in einer zufälligen Reihenfolge erscheinen.

Folgende Werte sind in der Datei layout.json für den Header definiert:

  • header-image-width Breite der Header-Bilder
  • header-image-height Höhe der Header-Bilder
  • header-image-area Name des Headerbereichs (diesen Wert bitte nicht ändern)
  • header-navicons Richtungs-Pfeile zum Durchblättern
  • header-pagination Visualisierung der Anzahl der Header-Bilder
  • header-randomize Zufällige Anzeige der Header-Bilder
  • smootHeight Animation der Header-Höhe

Passen Sie die Werte folgendermaßen an:

JSON

{
    "values": [
        {
            "uniqueID": "header-image-width",
            "value": 900
        },
        {
            "uniqueID": "header-image-height",
            "value": 400
        },
        {
            "uniqueID": "header-image-area",
            "value": "Header"
        },
        {
            "uniqueID": "header-navicons",
            "value": true
        },
        {
            "uniqueID": "header-pagination",
            "value": true
        },
        {
            "uniqueID": "header-randomize",
            "value": true
        },
        {
            "uniqueID": "smootHeight",
            "value": true
        }
    ]
}

2. CSS für den Header anpassen

In der Datei styles.css sind bereits CSS-Stile für den Header vorhanden. Für das Beispiel soll die Ausgabe der Bild-Beschreibung und der Visualisierung header-pagination farblich noch etwas angepasst werden:

CSS

.flexslider {
	margin-bottom: 40px !important;
}
.flex-caption {
	width: 860px;
	padding: 20px;
	position: absolute;
	bottom: 0;
	color: #ffffff;
	background-color: rgba(0,0,0,0.5);
}
.flex-caption h1,
.flex-caption h2,
.flex-caption h3 {
	margin: 0 0 5px;
	font-size: 1.5em;
	color: #45b202;
}
.flex-caption p {
	margin: 0;
}
.flex-control-nav {
	bottom: -30px;
}
.flex-control-nav li {
	margin: 0 2px;
}
.flex-control-nav a {
	background: #cbcbcb !important;
}
.flex-control-nav a:hover {
	background: #ababab !important;
}
.flex-control-nav a.flex-active {
	background: #45b202 !important;
}

3. Header in das Beispiel-Projekt einfügen

Fügen Sie wie im Online-Handbuch beschrieben, das Header-Widget in das Beispiel-Projekt mit mindestens zwei Header-Bildern und passenden Bild-Beschreibungen ein. Sie können den Header auch von der Startseite (Wurzelseite) aus auf alle Seiten des Projekts vererben.

4. Aktuelle Darstellung des Layouts

Wechseln Sie nun wieder in Zeta Producer. Da der Entwickler-Live-Modus aktiviert ist, sind die Anpassungen am Layout sofort sichtbar.

Wie Sie sehen werden die Header-Bilder mit einer Höhe von 400 Pixel angezeigt. Wenn Sie in zeta Producer auf Vorschau klicken, wird beim Aufruf der Seite ein Zufallsbild angezeigt.