Tutorial: Inhalts­gruppen

Mit Inhalts­gruppen ergeben sich für Sie weitere Gestaltungs­möglich­keiten. Vor allem kurze Erklärungen, wie die all­seits bekannten FAQs, lassen sich so sehr gut darstellen. Unser gesamter Tutorial-Bereich ist übrigens mit der Inhalts­gruppe "Accordion" umge­setzt 😉.

Bei Fragen gilt wie immer >> wir stehen Ihnen gerne zur Verfügung 😊.

Inhaltsgruppen | Inhalte | Darstellungsmöglichkeiten

Inhalts­gruppen

Inhalte

Darstel­lungs­möglich­keiten

Für die Darstellung Tabs können Sie aus­wählen, ob der Inhalt über eine eigene URL erreicht werden soll.
Achtung: Wählen Sie hier "Ja" in Kombination mit SEO-Daten Vererbung aus, erzeugen Sie unter Umständen Duplicate Content!

Mit Klick auf Über­nehmen speichern Sie Ihre Ein­stellungen.

Die mobile Darstellung sieht eben­falls aus wie am Desktop.

Einstellungen bei der Darstellung Tabs
Einstellungen im Backend

Das Styling für die Tabs können Sie unter Customizing Erscheinungs­bild Inhalts­gruppen individuell gestalten.

Beispiel Dar­stellung Tabs:

Informationen zum Produkt wie Material, Größen usw.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Legen Sie hier Montageanleitungen, Pflegehinweise o.ä. an.

Fügen Sie Dokumente einfach als PDF ein, wie im Tutorial beschrieben.

Information zu Liefer­kosten, Speditions­lieferung, usw.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Bei der Darstellung Accordion lassen sich mehrere Inhalte gleich­zeitig öffnen.

Auch hier können Sie aus­wählen, ob die Inhalte über eine eigene URL erreich­bar sein sollen.

Achtung: Wählen Sie "Ja" aus in Kombination mit SEO-Daten Vererbung, wie bei der Darstellung als Tabs, erzeugen Sie unter Umständen Duplicate Content!
Speichern Sie wieder mit einem Klick auf den Über­nehmen-Button.
Einstellungen bei der Darstellung Accordion
Einstellungen im Backend

Die Darstellung sieht in den mobilen Ansichten gleich aus wie am Desktop.
Das Styling für die Accordions können Sie unter Customizing Erscheinungs­bild Inhalts­gruppen anpassen.

Darstellung Accordion:

Informationen zum Produkt wie Material, Größen usw.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Legen Sie hier Montageanleitungen, Pflegehinweise o.ä. an.

Fügen Sie Dokumente einfach als PDF ein, wie im Tutorial beschrieben.

Information zu Liefer­kosten, Speditions­lieferung, usw.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Bei der Darstellung Inline werden alle Inhalte dieser Inhalts­gruppe voll­ständig ange­zeigt. Geeignet ist diese Darstellung für Inhalte, die Sie mehr­mals auf der Website verbauen möchten.

Die Darstellung sieht in allen Ansichten gleich aus.

Einstellungen bei der Darstellung Inline
Einstellungen im Backend
Beispiel Darstellung Inline:

Informationen zum Produkt wie Material, Größen usw.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Legen Sie hier Montageanleitungen, Pflegehinweise o.ä. an.

Fügen Sie Dokumente einfach als PDF ein, wie im Tutorial beschrieben.

Information zu Liefer­kosten, Speditions­lieferung, usw.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Für die Dar­stellung Toggle gibt es im CMS eine Vorlage, die Sie anpassen können. Alternativ erklären wir Ihnen Schritt für Schritt wie Sie eine Inhalts­gruppe als Dar­stellung Toggle erstellen, da Sie dabei einiges beachten müssen. Ganz unten im Tutorial finden Sie ein Beispiel.
  • Toggle Vorlage

Sie möchten Inhaltsgruppen in der Darstellung Toggle in 3 Spalten mit Bild, Überschrift und weiteren Inhalten anlegen? Wir haben Ihnen dafür eine Vorlage erstellt. Klicken Sie dazu auf das Symbol für die Vorlagen rechts oben im Inhalts­editor und wählen Sie die Vorlage "3 Spalten mit Bild und Toggle" aus.

Auf Ihrer Website lässt sich mit der Vorlage schnell & einfach eine tolle Darstellung mit Inhalts­gruppen als Toggle zaubern. Tauschen Sie in der Vorlage einfach Ihre Bilder und Texte aus und schon sind Sie fertig.

Verwenden Sie bei der Darstellung Toggle nur einen Inhalt, wird nur das Öffnen bzw. Schließen-Icon ange­zeigt. Um bei Toggle einleitend einen Inhalt anzu­zeigen, zum Beispiel ein Bild, eine Überschrift oder einen Einleitungs­text, müssen Sie zwei Inhalte inein­ander ver­schachteln. Die Vor­gehens­weise zeigen wir Ihnen in der Schritt für Schritt-Anleitung.

  • Schritt für Schritt-Anleitung, wie Sie am besten vorgehen, um Ihre Inhalte in der Darstellung Toggle zu erstellen.

Zum Togglen benötigen Sie zwei Inhalte, die inein­ander "ver­schachtelt" werden:

  1. einen ein­leitenden Inhalt, zum Beispiel eine Über­schrift oder einen Kurz­text, der immer sicht­bar ist.
  2. einen mit dem Inhalt, der mit einem Icon ge­öffnet und ge­schlossen wird. Das Icon wird immer beim zweiten Inhalt ange­zeigt.
    Das Icon für das Öffnen und Schließen passen Sie unter Customizing Erscheinungs­bild Inhalts­gruppen Icon für Accordion und Toggle an.

Im nach­folgenden Beispiel haben wir die beiden Inhalte möglichst sprechend benannt.

Wichtig: Bei den beiden Inhalten MUSS "Inhalt nach­laden" immer deaktivert sein!

in der Listenübersicht bei Toggle Inhalt nachladen deaktivieren

Inhalt nach­laden deaktivieren

Listenübersicht Inhalte

Anschließend erstellen Sie eine Inhalts­gruppe und ordnen mindestens die beiden oben angeführten Inhalte zu.

Beim Toggle ist die Reihen­folge bei der Zu­ordnung entscheidend. Nur der erste zuge­ordnete Inhalt wird voll­ständig ange­zeigt, jeder darunter zuge­ordnete Inhalt, wird mit dem Toggle-Icon darge­stellt und erst nach Klick auf das Icon ge­öffnet. Sie können weitere Inhalte zuordnen, die dann alle erst nach Klick auf das Icon sicht­bar werden.

Reihenfolge beim Zuordnen der Inhalte für die Darstellung Toggle entscheidend

Reihen­folge der zuge­ordneten Inhalte wichtig

zugeordnete Inhalte in der richtigen Reihenfolge
Im Inhalts­editor erstellen Sie ein neues Modul.
  • Modul: Inhalts­gruppe
  • Inhalts­gruppe: hier wählen Sie die gewünschte Inhalts­gruppe aus, in unserem Beispiel "Vorlage Toggle (nicht löschen)"
  • Darstellung: Toggle
  • Bei allen vier Auflösungen können Sie den Status einstellen:
    • Status "Geschlossen" bedeutet, dass nur der erste Inhalt offen ist, in unserem Beispiel die Über­schrift, alle weiteren Inhalte werden mit dem Toggle-Icon ge­öffnet.
    • Status "Geöffnet" bedeutet, dass alle Inhalte offen sind und über das Toggle-Icon ge­schlossen werden.
    • Status "Automatisch" bedeutet, dass die Inhalte automatisch offen sind und über das Toggle-Icon ge­schlossen werden
  • Mit Klick auf Über­nehmen bestätigen Sie die Ein­stellungen.
    Sie müssen anschließend die Inhalts­seite nochmal speichern, damit die Inhalts­gruppe online er­scheint.
Einstellungsmöglichkeiten beim Modul Inhaltsgruppe mit der Darstellung Toggle
Einstellungen beim Modul Inhaltsgruppe
  • Und hier unser oben verwendetes Beispiel mit dezentem Hinter­grund im Layout 66% begrenzt.
  1. Im Inhalt "Über­schrift Toggle" haben wir lediglich eine Über­schrift ange­legt und ein paar Stich­wörter. Sie können hier auch einen kurzen Text unter die Über­schrift schreiben, der nach dem Öffnen dann voll­ständig sicht­bar wird.
  2. Im Inhalt "weiter­lesen" haben wir den eigentlichen Inhalt ange­legt. Die Gestaltung ist hier ganz offen. Bei unserer Ein­stellung wird dieser Inhalt erst sicht­bar, sobald Sie auf das Öffnen-Icon klicken.

Über­schrift Toggle

mit ein paar Stich­worten oder kurzem Einleitungs­text

Dieser Text er­scheint, sobald Sie auf das Toggle-Icon klicken.
Icon einstell­bar unter Customizing Erscheinungs­bild Inhalts­gruppen Icon für Accordion und Toggle.

  • Text­länge,
  • Inhalte wie Bilder, Medien­galerie, Slide­show etc.

legen Sie individuell fest.

Berück­sichtigen Sie beim Inhalt mit der Über­schrift die Über­schriften­struktur!

zurück zur Übersicht