Erfahren Sie, wie Sie ein Cluster zugehöriger Inhalte über Bedienfelder mit Registerkarten oder Akkordeon-Bedienfelder mit Adobe Muse anzeigen oder formatieren können.

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.

Hinzufügen eines Bedienfelder-Widget mit Registerkarten

  1. Öffnen Sie das Widgets-Bibliothek-Bedienfeld (indem Sie „Fenster“ > „Widgets-Bibliothek“ wählen). Erweitern Sie die Bedienfelder und wählen Sie „Bedienfelder-Widget mit Registerkarten“ aus. Ziehen Sie das Widget aus der Widgets-Bibliothek in das Entwurfsbedienfeld.

    Das Widget „Bedienfelder mit Registerkarten“ wird mit der Standardformatierung angezeigt, wenn Sie es auf eine Seite ziehen.
    Das Widget „Bedienfelder mit Registerkarten“ wird mit der Standardformatierung angezeigt, wenn Sie es auf eine Seite ziehen.

  2. Klicken Sie drei Mal auf die obere Registerkarte auf der rechten Seite. Mit dem ersten Klick wird das gesamte Bedienfeld mit Registerkarten ausgewählt, mit dem zweiten Klick der Registerkarten-Container und mit dem dritten Klick die Registerkarte auf der rechten Seite.

    Beachten Sie den Auswahlindikator, der anzeigt, welches Unterelement des Widgets gerade ausgewählt ist. Drücken Sie die Löschtaste (Mac) bzw. die Rücktaste (Windows), um die dritte Registerkarte zu löschen. Jetzt sind nur noch zwei Registerkarten übrig. Klicken Sie auf eine beliebige andere Stelle auf der Seite.

  3. Klicken Sie erneut auf das Widget, um das gesamte Bedienfeld mit Registerkarten auszuwählen. Ziehen Sie die Griffe, um das gesamte Widget auf eine Breite von 840 und eine Höhe von 645 zu skalieren. Während Sie die Griffe ziehen, können Sie die Maße sehen.

    Sie können auch im Transformierenbedienfeld die Werte in den Feldern für „B“ (Breite) und „H“ (Höhe) sehen.

    Überprüfen Sie die Abmessungen des skalierten Widgets in den Feldern „Breite“ und „Höhe“.
    Überprüfen Sie die Abmessungen des skalierten Widgets in den Feldern „Breite“ und „Höhe“.

  4. Positionieren Sie das Bedienfelder-Widget mit Registerkarten mithilfe des Auswahlwerkzeugs auf der Seite, nahe am oberen Rand und vertikal zentriert.

  5. Klicken Sie auf die obere mittlere Position der Anheft-Schnittstelle im Steuerungsbedienfeld, um das Bedienfelder-Widget mit Registerkarten an der gewünschten Position anzuheften. Weitere Informationen zum Anheften von Objekten, damit sie nicht scrollen, finden Sie, wenn Sie diesen Link anklicken.

  6. Klicken Sie, während das Bedienfelder-Widget mit Registerkarten noch ausgewählt ist, auf die linke Registerkarte, um den Registerkarten-Container (das Element, das die beiden oberen Registerkarten enthält) auszuwählen. Verwenden Sie das Auswahlwerkzeug, um den mittleren Griff nach unten zu ziehen, bis die Höhe etwa 98 Pixel beträgt.

    Legen Sie im Abstandbedienfeld die folgenden Werte fest, die in der folgenden Abbildung gezeigt werden:

    • Links: 220
    • Rechts: 220
    • Unten: 2
    • Spaltenhöhe: 10
    Legen Sie die Abstandswerte für den Registerkarten-Container im Abstandbedienfeld fest.
    Legen Sie die Abstandswerte für den Registerkarten-Container im Abstandbedienfeld fest.

  7. Verwenden Sie anschließend das Auswahlwerkzeug, um das gesamte Bedienfelder-Widget mit Registerkarten zum oberen Rand der Seite zu ziehen, sodass der obere Rand des Bedienfelds mit Registerkarten am unteren Rand des Kopfzeilenrechtecks ohne vertikalen Abstand zwischen den beiden anliegt.

    Bei Bedarf können Sie einzoomen, um die Ausrichtung der Elemente besser sehen zu können. Setzen Sie den Zoomfaktor anschließend wieder auf 100 % zurück.

