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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
[jgu_content_layout display="tab" layout="zgn"] [jgu_content_layout_item title="Block #1"]<strong>Text Block #1</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <span style="text-decoration: underline;">nonumy</span> 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. <em>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</em>[/jgu_content_layout_item] [jgu_content_layout_item title="Block #2" status="open"]<strong>Text Block #2</strong> Dieser Tab ist beim Öffnen der Seite aufgeklappt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <span style="text-decoration: underline;">nonumy</span> 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. <em>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.</em>[/jgu_content_layout_item] [jgu_content_layout_item title="Block #3"]<strong>Text Block #3</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <span style="text-decoration: underline;">nonumy</span> 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. <em>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.</em>[/jgu_content_layout_item] [jgu_content_layout_item title="Block #4"]<strong>Text Block #4</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <span style="text-decoration: underline;">nonumy</span> 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. <em>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.</em>[/jgu_content_layout_item] [jgu_content_layout_item title="Block #5"]<strong>Text Block #5</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <span style="text-decoration: underline;">nonumy</span> 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. <em>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.</em>[/jgu_content_layout_item] [/jgu_content_layout] |
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:
- Parameter:
title
Funktion: Titel des Blocks (Freitext)
Beispiel:[jgu_content_layout_item title="Test"]Beispiel-Text[/jgu_content_layout_item]
- 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 Wertopen
gesetzt werden.
Beispiel:[jgu_content_layout_item status="open"]Beispiel-Text[/jgu_content_layout_item]