Öffnen Sie Adobe Muse. Klicken Sie im Begrüßungsbildschirm entweder auf „Neu erstellen“, um eine neue Site zu erstellen, oder öffnen Sie eine vorhandene Adobe Muse-Site, der Sie ein Kompositions-Widget hinzufügen möchten.
Erfahren Sie, wie Sie Kompositions-Widgets in Adobe Muse hinzufügen. Konfigurieren Sie Kompositions-Widgets zum Erstellen interaktiver Websites.
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.
Kompositions-Widgets in Adobe Muse ermöglichen es Ihnen, Ihrer Website komplexe Interaktivität hinzuzufügen. Ob Fotografie- oder Restaurant-Site, zum Anzeigen einer breiten Inhaltspalette sind Kompositions-Widgets für jede Art von Site nahezu unverzichtbar. Mit diesen Widgets können Sie einzigartige Navigations- und Browsingerlebnisse entwerfen, ohne auch nur eine Zeile Code schreiben zu müssen.
Adobe Muse bietet mehrere Typen von Kompositions-Widgets an, mit denen Sie verschiedene Arten von Inhalt entwerfen und Ihrer Webseite hinzufügen können. Wenn Sie beispielsweise eine Fotografie-Site erstellen, können Sie ein Leuchtkasten-Anzeige-Widget wählen, um Ihre Website mit einer Fotogalerie auszustatten. Dieses Widget dunkelt den Rest der Seite vorübergehend ab, damit die Aufmerksamkeit des Besuchers auf den aktiven Anzeigebereich gelenkt wird.
Es ist auch möglich, interessante Webdesigns zu erstellen, indem Sie Widgets innerhalb eines Kompositions-Widgets verschachteln. Wenn Sie beispielsweise einen Katalog entwerfen, können Sie ein leeres Kompositions-Widget verwenden, um ein Hamburgermenü zu erstellen und ein Diashow-Widget im Zielbereich des leeren Kompositions-Widgets zu verschachteln. Ein derartiger Entwurf vermittelt Besuchern Ihrer Site ein einzigartiges Benutzererlebnis.
Lesen Sie weiter, um die verschiedenen Typen von Kompositions-Widgets kennenzulernen, die in Adobe Muse zur Verfügung stehen.
Ein Kompositions-Widget beinhaltet zwei Container: Auslöser und Ziel. Ein Besucher der Site klickt auf den Auslösebereich, wonach der entsprechende Zielbereich angezeigt wird. Sie können den Auslösebereich mit dem Zielbereich verknüpfen, um Ihrer Site höhere Komplexität und Interaktivität zu verleihen.
Adobe Muse bietet die folgenden Typen von Kompositions-Widgets an. Je nach Ihren Entwurfsanforderungen können Sie entweder eines dieser Widgets verwenden oder eine Kombination dieser Widgets durch Verschachtelung herstellen.
Ein Widget mit kleinen Miniaturen. Standardmäßig hat dieses Widget keine Filler. Diese Option können Sie manuell mit einem Ziel-Container verknüpfen.
Ein Widget, das sich wie ein Akkordeon-Widget verhält. Sie können Text und Bilder in den Containerbereich für dieses Widget einfügen.
Ein Widget, bei dem Inhalt im Zielbereich aktiv wird, wenn Sie auf den Auslöser drücken. Der Rest der Seite wird abgeblendet, wenn das Ziel angezeigt wird.
Dieses Widget enthält Miniaturen, die mit dem Ziel-Präsentationsbereich verknüpft sind. Die Folien werden in diesem Widget standardmäßig horizontal gewechselt.
Dieses Widget enthält QuickInfo-Text. Wenn ein Benutzer den Cursor über den Auslöserbereich bewegt, wird die QuickInfo sofort angezeigt.
Um ein Kompositions-Widget in Adobe Muse hinzuzufügen und zu nutzen, wählen Sie das betreffende Kompositions-Widget aus und ziehen es in die Entwurfsansicht. Da diese Widgets standardmäßig responsiv sind, sehen Sie, dass die Widgets über verschiedene Haltepunkte hinweg variabel sind. Wenn Sie die Position oder den Inhalt eines Kompositions-Widgets ändern möchten, können Sie dessen einzelne Elemente für einen bestimmten Haltepunkt anpassen, skalieren und verankern.
Gehen Sie folgendermaßen vor, um ein Kompositions-Widget in Ihr Layout einzufügen.
Öffnen Sie Adobe Muse. Klicken Sie im Begrüßungsbildschirm entweder auf „Neu erstellen“, um eine neue Site zu erstellen, oder öffnen Sie eine vorhandene Adobe Muse-Site, der Sie ein Kompositions-Widget hinzufügen möchten.
Doppelklicken Sie in der Planungsansicht und öffnen Sie die Seite, auf der Sie das Widget einfügen möchten.
Öffnen Sie die Widget-Bibliothek („Fenster“ > „Widget-Bibliothek“) und klicken Sie auf „Kompositionen“, um die Option zu erweitern. Wählen Sie das Ihren Entwurfsanforderungen entsprechende Kompositions-Widget.
Wählen Sie beispielsweise eine Leuchtkasten-Anzeige aus der Widget-Bibliothek aus.
Um alle standardmäßig in ein Widget eingefügten Inhalte zu löschen, klicken Sie mit der rechten Maustaste auf das Widget und wählen Sie „Widget-Inhalte löschen“.
Die Standardversion des Leuchtkasten-Anzeige-Widgets hat drei kleinere graue Auslöser-Felder über dem größeren hellgrauen Ziel-Container.
Wenn Besucher den Auslöser-Container anklicken, wird der Ziel-Container des Leuchtkasten-Anzeige-Widgets angezeigt. Sie können Bilder, Text und Videos einschließlich YouTube-Videos als Ziel einbetten.
Wählen Sie den Container oder den Auslöser im Kompositions-Widget aus. Wählen Sie das Widget zum Auswählen des gesamten Widgets aus. Der Auswahlindikator in der linken oberen Ecke der Anwendung zeigt das Wort „Komposition“ an.
Doppelklicken Sie auf und wählen Sie die kleineren Felder in diesem Widget zum Auswählen des Auslösers aus. Im Auswahlindikator wird das Wort „Auslöser“ angezeigt. Die kleineren Felder sind die Auslöser für dieses Widget. Sie sind die Schaltflächen, die auf die Benutzerinteraktion reagieren.
Sie können sehen, dass keine anderen Elemente ausgewählt sind, wenn der Auswahlindikator in der linken oberen Ecke das Wort „Seite“ anzeigt.
Wählen Sie „Datei“ > „Platzieren“, um das Dialogfeld „Importieren“ zu öffnen. Wählen Sie die Dateien aus, die Sie in diesem Widget platzieren möchten. Klicken Sie auf Öffnen, um die Datei auszuwählen, und schließen Sie dann das Dialogfeld „Importieren“.
Klicken Sie ein Mal auf eine beliebige Stelle auf der Seite, um das Bild in seiner vollen Größe zu platzieren.
Während das Bild noch ausgewählt ist, klicken Sie mit der rechten Maustaste und wählen Sie die Option „Ausschneiden“ aus dem Kontextmenü.
Sie können auch den Tastaturbefehl zum Ausschneiden des Bilds verwenden, wodurch es von der Seite entfernt und in die Zwischenablage kopiert wird.
Klicken Sie mit der rechten Maustaste auf die Auslöser-Schaltfläche und wählen Sie „Einfügen“. Sie können auch den Tastaturbefehl zum Einfügen des Bilds in den Auslöser nutzen. Der Auslöser-Container wird automatisch an die Größe des Bilds angepasst.
Inhalt in einen Container einzufügen kann schwierig sein. Während Sie annehmen, dass sich der Inhalt im Container befindet, kann es vorkommen, dass der Inhalt tatsächlich auf der Seite eingefügt wurde.
Wenn Sie überprüfen müssen, dass sich das Bild im Auslöser-Container befindet, drücken Sie ein Mal die Esc-Taste und schauen Sie sich den Auswahlindikator an. Wenn er das Wort „Auslöser“ anzeigt, befindet sich das Bild im Auslöser. Wenn der Auswahlindikator das Wort „Seite“ anzeigt, müssen Sie das Bild ausschneiden und erneut in den Auslöser-Container einfügen.
Sie können auch das Ebenenbedienfeld („Fenster“ > „Ebenen“) öffnen, um zu überprüfen, wo das Bild eingefügt wird. Im Ebenenbedienfeld wird die Hierarchie der Elemente in einer Seite angezeigt.
Klicken Sie zum Hinzufügen zusätzlicher Miniaturbilder auf die Plusschaltfläche (+) neben den Auslöser-Containern.
Nachdem Sie das Widget in Ihrer Entwurfsansicht platziert haben, können Sie es konfigurieren. Um die Optionen für Ihr Kompositions-Widget zu konfigurieren, wählen Sie das Widget aus und klicken auf den blauen Pfeil in der rechten oberen Ecke des Widgets.
Sie können die folgenden Einstellungen über das Optionenbedienfeld konfigurieren:
Die Option „Leuchtkasten-Teile bei Bearbeitung anzeigen“ ist deaktiviert, wenn Sie „Verstreut“ oder „Gestapelt“ als Option aus der Positions-Dropdown-Liste ausgewählt haben.
Die Option „Zunächst alles ausblenden“ ist deaktiviert, wenn Sie die Option „Auto-Leuchtkasten“ auswählen.
Doppelklicken Sie zum Entfernen von nicht benötigten Auslösern auf diese und wählen Sie sie aus. Drücken Sie die Löschtaste (Mac) bzw. die Rücktaste (Windows), um den ausgewählten Auslöser zu entfernen.
Klicken Sie auf das Hero-Bild im Auslöser-Container, um den Leuchtkasten-Effekt aufzurufen.
Drücken Sie die Esc-Taste, um das Leuchtkasten-Fenster zu schließen und zur Entwurfsansicht zurückzukehren, um die Bearbeitung der Adobe Muse-Seite fortzusetzen.
Testen Sie Ihr Kompositions-Widget in der Vorschauansicht, nachdem Sie es konfiguriert und in Ihrem Entwurf platziert haben.
Lesen Sie den folgenden Abschnitt, wenn Sie ein Kompositions-Widget in einem responsiven Layout verwenden. Achten Sie an allen Haltepunkten darauf, Ihr Widget zu testen und eine Vorschau anzuzeigen.
Standardmäßig sind Kompositions-Widgets entweder variabel oder responsiv. Um Kompositions-Widgets in ein responsives Layout einzufügen und zu verwenden, führen Sie einen der folgenden Schritte aus:
Es ist nicht möglich, das vollständige Widget auszuwählen und die Größenänderungs-Eigenschaften zu ändern. Wählen Sie ein einzelnes Element oder mehrere Elemente im Widget aus, um es (sie) responsiv zu machen.
Konfigurieren Sie Ihr Widget, indem Sie die Schritte unterHinzufügen und Konfigurieren von Kompositions-Widgets ausführen. Nachdem Sie das Widget konfiguriert und gestaltet haben, können Sie entweder eine Vorschau des Widgets in einem Browser anzeigen oder den Scrubber zum Skalieren verwenden. Sie werden feststellen, dass die Widgets automatisch der Bildschirmgröße entsprechend skaliert werden.
Wenn Sie Kompositions-Widgets in ein responsives Layout einfügen, wird empfohlen, dass Sie Ihren Entwurf zunächst im größten Haltepunkt layouten. Nachdem Sie die Position und die Konfiguration des Widgets am größten Haltepunkt finalisiert haben, können Sie zusätzliche Haltepunkte nach Erfordernis einfügen.
Weitere Informationen zum Entwerfen Ihrer Site für ein responsives Layout finden Sie unter Objekte in responsivem Entwurf layouten.
Zu den einzigartigen Aspekten von Kompositions-Widgets gehört die Unterstützung von verschachtelten Widgets innerhalb eines Kompositions-Widgets. Das bedeutet, dass Sie Widgets wie Formulare, Diashows oder Menüelemente in ein Kompositions-Widget einfügen können.
Beispielsweise können Sie in einer Koch-Website ein Diashow-Widget innerhalb des Ziel-Containers eines Ausgewählte Nachrichten-Widgets hinzufügen. Wenn ein Besucher der Site auf die Menübeschriftung (Ausgewählte Nachrichten-Widget) klickt, wird der Zielbereich, der die Galerie enthält, als Diashow angezeigt.
Sie können auch ein Kontaktformular als Ziel einfügen, sodass der Benutzer, der auf die Beschriftung Kontakt klickt, sofort zum Kontaktformular geführt wird.
Es gibt noch viele weitere Kombinationen und Entwurfsmöglichkeiten, die Sie mithilfe von Verschachtelung erzielen können. Beachten Sie jedoch die folgenden Punkte, wenn Sie verschachtelte Widgets in einem responsiven Layout entwerfen:
Wenn Sie Widgets in einem Kompositions-Widget verschachteln, wird empfohlen, dass Sie nicht mehr als drei Verschachtelungsebenen verwenden.
Im folgenden Abschnitt wird beschrieben, wie Sie ein Untermenü mithilfe eines Kompositions-Widgets erstellen. Lesen Sie weiter, um zu erfahren, wie Sie mit diesem Beispielszenario ein verstecktes Untermenü für Site-Navigation erstellen können.
Sie können Kompositions-Widgets für den Aufbau der Website-Navigation mit Untermenüs konfigurieren. Sie können ein Menüelement erstellen, das ein Untermenü anzeigt, wenn ein Besucher den Cursor über den aktiven Bereich bewegt, und dasselbe Untermenü ausblendet, wenn der Besucher seinen Cursor aus dem aktiven Bereich herausbewegt, der das Öffnen des Untermenüs ausgelöst hat. Sie können das Widget auch so konfigurieren, dass ein Untermenü ausgeblendet wird, wenn der Besucher nicht auf eine der Verknüpfungen im Untermenü klickt und einfach den Cursor aus dem Untermenü herausbewegt. Die Möglichkeit, diese Typen von interaktiven Untermenüs zu erstellen, ist dann nützlich, wenn Sie eine Navigationsleiste für eine Site mit vielen verschiedenen Unterabschnitten erstellen.
Die Menüs „Ziel anzeigen“ und „Ziel ausblenden“ sind hilfreich, wenn Sie ein gemeinsames Menüverhalten für Ihre Website nachbilden möchten. Der Benutzer kann optional auf die Verknüpfungen klicken oder den Cursor außerhalb des Fensterbereiches bewegen, um das Fenster auszublenden. Es ist nicht notwendig, auf eine Schaltfläche „Schließen“ zu klicken, um ein Untermenü auszublenden, wenn diese Option aktiviert ist.
Diese Funktion ist verfügbar, wenn Sie mit den folgenden Kompositions-Widgets arbeiten:
Das Optionenbedienfeld bietet zwei Einstellungen für die Anzeige des Ziel-Containers:
Sie können auch festlegen, dass der Ziel-Container in einem Kompositions-Widget ausgeblendet wird. Die vier Optionen für das Ausblenden des Ziel-Containers sind folgende:
Im folgenden Abschnitt erfahren Sie, wie Sie das Verhalten der Option „Bei Rollover“ verwenden, um den Ziel-Container anzuzeigen, und das Verhalten der Option „Auf Rollout von Auslöser und Ziel“ des Auslöser-Containers, um den Ziel-Container auszublenden.
Führen Sie die folgenden Schritte aus, um zu erfahren, wie Sie die Einstellungen „Bei Rollout ausblenden“ für Kompositions-Widgets aktivieren können, um eine Menüleiste zu erstellen, die basierend auf der Interaktion des Benutzers Untermenüverknüpfungen ein- und ausblendet:
In der Designansicht fügen Sie der Seite ein Leuchtkasten-Komposition-Widget hinzu, indem Sie es aus der Widgets-Bibliothek ziehen.
Wählen Sie die Auslöser-Container aus. Verschieben Sie mithilfe des Auswahlwerkzeugs alle drei Auslöser-Container an den Seitenanfang über den größeren Ziel-Container und verteilen Sie sie gleichmäßig.
Verwenden Sie das Auswahlwerkzeug, um die Griffe jedes Auslöser-Containers zu ziehen. Erweitern Sie die Breite, um ein Set von drei „Registerkarten“ entlang des Seitenanfangs zu erstellen, ähnlich einem Bedienfelder-Widget mit Registerkarten.
Fügen Sie zu jedem der drei Auslöserbereiche den gewünschten Inhalt hinzu. Der Auslöserinhalt kann Text, Verknüpfungen, Bilder, Rechtecke, eingebettetes HTML und mehr sein. Beispielsweise können Sie das Textwerkzeug verwenden, um jedem einzelnen Auslöser Text hinzuzufügen: Verknüpfung eins, Verknüpfung zwei und Verknüpfung drei.
Erstellen Sie jetzt eine Verknüpfung innerhalb des zweiten Ziel-Inhaltsbereichs.
Klicken Sie auf einen Auslöser-Container und wählen Sie dann den größeren entsprechenden Ziel-Container aus. Fügen Sie zum zweiten Ziel-Inhaltsbereich eine Verknüpfung hinzu. Klicken Sie dann auf die Dropdown-Liste neben der Hyperlink-Bezeichnung auf der rechten Seite des Steuerungsbedienfelds. Fügen Sie eine Verknüpfung zur gewünschten Internetadresse ein.
Wählen Sie im Browser „Datei“ > „Seitenvorschau“, um zu testen, wie das Kompositions-Widget angezeigt wird.
Interagieren Sie mit dem Widget, indem Sie auf die Auslöser-Container mit den Bezeichnungen·„Verknüpfung eins“, „Verknüpfung zwei“ und „Verknüpfung drei“ klicken.
Beachten Sie, dass standardmäßig immer der Ziel-Container angezeigt und nie ausgeblendet wird. Sie können auf eine der drei Auslöser-Schaltflächen klicken, um den entsprechenden Ziel-Container anzuzeigen, aber einer der drei Ziel-Container wird immer angezeigt.
Aktivieren Sie das Kompositions-Widget, um die Einstellung „Bei Rollout ausblenden“ zu konfigurieren. Klicken Sie auf den blauen Pfeil, um auf das Optionsbedienfeld zuzugreifen und bearbeiten Sie die Konfigurationsoptionen des Widgets.
Stellen Sie sicher, dass die folgenden Einstellungen aktiviert sind:
Die Grundeinstellungen, die die Funktion zum Ausblenden/Anzeigen steuern, sind die Menüs „Ziel anzeigen“, „Ziel ausblenden“ und das Aktivieren der Option: Zunächst alles ausblenden.
Wählen Sie erneut „Datei“ > „Seitenvorschau“ im Browser, um die neuen Änderungen am Widget zu testen.
Jetzt werden beim ersten Laden des Kompositions-Widgets alle Zielbereiche standardmäßig ausgeblendet.
Interagieren Sie erneut mit dem Widget. Beachten Sie, dass wenn Sie den Cursor über einen Auslöserbereich bewegen, der entsprechende Zielbereich angezeigt wird. Wenn der Cursor im Widgetbereich verbleibt, können Sie mit Inhalten innerhalb der Zielbereiche interagieren (z. B. auf die Verknüpfung zu einer Website im mittleren Ziel-Container klicken).
Wenn Sie den Cursor jedoch aus den Auslöser- oder Zielbereichen heraus bewegen, werden die Zielbereiche ausgeblendet, bis Sie den Cursor über einen anderen Auslöserbereich bewegen.
Mit dieser Funktion können Sie eine viel komplexere interaktive Site-Navigation einrichten, die auf die Mausbewegungen der Besucher reagiert.
Bei Ihrem Konto anmelden