JGU Content Layout – Tabs (Ansicht Zielgruppen-Navigation)

Im Folgenden finden Sie ein Beispiel zur Darstellung von Inhalten in Tabs in Anlehnung an die Darstellung der Zielgruppen-Navigation.

Sie benötigen für diese Beispiele das Plugin JGU Content Layout!

Inhaltsverzeichnis

  1. Live-Beispiel
  2. Zugehöriger Quelltext
  3. Erläuterungen
    1. Shortcode jgu_content_layout
    2. Shortcode jgu_content_layout_item

Live-Beispiel


Text Block #1

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. 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


Text Block #2

Dieser Tab ist beim Öffnen der Seite aufgeklappt.
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. 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.


Text Block #3

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. 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.


Text Block #4

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. 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.


Text Block #5

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. 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.

Zugehöriger Quelltext

Erläuterungen

Shortcode jgu_content_layout

Der Shortcode [jgu_content_layout] umgibt den gesamten Inhaltsbereich, der in Tabs dargestellt werden soll, d.h. am Ende muss dieser Shortcode mit [/jgu_content_layout] geschlossen werden. Dieser Shortcode benötigt die Parameter display="tab" und layout="zgn".

Beispiel: [jgu_content_layout display="tab" layout="zgn"]...[/jgu_content_layout]

Die Punkte werden ersetzt durch den folgenden Shortcode [jgu_content_layout_item].

Shortcode jgu_content_layout_item

Der Shortcode [jgu_content_layout_item] umgibt den Inhalt eines Blocks eines einzelnen Tabs und muss am Ende mit [/jgu_content_layout_item] geschlossen werden. Innerhalb dieses Bereichs kann der Text auch formatiert werden (siehe Beispiel oben).

Der Shortcode kann über die folgenden Parameter angepasst werden:

  1. Parameter: title
    Funktion: Titel des Blocks (Freitext)
    Beispiel: [jgu_content_layout_item title="Test"]Beispiel-Text[/jgu_content_layout_item]
  2. Parameter: status
    Funktion: Möglichkeit zu beeinflussen, ob dieser Tab beim Laden der Seite geöffnet dargestellt werden soll
    Mögliche Werte: open, wenn dieser Parameter nicht gesetzt wurde, ist der Tab beim Laden der Seite standardmäßig geschlossen
    Hinweis: Es darf nur für einen Tab der Wert open gesetzt werden.
    Beispiel: [jgu_content_layout_item status="open"]Beispiel-Text[/jgu_content_layout_item]