Logo adiheutschi

Spalten erstellen und bearbeiten mit dem neuen JCE Editor

JCE Editor ab Version 2.8.1

Mit dem Werkzeug Spalten wird eine horizontale Zeile mit einer beliebigen Anzahl von Spalten erstellt, die einen beliebigen Inhaltstyp enthalten kann. Die Spalten sprechen an und haben entweder die Größe der Anzahl der Spalten in einer Zeile oder eine Reihe vordefinierter Layouts. Sie können so eingestellt werden, dass sie auf kleineren Bildschirmen und Mobilgeräten je nach Gerätebreite vertikal gestapelt werden.

Spalten können erstellt werden, indem vorhandener Inhalt, z. B. eine Sammlung von Absätzen, umgebrochen oder neue leere Spalten mit dem Werkzeug "Spalten erstellen" eingefügt werden.

Spalten mit vorhandenem Inhalt erstellen

  1. Wählen Sie den Inhalt aus, der in Spalten eingeschlossen werden soll. Im folgenden Beispiel werden zwei Absätze durch Ziehen ausgewählt.
  2. Klicken Sie auf die Schaltfläche Spalten erstellen, um den Dialog zu öffnen.
  3. Das Feld Spalten zeigt die Anzahl der Spalten an, die erstellt werden. Der Standardwert ist die Anzahl der ausgewählten Blockelemente (in diesem Fall Absätze) oder der in den Spaltenparametern festgelegte Standardwert.
  4. Die Anzahl der Spalten kann geändert werden. In diesem Beispiel wird eine zusätzliche Spalte für insgesamt 3 hinzugefügt. Die zusätzliche Spalte wird am Ende der Zeile eingefügt.
  5. Klicken Sie auf Einfügen , um die Spalten zu erstellen.

create with selection 1Erstellen Sie Spalten mit einer Auswahl und fügen Sie eine zusätzliche Spalte hinzu

Die Anzahl der Spalten kann auch auf einen niedrigeren Wert als die Anzahl der ausgewählten Blöcke eingestellt werden. Wenn dies erledigt ist, werden die Blöcke gleichmäßig auf jede der Spalten verteilt. Im folgenden Beispiel werden die 3 ausgewählten Absätze nur 2 Spalten zugewiesen, sodass die ersten 2 Absätze der ersten Spalte und der letzte Absatz der zweiten Spalte zugewiesen werden.

create with selection 2Erstellen Sie Spalten mit einer Auswahl und verteilen Sie den Inhalt 

Neue Spalten erstellen

Neue Spalten können entweder mit dem Rasterwerkzeug oder im Dialogfeld "Spalten erstellen" erstellt werden.

Um das Rasterwerkzeug zu verwenden, klicken Sie auf den Pfeil neben der Schaltfläche Spalten erstellen und bewegen Sie den Mauszeiger über die Rasterfelder, um die Anzahl der zu erstellenden Spalten auszuwählen. Auf diese Weise können bis zu 5 Spalten erstellt werden.

Erstellen Sie neue Spalten mit dem RasterwerkzeugErstellen Sie neue Spalten mit dem Rasterwerkzeug

Um Spalten mit dem Dialogfeld zu erstellen, klicken Sie in den Editor, in den Sie die Spalten einfügen möchten, und öffnen Sie dann das Dialogfeld "Spalten erstellen". Legen Sie die Anzahl der zu erstellenden Spalten fest und klicken Sie auf die Schaltfläche Einfügen.

Erstellen Sie Spalten mit dem Dialogfeld " Spalten erstellen "Erstellen Sie Spalten mit dem Dialogfeld " Spalten erstellen "

Spalten hinzufügen und entfernen

Mit den Schaltflächen Add Column (Spalte hinzufügen) und Delete Column (Spalte löschen) können Spalten nach ihrer Erstellung einer Zeile hinzugefügt oder daraus entfernt werden.

Klicken Sie zum Hinzufügen einer Spalte auf die Spalte, nach der die neue Spalte hinzugefügt werden soll, und klicken Sie dann auf die Schaltfläche Spalte hinzufügen. Mit jedem Klick auf die Schaltfläche wird eine neue Spalte erstellt.

add column buttonFügen Sie neue Spalten mit der Schaltfläche Add Column hinzu

Um eine Spalte zu löschen, klicken Sie auf die zu löschende Spalte und dann auf die Schaltfläche Spalte löschen. Wenn die Spalte Inhalt enthält, wird dieser vor oder nach der Zeile aus der Spaltenzeile verschoben, abhängig von der ursprünglichen Position in der Zeile.

delete column buttonLöschen Sie eine Spalte mit der Schaltfläche Spalte löschen

Spalten stapeln

Die Spalten reagieren und ändern ihre Größe basierend auf der Breite des Browsers. Manchmal ist es jedoch vorzuziehen, Spalten vertikal zu stapeln, wenn sie auf kleineren Geräten angezeigt werden.

