JGU Content Layout – Tabs (Target group-Navigation) Red horizontal button list

Here you find an example for structuring you content with a red horizontal button list like the Target Navigation.

You have to activate the Plugin JGU Content Layout!

Live-Beispiel
Source Code Example
Using Tabs
1. Shortcode jgu_content_layout
2. Shortcode jgu_content_layout_item

Live-Beispiel

Try our demo: → JGU Content Layout -Tabs (Target group-Navigation) Red horizontal button list

Source Code Example

Copy and paste into your page:

[jgu_content_layout display="tab" layout="zgn"]
[jgu_content_layout_item title="Block #1"]<strong>Text Block #1</strong>
Content
[/jgu_content_layout_item]
[jgu_content_layout_item title="Block #2" status="open"]<strong>Text Block #2</strong>
The content of this button is opened. Only one Block may have the status "open" [/jgu_content_layout_item]
[jgu_content_layout_item title="Block #3"]<strong>Text Block #3</strong>
The Content[/jgu_content_layout_item]
[jgu_content_layout_item title="Block #4"]<strong>Text Block #4</strong>
Content [/jgu_content_layout_item]
[jgu_content_layout_item title="Block #5"]<strong>Text Block #5</strong>
This Element is the most useful not too few Buttons<em>.</em>[/jgu_content_layout_item]
[/jgu_content_layout]

[jgu_content_layout display="tab" layout="zgn"]

[jgu_content_layout_item title="Block #1"]Text Block #1

Content

[/jgu_content_layout_item]

[jgu_content_layout_item title="Block #2" status="open"]Text Block #2

The content of this button is opened. Only one Block may have the status "open" [/jgu_content_layout_item]

[jgu_content_layout_item title="Block #3"]Text Block #3

The Content[/jgu_content_layout_item]

[jgu_content_layout_item title="Block #4"]Text Block #4

Content [/jgu_content_layout_item]

[jgu_content_layout_item title="Block #5"]Text Block #5

This Element is the most useful not too few Buttons.[/jgu_content_layout_item]

[/jgu_content_layout]

Using Tabs

Shortcode jgu_content_layout

The Shortcode [jgu_content_layout] spans the whole content that should appear on the page. After the last content there has to be the Shortcode [/jgu_content_layout] You will get a red button row with the parameter display="zgn".

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

Replace the dots in the example above with the following Shortcode [jgu_content_layout_item].

Shortcode jgu_content_layout_item

The Shortcode [jgu_content_layout_item] spans the content behind each button and has to be ended with [/jgu_content_layout_item] You may format the text.

The Shortcode is specified via the parameters:

Parameter: title
Function: Button Text
Example: [jgu_content_layout_item title="Test"]Example-Text[/jgu_content_layout_item]
Parameter: status
Function: define, the content of whicht button should be open on entering the web page.
Values: open. If the parameter is not set, the content behind the button is not visible
Attention ❗: There may be only one button with the value open
Example: [jgu_content_layout_item status="open"]Example-Text[/jgu_content_layout_item]