Bannerbereich einfügen

Mit Hilfe des Partial area.html können auch ganz leicht weitere Bereiche eingefügt werden. Das Layout soll beispielsweise einen Bannerbereich erhalten, welcher ganz oben auf der Seite angezeigt werden soll. Ist Ihre Website für mehrere Sprachen ausgelegt können Sie in diesem Bereich zum Beispiel eine Sprachauswahl platzieren.

1. Bannerbereich in die Seitenvorlage einfügen

Fügen Sie in der Seitenvorlage default.html nach dem Wrapper-Block den neuen Bannerbereich:

Markup

<!-- Banner -->
<div class="clearfix">
		
	<$ if ( page.anyAreaArticles("Banner") || (system.preview && system.showEmptyPreviewAreas) ) { $>
		<div id="banner">
			<$= system.partial("area.html", "Banner", "4") $>
		</div>
	<$ } $>
		
<!-- End Banner -->
</div>

Die If-Abfrage bewirkt, dass der Bannerbereich nur angezeigt wird, wenn mindestens ein Widget im Bereich vorhanden oder die Einfügen-Ansicht aktivieren ist.

Das Partial area.html weist Zeta Producer an, den Bereich Banner auszugeben. Der Anwender kann in diesem Bereich maximal 4 Spalten erstellen, also vier Widgets nebeneinander anordnen.

2. Bannerbereich in der JSON-Datei der Seitenvorlage deklarieren

In der JSON-Datei der Seitenvorlage default.json müssen Sie einen weiteren Bereich mit dem name Banner einfügen. Diese Deklaration ist nötig, damit Zeta Producer den Inhaltsbereich kennt und eine entsprechende Benutzeroberfläche für die Bearbeitung zur Verfügung stellen kann.

JSON

{
    "areas": [
        { "name": "Standard" },
        { "name": "Header" },
        { "name": "News" },
        { "name": "Banner" }
    ]
}

3. CSS für den Bannerbereich anpassen

Fügen Sie in der Datei styles.css einen CSS-Stil für den Banner ein:

CSS

#banner {
	margin-bottom: 10px;
}

3. Inhalt in den Bannerbereich einfügen

Fügen Sie wie im Online-Handbuch beschrieben Inhalt in den leeren Bannerbereich ein auf der Startseite ein.

Beispielinhalt

Deutsch | English | Français

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 wird im Bannerbereich ganz oben auf der Seite die Sprachauswahl angezeigt.