Lesen Sie diesen Artikel, um mehr über Haltepunkte zu erfahren. Erfahren Sie, wie Sie Objekte für responsives Layout pinnen und skalieren und Text in Haltepunkten formatieren.

Hinweis:

Adobe Muse wird nicht mehr um neue Funktionen ergänzt und der Support wird am 26. März 2020 eingestellt. Detaillierte Informationen und Unterstützung erhalten Sie auf der Seite zum Ende der Produktlebensdauer von Adobe Muse.

Bei einem responsiven Design ist ein einzelnes Layout von Objekten und Text möglicherweise nicht für alle Bildschirmgrößen geeignet. Bilder, Text, Widgets und Formulare können an verschiedenen Haltepunkten neu positioniert werden. Die Rahmen können die Seitenbreite überschreiten, Objekte können sich überlagern oder die Klarheit des Textes kann beeinträchtigt werden. Bilder, Text, Widgets und Formulare müssen an verschiedenen Haltepunkten neu positioniert werden. Das sorgfältige Anordnen von Objekten und Formatieren von Text ist daher entscheidend, damit das Layout in verschiedenen Bildschirmgrößen korrekt ist. 

Nachdem Sie Ihre Seite gestaltet haben, können Sie den Regler verwenden, um Ihr Layout in verschiedenen Bildschirmgrößen in der Vorschau anzuzeigen. Wenn Sie die Objekte bei bestimmten Browserbreiten unterschiedlich anordnen müssen, können Sie Haltepunkte hinzufügen.

Lesen Sie weiter, um mehr über Haltepunkte sowie darüber zu erfahren, wie Sie Ihr Layout effizient im responsiven Layout in Adobe Muse gestalten können.

Was sind Haltepunkte?

Haltepunkte in einem responsiven Layout entsprechen den verschiedenen Browserbreiten in Pixeln. Mithilfe der Haltepunkte können Sie das Design für verschiedene Browserbreiten anzeigen und prüfen, wie die Objekte auf einer Seite auf Änderungen der Browserbreite reagieren.

Hinzufügen von Haltepunkten

Standardmäßig enthält eine neue Site in Adobe Muse Haltepunkte für Desktops (Pixelbreite: 960). Sie können damit beginnen, Ihr Layout für diese Breite zu gestalten. Wenn Sie das Design fertiggestellt haben, können Sie sich mithilfe des Reglers das Layout per Vorschau in verschiedenen Breiten ansehen. Dabei können Sie die Breite sehen und speichern, bei der das Design „umbricht“. Beispielsweise werden aus einer Textzeile zwei, oder Bilder, die in einer Zeile standen, werden vertikal angeordnet. Dies sind die Breiten, für die zusätzliche Haltepunkte gebraucht werden. Nachdem Sie die erforderlichen Haltepunkte hinzugefügt haben, können Sie das Design so einstellen, dass die Objekte ansprechend angeordnet werden.

Am Backend fügt Adobe Muse für jeden Haltepunkt eine entsprechende Medienabfrageerklärung auf Ihrer Webseite hinzu. Bei Medienabfragen handelt es sich um ein CSS3-Modul, über das das Rendern von Inhalten an verschiedene Bildschirmgrößen angepasst werden kann. Die meisten modernen Browser können die Medienabfragen diesen Haltepunkten entsprechend interpretieren. Wenn Benutzer Ihre Webseite auf mehreren Geräten anzeigen lassen, werden die am besten geeignete Medienabfrage und das entsprechende Design-Layout vom Browser ausgewählt und dem Benutzer angezeigt.

  1. Ziehen Sie den Regler auf der Haltepunktleiste und platzieren Sie ihn an der Stelle, an der Sie den Haltepunkt hinzufügen möchten.

  2. Klicken Sie auf der Haltepunktleiste auf . Beachten Sie, dass ein neuer Haltepunkt auf der Haltepunktleiste hinzugefügt wird. Auch die Browserbreite des Haltepunkts wird angezeigt.

    Fügen Sie nach Bedarf Haltepunkte auf der Haltepunktleiste hinzu, um bestimmte Browserbreiten festzulegen.

    Wenn Sie auf einen Haltepunkt klicken, wird der aktive Haltepunkt mit Farbe gefüllt. Die anderen Haltepunkte sind abgeblendet.

    Hinweis:

    Sie können Haltepunkte auch hinzufügen, indem Sie Bibliothekselemente mit Haltepunkten in der Entwurfsansicht platzieren. Öffnen Sie das Bedienfeld „Bibliothek“, wählen Sie das Objekt aus, das Sie einfügen möchten, klicken Sie auf das Pluszeichen (+) neben dem Objekt und ziehen Sie das Objekt in die Entwurfsansicht.

