Studio Editor: Einklappbaren Text hinzufügen und anpassen

4 Min. Lesezeit
Einklappbarer Text ist eine gute Option, wenn du viele Informationen anzeigen möchtest. Teile des Textes werden ausgeblendet und Besucher können den vollständigen Text anzeigen, indem sie auf einen Erweitern-Button oder einen Link zum vollständigen Text klicken.
Gif einer Live-Website, bei der durch Anklicken eines Button einklappbarer Text geöffnet wird
In diesem Artikel erfährst du, wie du mit einklappbarem Text arbeitest:

Einklappbaren Text hinzufügen

Je nach Bedarf kannst du einklappbaren Text in verschiedenen Stilen zu der Seite hinzufügen. Einige Presets enthalten einen Button, der den Text auf der aktuellen Seite erweitert, andere zeigen einen Link an, der Besucher zu einer anderen Seite führt, um den gesamten Text zu lesen.

Um einklappbaren Text hinzuzufügen:

  1. Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
  2. Klicke auf Text.
  3. Klicke auf Einklappbarer Text.
  4. Ziehe das gewünschte Textfeld auf die Seite.
Screenshot des Tabs „Text“ im „Elemente hinzufügen“-Panel, wo du einklappbaren Text findest

Das Layout des einklappbaren Textes anpassen

Lege fest, wie Besucher den gesamten Text lesen können. Füge einen Button hinzu, der den Volltext auf der aktuellen Seite öffnet, oder einen Link, der die Besucher zum vollständigen Text weiterleitet.
Du kannst auch die Ausrichtung, den Abstand und die Anzahl der Zeilen festlegen, die angezeigt werden, bevor ein Besucher darauf klicken muss.

Um das Layout des Textes anzupassen:

  1. Klicke auf das einklappbare Textfeld.
  2. Klicke auf das Symbol für Layout .
  3. Passe das Layout mit den verfügbaren Optionen an:
    • Wie soll der Text angezeigt werden?: Wähle, wie der gesamte Text angezeigt wird:
      • Eingeklappt: Besucher sehen eine Textvorschau und müssen auf einen Button oder einen Link klicken, um den gesamten Text zu lesen.
      • Alles anzeigen: Der gesamte Text wird auf der Seite angezeigt, nicht eingeklappt.
    • Anzahl angezeigter Zeilen: Wähle aus, wie viele Textzeilen angezeigt werden sollen, bevor Besucher auf einen Button klicken müssen, um den Rest zu sehen.
    • Button-Ausrichtung: Richte den Button, auf den Besucher klicken, um mehr zu lesen links, rechts oder mittig aus.
    • Abstand zwischen Text und Button: Vergrößere oder verringere den Abstand zwischen dem Text und dem Button.
Screenshot des Layout-Panels mit einklappbarem Text und der verfügbaren Optionen

Den einklappbaren Text bearbeiten

Nachdem du ein einklappbares Textfeld hinzugefügt hast, klicke auf Text ändern, um den gesamten Text (bis zu 120.000 Zeichen) einzugeben. Du kannst auch den Text des Buttons oder des Links bearbeiten, mit dem Besucher mehr lesen können.

Um Text einzugeben oder zu bearbeiten:

  1. Klicke auf das einklappbare Textfeld.
  2. Klicke Text ändern.
  3. Gib den vollständigen Text ein oder füge ihn unter Text ändern ein.
  4. Bestimme, was der Button bewirkt:
    • Erweitern: Wenn du auf den Button klickst, wird das Textfeld auf der aktuellen Seite erweitert, um den gesamten Text anzuzeigen.
    • Link: Wenn Besucher auf den Button klicken, werden sie zu einer anderen Seite mit dem Volltext weitergeleitet. Achte darauf, dass du unter Wohin verlinkt dieser Button? das Ziel auswählst.
  5. Gib den Text ein, der auf dem oder den Buttons angezeigt werden soll.
Screenshot des Panels und der Optionen, die angezeigt werden, wenn du in einem einklappbaren Textfeld auf Text ändern klickst

Die einklappbare Textbox gestalten

Gestalte das einklappbare Textfeld so, dass es der Ästhetik der Seite entspricht. Du kannst das Aussehen des Textfelds selbst anpassen (z. B. die Hintergrundfarbe), den Text formatieren und den Button/Link anpassen, der zum Volltext führt.

Um die einklappbare Textbox zu gestalten:

  1. Klicke auf das einklappbare Textfeld.
  2. Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen .
  3. Scrolle nach unten zu Design.
  4. Wähle eine Option unter Was möchtest du gestalten?:
    • Text: Passe die Box an, die den Text enthält (z. B Hintergrundfarbe, Ränder, Schatten) sowie den eigentlichen Text (Schriftart, Größe und mehr) anzeigen.
    • Button: Passe den Link oder Button an, auf den Besucher klicken, um den Volltext anzuzeigen. Du kannst den Button für 3 verschiedene Status anpassen: Standard, Mouseover und Deaktiviert.
Hinweis:
Derzeit ist die Option zum Skalieren von Text für einklappbaren Text nicht verfügbar.
Screenshot, der die Designoptionen für einklappbaren Text im Inspektor-Panel zeigt

War das hilfreich?

|