Mit dem Shortcode: [jgu_content_layout display="tab"] strukturieren Sie Ihren Seiteninhalt in einzelne Kartenreiter
Plugin JGU Content Layout einschalten
Plugin einschalten
Manche besondere Eigenschaften werden nur in einigen WordPress-Projekten benötigt. Da jede neue Eigenschaft Ihre Seite ein wenig langsamer macht, sind diese Erweiterungen standardmäßig deaktiviert. Die Erweiterungen heißen in WordPress Plugins. Zuerst müssen Sie ein Plugin (einmalig) aktivieren. Sie steuern die Plugins durch sogenannte Shortcodes. Shortcodes sind Kommandos auf Ihrer Webseite, mit dem Sie dem Plugin sagen, was genau es tun soll. Sie erkennen Shortcode-Kommandos daran, daß sie in der Webseite in eckigen Klammern stehen.
Bevor Sie das 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 auf der Seite, an der Sie das Plugin durch den Shortcode verwenden wollen, in den Modus Text (Kartenreiter oben rechts), bevor Sie etwas an den Shortcodes ändern!
Inhaltsverzeichnis
Live-Demo
So sieht das aus: → JGU Content Layout - Tabs
Shortcode-Beispiel der Live-Demo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
[jgu_content_layout display="tab"] [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> OBACHT! NICHT DIE LETZTE ZEILE WEGWERFEN ODER VERGESSEN (Denn das ist die schließende jgu_content_layout-Klammer!) [/jgu_content_layout_item] [/jgu_content_layout] |
Kurzes Beispiel mit leerem Inhalt zum Kopieren
|
1 2 3 4 5 6 7 8 |
[jgu_content_layout display="tab"] [jgu_content_layout_item title="Block #1"] [/jgu_content_layout_item] [jgu_content_layout_item title="Block #2"] [/jgu_content_layout_item] [/jgu_content_layout] |
Notwendiger äußerer 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 den Parameter display="tab".
Beispiel: [jgu_content_layout display="tab"]...[/jgu_content_layout]
Die Punkte werden ersetzt durch den folgenden Shortcode [jgu_content_layout_item].
Innerer 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:
title
Titel des Reiters (Freitext)
Wert: eine beliebige unformatierte Zeichenkette
Beispiel: [jgu_content_layout_item title="Test"]Beispiel-Text[/jgu_content_layout_item]
status
Möglichkeit zu beeinflussen, welcher eine Tab beim Laden der Seite geöffnet dargestellt werden soll.
Warnung: ⚠️ Es darf nur für einen Tab der Wert open gesetzt werden.
Standard: wenn dieser Parameter nicht gesetzt wurde, ist der Tab beim Laden der Seite standardmäßig geschlossen
Werte: open
Beispiel: [jgu_content_layout_item status="open"]Beispiel-Text[/jgu_content_layout_item]
Es darf nur einen Reiter und keine Schachtelung geben
Diese Darstellungsform darf es jeweils nur einmal pro Seite geben!
Sie darf nicht kombiniert oder ineinander geschachtelt auf einer Seite verwendet werden, da es sonst zu ungewünschten Darstellungsproblemen führen kann.
Warnung: ⚠️ Es darf also auf einer Seite entweder ein Akkordeon oder eine Zielgruppenreiterleiste oder eine Tableiste geben!
Achtung: ❗ Diese Funktionen benötigen Javascript. Sollte Javascript im Browser deaktiviert sein, werden automatisch alle Inhalte dargestellt.