- Web Templates
- E-commerce Templates
- CMS und Blog Templates
- Facebook Templates
- Website-Builder
WordPress. Wie arbeitet man mit Grid- Shortcodes (Spalten, auf der Basis von Cherry Framework 3.x)
Dezember 4, 2014
Das Support-Team stellt Ihnen das neue Tutorial vor, das zeigt, wie arbeitet man mit Grid- Shortcodes in WordPress. Auch erfahren Sie, wie erstellt man das Layout des Seiteninhalts.
WordPress. Wie arbeitet man mit Grid- Shortcodes (Spalten)
-
Öffnen Sie den Bereich Seiten (Pages) -> Alle Seiten (All pages) im Control Panel WordPress.
-
Drücken Sie auf den Button Shortcodes (Shortcodes) in dem visuellen (Visual) Bearbeitungsmodus. Wählen Sie die Variante Spalten (Columns) -> Reihe (row) . Danach wird in dem Textfeld der Seite solcher Code [row][/row] eingefügt:
-
Wiederholen Sie diesen Vorgang, um in die Seite den Elementcode [spanX] , zwischen [row][/row] einzufügen. Nachdem diese Aktionen durchgeführt wurden, muss der Code so aussehen:
[row][spanX][/spanX][/row], wo X – Zahl von 1 bis 12. -
Fügen Sie den notwendigen Inhalt zwischen den Elementen [spanX][/spanX], wie im Beispiel, ein:
[row][spanX] Der Inhalt wird hier eingefügt… [/spanX][/row]
Lassen Sie uns anschauen, wie legt man die erforderliche Anzahl von Spalten für die Darstellung des Inhalts auf der Seite fest:
-
Spalte 1 wird benutzt, um den Inhalt über die gesamte Breite der Webseite darzustellen. Die Code-Struktur wird wie folgt festgelegt:
[row][span12] Der Inhalt wird hier eingefügt… [/span12][/row] -
-
2 gleiche Spalten können in die Seite eingefügt werden, indem Sie Shortcodes (Shortcodes) -> Spalten (Columns) -> 2 Spalten (2 Columns) -> 1/2 | 1/2 in dem visuelen (Visual) Bearbeitungsmodus wählen:
Oder können Sie diesen Code auf die Seite in dem Bearbeitungsmodes des Textes (Text mode) kopieren:
[row] [span6] Der Inhalt der ersten Spalte wird hier eingefügt... [/span6] [span6] Der Inhalt der zweiten Spalte wird hier eingefügt... [/span6] [/row]
-
Um den Inhalt in 2 Spalten, die verschiedene Breite haben, darzustellen, sollen Sie eine andere Variante aus der DropDownListe für Shortcodes (Shortcodes) -> Spalten (Columns) -> 2 Spalten (2 Columns) in dem visuellen (Visual) Bearbeitungsmodus auswählen oder den Code mit anderen numerischen Wert des Elements [spanX] in dem Bearbeitungsmodus des Textes (Text mode) einfügen. Die einzige Regel, die befolgt werden muss, ist 12 Spalten in der Reihe (zum Beispiel, nutzen Sie gleichzeitig [span3] + [span9] oder [span8] + [span4]). Beispiele:
[row] [span4] Der Inhalt der ersten Spalte wird hier eingefügt... [/span4] [span8] Der Inhalt der zweiten Spalte wird hier eingefügt... [/span8] [/row]
In Ergebnis erhalten Sie solche Seite:
-
-
Das Layout des Inhalts in 3 Spalten kann festgeledt werden, indem Sie Shortcodes (Shortcodes) -> 3 Spalten (3 Columns) -> 1/3 | 1/3 | 1/3 wählen odern diesen Code einfügen:
[row] [span4] Der Inhalt der ersten Spalte wird hier eingefügt... [/span4] [span4] Der Inhalt der zweiten Spalte wird hier eingefügt... [/span4] [span4] Der Inhalt der dritten Spalte wird hier eingefügt... [/span4] [/row]
In dem Inhaltsbereich (zwischen den Elementen [spanX][/spanX]), ist es auch möglich, andere Shortcodes einzufügen (es muss nicht unbedingt der Text sein). In diesem Fall wird die Seite so aussehen:
-
Das Layout der Seiten in 4 Spalten kann genauso festgelegt werden, indem Shortcodes (Shortcodes) -> 4 Spalten (4 Columns) -> 1/4 | 1/4 | 1/4| 1/4 wählen oder in die Seite das Folgende einfügen:
[row] [span3] Der Inhalt der ersten Spalte wird hier eingefügt... [/span3] [span3] Der Inhalt der zweiten Spalte wird hier eingefügt... [/span3] [span3] Der Inhalt der dritten Spalte wird hier eingefügt... [/span3] [span3] Der Inhalt der vierten Spalte wird hier eingefügt... [/span3] [/row]
-
Auch können Sie die Variante Shortcodes (Shortcodes) -> Fluid Spalten (Fluid Columns) nutzen, um Fluid “Reihe” zwischen den Elementen [spanX] auf der Seite einzufügen. Es kann nützlich sein, wenn Sie, zum Beispiel, die ganze Seite in 2 Spalten und dann nur eine von ihnen (zum Beispiel, die erste) als Fluid “Reihe” teilen möchten (in 2,3 oder 4 Spalten teilen). Sie können mit Kombinationen von Codes experimentieren, um die notwendige Layout-Struktur zu erhalten und alle Designanforderungen zu erfüllen.
Das Tutorial ist zu Ende. Vielen Dank für Ihre Aufmerksamkeit!
Sie können auch das ausführliche Video-Tutorial nutzen: