JGU Spalte: design blocks column bases

Design your content column based with the Shortcode: [jgu-spalte] . The charm of it is that these containers behave responsive: if there is enough space, they sit in one row. If the page is visited with a tablet or smartphone or the window is set to a smaller size, the container will be rendered in one after the other.

If your Shortcode is still visible on the published page, activate this plugin in the Dashboard  → JGU Tools  → Plugins

Warning: ⚠️ Be careful to edit the Shortcode in the Text mode only. Editing in the Visual mode may cause the shortcode to fail entirely due to HTML Tags in the Code.

Some plugins require administrative preparations (JGU Auth, JGU Downloadcenter). Follow the instructions in Dashboard  → JGU Tools  → Plugins  → Activateand we will set up the plugin for you.

Parameter List

reihe :
Now define the rows: [reihe], covering the whole page and the

spalte:

columns: [spalte], defining the row in several parts.

breite:

defines, how the rows should be parted. The main matrix is made of 12 parts .

  • breite="zwoelftel" (1/12)
  • breite="sechstel" (1/6)
  • breite="viertel" (1/4)
  • breite="drittel" (1/3)
  • breite="fuenfzwoelftel" (5/12)
  • breite="haelfte" (1/2)
  • breite="siebenzwoelftel" (7/12)
  • breite="zweidrittel" (2/3)
  • breite="dreiviertel" (3/4)
  • breite="fuenfsechstel" (5/6)
  • breite="elfzwoelftel" (11/12)
  • breite="zwoelfzwoelftel" (12/12)

💡 If an item should stretch over the whole page, do not use a jgu-spalte element, but use an image that has a width of 1280 Pixel.

💡  You may even nest the rows. To avoid confusion, the parameter names reihe and spalte are extend with a

  • _ebene1,  (ebene means level)
  • _ebene2,
  • _ebene3

Example : reihe_ebene1, spalte_ebene1

Examples using JGU Spalte

See this example, one row with three columns:

Looks like this  → Example with three elements next to each other

[reihe] 
[spalte breite="drittel"]

Test linke Spalte

[/spalte]

[spalte breite="drittel"]

Test Spalte

[/spalte]

[spalte breite="drittel" letzte="JA"]

Test Spalte

[/spalte]
[/reihe]

 

Example with four Parts of the same size:

Try out our live demo  → Four elements in one row

[reihe]
[spalte breite="viertel"]

Test linke Spalte

[/spalte]

[spalte breite="viertel"]

Test Spalte

[/spalte]

[spalte breite="viertel"]

Test Spalte

[/spalte]

[spalte breite="viertel" letzte="JA"]

Test Spalte

[/spalte]
[/reihe]

 

This example fits to be put under an frontpage image scroller with two thirds to one third.

Take a look at the demo page → Two thirds and one third container in one row

[reihe]
[spalte breite="zweidrittel"]
Test Spalte zweidrittel
[/spalte]

[spalte breite="drittel" letzte="JA"]
Test Spalte ein Drittel
[/spalte]
[/reihe]

 

jgu-spalte-3

 

Example: nested rows

Look at a Live-Example→ nested rows

 

Example: 

[reihe]
[spalte breite="haelfte"] 
äußere Klammer linke seite, eine Hälfte
[/spalte]
[spalte breite="haelfte" letzte="JA"]
Rechte Hälfte, hier beginnt gleich die zweite 
[reihe_ebene1]
[spalte_ebene1 breite="haelfte"]Inhalt links[/spalte_ebene1]
[spalte_ebene1  breite="haelfte"]Inhalt rechts

[reihe_ebene2 ]
[spalte_ebene2  breite="drittel"]Inhalt links[/spalte_ebene2]
[spalte_ebene2  breite="drittel"]Inhalt Mitte[/spalte_ebene2]
[spalte_ebene2  breite="drittel"]Inhalt rechts[/spalte_ebene2]
[/reihe_ebene2]

[/spalte_ebene1]
[/reihe_ebene1]

[/spalte]
[/reihe]