Zum Hauptinhalt springen

Mit Rasterelementen arbeiten

Jeder Seite Ihrer Website im LINKEN CMS können Sie eines von zwei Seitenlayouts zuweisen. Benötigen Sie auf einer Seite mehr Flexibilität in der Anordnung von Inhalten, arbeiten Sie mit Rasterelementen. Diese Inhaltselemente unterteilen einen Bereich auf der Seite in zwei, drei oder vier Spalten. Auf einer Seite können Sie beliebig viele Rasterelemente mit unterschiedlicher Spaltenzahl anlegen und mit anderen Inhaltselementen vermischen, so dass ein-, zwei-, drei- und vierspaltige Bereiche auf der Seite sich beliebig abwechseln.

Ein Rasterelement anlegen

Bevor Sie ein Rasterelement anlegen, stellen Sie ein einspaltiges Layout für die Seite ein. Rasterelemente können zwar in ein- und zweispaltigen Seitenlayouts angelegt werden, einspaltige Seitenlayouts eignen sich jedoch besser. Wechseln Sie in das Modul Seite und klicken Sie in der Hauptspalte auf + Inhalt um ein neues Inhaltselement zu erstellen. Klicken Sie in der Inhaltselementauswahl auf den Reiter Raster-Elemente. Dort entscheiden Sie sich für eines der drei möglichen Rasterelemente. Wir zeigen Ihnen die Arbeit mit Rasterelementen auf dieser Seite am Beispiel eines zweispaltigen Rasters.

Anlegen eines neuen Rasterelements
Das Backend des LINKEN CMS befindet sich im Modul Seite. Auf einer Seite namens Rasterelemente wird ein neues Inhaltselement angelegt. In der Auswahl für neue Inhaltselemente ist der Reiter Raster-Elemente ausgewählt.

Konfiguration des Rasterelements

Haben Sie ein Rasterelement angelegt, können Sie ihm eine Überschrift geben, müssen das aber nicht. Die Überschrift eines Rasterelements dient nur Ihrer Übersicht im Backend, sie wird nie im Frontend Ihrer Website ausgegeben. In unserem Beispiel erhält das Element die Überschrift Zwei Spalten.

Breite der Spalten

Im Bereich Erweiterungsoptionen entscheiden Sie, wie sich die Spalten des Rasterelements auf kleineren Bildschirmen verhalten sollen. Bei einem zweispaltigen Element sind im Reiter Desktop 50% Breite für die Spalten vorausgewählt. Treffen Sie in den anderen Reitern keine Auswahl, haben wir ein Standardumbruchverhalten für kleinere Bildschirme im System hinterlegt: auf dem Desktop und auf Grossen Bildschirmen befinden sich beide Spalten mit jeweils 50% Breite nebeneinander. Auch auf einem Tablet werden die beiden Spalten noch nebeneinander dargestellt. Auf einem Mobiltelefon werden sie dagegen auf die komplette Breite des Bildschirms gezogen und untereinander angezeigt.

Sie können die Breite der Spalten natürlich auch selbst bestimmen und beliebig kombinieren. Sie müssen also nicht 50%/50% auswählen, sondern können sich auch für 33%/66%25%/75% oder jede andere Kombination entscheiden, die zusammen 100% ergibt. Auf dem kleinen Bildschirm eines Smartphones werden sie dagegen oft nicht wollen, dass zwei, drei oder gar vier Spalten nebeneinander angezeigt werden. Wählen Sie für Smartphones deshalb z.B. für jede Spalte 100% Breite. Das bedeutet, dass die Inhalte der Spalten auf einem Smartphone die vollständige Breite des Bildschirms belegen und untereinander anstatt nebeneinander ausgegeben werden.

Die Erweiterungsoptionen eines Rasterelements
Das Bildschirmfoto zeigt die Erweiterungsoptionen eines zweispaltigen Rasterelements im Backend des LINKEN CMS

Spalten ausblenden

Sie können steuern, welche Inhalte auf welchem Bildschirm ausgegeben werden. Ist Ihre Seite z.B. sehr umfangreich und sie möchten, dass einige Inhalte auf Smartphones nicht ausgegeben werden, wählen Sie dazu im Reiter Smartphone an Stelle einer Breite für die Spalte die Option verstecken.

Höhe der Inhalte in den Spalten

Ein zweispaltiges Rasterelement mit der Option "Gleiche Höhe" im Frontend

Die Inhaltselemente in den Rasterelementen werden alle gleich hoch, wenn Sie im Reiter Weitere Optionen die Funktion Gleiche Höhe (nur bei einem Inhaltselement pro Spalte!) aktivieren. Inhalte mit geringer Höhe werden dabei denen mit größerer Höhe angepasst. Das funktioniert natürlich nur, wenn Sie die Inhalte mit einem Rahmen ausstatten.

Inhalte im Rasterelement platzieren

Ist das Rasterelement angelegt, sehen Sie im Modul Seite in der Hauptspalte ein neues Element, in dem sich zwei Spalten in einem blauen Rahmen befinden. In beiden Spalten können Sie beliebige Inhaltselemente anlegen. Befinden sich bereits Inhalte auf einer Seite, auf der sich auch Rasterelemente befinden, können Sie die Inhaltselemente per Drag and Drop auf der Seite verschieben oder kopieren.

Zweispaltiges Rasterelement im Seitenmodul

Geräte simulieren

Möchten Sie testen, wie Ihre Seite auf unterschiedlich großen Bildschirmen aussieht, müssen Sie diese verschiedenen Geräte nicht zur Hand haben. Die meisten Browser unterstützen eine Vorschau für verschiedene Bildschirmgrößen bzw. Geräte.

Chrome und Firefox

In beiden Browsern öffnet die Tastenkombination Strg + Umschalt + M auf Windows-Systemen bzw. Alt + Cmd + M in macOS einen Modus, in dem Sie Ihre Seite für die Bildschirmgrößen verschiedener Geräte testen können. Dabei sind üblicherweise einige iPhone- , iPad- oder Samsung Galaxy Varianten vordefiniert.

Safari

In Safari müssen Sie zuerst das Menü Entwickler aktivieren. Öffnen Sie dazu die Safari-Einstellungen, rufen Sie den Reiter Erweitert auf und aktivieren Sie die Option Menü "Entwickler" in der Menüleiste anzeigen. Jetzt können Sie mit der Tastenkombination Ctrl + Cmd + R jederzeit den Modus Responsive Design aktivieren.