Wo sollte ich Haltepunkte hinzufügen?

Sie können Haltepunkte zu Musterseiten oder zu einzelnen Seiten hinzufügen. Wenn Sie einer einzelnen Seite Haltepunkte hinzufügen, werden die Haltepunktwerte nur auf diese Seite angewendet.

Wenn Sie Haltepunkte auf einer Musterseite hinzufügen, können Sie beliebige dieser Haltepunkte auf den einzelnen Seiten anwenden. Die Haltepunkte aus den Musterseiten werden als kleine Dreiecke auf den einzelnen Seiten angezeigt. Klicken Sie einfach auf das Pluszeichen (+), um diese Haltepunkte auf den einzelnen Seiten zu aktivieren.

Haltepunkte auf Musterseiten
Klicken Sie auf das Pluszeichen (+), um Haltepunkte auf Musterseiten hinzuzufügen.

Betrachten Sie das folgende Szenario: Wenn Sie Ihre Website erstellen, empfiehlt es sich, bestimmte Haltepunkte für Smartphones hinzuzufügen. Sie können geeignete Haltepunkte auf der Masterseite hinzufügen, sodass sie auf den einzelnen Seiten verfügbar sind. Wenn Sie das Layout der einzelnen Seiten weiterbearbeiten, können Sie diese Haltepunkte auf den betreffenden Seiten mit nur einem Mausklick anlegen.

Hinweis:

Wenn Sie eine neue Musterseite auf eine Seite anwenden, werden die Haltepunkte aus der alten Musterseite durch die Haltepunkte aus der neuen Musterseite ersetzt.

Bearbeiten von Haltepunkten

  1. Ziehen Sie auf der Haltepunktleiste den Regler zum gewünschten Haltepunktwert. Dies ist die geänderte Platzierung des Haltepunkts.

  2. Wenn Sie in der Bildformatfarbe für die anzeigen oder bearbeiten möchten, klicken Sie mit der rechten Maustaste auf den Haltepunkt und wählen Sie „Haltepunkt-Eigenschaften“ oder doppelklicken Sie auf den Haltepunkt.

    Sie können in diesem Fenster auch die Haltepunktfarbe sowie die Werte für Seitenbreite, -höhe und -ränder ändern.

    Haltepunkteigenschaften für die Anzeige und Bearbeitung von Haltepunktfarben und Rändern
    Mithilfe des Haltepunkteigenschaften-Dialogfelds können Sie die Haltepunktfarbe und -werte ändern.

  3. Klicken Sie auf „OK“, um Ihre Änderungen zu speichern.

Hinweis:

Sie können die Haltepunkte auf der Musterseite nicht von den einzelnen Seiten aus bearbeiten.

Löschen von Haltepunkten

  1. Sie haben folgende Möglichkeiten, um Haltepunkte zu löschen:

    • Klicken Sie auf der linken Seite des aktiven Haltepunkts auf „X“.
    • Klicken Sie mit der rechten Maustaste auf die Haltepunktleiste und wählen Sie „Haltepunkt löschen“.

    Wenn Sie einen Haltepunkt löschen, werden die entsprechenden Layout-Änderungen und die Texteinstellungen für den Haltepunkt ebenfalls gelöscht.

    Löschen von Haltepunkten
    Klicken Sie auf das x-Symbol, um den Haltepunkt zu löschen.

    Löschen von Haltepunkten durch Rechtsklick
    Klicken Sie mit der rechten Maustaste und löschen Sie die gewünschten Haltepunkte.

    Hinweis:

    Sie können einen Haltepunkt auf der Musterseite nicht von einer einzelnen Seite aus löschen.

Wechsel zwischen Haltepunkten

Von dort können Sie auf die nächste oder vorhergehende Haltepunkte verschieben. Wenn Sie zum vorherigen oder nächsten Haltepunkt aufzurufen, führen Sie einen der folgenden Schritte durch:

  • Windows-Benutzer: 
    • Vorheriger Haltepunkt, drücken Sie Strg + Umschalt + 5
    • Nächster Haltepunkt, drücken Sie Strg + Umschalt + 6
  • Mac OS-Benutzer:
    • Vorheriger Haltepunkt: Drücken Sie Strg + Umschalt + 5
    • Nächster Haltepunkt: Drücken Sie Strg + Umschalt + 6

Arbeiten mit Objekten in einem responsiven Layout

Sie können die folgenden Optionen verwenden, um sicherzustellen, dass das Layout an allen Haltepunkten korrekt aussieht:

  • Ein-/Ausblenden von Objekten: Sie können ein Objekt optional in einem Haltepunkt aus- und in einem anderen Haltepunkt einblenden. Weitere Informationen finden Sie unter Ein- oder Ausblenden von Objekten.
  • Unterschiedliches Positionieren von Objekten in verschiedenen Haltepunkten: Sie können ein einzelnes Objekt an verschiedenen Positionen in verschiedenen Haltepunkten platzieren. Weitere Informationen finden Sie unter Positionieren von Objekten im responsiven Webdesign.
  • Verwenden responsiver Verankerung: Sie können festlegen, welche Objekte statisch und welche variabel sein sollen. Sie können die statischen Objekte verankern, damit sie an allen Haltepunkten an der gleichen Position verbleiben. Weitere Informationen finden Sie unter Verankern von Objekten.
  • Ändern der Größe von Objekten: Sie können verschiedene Objektgrößen für jeden einzelnen Haltepunkt festlegen. Sie können auch festlegen, dass die Größe eines Objekts basierend auf der Breite der Seite automatisch angepasst wird. Weitere Informationen zur Größenänderung von Objekten finden Sie unter Ändern der Größe von Objekten.
  • Formatieren von Text für verschiedene Haltepunkte: Sie können Text in verschiedenen Haltepunkten unterschiedlich formatieren, um die Klarheit und Lesbarkeit des Textes bei verschiedenen Browserbreiten zu erhöhen. Weitere Informationen finden Sie unter Formatieren von Text in responsiven Layouts.

Ein- oder Ausblenden von Objekten

Betrachten Sie das folgende Szenario: Sie haben ein herkömmliches Menü für einen Desktop eingefügt. Dieses Menü benötigt jedoch auf einem Tablet-Bildschirm zu viel Raum. Für Tablets empfiehlt sich daher ein Sandwich- oder ein Akkordeon-Menü.

Solche Fälle können beim Entwerfen von Websites in Adobe Muse problemlos berücksichtigt werden. Sie können für Desktops ein herkömmliches und für Tablets ein Sandwich-Menü wählen, wie in den folgenden Abbildungen gezeigt.

Ein- oder Ausblenden von Objekten in responsiven Layouts
Zeigen Sie in der Desktopansicht das herkömmliche Menü an und blenden Sie das Sandwich-Menü aus.

Ein- oder Ausblenden von Objekten in responsiven Layouts
Zeigen Sie in der Mobilgeräteansicht das Sandwich-Menü an und blenden Sie das herkömmliche Menü aus.

So blenden Sie Objekte in Ihrem Adobe Muse-Projekt ein oder aus:

  1. Fügen Sie alle Objekte ein, die Sie benötigen, einschließlich derer, die Sie in einigen Haltepunkten ausblenden möchten.

  2. Ziehen Sie den Regler, um zu einer bestimmten Haltepunktansicht zu wechseln.

  3. Klicken Sie mit der rechten Maustaste auf das Objekt, das Sie ausblenden möchten, und wählen Sie „Im Haltepunkt ausblenden“.

    Das Objekt wird in der aktuellen Haltepunktansicht ausgeblendet, ist aber in anderen Haltepunkten sichtbar. Wenn Sie das Objekt stattdessen in allen anderen Haltepunkten ausblenden möchten, klicken Sie auf „In anderen Haltepunkten ausblenden“. Später können Sie das Objekt mit dem Ebenenbedienfeld an bestimmten Haltepunkten anzeigen.

    Ausblenden von Objekten in Haltepunkten
    Ausblenden von Objekten in Haltepunkten

    Ordnen Sie jetzt die Objekte an, die in der Haltepunktansicht sichtbar sind.

  4. Wechseln Sie zu der Haltepunktansicht, in der Sie das Objekt einblenden möchten, das Sie zuvor ausgeblendet hatten. Sie können dazu den Regler ziehen.

  5. Klicken Sie auf das Ebenenbedienfeld und suchen Sie die Ebene des Objekts, das Sie wieder einblenden möchten. Möglicherweise müssen Sie unterschiedliche Ebenen anzeigen, um die Objektebene zu ermitteln.

    Ein- oder Ausblenden von Objekten über das Ebenenbedienfeld
    Verwenden des Ebenenbedienfelds zum Ein-/Ausblenden von Objekten

  6. Klicken Sie auf die erste Spalte, die der Objektebene entspricht. Ein kleiner schwarzer Punkt zeigt an, dass das Objekt jetzt in der aktuellen Haltepunktansicht sichtbar ist.

    Zum Ein- oder Ausblenden von Objekten klicken
    Klicken Sie auf die erste Spalte, um Objekte ein- oder auszublenden.

    Um das Objekt in allen Haltepunkten einzublenden, klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie „In anderen Haltepunkten anzeigen“.

