JGU Spalte: Elemente nebeneinander anordnen

Sie möchten gern Inhalte kontrolliert nebeneinander anzeigen lassen? Und wenn der Platz nicht reicht zur Anzeige, sollen die Inhalte dann von sich aus untereinander angeordnet werden?

Dies funktioniert mit dem Shortcode: [spalte].

Aktivieren Sie das Plugin ‘JGU Spalte’.


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!


Danach können Sie die Seitenbreite über Shortcode in einzelne Spalten nach eigener Definition unterteilen.

Achtung: ❗ Dieser Shortcode muss ganz außen stehen und ist dafür gedacht, die gesamte Seite zu strukturieren. NICHT innerhalb einer Seite verwenden, das wird eher nicht funktionieren!

💡 Tipp: Aktivieren Sie auf Ihrer Seite ggf. Template 'Spaltenlos', wenn Sie Ihr Layout auf der gesamten Seitenbreite verwenden wollen.

Anwendung

Folgende Parameter steuern die Anzeige:

reihe:
Funktion: Sie definieren dabei Reihen: [reihe], welche die gesamte Seitenbreite einnehmen.

spalte:
Funktion: Die Spalten: [spalte],  stehen in der Klammer reihe und unterteilen die Gesamtreihe in Einzelteile mit definierter Breite.

letzte:
Funktion: definiert die letzte Spalte in der Reihe und darf nur einmal als letztes drinstehen!
Beispiel: letzte="ja"

breite:
Funktion: definiert für jede spalte die Breite

Mögliche Werte für den Parameter breite sind:

  • breite="zwoelftel"
  • breite="sechstel"
  • breite="viertel"
  • breite="drittel"
  • breite="fuenfzwoelftel"
  • breite="haelfte"
  • breite="siebenzwoelftel"
  • breite="zweidrittel"
  • breite="dreiviertel"
  • breite="fuenfsechstel"
  • breite="elfzwoelftel"
  • breite="zwoelfzwoelftel"

💡 Tipp: Wollen Sie ein Element über die gesamte Breite des Bildschirms anzeigen, sollte das  Bild 1280 Pixel breit sein. Es gibt dafür kein eigenes breite= Element.

Schachtelung der oben angegebenen Parameter

Mit gleicher Funktion wie oben beschrieben schachteln Sie diese Aufteilung insgesamt bis zu 3 Mal. Um hier eindeutig zu bleiben, verwenden Sie

  • reihe_ebene1
  • spalte_ebene1
  • reihe_ebene2
  • spalte_ebene2
  • reihe_ebene3
  • spalte_ebene3

Beispiel: DREI Elemente nebeneinander

[reihe] [spalte breite="drittel"]

Test linke Spalte

[/spalte] [spalte breite="drittel"]

Test Spalte

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

Test Spalte

[/spalte] [/reihe]

So sieht das aus  → Beispiel drei gleichbreite Teile


Beispiel: VIER Elemente nebeneinander

[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]

 

So sieht das aus  → Beispiel vier gleich breite Teile


Beispiel: zwei Drittel zu ein Drittel

Aufteilung wie beim ganzseitigen JGU Imagescroller mit Toplinks:nützlich zum Einsatz unter dem JGU Imagescroller
[reihe] [spalte breite="zweidrittel"] Test Spalte zweidrittel
[/spalte] [spalte breite="drittel" letzte="JA"] Test Spalte ein Drittel
[/spalte] [/reihe]

jgu-spalte-3

So sieht das Beispiel  → Zwei Drittel zu ein Drittel Aufteilung aus

Beispiel: 3 Reihen mit verschiedenen Spalten

💡 Tipp:  Den Shortcode reihe können Sie mehrfach auf der Seite  verwenden und so die Reihen quasi übereinander stapeln 🙂

So sieht das aus  → Reihe Shortcode mehrfach verwendet

Live-Beispiel  → Reihe Shortcode mehrfach verwendet

Beispiel: Schachtelung der Reihen

Live-Beispiel  → geschachtelte Reihen

 

Beispiel: