Verwenden von Kompositions-Widgets in Adobe Muse

Ö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.

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:

• Position: Gibt an, wo sich der Zielbereich auf der Seite befindet. Wählen Sie „Gestapelt“, wenn Ihre Ziele überlappen sollen, und „Verstreut,“ wenn die Ziele in unterschiedlichen Positionen platziert werden sollen. Wählen Sie "Leuchtkasten ", wenn der Rest der Seite abgedunkelt werden soll.
• Ziel anzeigen: Gibt an, wie sich das Ziel verhält, wenn ein Benutzer auf den Auslöser klickt. 
• Ziel ausblenden: Einstellungen für das Ausblenden eines Ziels. Solange kein Benutzer auf den Auslöser klickt, bleibt der Zielbereich ausgeblendet. 
• Übergang: Gibt an, wie sich der Inhalt im Zielbereich ändert, wenn ein Benutzer den Auslöser anklickt oder den Mauszeiger über diesen bewegt. Wählen Sie „Einblenden/Ausblenden“ zum Einblenden eines neuen Ziels, „Horizontal“ zum Einfügen von Zielen in einer horizontalen Bewegung, „Vertikal“ zum Einfügen von Zielen in einer vertikalen Bewegung. 
• Übergangsgeschwindigkeit: Gibt die Geschwindigkeit des Übergangs für Ihr Kompositions-Widget an. Wenn Sie einen sofortigen Übergang wünschen, wählen Sie „Keinen“ aus.
• Automatisch abspielen: Konfigurieren Sie diese Option zum Erstellen einer Diashow auf Ihrer Website. Wenn Sie diese Option auswählen, werden die Folien automatisch wiedergegeben, ohne dass eine Benutzerinteraktion erfolgt.
• Unsortiert: Wählen Sie diese Option aus, wenn die Ziele in zufälliger Reihenfolge angezeigt werden sollen.
• Auslöser oben: Wählen Sie diese Option aus, um den Auslöser über den Ziel-Container platzieren. Die gleiche Hierarchie wird auch im Ebenenbedienfeld angezeigt.
• Wischen aktivieren: Wählen Sie diese Option aus, um bei Touchscreen-Geräten die Wischbewegung für den Wechsel zum nächsten Ziel zu aktivieren.
• Zunächst alles ausblenden: Wählen Sie diese Option aus, wenn Sie alle Zieloptionen beim ersten Laden der Website ausblenden wollen. Um das Ziel anzuzeigen, muss der entsprechende Auslöser angeklickt werden.
• Auto-Leuchtkasten: Wählen Sie diese Option aus, wenn der Leuchtkasten beim Laden der Website automatisch angezeigt werden soll.
• Teile: Wählen Sie die Schaltflächenoptionen „Zur“ (Zurück), „Weiter“ oder „Schließen“ für zusätzliche Interaktivität Ihres Widgets. Benutzer können in Ihrer Website auf die Optionen Zurück, Weiter und Schließen klicken.
• Bearbeitung: Wählen Sie „Leuchtkasten-Teile bei Bearbeitung anzeigen“, um den Zielbereich in der Entwurfsansicht anzuzeigen, während Sie das Widget bearbeiten. Wählen Sie „Alles im Entwurfsmodus anzeigen“, um alle Ziel-Container gleichzeitig in der Entwurfsansicht anzuzeigen.

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.

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:

• Position: Gestapelt (Standard)
• Ziel anzeigen: Bei Rollover
• Ziel ausblenden: Bei Rollout von Auslöser und Ziel
• Übergang: Verblassen (Standard)
• Übergangsgeschwindigkeit: 0,5 Sekunden (Standard)
• Automatisch Abspielen: Deaktiviert (Standard)
• Unsortiert: Deaktiviert (Standard)
• Zunächst alles ausblenden: Aktiviert

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.