Positionieren von Objekten

Sie können Objekte in unterschiedlichen Haltepunktansichten unterschiedlich positionieren. So können Sie beispielsweise Bilder in der Desktopansicht horizontal und in der Mobilgeräteansicht vertikal positionieren.

Adobe Muse speichert die Position von Objekten und zeigt sie entsprechend an, wenn die Bildschirmgröße geändert wird.

Anordnen von Objekten für die Desktopansicht
Ordnen Sie Objekte für die Desktopansicht horizontal an.

Anordnen von Objekten für die Mobilgeräteansicht
Ordnen Sie Objekte für Mobilgeräte vertikal an.

Um die Objekte über Haltepunkte hinweg zu verschieben, gehen Sie wie folgt vor:

  1. Wählen Sie den Haltepunkt aus, an dem Sie das Objekt positionieren möchten.

  2. Ziehen und platzieren Sie das Objekt an der gewünschten Position.

    Hinweis:

    Wenn Sie Objekte anordnen, denken Sie daran, den Abstand zwischen den Objekten und den Abstand zwischen dem Objekt und dem Rand des Browsers zu überprüfen. Unter Umständen müssen Sie Objektpositionen anpassen oder weitere Haltepunkte hinzufügen, um die Entwurfsprobleme zu beheben, die zwischen Haltepunkten auftreten.

Verschieben mehrerer Objekte als eine Gruppe

Sie können eine Gruppe von Objekten in Ihrem responsiven Layout zusammen verschieben. Wenn Sie eine Gruppe vertikal ausgerichteter Objekte verschieben möchten, müssen Sie nur das oberste Objekt auswählen. Am linken Rand in Adobe Muse erscheint nun ein vertikaler Griff.

Vertikaler Verschiebegriff in Adobe Muse
Verschieben einer Gruppe vertikal ausgerichteter Objekte.

Wenn Sie auf den Griff klicken und ihn nach oben oder unten verschieben, werden das ausgewählte Objekt und alle darunterliegenden Objekte als eine Gruppe verschoben.

Platzieren von Objekten mit Haltepunkten

Sie können Haltepunkte hinzufügen, indem Sie ein Bibliothekselement mit Haltepunkten in der Entwurfsansicht platzieren. Öffnen Sie das Bibliotheksbedienfeld („Fenster“ > „Bibliothek“). Wählen Sie das Element aus, das Sie der Seite hinzufügen möchten. Klicken Sie auf das Pluszeichen neben dem Element und ziehen Sie das Element per Drag & Drop in die Entwurfsansicht.

Hinzufügen von Haltepunkten über Bibliothekselemente
Platzieren von Haltepunkten durch Klicken auf das Pluszeichen (+)

Beachten Sie, dass Haltepunkte bereits automatisch in Ihre Seite eingefügt wurden. Wenn Sie bereits Haltepunkte auf Ihrer Seite eingefügt haben und ein Bibliothekselement mit Haltepunkten hinzufügen, werden alle Haltepunkte auf Ihrer Seite aktiviert.

Sie können Bibliothekselemente mit Haltepunkten verwenden, um schnell Haltepunkte zwischen verschiedenen Seiten und sogar zwischen verschiedenen .muse-Dateien zu replizieren.

Verankern von Objekten

