Design-Editor-Grundlagen

  • Aktualisiert

Überblick über die Benutzeroberfläche

Sie erreichen den Landingpage-Editor, indem Sie eine neue Landingpage erstellen oder indem Sie eine existierende Landingpage öffnen (siehe Einführung und die Seite Landingpages).

lpe.png

Auf der linken Seite befindet sich der Seitenbereich, in dem Sie Elemente hinzufügen und ihre Einstellungen bearbeiten können. Auf der rechten Seite befindet sich der Design-Bereich, in dem Sie Elemente anordnen und Inhalte hinzufügen können. Das Objekt, über dem der Mauszeiger schwebt (hier eine Zeile mit einem Bild), wird durch einen hellblauen Rahmen hervorgehoben. Das ausgewählte Objekt (hier ein Textelement) wird durch einen dunkelblauen Rahmen hervorgehoben.

Die im Seitenbereich angezeigten Optionen ändern sich, wenn Sie auf die Registerkarten im oberen Bereich des Seitenbereichs klicken. Sie ändern sich auch, um die entsprechenden Optionen anzuzeigen, wenn Sie ein Objekt im Design-Bereich auswählen. Es gelten die folgenden Regeln:

  • Um die Standardoptionen im Seitenbereich anzuzeigen (nicht bezogen auf bestimmte Inhalte im Design-Bereich), klicken Sie auf einen der Tab-Titel über dem Seitenbereich.
  • Um Reihenspezifische Optionen zu sehen, wählen Sie die Reihe aus, indem Sie im Design-Bereich links oder rechts in der Reihe auf einen leeren Bereich klicken.
  • Um Optionen für ein Inhaltselement zu sehen, wählen Sie das Element aus, indem Sie es im Design-Bereich anklicken.

Sie können den Seitenbereich ausblenden, indem Sie den Mauszeiger darauf positionieren und auf den Pfeil im blauen Kreis neben den Tab-Überschriften klicken. Klicken Sie erneut darauf, um die Seitenleiste wieder einzublenden.

Grundlegende Aktionen im Editor

Vorschau eines Designs anzeigen

Voraussetzungen: Sie sehen den Design-Editor.

  1. Klicken Sie oben rechts im Editor auf Vorschau.
    → Das Design wird im Vorschaumodus angezeigt.
  2. Um das Aussehen des Designs auf unterschiedlichen Geräten oder im dunklen Modus zu beurteilen, ändern Sie die Einstellungen im Bereich Vorschaumodus über der Vorschau.
  3. Um den Vorschaumodus zu verlasen, klicken Sie erneut auf Vorschau.

Ein Design speichern

Voraussetzungen: Sie sehen den Design-Editor.

  1. Klicken Sie oben links im Editor auf Speichern.

Den Editor schließen

  1. Klicken Sie oben links im Editor auf den Pfeil neben der Schaltfläche Schließen.
    → Ein dropdown-Menü erscheint.
  2. Klicken Sie entweder auf  Speichern und schließen oder auf Schließen ohne zu speichern.
    → Sie sehen die Liste auf der Seite Landingpages.

Verwendung von Reihen und Inhaltselementen

Grundlagen

Designs im Editor bestehen aus zwei Arten von Objekten:

  • Reihen sind horizontale Bereiche, die in mehrere Spalten aufgeteilt werden können. Sie bestimmen das Layout eines Designs. Jede Reihe oder Spalte kann Inhaltselemente enthalten.
  • Inhaltselemente sind Objekte, die den Inhalt eines Designs aufnehmen. Sie enthalten meist Text, Bilder oder andere Arten von Inhalten. Trenner und Abstände sind Inhaltselemente, die nur zu Layout-Zwecken dienen.

Alle Objekte haben Eigenschaften, die ihren Stil und einige andere Einstellungen (z. B. Kommentare) festlegen. Diese Eigenschaften sind im Seitenbereich sichtbar, wenn ein Objekt ausgewählt ist.

Ein Objekt hinzufügen

