Content-Management

Design-Anpassungen für Mobilgeräte

Überblick

In diesem Abschnitt werden die Funktionen zur Optimierung der Lesbarkeit und Responsiveness Ihrer Designs für mobile Geräte beschrieben. Obwohl die Standardeinstellungen des Editors auf eine universelle Nutzbarkeit abzielen, möchten Sie vielleicht einige Verhaltensweisen anpassen.

Nicht jedes Design profitiert von den Standardeinstellungen für Mobilgeräte. So kann beispielsweise das Stapeln von Spalten (siehe unten) Navigationsleisten oder andere einzigartige Designelemente verzerren. Daher sollten Sie Ihre Designs immer in der Vorschau anzeigen und auf verschiedenen Geräten testen.

Mobil-Design-Modus und mobil-Stile

Im Design-Editor können Sie zwischen dem Desktop-Designmodus (Standard) und dem mobilen Designmodus umschalten, der Ihr Design so anzeigt, wie es auf einem kleinen Handy-Bildschirm dargestellt würde. Im mobilen Modus wird der Inhaltsbereich des Editors auf einen festen Wert von 320 Pixel reduziert. Dieser Modus bietet einen grauen Hintergrund für bessere Sichtbarkeit, der jedoch nicht Teil des Designs ist. Sie können jederzeit zwischen Desktop- und Mobilmodus umschalten.

Einige Stileinstellungen können für Desktop- und mobile Clients unterschiedliche Werte haben. Im mobilen Designmodus sind diese mit dem Label (Mobil) im Seitenbereich gekennzeichnet. Wenn Sie einen solchen Wert im mobilen Modus ändern, bleibt der Wert im Desktop-Modus davon unberührt und es werden für jede Zielplattform unterschiedliche Werte zum Rendern des Elements verwendet.

Für diese Einstellungen sind mobil-Stile verfügbar:

• Ausrichtung
• Schaltflächen-Breite
• Abstände
• Höhe von Abstand-Elementen
• Textgröße

Umschalten zwischen Mobil- und Desktop-Modus

Voraussetzungen: Sie sehen ein Design im Editor.

1. Klicken Sie unten links im Design-Bereich auf (Mobil) oder auf (Desktop).
   → Der Modus wechselt. Der ausgewählte Modus wird blau hervorgehoben.

Stapeln von Spalten

Die Verwendung mehrerer Spalten nebeneinander funktioniert gut auf Desktop-Bildschirmen, kann aber auf kleineren mobilen Bildschirmen ein schwierig sein. Die Spaltenoption Stapeln (mobil) steuert, ob die Spalten auf Mobilgeräten übereinander statt nebeneinander angezeigt werden.

Die Option ist standardmäßig aktiviert, da sie in den meisten Fällen die Lesbarkeit verbessert. Wenn Stapeln (mobil) aktiviert ist, gibt es eine zusätzliche Option Stapelreihenfolge (mobil), mit der Sie die Stapelreihenfolge der Spalten in der mobilen Ansicht umkehren können.

Die standardmäßige vertikale Stapelung wird von vielen mobilen Browsern und E-Mail-Clients unterstützt. Im Allgemeinen wird empfohlen, die vertikale Stapelung für ein mobilfreundlicheres Layout zuzulassen. Einige E-Mail-Clients, die keine CSS-Unterstützung bieten, verwenden jedoch standardmäßig das Desktop-Layout.

Ausgeblendete Inhalte

Sie können jede Reihe oder jedes Inhaltselement sowohl auf mobilen als auch auf Desktop-Clients ausblenden. Wenn ein Inhalt in Ihrem aktuellen Design-Modus ausgeblendet ist, finden Sie ein augenförmiges Symbol neben dem Umschalter für den Designmodus. Dieses Symbol dient als Umschalter für die Sichtbarkeitseinstellung des Editors. Wenn es aktiviert ist, können Sie Inhalte sehen, die auf dem Gerätetyp, der Ihrem aktuellen Designmodus entspricht, ausgeblendet sind. Ausgeblendete Inhalte werden unscharf dargestellt. Um ausgeblendete Inhalte zu bearbeiten, wechseln Sie in den Design-Modus, in dem sie sichtbar sind.

Inhalte Ausblenden

Voraussetzungen: Sie sehen ein Design im Editor.