Wenn Sie in Adobe Muse bestimmte Objekte in statische Objekte verwandeln möchten, verwenden Sie die Option zum Verankern von Objekten. Sie können ein Objekt entweder auf einer Seite oder an einem Browser verankern:

  • Verankern von Objekten am Browser: Sie können ein Objekt am Browser verankern, wenn das Objekt selbst dann fixiert bleiben soll, wenn Sie die Bildlaufleiste des Browsers verwenden. Beispiel: Eine Menüleiste, die fixiert bleibt, wenn Sie einen Bildlauf nach oben oder nach unten durchführen. Weitere Informationen zum Verankern von Objekten am Browser finden Sie unter diesem Link.
  • Verankern von Objekten auf einer Seite: Sie können ein Objekt auf einer Seite verankern, wenn das Objekt auf der Webseite fixiert bleiben soll. Beispiel: Ein Firmenlogo, das immer in der oberen rechten Ecke der Webseite angezeigt wird.

Im Folgenden erfahren Sie mehr zum Verankern von Objekten auf einer Seite im responsiven Design.

Hinweis:

Um zu bestimmen, ob Sie ein Objekt verankern sollten, verwenden Sie den Regler und zeigen Sie die Seite mit verschiedenen Browserbreiten an. Zum Verankern des Objekts auf der Seite gehen Sie folgendermaßen vor:

  1. Wählen Sie das Objekt aus, das Sie verankern möchten.

  2. Wählen Sie im Menü „Verankern“ oben eines der Kontrollkästchen aus, um das Objekt auf der Seite zu verankern.

    Verwenden der Option „Mit Seite verankern“ für responsives Design
    Verwenden Sie das Menü „Verankern“, um Objekte in einem responsiven Layout zu verankern.

  3. So verankern Sie das Objekt auf einer Seite:

    • Links verankern : Aktivieren Sie dieses Kontrollkästchen, wenn Sie ein Objekt links auf der Webseite verankern möchten. Der Abstand zwischen dem Rand des Browsers und der linken Seite des Objekts bleibt konstant.
    • Mittig verankern : Aktivieren Sie dieses Kontrollkästchen, wenn Sie ein Objekt mittig verankern möchten. Der Abstand zwischen dem linken und dem oberen Rand des Objekts und dem Rand des Browsers bleibt konstant.
    • Rechts verankern : Aktivieren Sie dieses Kontrollkästchen, wenn Sie ein Objekt rechts auf der Webseite verankern möchten. Der Abstand zwischen dem Rand des Browsers und der rechten Seite des Objekts bleibt konstant.

    Wenn beispielsweise eine Schaltfläche wie Jetzt bestellen in allen Haltepunkten in der rechten Ecke der Seite angezeigt werden soll, wählen Sie die Schaltfläche aus und verankern Sie sie rechts, wie in der Abbildung gezeigt.

    Klicken Sie auf das Kontrollkästchen, um das Objekt rechts zu verankern.
    Klicken Sie auf das entsprechende Kontrollkästchen, um das Objekt rechts zu verankern.

    Wenn Sie ein Objekt auf einer Seite verankern, werden in Adobe Muse gepunktete Linien ausgehend vom Objekt angezeigt, die die verankerte Position auf der Seite angeben. Achten Sie im folgenden Bild auf die gepunktete Linie, die bis an den rechten Seitenrand reicht. Dies bedeutet, dass das Objekt am rechten Rand der Seite verankert ist.

    „Mit Seite verankern“-Werkzeug
    Gepunktete Linien zeigen die Position der Verankerung auf der Seite.

  4. Verwenden Sie den Regler, um das Layout in verschiedenen Seitenbreiten anzuzeigen. Überprüfen Sie, ob sich das Fixieren auf das Seitenlayout auswirkt, wenn die Seite vergrößert oder verkleinert wird.

