Im Folgenden finden Sie ein Beispiel zur Darstellung von Inhalten in Tabs in Anlehnung an die Darstellung der Zielgruppen-Navigation.
Plugin einschalten
Bevor Sie dieses Plugin verwenden können, müssen Sie es zuerst einschalten!
Ansonsten werden Ihre Shortcodes nur auf der Seite angezeigt anstatt ausgeführt zu werden.
Gehen Sie zu Dashboard -> JGU Tools -> Plugins und aktivieren Sie das Plugin. Ausführliche Anleitung zum Plugin aus- und einschalten
Achtung : ❗ Wechseln Sie in den Modus Text (Kartenreiter oben rechts), bevor Sie etwas an den Shortcodes ändern!
Live-Beispiel
So sieht das aus: → JGU Content Layout - waagerechte rote Knopfleiste
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 Wertopengesetzt werden.
Beispiel:[jgu_content_layout_item status="open"]Beispiel-Text[/jgu_content_layout_item]