Voraussetzungen: Sie sehen den Design-Editor.

  1. Klicken Sie im Seitenbereich mit der linken Maustaste auf ein Element und halten Sie die Maustaste gedrückt.
  2. Ziehen Sie das Element an eine passende Stelle im Design-Bereich.
    → Eine blaue Markierung zeigt mögliche Positionen für das Element an.
  3. Lassen Sie die Maustaste los.
    → Das neue Element wird zum Design hinzugefügt.

Eine Reihe auswählen

Voraussetzungen: Sie sehen ein Design im Design-Editor.

  1. Klicken Sie im Design-Bereich auf eine leere Fläche links oder rechts in der Reihe.
    → Die ausgewählte Reihe wird mit einem Rahmen markiert und ihre Eigenschaften werden im Seitenbereich angezeigt.

Ein Inhaltselement auswählen

Voraussetzungen: Sie sehen ein Design im Design-Editor.

  1. Klicken Sie im Design-Bereich auf das Element.
    → Das ausgewählte Element wird mit einem Rahmen markiert und seine Eigenschaften werden im Seitenbereich angezeigt.

Ein Objekt bewegen

Voraussetzungen: Sie sehen ein Design im Design-Editor.

  1. Wählen Sie das Objekt aus.
  2. Klicken Sie auf dem Rahmen des Objekts auf designarea_button_move.png (Bewegen) und halten Sie die Maustaste gedrückt.
  3. Ziehen Sie das Objekt an eine neue Stelle und lassen Sie die Maustaste los.

Ein Objekt löschen

Voraussetzungen: Sie sehen ein Design im Design-Editor.

  1. Wählen Sie das Objekt aus.
  2. Klicken Sie im Seitenbereich auf sidepanel_button_delete.png (löschen).
    → Das ausgewählte Objekt wird gelöscht.

Ein Objekt duplizieren

Voraussetzungen: Sie sehen ein Design im Design-Editor.

  1. Wählen Sie das Objekt aus.
  2. Klicken Sie im Seitenbereich auf sidepanel_button_duplicate.png (duplizieren).
    → Ein Duplikat des ausgewählten Objekts wird zum Design hinzugefügt.

Rückgängig machen, wiederherstellen und Verlauf

Überblick

Die Funktionen Rückgängig, Wiederherstellen und Verlauf bieten Ihnen ein Sicherheitsnetz für Änderungen, mit dem Sie in Ihrem Bearbeitungsverlauf vor und zurück navigieren können.

Benutzeroberfläche

Wenn Sie eine Änderung an Ihrem Entwurf vornehmen, wird in der rechten unteren Ecke des Entwurfsbereichs ein Verlaufs-Widget angezeigt. Dieses Widget hat drei Schaltflächen:

  • designarea_history_undo.png (Rückgängig): Ein Schritt zurück im Bearbeitungsverlauf.
  • designarea_history_redo.png (Wiederholen): Wiederholt eine rückgängig gemachte Aktion.
  • designarea_history_list.png (Verlauf): Öffnet eine Liste mit den jüngsten Änderungen.

Aktionen rückgängig machen und wiederholen

Voraussetzungen: Sie sehen ein Design im Design-Editor. Sie haben in der aktuellen Sitzung etwas geändert.

  1. Klicken Sie im Verlaufs-Widget auf designarea_history_undo.png (Rückgängig) oder designarea_history_redo.png (wiederholen).
    → Das Design ändert sich.

Verlauf benutzen

Kontext: Das Verlaufs-Widget speichert bis zu 15 der jüngsten Änderungen in der aktuellen Browser-Sitzung.

Voraussetzungen: Sie sehen ein Design im Design-Editor. Sie haben in der aktuellen Sitzung etwas geändert.

  1. Klicken Sie im Verlaufs-Widget auf designarea_history_list.png (Verlauf).
    → Eine Liste zeigt ihre jüngsten Aktionen. Die neueste Aktion steht oben.
  2. Klicken Sie auf eine Aktion in der Liste.
    → Das Design wird auf diesen Zeitpunkt im Verlauf zurückgesetzt. Das Objekt, das mit der gewählten Aktion geändert wurde, wird automatisch ausgewählt, um die Änderung zu diesem Zeitpunkt hervorzuheben.
  3. Klicken Sie erneut auf  designarea_history_list.png (Verlauf), um die Liste zu schließen.