Mit dem Spalten-Shortcode können Sie indivduelle Raster-/ Spalten-Layouts erstellen. (Dieses Feature ist nur in WYSIWYG-Textfelder verfügbar)

  1. Wählen Sie im Backend die Seite aus die Sie bearbeiten möchten. Wechseln Sie dann in das Textfeld in dem Sie Spalten hinzufügen möchten.
  2. Über dem Textfeld finden Sie den Button „Spalten-Shortcode einfügen“
  3. Wenn Sie auf diese Schaltfläche klicken, wird ein Fenster mit allen Spaltenoptionen. Wählen Sie eine aus.

Nur Text:

  1. In einer Reihe sollte immer die volle Breite genutzt werden. Nutzen Sie also bitte Kombinationen wie, 2/3 + 1/3 oder 1/5 + 1/5 + 3/5.  Bitte beachten Sie das die letzte Spalte immer den Zusatz (letztes oder leer) haben sollte.

    Schauen wir uns das in der Praxis an:
    Wählen Sie die Spalte mit der Nummer 1 und gleich danach die Spalte mit der Nummer 2.

    Diese Codes werden, wenn ausgewählt, im Textfeld wie folgt angezeigt:

  2. Nun wollen wir diese Spalten mit Inhalt füllen. Beachten Sie, dass die Shortcodes einem bestimmten Aufbau folgen: Sie enthalten Klammern mit dem gleichen Text – allerdings enthält der Zweite einen Schrägstrich. Beispiel: [shortcode][/shortcode]
    Dieser Strich innerhalb des Zweiten Shortcodes bedeutet, dass der gesamte Inhalt innerhalb dieses Codes erfolgen muss, denn durch Ihn wird die Anordnung der Spalten auf Ihrer Website bestimmt. Im Screenshot sehen Sie ein Beispiel dafür, wo Ihr Inhalt stehen muss:
  3. Werden Sie kreativ!
    Innerhalb von Textblöcken können Sie mit Überschriften und Absätzen arbeiten. Um dieses Beispiel etwas anschaulicher zu gestalten, wählen wir den gesamten Text von Inhalt 1 in H3 aus. Markieren Sie dazu NUR den betreffenden Text, klicken Sie auf „Absatz“ und wählen Sie „Überschrift 3“. Gehen Sie zur rechten Seite des Bildschirms und klicken Sie auf „Vorschau“, um eine Vorschau Ihres Entwurfs zu sehen. Es sollte ungefähr so aussehen wie auf diesem Beispiel:

Texte und Bilder:

  1. Wir können nicht nur mit Text arbeiten, sondern auch Bilder hinzufügen. Schauen Sie sich dieses Beispiel an:

    Um mit Bildern zu arbeiten, fügen Sie im Textblock ein Bild innerhalb der von Ihnen hinzugefügten Spalte ein. Wählen Sie dazu die Spalten aus, wie in Thema 5 beschrieben, und klicken Sie dann auf „Dateien hinzufügen“, um Ihr Bild auszuwählen.

  2. Wenn Sie Ihr Bild hinzugefügt haben, haben sie folgende Möglichkeiten. Erstens können Sie Ihr Bild je nach Bedarf verkleinern oder vergrößern. Wählen Sie einfach das Bild aus und es wird angezeigt:

    Klicken Sie auf den Stift, um die Seite mit den Bildänderungen aufzurufen. Nun können Sie die Größe Ihres Bildes auswählen.

    Um Ihr Bild zu positionieren, wählen Sie das entsprechende Symbol für die gewünschte Ausrichtung aus:

    Dort können Sie im Textblock alle notwendigen Änderungen vornehmen. Wir empfehlen Ihnen, sich die Seite nach jeder Änderung anzusehen, um zu sehen, ob Sie das erwartete Ergebnis erhalten.

  3. Jetzt ist der richtige Zeitpunkt, kreativ zu sein. Um Ihnen zu helfen, haben wir hier einen Link mit mehreren Beispielen von Kreationen mit den Shortcodes für Spalten erstellt.
  4. Vergessen Sie am Ende nicht, Ihre Seite zu speichern! Klicken Sie in der oberen Ecke des Bildschirms auf „Aktualisieren“.

Was bedeutet „leer“ in den Spalten?

  1. Wenn Sie auf die Shortcodes klicken, werden Sie sehen, dass einige Spalten den Zusatz „leer“ haben. Diese Spalten sind zu verwenden, wenn die Spalte leer bleiben soll.
  2. Dies könnte zum Beispiel so eingesetzt werden:
  3. Jetzt müssen Sie den Inhalt nur noch in die Spalte einfügen, in der er erscheinen soll.

 

Einige Beispiele für Sie!

Wir haben hier einige Codes zum Herunterladen für Sie bereitgestellt, damit Sie das Design kopieren können, falls Sie das gleiche Layout wie im Beispiel verwenden möchten.

Zum Kopieren klicken Sie einfach auf den Button, woraufhin sich eine Seite mit Codes öffnet. Kopieren Sie einfach den gesamten Code und fügen Sie ihn in Ihr Textfeld ein. Aber Vorsicht: Das Textfeld muss sich in der Option „Text“ befinden!

Nachdem Sie den Code eingefügt haben, klicken Sie auf „Visuell“ und ersetzen Sie hier die Beispiel Texte mit Ihren eigenen Inhalten.

 

Wählen Sie das Beispiel aus und klicken Sie auf „Download“.

Beispiel 1

Download

Beispiel 2

Download

Beispiel 3

Download

Beispiel 4

Download

 

Beispiel 5

Download

Beispiel 6

Download