Responsive Design

Stelle sicher, dass die Inhalte und Designs deiner Landing Pages auf allen Endgeräten perfekt dargestellt werden.

Mathis Tomelzick avatar
Verfasst von Mathis Tomelzick
Vor über einer Woche aktualisiert

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

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.


Alle Geräte

Default

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.


Desktop

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


Notebook

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


Tablet

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


Mobile

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.


Beispiel: Grid für alle Geräte anpassen

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. 💪


Styles-Settings

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:

  • Spacings (Spacing 1–9, welche in den Komponenten-Settings ausgewählt werden können)

  • Form Elemente

  • Borders (Borders 1–5, die in den Komponenten-Settings ausgewählt werden können)

  • Text-Größen

  • Navigation

Spacings: Besonderheiten

💡 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“.


Weiterführende Informationen:

Hat dies Ihre Frage beantwortet?