Ändern der Größe von Objekten

  1. Wechseln Sie zu der Haltepunktansicht, in der Sie die Objektgröße ändern möchten.

  2. Klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie „Skalieren“ > <Skalieroption>.

    Hinweis:

    Ändern Sie die Option entspricht nicht der Spracheinstellung für andere Objekte. Beispielsweise können Sie ein Bild durch die Breite und Höhe in einem responsiven Layout skalieren, während Sie ein Textfeld nur durch die Größe geändert werden kann.

    Objekte, die nicht variabel sind, verfügen auch nicht über die Option „Skalieren“.

  3. Ändern Sie durch Ziehen die Größe des Objekts für den aktuellen Haltepunkt.

    Beim ersten Bild wird beispielsweise die Seitenbreite bei einem Haltepunkt von 768 px überschritten. Ändern Sie durch Ziehen die Größe des Bildes, damit es der Seitenbreite entspricht, wie in der zweiten Abbildung gezeigt.

    Bild überschreitet die Seitenbreite.
    Bild überschreitet Seitenbreite.

    Ändern Sie die Größe von Objekten für verschiedene Haltepunkte.
    Ändern Sie durch Ziehen die Größe von Objekten für verschiedene Haltepunkte.

  4. Zeigen Sie diese Änderung in einem Browser in der Vorschau an. Ändern Sie die Browsergröße, bis die Browserbreite den Haltepunktwert erreicht. Beachten Sie die Änderung an der Objektgröße, nachdem die Browserbreite den Haltepunktwert erreicht hat.

Hinweis:

Wenn Elemente innerhalb einer Statusschaltfläche oder eines anderen Widget-Containers als variabel festgelegt sind, werden sie verschoben und/oder skaliert, wenn die Containergröße geändert wird.

Kopieren der Größe und Position von Objekten

Wenn Sie die Größe und Position eines Objekts in verschiedene Haltepunkte kopieren möchten, führen Sie die folgenden Schritte aus:

  1. Klicken Sie mit der rechten Maustaste auf das Objekt, das Sie kopieren möchten.

  2. Führen Sie einen der folgenden Schritte durch:

    • Wählen Sie „Größe und Position kopieren nach“ > <bestimmter Haltepunktwert>, um die Größe und Position des aktuellen Objekts auf den bestimmten Haltepunkt anzuwenden.
    • Wählen Sie „Größe und Position kopieren nach“ > „Alle Haltepunkte“, um die Größe und Position des aktuellen Objekts auf alle Haltepunkte anzuwenden.

Formatieren von Text im responsiven Layout

Im responsiven Design ist die Behandlung von Text für verschiedene Browserbreiten wichtig, damit er klar und gut lesbar ist. In einer Haltepunktansicht platzierter Text wird möglicherweise in einer anderen Haltepunktansicht unerwartet umbrochen. Unerwünschte Zeilenumbrüche können auch auftreten, wenn Sie die Haltepunkte wechseln.

Mit Adobe Muse können Sie Text für verschiedene Haltepunkte unterschiedlich formatieren. So können Sie beispielsweise die Schriftgröße für Tablets auf 20 Punkt und für Mobilgeräte auf 15 Punkt festlegen.

Formatieren von Text für die Desktopansicht
Formatieren von Text für die Desktopansicht

Formatieren von Text für die Mobilgeräteansicht
Formatieren von Text für die Mobilgeräteansicht

Um Text im responsiven Design zu formatieren, bietet Adobe Muse ein Textformatierungssymbol im Bedienfeld, in dem auch das Freistellungs- und das Auswahlwerkzeug enthalten sind. Es gibt zwei Optionen für dieses Symbol und Sie können eine davon auswählen, um den Text zu formatieren.

Sie können die Option „Text auf allen Haltepunkten formatieren“ wählen, um Text in allen Haltepunkten auf einer Seite zu formatieren. Wenn Sie diese Option auswählen, müssen Sie den Text nur in einer Haltepunktansicht formatieren. Der Text wird automatisch an allen anderen Haltepunkten formatiert.

Wenn Sie dagegen Text für einen bestimmten Haltepunkt formatieren müssen, können Sie die Option „Text auf aktuellem Haltepunkt formatieren“ auswählen. Sie können beispielsweise die Textgröße auf 24 erhöhen, wenn Sie Text für Smartphones anordnen.

Die Textformatierung wird gespeichert und entsprechend angezeigt, wenn die Website bei unterschiedlichen Browserbreiten angezeigt wird.

