Categories

Ausgewählte Vorlagen

WordPress. Wie arbeitet man mit Grid- Shortcodes (Spalten, auf der Basis von Cherry Framework 3.x)

Erica Saunders Dezember 4, 2014
Rating: 4.0/5. From 2 votes.
Please wait...

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)

  1. Öffnen Sie den Bereich Seiten (Pages) -> Alle Seiten (All pages) im Control Panel WordPress.

  2. 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:

    WordPress.How_to_use_grid_(columns)_shortcodes_1

  3. 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.

  4. 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:

  1. 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]

    WordPress.How_to_use_grid_(columns)_shortcodes_2

    • 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:

      WordPress.How_to_use_grid_(columns)_shortcodes_3

      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]
      				

      WordPress.How_to_use_grid_(columns)_shortcodes_4

    • 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:

      WordPress.How_to_use_grid_(columns)_shortcodes_5.

  2. 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]
    					

    WordPress.How_to_use_grid_(columns)_shortcodes_6

    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:

    WordPress.How_to_use_grid_(columns)_shortcodes_7

  3. 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]
    					

    WordPress.How_to_use_grid_(columns)_shortcodes_8

  4. 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:

WordPress. Wie arbeitet man mit Grid- Shortcodes (Spalten)

Wordpress Vorlage
Dieser Eintrag wurde um WordPress Tutorials geschrieben und column, grid, shortcode, WordPress markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten