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
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
Inhaltsverzeichnis
Danach können Sie die Seitenbreite über Shortcode in einzelne Spalten nach eigener Definition unterteilen.
Achtung: ❗ Dieser Shortcode muß 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="haelfte"
- breite="zweidrittel"
- breite="dreiviertel"
💡 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 gleichbreite Teile
Beispiel: zwei Drittel zu ein Drittel
[/spalte] [spalte breite="drittel" letzte="JA"] Test Spalte ein Drittel
[/spalte] [/reihe]
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
[reihe] [spalte breite="drittel"] <div class="textboxrot">Test linke Spalte</div> [/spalte] [spalte breite="drittel"] <div class="textboxrot">Test Spalte</div> [/spalte] [spalte breite="drittel" letzte="JA"] <div class="textboxrot">Test Spalte</div> [/spalte] [/reihe] [reihe] [spalte breite="haelfte"] <p class="textboxaktuell">Test linke Spalte</p> [/spalte] [spalte breite="haelfte" letzte="JA"] <div class="textboxaktuell">Test rechte Spalte</div> [/spalte] [/reihe] [reihe] [spalte breite="sechstel"] <p class="boxaktuell">Test Spalte</p> [/spalte] [spalte breite="sechstel"] <div class="boxaktuell">Test Spalte</div> [/spalte] [spalte breite="sechstel"] <div class="boxaktuell">Test Spalte</div> [/spalte] [spalte breite="sechstel"] <div class="boxaktuell">Test Spalte</div> [/spalte] [spalte breite="sechstel"] <div class="boxaktuell">Test Spalte</div> [/spalte] [spalte breite="sechstel" letzte="JA"] <div class="boxaktuell">Test rechte Spalte</div> [/spalte] [/reihe] |
Live-Beispiel → Reihe Shortcode mehrfach verwendet
Beispiel: Schachtelung der Reihen
Live-Beispiel → geschachtelte Reihen
Beispiel:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
[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] |