Formatieren von Text in responsiven Layouts

  1. Navigieren Sie zur gewünschten Haltepunktansicht.

  2. Wählen Sie das Textfeld aus und ändern Sie durch Ziehen die Größe. Der Text wird neu umgebrochen, wenn Sie die Größe des Textfelds ändern.

    Hinweis:

    Der rechte Rand des Textfelds definiert den Bereich, in dem der Text in die Breite fließt, je nachdem, wie Sie das Textfeld skalieren.

  3. Um Text zu formatieren, wählen Sie den Text aus und klicken Sie auf eine der folgenden Optionen:

    • „Text auf allen Haltepunkten formatieren“: Text für alle Haltepunkte formatieren.
    • „Text auf aktuellem Haltepunkt formatieren“: Text nur für den aktuellen Haltepunkt formatieren.

    Beide Optionen sind im linken Bedienfeld verfügbar, in dem auch das Text- und das Freistellungswerkzeug enthalten sind.

    Formatieren von Text in Haltepunkten
    Formatieren von Text in responsiven Designs

    A. Text auf allen Haltepunkten formatieren B. Text auf aktuellem Haltepunkt formatieren 

    Hinweis:

    Die Option zur Formatierung von Text in responsiven Layouts ändert nur die Formatierung des Textes. Sie können nicht die Wörter oder den Inhalt für jeden einzelnen Haltepunkt ändern.

Kopieren von Textformatierung über Haltepunkte hinweg

Wenn Sie die Größe und Position von Text in verschiedene Haltepunkten oder Browserbreiten kopieren möchten, führen Sie die folgenden Schritte aus:

  1. Markieren Sie den Text, den Sie kopieren möchten.

  2. Führen Sie einen der folgenden Schritte durch:

    • Klicken Sie mit der rechten Maustaste und wählen Sie „Textformatierung kopieren nach“ > <bestimmter Haltepunktwert>, um die Attribute des aktuellen Texts auf diesen bestimmten Haltepunkt anzuwenden.
    • Klicken Sie mit der rechten Maustaste und wählen Sie „Textformatierung kopieren nach“ > „Alle Haltepunkte“, um die Attribute des aktuellen Texts auf alle anderen Haltepunkte anzuwenden.

    Zeigen Sie das Layout an jedem Haltepunkt in der Vorschau an, indem Sie den Regler verwenden. Fügen Sie bei Bedarf Haltepunkte hinzu, um das Layout für unterschiedliche Browserbreiten zu optimieren.

Anwenden von Bildlaufeffekten in einem responsiven Layout

In einem responsiven Layout können auch Bildlaufeffekte hinzugefügt werden. Bildlaufeffekte werden nur mit festen Haltepunkten unterstützt. Feste Haltepunkte geben an, dass Ihr Layout mit dieser Seitenbreite fixiert ist. Fügen Sie einen festen Haltepunkt hinzu, wählen Sie das Objekt aus, auf das Bildlaufeffekte angewendet werden sollen, und konfigurieren Sie dann die Bildlaufeffekt-Einstellungen.

  1. Öffnen Sie Ihre Adobe Muse-Seite an der Stelle, an der Sie den Bildlaufeffekt hinzufügen möchten. Beispielsweise könnten Sie Bildlaufeffekte für die Navigation und das Hintergrundbild in der Kopfzeile hinzufügen.

  2. Wenn Sie das responsive Layout öffnen, sehen Sie die Haltepunkte auf Ihrer Seite. Diese Haltepunkte sind variabel, was durch ein Symbol mit in beide Richtungen zeigenden Pfeilen angezeigt wird.

    Variable Haltepunkte
    Variable Haltepunkte, durch ein Doppelpfeilsymbol angezeigt

    Wenn Sie jetzt das Bildlaufeffekte-Bedienfeld anschauen, sehen Sie, dass die Option deaktiviert ist.

    Bildlaufeffekte für variable Haltepunkte deaktiviert
    Bildlaufeffekte sind für variable Haltepunkte deaktiviert

  3. Sie müssen einen festen Haltepunkt hinzufügen, um Bildlaufeffekte zu aktivieren. Um einen festen Haltepunkt hinzuzufügen, klicken Sie auf die Haltepunktleiste und dann auf „Haltepunkt hinzufügen“. 

  4. Wählen Sie aus dem Dropdown die Option „Feste Breite“ und klicken Sie auf „OK“.

    Hinzufügen eines Haltepunkts mit fester Breite
    Hinzufügen eines Haltepunkts mit fester Breite

    Feste Haltepunkte
    Feste Haltepunkte sind mit einem Quadratsymbol gekennzeichnet

    Auf Ihrer Seite befindet sich nun ein fester Haltepunkt, der durch ein Quadrat gekennzeichnet ist. Wenn Sie die Seite mit einer Browserbreite von 1225 Pixel oder mehr anzeigen, bleibt die Seite so, wie sie bei 1225 Pixel aussieht, fixiert. Das Layout wird an diesem Haltepunkt nicht variabel.

  5. Wählen Sie das Objekt, für das die Bildlaufeffekte angewendet werden sollen, und konfigurieren Sie die Einstellungen für Bildlaufeffekte.

    Anwenden von Bildlaufeffekten für ausgewählte Objekte
    Anwenden von Bildlaufeffekten für ausgewählte Objekte

    Hinweis:

    Bildlaufeffekte können nur angewendet werden, wenn Sie sich am festen Haltepunkt und nicht an den anderen (variablen) Haltepunkten befinden.

    Wie Sie die Bildlaufeffekte in Adobe Muse hinzufügen und verwenden, erfahren Sie unter Anwenden von Bildlaufeffekten in Adobe Muse.

