Frontend Layout Beispiele

Die Spaltenabmessungen werden durch die Stilvorlage des Themas bestimmt. Einige Themes wenden eine feste Pixelbreite auf das Seitenlayout an, während andere Themes Prozentwerte verwenden, um die Seite an die Breite des Fensters oder des Geräts anzupassen.

Die meisten Desktop-Themen haben eine feste Breite für die Hauptspalte, und alle Aktivitäten finden innerhalb dieses eingeschlossenen Bereichs statt. Je nach Bildschirmauflösung gibt es auf jeder Seite der Hauptspalte einen leeren Bereich.

Eine Spalte

Bei einem einspaltigen Layout erstreckt sich der Inhaltsbereich über die gesamte Breite der Hauptspalte. Dieses Layout wird häufig für eine Homepage mit einem großen Banner oder Slider verwendet oder für Seiten, die keine Navigation erfordern, wie z. B. eine Anmeldeseite, eine Splash-Seite, ein Video oder eine ganzseitige Anzeige.

Beispiel für einspaltiges Layout

Zwei Spalten mit linker Leiste

Der Inhaltsbereich dieses Layouts ist in zwei Spalten unterteilt. Die Spalte mit dem Hauptinhalt schwebt nach rechts, die Seitenleiste nach links.

Beispiel für zwei Spalten mit linker Leiste

Zwei Spalten mit rechter Leiste

Dieses Layout ist ein Spiegelbild des anderen zweispaltigen Layouts. Diesmal schwebt die Seitenleiste auf der rechten Seite und die Spalte mit dem Hauptinhalt auf der linken Seite.

Beispiel für zwei Spalten mit rechter Leiste

Drei Spalten

Ein dreispaltiges Layout hat einen Hauptinhaltsbereich mit zwei Seitenspalten. Die linke Seitenleiste und die Hauptinhaltsspalte werden zusammen umbrochen und schweben als eine Einheit nach links. Die andere Seitenleiste schwebt auf der rechten Seite.

Beispiel für drei Spalten