Der Landing Pages Editor bietet dir viele Möglichkeiten, um deine Website auf allen Endgeräten perfekt darzustellen.

Die Komponenten sind so gebaut, dass sie auf schmaleren Bildschirmen automatisch brechen oder sich verkleinern. Deine Designs werden somit automatisch auf allen Devices angepasst. Dennoch kannst du auf jedes Endgerät separat zugreifen und hier Änderungen durchführen.

Hier findest du Einstellungen, die grundsätzlich immer zutreffen, wie z. B. Hintergrundfarben. Zusätzlich findest du hier Einstellungen, die man später in den Devices überschreiben kann, wie z. B. Spacings.

In dieser Kategorie befinden sich die Einstellungen für Geräte mit den größten Bildschirmen bis hin zu Standard Laptop-Bildschirmen.

Einstellungen aus dieser Kategorie beziehen sich auf kleinere Laptops, Bildschirme und einige große Tablet-Bildschirme.

Diese Einstellungen beziehen sich auf Tablets und einige große Handy-Bildschirme.

Alle Handy-Bildschirme, bis auf die größten, sind von diesen Einstellungen betroffen.

Beim Bearbeiten von Komponenten werden immer die allgemeinen Einstellungen und die Einstellungen der aktiven Gerätegruppe angezeigt. Um die Einstellungen anderer Gerätetypen zu bearbeiten, musst du in der oberen Menüleiste die aktive Gerätegruppe ändern.

Ein gängiger Anwendungsfall ist die Anpassung eines Grids bzw. die Breite des einzelnen Grid Items.

Ziel: Eine Auswahl von acht Bildern soll auf dem Desktop in zwei Reihen von jeweils vier Bildern dargestellt werden sollen. Auf Tablet-Geräten sollen dann vier Reihen mit je zwei Images dargestellt werden. In der mobilen Ansicht sollen alle acht Images mit einer Breite von 100 % untereinander dargestellt werden.

Umsetzung: Verwende zunächst ein Grid und lege darin acht Grid Items ab. In den Grid Items unter dem Einstellungspunkt „Item Size“ bekommt jedes Grid Item drei Spalten (Berechnung: 12 Spalten insgesamt / 4 Bilder pro Grid-Reihe = 3 Spalten).
​

Um anschließend die Verteilung der Grid Items für Tablets anzupassen, wechselst du zuerst in der oberen Menüleiste zur Tablet-Ansicht und anschließend in den Komponenten-Einstellungen vom Default-Settings-Tab in den Tablet-Settings-Tab. Unter „Item Size“ bekommt jedes Grid Item nun sechs Spalten. Jedes Grid Item hat nun eine Breite von 50 %.
(Berechnung: 12 Spalten insgesamt / 2 Bilder pro Grid-Reihe = 6 Spalten).
​

Denselben Schritt wiederholst du für die mobilen Devices. Die „Item Size“ wird hier auf 12 Spalten gesetzt, sodass mobil in einer Reihe nur ein Bild angezeigt wird.

Schließlich hast du ein Bilder-Grid, welches sich je nach Gerät anpasst. 💪

Für einige Komponenten müssen spezifische Anpassungen über das Styles-Menü vorgenommen werden. Das Styles-Menü befinden sich in der linken Sidebar.

Wenn du z. B. die Größe eines kleinen Buttons anpassen möchtest, gehe dazu in das Styles-Menü zu Button > Small. Danach wird das entsprechende Gerät ausgewählt, in dem man die Anpassung vornehmen will. Unter „Height“ und „Horizontal Spacing“ kann nun für jedes Gerät separat die Button-Größe bestimmt werden.

Generelle Anpassungen für Komponenten wie Buttons, die mehrere dieser Komponenten betreffen, sind in der Regel hier zu finden.

Weitere Beispiele für Anpassungen, die im Style-Menü vorgenommen werden, sind:

💡 Bei den Spacings gilt zu beachten, dass im Styles-Menü ein sogenannter Modifier für Notebook, Tablet und Mobile gesetzt ist. Dieser verkleinert das Spacing, das in Default gesetzt wird, um jeweils den definierten Faktor. Es hat aber keinen Einfluss auf Spacings, die in den Geräten gesetzt sind. Wenn dies nicht passieren soll, kannst du das Spacing entweder in den einzelnen Geräten überschreiben oder den Modifier für das entsprechende Gerät auf 1 setzen. Den Modifier findest du im Styles-Menü unter „Spacings“.