Die Spalten werden standardmäßig nicht gestapelt werden, stellen aber die Standard - Stack - Breite in den Spalten Parameter eingestellt werden, die erstellt für alle neuen Spalten angewendet werden.

Die Stapelbreite kann auch beim Erstellen einer neuen Spaltenreihe im Dialogfeld "Spalten erstellen" oder beim Bearbeiten einer vorhandenen Zeile festgelegt werden.

Die Breite, mit der die Spalten gestapelt werden - die Stapelbreite - basiert auf 3 Gerätegrößen:

  • Kleine Geräte im Querformat mit einer Breite zwischen 576px (Bootstrap) und 640px (Yootheme UIKit und Generic)
  • Mittelgroße Tablets im Querformat mit einer Breite zwischen 768px (Bootstrap) und 960px (Yootheme UIKit und Generic)
  • Groß - Laptops und Desktops mit einer Breite zwischen 992 Pixel (Bootstrap) und 1200 Pixel (Yootheme UIKit und Generic)

Öffnen Sie zum Festlegen der Stapelbreite das Dialogfeld "Spalten erstellen" und wählen Sie die gewünschte Größe aus der Liste "Stapelbreite" aus. Klicken Sie auf Einfügen oder Aktualisieren , um die Breite anzuwenden.

Im folgenden Beispiel wird eine mittlere Stapelbreite festgelegt, wodurch die erstellten Spalten aufgrund der aktuellen Breite des Inhalts gestapelt werden. Wenn das Editorfenster vergrößert wird, werden die Spalten horizontal ausgerichtet.

stack columns mediumFestlegen der Stapelbreite beim Erstellen von Spalten

Im folgenden Beispiel werden die Spalten bearbeitet und eine neue Stapelbreite festgelegt. Dies führt dazu, dass die Spalten nur dann gestapelt werden, wenn die Größe des Inhalts auf 640 Pixel oder weniger geändert wird.

stack columns smallBearbeiten der Stapelbreite

Spalten mit einem Layout erstellen

Beim Erstellen neuer leerer Spalten oder beim Erstellen von Spalten mit vorhandenem Inhalt wird die Größe der Spalten an die Breite des Browserfensters angepasst. Die Liste "Layout" im Dialogfeld "Spalten erstellen" enthält eine Liste vordefinierter Layouts zum Festlegen der Breiten in Dritteln und Vierteln, wobei eine Spalte den Breitenwert ½, ⅔ oder ¾ der Zeile erhält und die anderen Spalten die verbleibende Breite ausfüllen. Die Layoutliste enthält folgende Optionen:

  • Auto : der Standardwert. Jede Spalte hat die gleiche Breite
  • 2-1 : Die Breite wird in Dritteln festgelegt, wobei die erste Spalte zwei Drittel der Gesamtbreite ausmacht.
  • 1-2 : Die Breite wird in Dritteln festgelegt, wobei die letzte Spalte zwei Drittel der Gesamtbreite ausmacht.
  • 3-1 : Die Breite wird in Viertel angegeben, wobei die erste Spalte drei Viertel (75%) der Gesamtbreite ausmacht.
  • 1-3 : Die Breite wird in Viertel angegeben, wobei die letzte Spalte drei Viertel (75%) der Gesamtbreite ausmacht.
  • 2-1-1 : Die Breite wird in Viertel angegeben, wobei die erste Spalte die Hälfte (50%) der Gesamtbreite darstellt. Dies gilt normalerweise für Zeilen mit 3 oder mehr Spalten.
  • 1-2-1 : Die Breite wird in Viertel angegeben, wobei die mittlere Spalte die Hälfte (50%) der Gesamtbreite ausmacht. Dies gilt normalerweise für Zeilen mit 3 oder mehr Spalten.
  • 1-1-2 : Die Breite wird in Viertel angegeben, wobei die letzte Spalte die Hälfte (50%) der Gesamtbreite darstellt. Dies gilt normalerweise für Zeilen mit 3 oder mehr Spalten.

Wenn ein Layout für eine neue Spaltenreihe ausgewählt wird, wird eine Standardanzahl von Spalten für jedes Layout erstellt. Da ein bestimmter Breitenwert nur für eine Spalte in der Zeile festgelegt wird, kann ein Layout auf eine beliebige Anzahl von Spalten angewendet werden.

Erstellen Sie 3 neue Spalten mit einem Layout von 1-2-1Erstellen Sie 3 neue Spalten mit einem Layout von 1-2-1

Erstellen Sie Spalten aus einer Auswahl mit einem 2-1-LayoutErstellen Sie Spalten aus einer Auswahl mit einem 2-1-Layout

Erstellen Sie Spalten aus einer Auswahl mit einem Layout von 1-2 und einer benutzerdefinierten Anzahl von SpaltenErstellen Sie Spalten aus einer Auswahl mit einem Layout von 1-2 und einer benutzerdefinierten Anzahl von Spalten

Webagentur

adiheutschi.ch - webdesign 
Wolfisbergstrasse 1
CH-4704 Niederbipp
info@adiheutschi.ch