Ziehen Sie den Regler auf der Haltepunktleiste und platzieren Sie ihn an der Stelle, an der Sie den Haltepunkt hinzufügen möchten.
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.
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 bei den Häufig gestellten Fragen (FAQ) 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.
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.
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.
Ziehen Sie den Regler auf der Haltepunktleiste und platzieren Sie ihn an der Stelle, an der Sie den Haltepunkt hinzufügen möchten.
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.
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.
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.
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.
Wenn Sie eine neue Musterseite auf eine Seite anwenden, werden die Haltepunkte aus der alten Musterseite durch die Haltepunkte aus der neuen Musterseite ersetzt.
Ziehen Sie auf der Haltepunktleiste den Regler zum gewünschten Haltepunktwert. Dies ist die geänderte Platzierung des Haltepunkts.
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.
Klicken Sie auf „OK“, um Ihre Änderungen zu speichern.
Sie können die Haltepunkte auf der Musterseite nicht von den einzelnen Seiten aus bearbeiten.
Sie haben folgende Möglichkeiten, um Haltepunkte zu löschen:
Wenn Sie einen Haltepunkt löschen, werden die entsprechenden Layout-Änderungen und die Texteinstellungen für den Haltepunkt ebenfalls gelöscht.
Sie können einen Haltepunkt auf der Musterseite nicht von einer einzelnen Seite aus löschen.
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:
Sie können die folgenden Optionen verwenden, um sicherzustellen, dass das Layout an allen Haltepunkten korrekt aussieht:
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.
So blenden Sie Objekte in Ihrem Adobe Muse-Projekt ein oder aus:
Fügen Sie alle Objekte ein, die Sie benötigen, einschließlich derer, die Sie in einigen Haltepunkten ausblenden möchten.
Ziehen Sie den Regler, um zu einer bestimmten Haltepunktansicht zu wechseln.
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.
Ordnen Sie jetzt die Objekte an, die in der Haltepunktansicht sichtbar sind.
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.
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.
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.
Um das Objekt in allen Haltepunkten einzublenden, klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie „In anderen Haltepunkten anzeigen“.
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.
Um die Objekte über Haltepunkte hinweg zu verschieben, gehen Sie wie folgt vor:
Wählen Sie den Haltepunkt aus, an dem Sie das Objekt positionieren möchten.
Ziehen und platzieren Sie das Objekt an der gewünschten Position.
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.
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.
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.
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.
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:
Im Folgenden erfahren Sie mehr zum Verankern von Objekten auf einer Seite im responsiven Design.
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:
Wählen Sie das Objekt aus, das Sie verankern möchten.
Wählen Sie im Menü „Verankern“ oben eines der Kontrollkästchen aus, um das Objekt auf der Seite zu verankern.
So verankern Sie das Objekt auf einer Seite:
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.
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.
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.
Wechseln Sie zu der Haltepunktansicht, in der Sie die Objektgröße ändern möchten.
Klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie „Skalieren“ > <Skalieroption>.
Ä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“.
Ä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.
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.
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.
Wenn Sie die Größe und Position eines Objekts in verschiedene Haltepunkte kopieren möchten, führen Sie die folgenden Schritte aus:
Klicken Sie mit der rechten Maustaste auf das Objekt, das Sie kopieren möchten.
Führen Sie einen der folgenden Schritte durch:
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.
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.
Navigieren Sie zur gewünschten Haltepunktansicht.
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.
Der rechte Rand des Textfelds definiert den Bereich, in dem der Text in die Breite fließt, je nachdem, wie Sie das Textfeld skalieren.
Um Text zu formatieren, wählen Sie den Text aus und klicken Sie auf eine der folgenden Optionen:
Beide Optionen sind im linken Bedienfeld verfügbar, in dem auch das Text- und das Freistellungswerkzeug enthalten sind.
A. Text auf allen Haltepunkten formatieren B. Text auf aktuellem Haltepunkt formatieren
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.
Wenn Sie die Größe und Position von Text in verschiedene Haltepunkten oder Browserbreiten kopieren möchten, führen Sie die folgenden Schritte aus:
Markieren Sie den Text, den Sie kopieren möchten.
Führen Sie einen der folgenden Schritte durch:
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.
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.
Ö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.
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.
Wenn Sie jetzt das Bildlaufeffekte-Bedienfeld anschauen, sehen Sie, dass die Option deaktiviert ist.
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“.
Wählen Sie aus dem Dropdown die Option „Feste Breite“ und klicken Sie auf „OK“.
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.
Wählen Sie das Objekt, für das die Bildlaufeffekte angewendet werden sollen, und konfigurieren Sie die Einstellungen für Bildlaufeffekte.
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.
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.
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.
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.
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.
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.
Widgets in Adobe Muse sind momentan nicht responsiv. Informationen zum responsiven Verhalten der einzelnen Widgets finden Sie in dieser Tabelle.
Bei Ihrem Konto anmelden