Häufige Fragen

Was sind ideale Haltepunkte beim Gestalten einer Site für Desktops, Tablets und Mobiltelefone?

Wenn Sie Ihre Site für ein bestimmtes Endgerät gestalten möchten, können Sie den entsprechenden Haltepunkt hinzufügen. Benutzer schauen sich Ihre Site aber u. U. von einem anderen Endgerät an, das eine andere Bildschirmgröße haben kann. Es wird daher empfohlen, Haltepunkte nur dort hinzuzufügen, wo sich Ihr Design ändert. Hierdurch wird sichergestellt, dass Ihre Site auf jedem Gerät richtig angezeigt wird.

Warum funktionieren Haltepunkte auf der Musterseite nicht auf den einzelnen Seiten?

Haltepunkte auf der Musterseite werden auf den einzelnen Seiten als weiße Dreiecke angezeigt. Um diese Haltepunkte auf den einzelnen Seiten zu aktivieren, klicken Sie auf das weiße Dreieck auf der Haltepunktleiste und dann auf das Pluszeichen (+).

Eine andere Möglichkeit, Haltepunkte ganz einfach von einer Musterseite auf eine bestimmte Seite zu übertragen, ist folgende: Sie kopieren ein Musterseitenelement, wechseln zu der Seite, auf der die Haltepunkte angewendet werden sollen, wählen „Bearbeiten“ „> „Mit Haltepunkten einfügen“ aus und löschen dann das eingefügte Element von der Leinwand. Obwohl das Element gelöscht wurde, bleiben die Haltepunkte von der Musterseite erhalten.

Wie kann ich verhindern, dass Textfelder in meinem responsiven Layout überlappen?

Textfelder werden nicht skaliert und können sich gegenseitig überlappen, wenn sie nicht „variabel“ sind. Um die Textfelder variabel zu machen, klicken Sie mit der rechten Maustaste auf jedes einzelne Textfeld und wählen dann „Skalieren“ > „Responsive Breite“ aus.

Wie kann ich ein zusätzliches Leerzeichen oder einen Leerraum in meinen responsiven Sites löschen?

Möglicherweise finden Sie ein zusätzliches Leerzeichen oder einen Leerraum in Ihrer Site. Das kann verschiedene Gründe haben, z. B. ein Footer, der immer unten ist, oder ein ausgeblendetes Objekt. Weitere Informationen zur Behebung dieses Problems finden Sie in diesem Artikel.

Wie kann ich den grauen Bereich entfernen, der bei der Vorschau meiner Site angezeigt wird?

Wenn Sie in der Vorschau einen grauen Bereich sehen, prüfen Sie, ob außerhalb der Seite ein externes oder ein ausgeblendetes Objekt platziert wurde. Um alle Objekte auszuwählen, klicken Sie auf „Ansicht“ > „Rahmenkanten einblenden“. Sie können auch auszoomen und die Position aller Objekte anzeigen. Prüfen Sie, ob ein ausgeblendetes oder ein externes Objekt vorhanden ist, und platzieren Sie das Objekt innerhalb des Layouts, um dieses Problem zu beheben.

Wie kann ich alle Widgets variabel oder responsiv machen?

Widgets in Adobe Muse sind momentan nicht responsiv. Informationen zum responsiven Verhalten der einzelnen Widgets finden Sie in dieser Tabelle.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie