Editor X: Ein Akkordeon hinzufügen und anpassen

5 Min. Lesezeit
Editor X wird zu Wix Studio, unserer neuen Plattform für Agenturen und Freelancer.Mehr über Wix Studio erfahren
Hinweis
Diese Funktion ist noch nicht für alle Nutzer verfügbar.
Verwende das Akkordeon-Element, um eine große Menge an Inhalten auf kleinem Raum anzuzeigen. Indem Besucher Elemente auf- und zuklappen, können sie ganz einfach die gewünschten Informationen finden, ohne durch eine lange Liste scrollen zu müssen.
GIF, das ein Beispiel für das Akkordeonelement auf einer Editor-X-Website zeigt
In diesem Artikel erfährst du mehr über folgende Themen:

Ein Akkordeonelement hinzufügen

Wähle ein Design für dein Akkordeon aus, um loszulegen. Du kannst jedes Element in deinem Akkordeon personalisieren, um deinen Inhalt anzuzeigen. Füge die benötigten Elemente hinzu und organisiere sie nach Belieben im Container.

Um ein Akkordeonelement hinzuzufügen:

  1. Klicke oben im Editor X auf Elemente hinzufügen .
  2. Klicke auf Layout-Tools.
  3. Klicke auf Akkordeon.
  4. Ziehe ein Akkordeon, das dir gefällt, auf deine Seite.
  5. Bearbeite den Inhalt jedes Akkordeonelements:
    1. Klicke in deinem Editor auf das Akkordeon.
    2. Klicke auf Elemente verwalten.
    3. Klicke auf das Element, das du bearbeiten möchtest. Dadurch wird das Element geöffnet, sodass du sehen kannst, was derzeit angezeigt wird.
    4. Füge deinem Artikel die relevanten Elemente und Informationen hinzu.
Screenshot des „Elemente hinzufügen“-Panels, in dem du ein neues Akkordeonelement hinzufügen kannst

Akkordeonelemente hinzufügen und verwalten

Verwalte die Elemente, die in deinem Akkordeon angezeigt werden. Du kannst weitere Elemente zu deinen Inhalten hinzufügen, ihnen neue Titel geben und ihre Reihenfolge ändern.

Um Akkordeonelemente hinzuzufügen und zu verwalten:

  1. Klicke in deinem Editor auf das Akkordeon.
  2. Klicke auf Elemente verwalten.
  3. Fahre mit der Maus über das Element und klicke auf das Symbol für Weitere Aktionen .
  4. Wähle aus, was mit diesem Akkordeonelement geschehen soll: Duplizieren, Umbenennen oder Löschen.
Tipps:
  • Klicke unten im Panel auf Element hinzufügen, um ein neues leeres Element hinzuzufügen.
  • Du kannst die Reihenfolge deiner Elemente ändern. Halte neben einem Element das Symbol für Neu anordnen  und ziehe es an die gewünschte Stelle.
Screenshot des „Akkordeon verwalten“-Panels, in dem du Elemente hinzufügen, umbenennen, duplizieren, löschen und neu anordnen kannst

Wählen, wie sich das Akkordeon öffnet und schließt

Lege fest, wie dein Akkordeon aussieht, wenn Besucher die Seite laden. Du kannst alle Elemente geöffnet haben, damit die Informationen leicht zugänglich sind, oder für ein minimalistisches Aussehen geschlossen haben. Du kannst auch auswählen, ob Besucher mehrere Elemente gleichzeitig öffnen können oder nicht.

Um auszuwählen, wie sich das Akkordeon öffnet und schließt:

  1. Klicke in deinem Editor auf das Akkordeon.
  2. Klicke auf das Symbol für Einstellungen .
  3. Wähle unter Standardzustand wählen eine Option aus:
    • Alle Elemente geschlossen: Besucher sehen zuerst die geschlossenen Elemente des Akkordeons. Sie entscheiden, welches Element sie erweitern möchten, um mehr zu erfahren.
    • Erstes Elemente geöffnet: Besucher sehen den Inhalt des obersten Elements, während die anderen Elemente geschlossen sind.
    • Alle Elemente geöffnet: Besucher sehen den Inhalt aller Elemente, wenn die Seite geladen wird.
  4. Klicke auf den Schalter Mehrere geöffnete Elemente zulassen:
    • Aktiviert: Besucher können so viele offene Elemente im Akkordeon haben, wie sie möchten.
    • Deaktiviert: Besucher können nur ein Element gleichzeitig öffnen.
  5. (Optional) Füge einen Übergangseffekt hinzu, der angezeigt wird, wenn Besucher auf ein Element klicken, um es zu öffnen.
Screenshot des Bedienfelds „Akkordeon-Einstellungen“, in dem du festlegen kannst, wie es geöffnet und geschlossen wird

Ein Akkordeon gestalten

Du kannst jeden Teil des Akkordeons so gestalten, dass er zum Rest deiner Seite passt. Passe die Titel der Elemente, die Container, die den Inhalt der einzelnen Elemente anzeigen, oder den gesamten Bereich eines Elements (einschließlich Titel und Container) an.

Um ein Akkordeon zu gestalten:

  1. Klicke in deinem Editor auf das Akkordeon.
  2. Klicke oben im Editor X auf das Inspektor-Symbol .
  3. Klicke auf den Tab Design .
  4. Wähle aus dem Aufklappmenü aus, was du gestalten möchtest:
    • Titel: Dies sind die Titel deiner Elemente. Du kannst die Titel so gestalten, dass sie anders aussehen, wenn Besucher mit der Maus darüber fahren.
    • Container: Dies sind die Container, die den Inhalt jedes Elements anzeigen.
    • Akkordeonelemente: Dies steuert den gesamten Raum eines Akkordeonelements (einschließlich Titel und Container).
  5. Verwende die verfügbaren Optionen, um verschiedene Hintergründe, Schriftarten, Ecken, Ränder und mehr auszuwählen.
Screenshot des Design-Tabs im Inspektor, in dem du das Akkordeonelement gestalten kannst

Das Akkordeonlayout anpassen

Passe das Layout des Akkordeonelements an deine Bedürfnisse an. Du kannst die Ausrichtung, den Abstand und die Position deiner Elementtitel sowie das Symbol wählen, das neben jedem Titel angezeigt wird.

Um das Akkordeon-Layout anzupassen:

  1. Klicke in deinem Editor auf das Akkordeon.
  2. Klicke auf das Symbol für Layout .
  3. Passe das Layout des Akkordeonelements an:
    • Ein Symbol auswählen: Wähle das Symbol aus, das neben den Titeln deiner Elemente angezeigt wird: Pfeil oder Plus-Zeichen.
    • Symbolposition: Entscheide, ob das Symbol links oder rechts von deinen Titeln angezeigt wird.
    • Titel - Abstand: Ziehe die Schieberegler, um den Titel der Elemente horizontalen und vertikalen Abstand hinzuzufügen.
Screenshot des Akkordeonlayout-Panels im Editor X
Tipp:
Jedes Element verfügt über ein integriertes 1x1-Raster, die du an deine Bedürfnisse anpassen kannst. Füge weitere Zeilen und Spalten hinzu, um dein pixelgenaues Layout zu erstellen.

War das hilfreich?

|