Kompatibilität:

WebSite X5 Evo und Pro

Oft besteht das Problem nicht nur darin, wie viel Text eingefügt werden soll, sondern auch darin, wie dieser klarer und ansprechender gestaltet werden kann. Lange Inhalte kompakt darzustellen ist wichtig, aber eine visuelle Unterstützung kann wirklich den Unterschied machen.


Mit dem Objekt Accordion Image können Sie Inhalte in aufklappbare Abschnitte organisieren und gleichzeitig jedem Block ein Bild zuordnen, das sich je nach Auswahl dynamisch ändert. Auf diese Weise erhalten Sie ein übersichtliches, interaktives Layout, das die Inhalte deutlich wirkungsvoller vermittelt.


Sehen Sie sich einige Beispiele dessen an, was Sie auf der Seite Vorschau erstellen können.



So fügen Sie Inhalte hinzu

Die idealen Inhalte für das Accordion Image sind in Abschnitte unterteilt, die jeweils durch einen Titel eingeleitet werden: Servicepräsentationen, Prozessschritte, Produkteigenschaften usw.


Jeder Abschnitt entspricht einem Block und muss mindestens einen Titel und einen Text enthalten, dem ein Bild zugeordnet ist.

  • Doppelklicken Sie auf das eingefügte Objekt Accordion Image, um das Fenster mit allen verfügbaren Optionen zu öffnen.
  • Bleiben Sie im Bereich Inhalt und klicken Sie auf die Schaltfläche Hinzufügen, um einen neuen Block in die Liste einzufügen.
  • Wählen Sie den neu erstellten Block aus und geben Sie die erforderlichen Informationen ein. Für jeden Block können Sie festlegen:
    • einen Titel;
    • einen Text, also den eigentlichen Inhalt des Blocks;
    • ein Bild, das angezeigt wird, wenn der Block aktiv ist. Sie können es aus lokal auf dem PC gespeicherten Bildern oder aus den Online-Bibliotheken auswählen und durch das Hinzufügen eines Alternativtexts barrierefrei machen (siehe Barrierefreiheit von Bildern: die Bedeutung von Alternativtext);
    • eine Schaltfläche, indem Sie deren Textbezeichnung eingeben (das Design wird im Bereich Stil festgelegt);
    • einen Link, verfügbar, wenn ein Bild und/oder eine Schaltfläche vorhanden ist. Klicken Sie auf , um das Fenster Link zu öffnen und die Aktion auszuwählen, die beim Klick auf das Bild und/oder die Schaltfläche ausgeführt werden soll. 
  • Wiederholen Sie diese Schritte, um alle benötigten Blöcke zu erstellen.
  • Um die Blockliste zu bearbeiten, wählen Sie den gewünschten Block aus und verwenden Sie die Schaltfläche Entfernen, um ihn zu löschen, oder die Pfeiltasten, um ihn zu verschieben.
#tip - Zum Schreiben oder Bearbeiten von Titeln, Texten und Beschriftungen von Schaltflächen können Sie  MagicText, den in WebSite X5 integrierten KI-Assistenten, verwenden.


So definieren Sie das grafische Erscheinungsbild

Nachdem Sie die Inhalte eingefügt haben, können Sie das Verhalten und das grafische Erscheinungsbild des Objekts festlegen, um es an das Design Ihrer Website anzupassen.

  • Öffnen Sie den Bereich Stil, um die einzelnen Elemente des Objekts zu bearbeiten.
  • Wählen Sie das Element aus, das Sie ändern möchten: Block, Titel, Aktiver Titel, Icon, Text, Bild oder Schaltfläche.
  • Verwenden Sie die verfügbaren Optionen für jedes Element, um Layout, Effekte, Rahmen, Farben, Schriftarten, Abstände und Ausrichtungen festzulegen.
  • Sie können sehr unterschiedliche Ergebnisse erzielen. Wenn Sie fertig sind, klicken Sie auf Ok, um zu bestätigen.


So ändert sich das Layout bei wenig Platz

Das Objekt Accordion Image ist so konzipiert, dass es sich automatisch an den verfügbaren Platz anpasst und dabei stets eine gute Lesbarkeit der Inhalte gewährleistet.


Unter normalen Bedingungen werden die Bilder neben den Textblöcken angezeigt. Wenn jedoch der für den Text verfügbare Platz unter einen bestimmten Wert fällt (automatisch vom Programm festgelegt), ändert sich das Verhalten des Objekts:

  • Die Bilder werden nicht mehr neben dem Text angezeigt;
  • stattdessen werden sie direkt in die Blöcke eingefügt.


Auf diese Weise entspricht das Layout dem des Objekts Accordion Text & FAQ.


Dies kann beispielsweise passieren:

  • wenn das Objekt in der Desktop-Ansicht in eine Spalte mit begrenzter Breite eingefügt wird;
  • wenn zu niedrigeren Auflösungen gewechselt wird, etwa auf Tablets oder Smartphones.


Dieses Verhalten wurde entwickelt, um zu verhindern, dass der Text zu stark komprimiert und dadurch schwer lesbar wird.


Bereit zur Verwendung?

Möchten Sie Ihre Inhalte klarer, dynamischer und visueller gestalten? Installieren Sie jetzt das Objekt Accordion Image


Sie haben nicht genügend Credits, um dieses Objekt zu kaufen? Alle Credit-Pakete anzeigen