Formatierung des Bedienfelder-Widgets mit Registerkarten

Nachdem Sie das Bedienfeld-Widget mit Registerkarten hinzugefügt haben, besteht der nächste Schritt darin, die Formate für die Gestaltung der beiden Registerkarten zu aktualisieren.

  1. Klicken Sie drei Mal auf die linke Registerkarte, um die linke Registerkarte auszuwählen. Öffnen Sie das Statusbedienfeld und wählen Sie den Status „Normal“ aus. Verwenden Sie das Menü „Fläche“, um die Flächenfarbe festzulegen. Setzen Sie die Konturbreite auf 0.

  2. Wählen Sie im Statusbedienfeld den Status „Rollover“ aus. Setzen Sie die Füllfarbe des Status „Rollover“ der Registerkarte auf 571E00. Wenn Sie die Füllfarbe des Status „Rollover“ festlegen, wird der Status „Maustaste gedrückt“ automatisch entsprechend aktualisiert.

    Wählen Sie den Status „Aktiv“ aus und wenden Sie die gleiche Füllfarbe auf die Registerkarte an, während sie im Status „Aktiv“ ist. Der Status „Normal“ wird jetzt mit der Füllfarbe gefüllt, die Sie im vorherigen Schritt ausgewählt haben, und die anderen drei Status werden mit 571E00 gefüllt.

  3. Klicken Sie erneut auf die linke Registerkarte, um die Beschriftung auszuwählen. Der Auswahlindikator zeigt das Wort „Beschriftung“ an, wenn die Beschriftung ausgewählt ist. Wählen Sie im Statusbedienfeld den Status „Normal“ aus und legen Sie dann mithilfe des Textbedienfelds die folgenden Attribute fest, die in der folgenden Abbildung gezeigt sind:

    • Webschrift: Kaushan Script (oder eine andere Script-Schrift, die Sie bevorzugen)
    • Schriftgröße: 26Farbe: #70909D (Sie können diese Farbe umbenennen. Beispielsweise in „blue-menu“)
    • Zeilenabstand: 120 %
    • Ausrichtung: Zentriert
    Gestalten Sie den Beschriftungstext, indem Sie die Einstellungen im Textbedienfeld aktualisieren.
    Gestalten Sie den Beschriftungstext, indem Sie die Einstellungen im Textbedienfeld aktualisieren.

  4. Klicken Sie, während die Beschriftung noch ausgewählt ist, am unteren Rand des Absatzformatebedienfelds auf die Schaltfläche „Neues Format“. Um diese Formatierung mit nur einem Klick beliebig oft wiederzuverwenden, benennen Sie dieses neue Absatzformat. Beispielsweise in „head-tabs“.

  5. Wenn Sie sich das Statusbedienfeld anschauen, sehen Sie, dass die Formatierung, die Sie auf die Beschriftung angewendet haben, während der Status „Normal“ auswählt war, auch auf den Status „Rollover“ und „Maustaste gedrückt“ angewendet wurde. Wählen Sie den Status „Aktiv“ aus und klicken Sie dann erneut auf das Absatzformat „head-tabs“, um die Formatierung auf den Status „Aktiv“ anzuwenden. Damit sind alle Status beider Registerkarten gestaltet.

    Klicken Sie erneut auf den Status „Normal“.

  6. Verwenden Sie das Textwerkzeug, um den Beschriftungstext in allen Registerkarten auszuwählen und geben Sie die entsprechenden Namen für Ihre Beschriftungen ein.

  7. Wenn Sie die linke Registerkarte auswählen und sich das Statusbedienfeld anschauen, sehen Sie die endgültige Formatierung, die auf jede Registerkarte und Beschriftung angewendet wird. Klicken Sie auf die rechte Registerkarte; die Status sehen abgesehen für den Textinhalt jeder Registerkarte gleich aus.

    Schauen Sie sich die Formatierung jeder Registerkarte im Statusbedienfeld in Adobe Muse an.
    Schauen Sie sich die Formatierung jeder Registerkarte im Statusbedienfeld an.

Hinzufügen von Textrahmen zum Inhaltsbereich eines Bedienfelder-Widgets mit Registerkarten

  1. Nehmen Sie sich einen Moment Zeit, um zwischen den beiden Registerkarten mit unterschiedlichen Beschriftungen hin- und her zu klicken. Der Platzhaltertext für die beiden Registerkarten ist verschieden, damit Sie sehen können, dass ein Container angezeigt wird, wenn der andere ausgeblendet wird.

  2. Klicken Sie auf die rechte Registerkarte im Widget. Wenn die rechte Registerkarte ausgewählt ist, wird der entsprechende Inhaltsbereich darunter angezeigt. Dies ist das gleiche Verhalten, das sowohl in der Entwurfsansicht beim Bearbeiten der Seite als auch auf der Website im Internet auftritt. Dies macht Bedienfelder-Widgets mit Registerkarten sehr hilfreich, weil Sie viel mehr Inhalt auf einer einzelnen Seite anzeigen können.

  3. Wählen Sie den Inhaltsbereich für Ihre Registerkarten aus. Der Auswahlindikator zeigt das Wort „Inhaltsbereich“ an, wenn der Inhaltsbereich ausgewählt ist. Wählen Sie die Platzhalterbilddatei aus und drücken Sie die Löschtaste (Mac) bzw. die Rücktaste (Windows), um die Datei zu löschen.

  4. Wählen Sie die vorhandene Platzhaltertextkopfzeile mit dem Textwerkzeug aus. Wählen Sie den fettgedruckten Kopfzeilentext „Mauris sit amet“ aus und löschen Sie ihn.

  5. Wechseln Sie vorübergehend von Adobe Muse zu Ihrem Desktop. Öffnen Sie den Beispieldateiordner und wählen Sie die Datei „text-about-ourstory.txt“ aus. Doppelklicken Sie auf die Datei, um sie in einem Texteditor zu öffnen. Kopieren Sie den ersten Teil der Seite bis zu der Zeile „... crafted through years of baking for friends and family.“

  6. Kehren Sie zu Muse zurück. Wählen Sie den vorhandenen Platzhaltertext mit dem Textwerkzeug aus. Fügen Sie den Textinhalt, den Sie kopiert haben, in den Textrahmen ein. Lassen Sie eine Extrazeile stehen und gehen Sie wieder zum oberen Rand des Textrahmens.

  7. Verwenden Sie das Textbedienfeld, während der Textrahmen ausgewählt ist, um die Einstellungen zur Formatierung des Textes zu wählen. Beispielsweise können Sie folgende Einstellungen auswählen:

    • Schrift: Droid Serif
    • Schriftgrad: 14
    • Farbe: #222222
    • Ausrichtung: Links
    • Zeilenabstand: 120 %
  8. Klicken Sie, während der Text noch ausgewählt ist, am unteren Rand des Absatzformatebedienfelds auf die Schaltfläche „Neues Format“. Doppelklicken Sie auf das neue Absatzformat und benennen Sie es neu. Beispielsweise in „body“. Hierdurch wird es später einfacher, die gleiche Formatierung erneut auf anderen Textinhalt anzuwenden.

  9. Doppelklicken Sie im Farbfelderbedienfeld auf den Farbwert #222222 und benennen Sie diese Farbe um. Beispielsweise in „katieblack“.

  10. Setzen Sie im Steuerungsbedienfeld die Konturfarbe des Textfelds auf #222222 (katieblack) und die Konturbreite auf 5 Pixel.

  11. Verwenden Sie das Menü „Fläche“, um die Füllfarbe des Textfelds auf eine helle beige Farbe (#F8F3E2) zu setzen. Klicken Sie auf den Ordner neben dem Bildbereich und wählen Sie im Beispieldateiordner die Datei mit dem Namen „bg-texture.png“ aus. Wählen Sie im Menü „Anpassen“ die Option „Neben-/Untereinander“ aus.

  12. Legen Sie im Abstandbedienfeld den linken und rechten Abstand fest. Beispielsweise können Sie den linken Abstand auf 24 und den rechten Abstand auf 15 einstellen.

    Legen Sie die Abstandswerte fest, um visuellen Raum um den eingefügten Text zu schaffen.
    Legen Sie die Abstandswerte fest, um visuellen Raum um den eingefügten Text zu schaffen.

  13. Als Nächstes fügen Sie Inhalt zu jedem der Inhaltsbereich-Container hinzu, die den einzelnen Registerkarten entsprechen.

    Verwenden Sie das Auswahlwerkzeug, um das Textfeld zu skalieren. Ziehen Sie es zur linken Seite des Containers und verwenden Sie dann die Griffe, um seine Breite auf etwa die Hälfte des verfügbaren Platzes für den Inhaltsbereich (etwa 390 Pixel breit mal 381 Pixel hoch) zu erweitern.

Kopieren von Textrahmen in einem Bedienfeld mit Registerkarten

Als Nächstes werden Sie das vorhandene Textfeld duplizieren, um einen zweiten Textrahmen zu erstellen, der die rechte Seite des Inhaltsbereichs ausfüllt.

  1. Verwenden Sie das Auswahlwerkzeug, um den Textrahmen auszuwählen. Halten Sie die Wahltaste (Mac) bzw. die Alt-Taste (Windows) gedrückt, während Sie eine duplizierte Kopie des Textrahmens auf die rechte Seite des Inhaltsbereichs ziehen (siehe folgende Abbildung).

    Verwenden Sie die angezeigten Ausrichtungshilfslinien, um sicherzustellen, dass der rechte Textrahmen horizontal am linken Textrahmen ausgerichtet ist.

    Duplizieren Sie den vorhandenen Textrahmen, um eine zweite Spalte auf der rechten Seite zu erstellen.
    Duplizieren Sie den vorhandenen Textrahmen, um eine zweite Spalte auf der rechten Seite zu erstellen.

  2. Wechseln Sie vorübergehend von Muse zum Textbearbeitungsprogramm, das den Inhalt für das Bedienfeld mit Registerkarten enthält. Kopieren Sie den Inhalt, den Sie in Ihre duplizierte Registerkarte einfügen möchten.

  3. Kehren Sie wieder zu Muse zurück. Löschen Sie den gesamten vorhandenen Text im duplizierten rechten Textrahmen. Fügen Sie den neuen Textinhalt ein, den Sie aus der Zwischenablage kopiert haben.

  4. Verwenden Sie ggf. das Auswahlwerkzeug, um beide Textrahmen so zu positionieren, dass sie im Inhaltsbereich an der gewünschten Position ausgerichtet und zentriert sind.

  5. Drücken Sie, während der Textrahmen noch ausgewählt ist, ein Mal die Esc-Taste, um den Inhaltsbereich für die duplizierte Registerkarte auszuwählen. Setzen Sie die Konturbreite auf 0 und die Füllfarbe auf „Ohne“.

Das Kopieren von Textrahmen ist nun fast abgeschlossen. Der letzte Schritt besteht darin, ein kleines Bild hinzuzufügen, um das der Text im linken Textrahmen fließt.

Arbeiten mit Akkordeon-Fenstern

Akkordeon-Bedienfeld-Widgets sind hilfreich, wenn Sie viel Inhalt in einen kleineren Bereich des Bildschirms einpassen möchten. Das Aus- und Einblendverhalten ermöglicht Besuchern, auf ein Beschriftungsbedienfeld zu klicken und den entsprechenden Inhaltsbereichs anzuzeigen. Zusätzlich zu den Desktop-Sites werden Akkordeon-Bedienfeld-Widgets häufig verwendet, um Inhalt in mobilen Layouts anzuzeigen.

In diesem Abschnitt erfahren Sie, wie Sie auf einzelnen Seiten der Site Inhalt hinzufügen können. Sie arbeiten mit einem anderen Widget-Typ, dem so genannten Akkordeon-Widget. Die Fenster-Widgets (Akkordeon-Widget und Fenster-mit-Registerkarten-Widgets) sind hilfreich, da sie es Ihnen ermöglichen, mehr Inhalt auf einer Seite innerhalb eines kleineren Bereichs des Bildschirms anzuzeigen.

  1. Öffnen Sie das Projekt in der Entwurfsansicht, um es zu bearbeiten.

  2. Wählen Sie „Datei“ > „Platzieren“. Navigieren Sie im Dialogfeld „Import“ zu dem Ordner, in dem sich Ihre Elemente befinden und wählen Sie die benötigte Bilddatei aus. Klicken Sie auf Auswählen und dann einmal auf den oberen Rand der Seite, um das Bild in Originalgröße auf der Seite als Kopfzeilentext zu platzieren. Fügen Sie das Akkordeon-Widget unter dieser Kopfzeile hinzu.

Hinzufügen eines Akkordeons zu einer Webseite

  1. Öffnen Sie die Widgets-Bibliothek. (Wählen Sie „Fenster“ > „Widgets-Bibliothek“, um sie zu öffnen. Wenn sie bereits geöffnet ist, klicken Sie auf die obere Registerkarte, um die Widgets-Bibliothek im Satz der angedockten Bedienfelder zu aktivieren.)

  2. Klicken Sie auf „Bedienfelder“, um die Liste der Bedienfeld-Widgets zu erweitern. Wählen Sie das Akkordeon-Widget aus. Ziehen Sie das Akkordeon-Widget auf die Seite und positionieren Sie es in der oberen linken Seite des Seiteninhaltbereichs.

    Ziehen Sie das Akkordeon-Widget auf die Adobe Muse-Seite und legen Sie es ab.
    Ziehen Sie das Akkordeon-Widget auf Ihre Seite und legen Sie es ab.

  3. Mit dem Auswahlwerkzeug können Sie die verschiedenen Komponenten des Widgets auswählen. Bei der Auswahl des gesamten Widgets zeigt der Auswahlindikator in der oberen linken Ecke des Steuerungsbedienfelds das Wort „Widget“ an. Wenn Sie erneut klicken, können Sie sehen, wie der Auswahlindikator aktualisiert wird, um Sie darauf hinzuweisen, dass Sie einen Container oder einen Textrahmen ausgewählt haben. Der Auswahlindikator zeigt an, welcher Teil des Widgets derzeit ausgewählt ist.

    Um die Auswahl dieses Elements eines Widgets aufzuheben, drücken Sie die Esc-Taste, um die Auswahl um eine Stufe nach oben zurückzusetzen, oder drücken Sie sie wiederholt, um die Auswahl aus den verschachtelten Elementen zu verlagern. Alternativ können Sie einfach außerhalb des Widgets auf einen anderen Teil der Seite klicken.

    Standardmäßig hat das Akkordeon-Widget zwei Bedienfelder. Das obere Bedienfeld zeigt den Platzhalternamen für die Registerkarte an: „Lorem 1“. Für die untere Registerkarte wird der Platzhaltername „Ipsum 2“ angezeigt.

  4. Öffnen Sie das Dialogfeld mit den Widget-Optionen, indem Sie auf das runde blaue Pfeilsymbol klicken. Stellen Sie sicher, dass die Option „Gemeinsam bearbeiten“ aktiviert ist. Mit dieser Option wird sichergestellt, dass alle Änderungen, die Sie an einem Registerkartennamen im Akkordeon-Widget vornehmen, auf alle Registerkarten angewendet werden.

    Vergewissern Sie sich, dass „Gemeinsam bearbeiten“ im Bedienfeld „Optionen“ in Akkordeon-Widgets ausgewählt ist.
    Vergewissern Sie sich, dass „Gemeinsam bearbeiten“ im Bedienfeld „Optionen“ in Akkordeon-Widgets ausgewählt ist.

  5. Klicken Sie mit dem Auswahlwerkzeug einmal auf das Widget, um es auszuwählen, und ziehen Sie dann den rechten Griff nach rechts, um die Breite des Widgets zu erweitern und um es breit genug zu machen, um wie in der folgenden Abbildung gezeigt zwei Spalten zu umspannen.

    Ziehen Sie den Griff in das Widget, um das Widget auf zwei Spalten zu erweitern.
    Während das Widget ausgewählt ist, ziehen Sie den rechten Griff, um es so zu erweitern, dass zwei Spalten abgedeckt sind.

  6. Klicken Sie auf das Pluszeichen (+) am unteren Rand des Widgets, unter Ipsum 2, um ein drittes Fenster hinzuzufügen. Das dritte Fenster enthält die Platzhalterregisterkarte „Ipsum 3“.

Im nächsten Abschnitt lernen Sie, wie Sie Textinhalt in einem Fenster des Akkordeon-Widgets platzieren, um es zu füllen. Zuerst aktualisieren Sie jedoch den Namen der obersten Registerkarte, die über dem ersten Fenster im Akkordeon-Widget angezeigt wird.

Hinzufügen von Text zum Akkordeon-Bedienfeld

  1. Verwenden Sie das Auswahlwerkzeug, um den Textrahmen der oberen Registerkarte auszuwählen, die derzeit den Namen „Lorem 1“ hat. Klicken Sie einmal auf „Lorem 1“, um das gesamte Widget auszuwählen und den Container zu erweitern, der der oberen Registerkarte entspricht, und klicken Sie dann auf den Text „Lorem 1“, um den Textrahmen auszuwählen. Das Wort „Textrahmen“ wird im Auswahlindikator angezeigt, wenn der Textrahmen ausgewählt ist.

  2. Doppelklicken Sie auf den Platzhaltertext „Lorem 1“, um ihn zu bearbeiten und geben Sie dann den neuen Text ein.

  3. Wählen Sie den hellgrauen größeren Container unter der ersten Registerkarte aus. Verwenden Sie das Textwerkzeug, um einen Textrahmen im größeren Container per Ziehen zu öffnen.

  4. Geben Sie den Kopfzeilentext in den neuen Textrahmen ein.

Füllen der oberen Registerkarten des Akkordeons mit Hintergrundbildern

  1. Wählen Sie die obere Registerkarte des Akkordeon-Widgets aus, auf der die Kopfzeile angezeigt wird.

  2. Klicken Sie auf die runde blaue Pfeilschaltfläche, um das Menü „Optionen“ zu öffnen. Deaktivieren Sie die Option „Gemeinsam bearbeiten“. Klicken Sie auf eine Stelle außerhalb des Optionsmenüs, um es zu schließen.

  3. Klicken Sie zweimal auf die obere Registerkarte, bis der Auswahlindikator das Wort „Textrahmen“ anzeigt. Klicken Sie bei ausgewähltem Textrahmen der oberen Registerkarte im Steuerungsbedienfeld auf den Link „Fläche“, um das Menü „Fläche“ zu öffnen. Klicken Sie auf den Farbwähler und legen Sie als Hintergrundfüllfarbe „Ohne“ fest, anstelle der standardmäßigen dunkelgrauen Farbe.

  4. Klicken Sie auf das Ordnersymbol im Bereich „Bild“, um das Dialogfeld „Importieren“ zu öffnen. Navigieren Sie zum Ordner mit Ihren Elementen und wählen Sie das Bild aus, das Sie hinzufügen möchten.

  5. Öffnen Sie das Abstandbedienfeld. Halten Sie den Pfeil nach oben im Abschnitt „Innenabstand“ unter „L“ (links) gedrückt, um den Abstand vor der Kopfzeile zu vergrößern, sodass der Text auf dem Hintergrundbild für die Registerkarte zentriert ist.

    Konfiguration des Abstands für das Akkordeon Widgets in Adobe Muse
    Verwenden Sie das Abstandbedienfeld, um den linken Innenabstand zu vergrößern und Text im Akkordeon zu zentrieren.

Die erste Registerkarte des Akkordeon-Widgets ist fertig.

Wenn Sie die Einstellung „Gemeinsam bearbeiten“ deaktiviert werden, wenn Sie die erste Registerkarte bearbeitet haben, werden die Änderungen für die anderen Registerkarten nicht angezeigt. Sie müssen die anderen Registerkarten in Ihrem Akkordeon-Bedienfeld separat formatieren.

Drehen von Akkordeon-Widgets

Standardmäßig werden Akkordeon-Bedienfeld-Widgets eingerichtet, um die Beschriftungs-Bedienfelder am Seitenanfang und die Inhaltsbereiche am Seitenende in einer vertikalen Ausrichtung anzuzeigen.

Standardmäßig werden Akkordeon-Widgets in Adobe Muse vertikal angezeigt.
Wenn Sie ein Akkordeon-Bedienfeld-Widget in eine Seite einfügen, wird es vertikal angezeigt.

Um einen horizontal ausgerichteten Regler mithilfe des Akkordeon-Widgets zu erstellen, führen Sie die folgenden Schritte aus:

  1. Öffnen Sie in der Designansicht die Widgets-Bibliothek und erweitern Sie den Bedienfeldbereich.

  2. Wählen Sie die Option „Akkordeon“ aus dem Bedienfeldbereich und ziehen Sie sie auf die Seite.

  3. Klicken Sie einmal mithilfe des Auswahlwerkzeugs, um das gesamte Widget auszuwählen. Der Auswahlindikator in der oberen linken Ecke des Steuerungsbedienfelds zeigt folgendes Wort an: Akkordeon.

  4. Wenn Sie während des Drehens die Umschalttaste gedrückt halten, werden die Proportionen beschränkt, sodass Sie das Widget in 45-Grad-Schritten bewegen können. Eine Quickinfo erscheint, um den aktuellen Drehwert anzuzeigen, während Sie das Widget drehen.

    Drehen Sie das Widget um -90° oder +90°, je nachdem, auf welche Art Sie das Akkordeon drehen.
    Drehen Sie das Widget um -90° oder +90°, je nachdem, auf welche Art Sie das Akkordeon drehen.

  5. Nachdem Sie das Widget gedreht haben, klicken Sie auf die Verknüpfung „Vorschau“ oder zeigen Sie die Voransicht der Seite in einem Browser an, um zu sehen, dass das Akkordeon die Bedienfelder wie erwartet weiterhin ein- und ausblendet. Prüfen Sie, ob die Beschriftungscontainer so eingestellt sind, den entsprechenden Inhaltsbereich anzuzeigen, wenn sie angeklickt werden.

    Jetzt müssen nur noch die Beschriftungen und die Inhaltsbereich-Container mit Inhalt gefüllt werden, der „nach oben“ ausgerichtet ist und nicht quer angezeigt wird.

    Führen Sie folgende Schritte aus, um Textinhalt in Inhaltsbereichen anzuzeigen. Verwenden Sie die gleiche Technik, die oben beschriebenen wird, um das Textfeld in einem Inhaltsbereich-Container zu drehen.

     

  6. Klicken Sie zweimal auf den Standardtext im Inhaltsbereich. Mit dem ersten Klick wird das gesamte Akkordeon-Widget ausgewählt und mit dem zweiten Klick der Inhaltsbereich-Container. Während der Inhaltsbereich ausgewählt ist, verwenden Sie das Auswahlwerkzeug, um die Größe des Inhaltsbereichs zu erweitern, indem Sie die Größenänderungspunkte anklicken und ziehen.

  7. Während der Inhaltsbereich noch ausgewählt ist, klicken Sie noch einmal, um den Textrahmen innerhalb des Inhaltsbereichs auszuwählen. Zeigen Sie mit dem Cursor auf eine der Textrahmenecken, bis der Drehungscursor angezeigt wird. Halten Sie die Umschalttaste beim Drehen des Textrahmens auf dieselbe 90-Grad-Drehung wie das äußere Widget gedrückt.

    Drehen Sie den vorhandenen Platzhalter-Textinhalt, wenn Sie Text im Inhaltsbereich anzeigen möchten.
    Drehen Sie den vorhandenen Platzhalter-Textinhalt, wenn Sie Text im Inhaltsbereich anzeigen möchten.

  8. Nachdem Sie den Textrahmen gedreht haben, verwenden Sie das Auswahlwerkzeug, um ihn innerhalb des Inhaltsbereichs neu zu positionieren. Verwenden Sie das Textwerkzeug, um den Platzhaltertext durch den tatsächlichen Text zu ersetzen, der angezeigt werden soll. Verwenden Sie dann die Textformatierungsoptionen im Steuerungsbedienfeld und im Textbedienfeld, um den Text zu formatieren (oder wenden Sie Absatzformate an, um das Erscheinungsbild zu aktualisieren).

  9. Platzieren Sie Bilder, zeichnen Sie Rechtecke oder betten Sie HTML ein, um die Inhaltsbereich-Container wie gewünscht zu füllen. Sie müssen diesen Inhalt nicht drehen, da er innerhalb des gedrehten Containers automatisch aufrecht platziert wird.

Aktualisieren von Text in den Beschriftungs-Containern

Um den Text in den Beschriftungs-Containern zu aktualisieren, haben Sie mehrere Optionen.

Wenn die Beschriftungen kurz sind und Sie möchten, dass der Text „quer“ verbleibt (um z. B. Bücher auf einem Regal zu simulieren), können Sie das Textwerkzeug verwenden, um den vorhandenen Platzhaltertext auszuwählen und die gewünschten Beschriftungen einzugeben (siehe folgende Abbildung).

Bearbeiten Sie den Beschriftungstext mit dem Texttool für Akkordeon-Widgets.
Bearbeiten Sie den Beschriftungstext mit dem Texttool für Akkordeon-Widgets.

Wenn Sie keine Textbeschriftungen verwenden möchten, können Sie den vorhandenen Platzhaltertext in den Beschriftungs-Containern einfach löschen und dann die Formatierungsoptionen im Steuerungsbedienfeld oder im Bedienfeld „Füllen“ verwenden (zusammen mit dem Statusbedienfeld), um eine andere Farbe für jede Beschriftung anzuwenden (siehe folgende Abbildung). Um das Aussehen der Beschriftungs-Container einzeln zu aktualisieren, klicken Sie auf die blaue Pfeilschaltfläche, um auf das Menü „Optionen“ zuzugreifen und die Option „Gemeinsam bearbeiten“ zu deaktivieren.

Verwenden Sie das Menü „Fläche“ und Textformatierungsoptionen, um die Beschriftungs-Container und den entsprechenden Textinhalt mit einem Farbcode zu versehen.
Verwenden Sie das Menü „Fläche“ und Textformatierungsoptionen, um die Beschriftungs-Container und den entsprechenden Textinhalt mit einem Farbcode zu versehen.

Eine andere Option ist die Verwendung eines Bildbearbeitungsprogramms, um Bilder zu erstellen, die in die Beschriftungsbedienfelder eingefügt werden. Platzieren Sie die Bilder auf der Seite, schneiden Sie sie aus, wählen Sie den Beschriftungstext mit dem Textwerkzeug und fügen Sie die Bilder dann in die Beschriftungs-Container ein. Falls gewünscht, können die Bilder vertikal ausgerichteten Text enthalten (siehe folgende Abbildung).

Fügen Sie Bilder mit vertikal ausgerichtetem Text in die Beschriftungs-Container ein.
Fügen Sie Bilder mit vertikal ausgerichtetem Text in die Beschriftungs-Container ein.

Hinzufügen von Ankerlinks in Akkordeon-Bedienfeldern

Sie können jedes Seitenelement mit Akkordeon-Widgets verknüpfen, indem Sie Ankerlinks in Akkordeon-Bedienfeldern hinzufügen. Hier erfahren Sie, wie Sie Ankerlinks zu Akkordeon-Widgets hinzufügen können:

  1. Wählen Sie das Akkordeon-Widget aus, für das der Ankerlink hinzugefügt werden soll. Klicken Sie auf die Registerkarte, zu der Sie den Ankerlink hinzufügen möchten.

  2. Klicken Sie auf das Ankerwerkzeug, um einen Ankerlink im Platzierungswerkzeug zu laden.

    Wählen Sie das Ankerwerkzeug im Bedienfeld „Werkzeuge“ aus.
    Wählen Sie das Ankerwerkzeug im Bedienfeld „Werkzeuge“ aus.

  3. Platzieren Sie den Ankerlink im Akkordeon-Widget.

    Ein Popupmenü zum Umbenennen des Ankers wird angezeigt. Geben Sie einen entsprechenden Namen für den Anker ein und klicken Sie auf „OK“.

    Platzieren des Ankerlinks im Akkordeon-Widget
    Platzieren des Ankerlinks im Akkordeon-Widget

    Sie können diesen Anker nun mit beliebigen Seitenelementen von allen Seiten Ihrer Website verknüpfen.

  4. Wählen Sie ein Seitenelement aus, um es mit diesem Anker zu verknüpfen. Wählen Sie in der Hyperlinks-Dropdownliste oben den Anker aus, den Sie gerade erstellt haben.

    Wenn Sie das Seitenelement auf Ihrer Live-Site anklicken, zeigt die Seite die Akkordeon-Registerkarte, für die Sie den Ankerlink platziert haben.

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