1. Wählen Sie eine Reihe oder ein Inhalteselement aus.
2. Finden Sie im Seitenbereich im Abschnitt Layout die Option Nicht sichtbar auf.
3. Um das ausgewählte Objekt auf Mobilgeräten auszublenden, klicken Sie auf (Mobil), um es auf Desktopgeräten auszublenden, klicken Sie auf (Desktop).
   → Die Sichtbarkeit ändert sich.

Wenn Sie ein Objekt auf einer Platform ausblenden, wird es automatisch auf der anderen Plattform sichtbar. Um es auf beiden Plattformen anzuzeigen, klicken Sie auf (nicht ausblenden).

Der Dateimanager

Überblick

Im Dateimanager werden Bilder gespeichert, die in Ihren Designs verwendet werden können. Sie können Bilder hochladen, die dann für alle ihre Designs verfügbar sind.

Mit dem Dateimanager können Sie:

• Ihre Dateien durchsuchen, suchen und sortieren
• Neue Dateien importieren
• Ordner erstellen
• Dateien in der Vorschau anzeigen
• Dateien zu Designs hinzufügen

Dateimanager öffnen

Es gibt zwei Möglichkeiten, den Dateimanager zu öffnen:

• Klicken Sie in einem leeren Bildelement auf die Schaltfläche Durchsuchen.
• Klicken Sie in einem Bildelement mit einem Bild auf die Schaltfläche Bild ändern im Seitenbereich.

Hochladen eines Bildes per Drag & Drop

Voraussetzungen: Sie sehen den Dateimanager.

1. Öffnen Sie auf ihrem lokalen System ein Datei-Explorer-Fenster.
2. Navigieren Sie zu der Datei, die Sie hochladen möchten.
3. Positionieren Sie das Explorer-Fenster und den Browser mit dem Dateimanager nebeneinander.
4. Ziehen Sie die lokale Datei auf das Browserfenster und lassen Sie es über der Liste der Dateien los.
   → Das Bild wird zu ihrer Bibliothek hinzugefügt.

Hochladen eines Bildes mit der Hochladen-Schaltfläche

Voraussetzungen: Sie sehen den Dateimanager.

1. Klicken Sie über der Liste der Dateien auf Hochladen.
2. Navigieren Sie zur gewünschten Datei und klicken Sie auf Öffnen (oder ähnlich, abhängig von ihrem Betriebssystem).
   → Das Bild wird zu ihrer Bibliothek hinzugefügt.

Bilder finden, anzeigen und Vorschau

Sie können Dateien in der Kachel- oder Listenansicht anzeigen. Um zwischen den Ansichten zu wechseln, verwenden Sie die Schaltflächen (Liste) und (Kacheln) über der Dateiliste. Klicken Sie auf die Spaltentitel oberhalb der Liste, um die Liste zu sortieren (dies funktioniert auch in der Kachelansicht). Um im aktuellen Ordner nach Dateinamen zu suchen, verwenden Sie das Feld Suche im Ordner. Um eine große Vorschau eines Bildes zu sehen, bewegen Sie den Mauszeiger über eine Bilddatei und klicken Sie auf (Vorschau).

Ein Bild löschen

Voraussetzungen: Sie sehen den Dateimanager.

1. Wenn Sie die Listenansicht nutzen, bewegen Sie den Mauszeiger über das Bild.
   → Die Schaltfläche (löschen) wird angezeigt.
2. Klicken Sie in der Zeile oder Kachel des bildes auf (löschen).
3. Bestätigen Sie, dass Sie das Bild dauerhaft löschen möchten.
   → Das Bild wird aus ihrer Bibliothek gelöscht.

Mehrere Bilder löschen

Voraussetzungen: Sie sehen den Dateimanager.

1. Markieren Sie alle Bilder, die Sie löschen möchten.
   → Die Schaltfläche Alle löschen erscheint über der Liste.
2. Klicken Sie auf Alle löschen.
3. Bestätigen Sie, dass Sie die Bilder dauerhaft löschen möchten.
   → Die Bilder werden aus ihrer Bibliothek gelöscht.

Ordner

Sie können Ordner nutzen, um ihre Bilder zu organisieren. Benutzen Sie die Schaltfläche (neuer Ordner) Über der Liste der Bilder, um einen Ordner zu erstellen. Ordnernamen dürfen aus folgenden Zeichen bestehen:

• Buchstaben
• Ziffern
• Leerzeichen
• Punkte
• Bindestrich/Minus
• Unterstrich.

Dateien können nicht von einem Ordner in einen anderen verschoben werden. Sie können nur aus Ordnern gelöscht werden.