Nachdem Sie Standardblöcke hinzugefügt und konfiguriert haben, können Sie zusätzlich deren mobile Version bearbeiten. Klicken Sie dazu auf das Symbol für mobile Geräte in der Mitte des Seiteneditor-Fensters.

Wählen Sie im Dropdown-Menü die gewünschte Bildschirmgröße aus. Wenn Sie überprüfen möchten, wie die Seite auf einem bestimmten Gerät angezeigt wird, wählen Sie dieses Gerät oder die am besten passende Option im Abschnitt „Geräte“ aus.

Der Editor wechselt in den Mobilmodus, wodurch sich Blöcke leichter bearbeiten lassen.

Klicken Sie im Vorschaumodus auf das Symbol für das Mobilgerät und wählen Sie die gewünschte Bildschirmgröße aus.

Um die Editor-Oberfläche auszublenden, klicken Sie auf das Pfeilsymbol in der unteren linken Ecke oder neben „Bearbeiten“.

Um den Maßstab der Vorschau zu ändern, klicken Sie auf das Symbol „100 %“ und wählen Sie den gewünschten Wert aus dem Dropdown-Menü aus.

Klicken Sie auf das Stiftsymbol, um zum Editor zurückzukehren und Änderungen an den Blöcken vorzunehmen.

Jeder Block verfügt über eigene Einstellungen für Abstände und Typografie für die mobile Version. Je nach Block stehen möglicherweise auch zusätzliche Einstellungen für einzelne Elemente auf Mobilgeräten zur Verfügung. Diese Einstellungen sind in der Regel im Einstellungsbereich mit Hinweisen gekennzeichnet.

Ein Menüblock kann beispielsweise einen eigenen Einstellungsbereich hierfür haben.

In den Titelblöcken können die Einstellungen für die mobile Version mit einem Telefonsymbol gekennzeichnet sein.

Anpassen der Schriftgröße und des Zeilenabstands für mobile Geräte. Öffnen Sie in den Blockeinstellungen den Abschnitt „Typografie“, klicken Sie auf das Desktop-Symbol und geben Sie die Schriftgröße für die mobile Version in das Feld mit dem Symbol für mobile Geräte ein.

Der Zeilenabstand wird auf die gleiche Weise konfiguriert.

Anpassen des Eckenradius und des Außenabstands für Cover auf Mobilgeräten. In Blöcken der Kategorien „Cover“ und „Bild“ können Sie für Mobilgeräte einen separaten Wert für den Eckenradius oder den Außenabstand festlegen.

Um den Radius oder den Abstand zu ändern, klicken Sie auf „Einstellungen“ und suchen Sie das entsprechende Feld. Klicken Sie anschließend auf das Desktop-Symbol neben dem Feld und geben Sie den Wert für die Mobilversion ein.

Positionierung des Hintergrundbildes ändern. In Titelblöcken und anderen Blöcken, in denen diese Einstellung verfügbar ist, können Sie den Bildausschnitt auswählen, der im Block angezeigt werden soll.

Um die automatische Positionierung festzulegen, wählen Sie den entsprechenden Wert aus dem Dropdown-Menü aus, zum Beispiel „Zentriert“.

Um die Positionierung manuell festzulegen, klicken Sie auf das Symbol neben dem Feld.

Das Bild mit den Positionierungspunkten wird geöffnet. Sie können einen der vorgefertigten Punkte auswählen oder einen eigenen Punkt an der gewünschten Stelle setzen.

Mithilfe der Positionierung lässt sich die Darstellung des Hintergrundbildes in der mobilen Version so anpassen, dass dasselbe Bild auf verschiedenen Bildschirmen korrekt angezeigt wird.

Öffnen Sie in einem beliebigen Block die Einstellungen, klicken Sie auf das Symbol neben den Feldern „Abstand oben“ oder „Abstand unten“ und geben Sie den Wert für das Mobilgerät ein.

Wenn Sie möchten, dass bestimmte Blöcke auf Smartphones und Desktop-Computern unterschiedlich angezeigt werden, richten Sie den Sichtbarkeitsbereich ein.

Öffnen Sie die Blockeinstellungen und scrollen Sie nach unten zu „Sichtbarkeitsbereich auf Geräten“. Legen Sie fest, auf welchen Geräten der Block angezeigt werden soll. Speichern Sie anschließend die Einstellungen und veröffentlichen Sie die Seite erneut.

Sie können die Responsivität eines Blocks für verschiedene Geräte konfigurieren, indem Sie den Block mithilfe der entsprechenden Option in den Blockeinstellungen auf „ Zero Block “ umstellen. Diese Option ist derzeit in den meisten Blöcken verfügbar.

Nach der Konvertierung können Sie manuell festlegen, wie der Block in fünf verschiedenen Bildschirmbreitenbereichen dargestellt wird, oder eigene Bereiche hinzufügen. Weitere Informationen zur Einrichtung des responsiven Designs in „ Zero Block “ finden Sie in den Artikeln „ Zero Block: Erste Schritte“ und „ Zero Block: Responsives Design“.

Wenn Sie die responsive Darstellung deaktivieren, wird die Seite auf Mobilgeräten genauso angezeigt wie auf dem Desktop.

Um die responsive Version zu deaktivieren, gehen Sie zu „Seiteneinstellungen“ → „Zusätzliche Einstellungen“, wählen Sie „Responsive Darstellung für Mobilgeräte deaktivieren“ aus und veröffentlichen Sie die Seite erneut.