Artikel über: Webseite

Spalten verwalten

Im Designer sind Spalten die Bausteine, um Inhalte innerhalb von Zeilen zu strukturieren und auszurichten. Sie dienen als flexible Platzhalter für Module und ermöglichen es Ihnen, professionelle und übersichtliche Layouts zu erstellen. In diesem Artikel erfahren Sie, wie Sie Spalten hinzufügen, deren Design anpassen und spezielle Funktionen für eine optimale Darstellung nutzen.


Was ist eine Spalte? Spalten werden in Zeilen eingefügt und sind Platzhalter für Module. Innerhalb einer Zeile können Sie bis zu 12 Spalten haben, um Ihren Inhalt zu organisieren. Mit Hilfe von Spalten können Sie Inhaltselemente auf Ihren Seiten besser strukturieren und ausrichten. Lesen Sie mehr über Zeilen, Spalten und Module in diesem Artikel.



Auf dieser Seite:
  • Wie kann ich eine Spalte hinzufügen und bearbeiten?
  • Design anpassen
  • Exkurs: Stapeln von Spalten


Wie kann ich eine Spalte hinzufügen und bearbeiten?

Wenn Sie im Editor arbeiten, bewegen Sie den Mauszeiger auf die Spalte, die Sie ändern möchten, und die blau Beschriftung "Spalte" erscheint am oberen linken Rand der Spalte.


1. Spalte hinzufügen:

Um eine neue Spalte hinzuzufügen fahren Sie mit der Maus über eine bestehende Spalte -> klicken Sie auf "Spalte" -> klicken Sie auf "Mehr" (drei Punkte) und wählen den letzten Punkt "+ Spalte hinzufügen".


2. Spalte ziehen, um mehr Breite hinzuzufügen:

Eine visuelle Methode zur Anpassung der Breite besteht darin, den rechten Rand der Spalte zu ziehen, um mehr oder weniger Breite zwischen ihr und der benachbarten Spalte hinzuzufügen. Bewegen Sie den Mauszeiger über die Spalte und ziehen Sie an dem blauen Balken, der rechts erscheint.


3. Spalten verschieben:

Um eine Spalte zu verschieben, bewegen Sie den Mauszeiger über die Spalte, bis der Griff mit den sechs Punkten erscheint. Halten Sie diesen geklickt und ziehen Sie die Spalte an eine neue Position innerhalb derselben Zeile.


Arbeiten mit leeren Spalten: Eine Spalte muss nicht unbedingt Module enthalten. Sie können leere Spalten auf beiden Seiten einer Spalte mit Inhalt hinzufügen, um sicherzustellen, dass sie in der Zeile zentriert ist und auf beiden Seiten gleich viel Platz hat. Eine leere Spalte kann auch einfach hinzugefügt werden, um Platz zwischen zwei Inhaltselementen auf Ihrer Website zu schaffen.


4. Im Schnell-Menü finden Sie bereits erste Bearbeitungsoptionen:
  1. Stift: Öffnen Sie die Bearbeitungsfunktion der Spalte. Mehr dazu finden Sie weiter unten im Artikel.
  2. Spalte duplizieren: Wenn Sie eine Spalte mit allen Inhalten an anderer Stelle auf Ihrer Website wiederverwenden möchten, können Sie sie entweder duplizieren oder kopieren. Duplizieren bedeutet, dass Sie eine Kopie der Spalte erstellen und diese automatisch neben der Originalspalte eingefügt wird.
  3. Spalte löschen: Sie können eine Spalte und alle darin enthaltenen Module löschen, indem Sie das rote Löschen-Symbol wählen.


5. Wenn Sie auf "Mehr" (drei Punkte) klicken, haben Sie folgende Optionen:
  1. Auf dem Gerät anzeigen: Legen Sie fest, auf welchen Endgeräten (Desktop, Tablet, Mobile) die Spalte sichtbar sein soll.
  2. Animation hinzufügen: Fügen Sie eine Animation hinzu, die ausgelöst wird, sobald der Besucher die Spalte in seinem Browser betrachtet.
  3. Spalte kopieren: Kopieren Sie eine Spalte, um sie an einer beliebigen Stelle auf der Website (auch auf anderen Seiten) einzufügen. Gehen Sie anschließend auf die Seite, auf der Sie die Spalte einfügen möchten. Bewegen Sie den Mauszeiger auf die Spalte, neben der die neue Spalte erscheinen soll -> klicken Sie auf "Spalte" -> klicken Sie auf "Mehr" -> wählen Sie "Einfügen".



Design anpassen


1. Hintergrund

Ein Spaltenhintergrund kann einfarbig oder mit einem Bild hinterlegt werden:

  • Hintergrundfarbe: Fügen Sie eine einzelne Farbe als Spaltenhintergrund ein. Sie können den Grad der Transparenz einstellen, wenn Sie möchten.
  • Hintergrundbild: Fügen Sie ein Bild als Spaltenhintergrund hinzu. Sie können wählen, ob Sie Ihr Titelbild aus den Globalen Daten verwenden oder ein neues Bild direkt in die Zeile hochladen möchten. Sie können einstellen, wie das Bild innerhalb der Spalte wiederholt werden soll, seine Größe und Positionierung, um sicherzustellen, dass Sie das Bild für Ihre Besucher optimal darstellen können.

Neben den Standardeinstellungen für das Bild können Sie auch festlegen, wie sich das Hintergrundbild innerhalb der Spalte verhalten soll, wenn ein Besucher auf der Seite nach unten scrollt:

  • Feste Position: Das Bild bleibt beim Scrollen an seiner Position, während der Inhalt darüber hinweggleitet.
  • Parallaxes Scrollen: Das Bild bewegt sich beim Scrollen langsamer als der Vordergrund, was einen Tiefen-Effekt erzeugt.


2. Hintergrundfilter

Fügen Sie einen Hintergrundfilter über die Hintergrundfarbe oder das Bild Ihrer Spalte hinzu, um sehr bunte Bilder oder Bilder mit starken Kontrasten abzuschwächen. Dies ist auch eine gute Möglichkeit, um sicherzustellen, dass der Text in der Spalte für die Besucher leicht zu lesen ist. Denken Sie daran, dass Sie auch den Grad der Transparenz Ihres Hintergrundfilters einstellen können.


Beispiel für einen Hintergrundfilter, der über einem Bild verwendet wird:


Hinweis: Wenn Sie mit Bildbearbeitungssoftware vertraut sind, können Sie auch ein Hintergrundbild als Filter hinzufügen. Wenn Sie mit einer Bildbearbeitungssoftware erstellte transparente Überlagerungen hochladen, können Sie mehrfarbige oder mit Pixelmustern versehene Überlagerungen erstellen, die Ihrem Bild mehr Lebendigkeit und Komplexität verleihen.


Rahmen und Abstände

  • Schatten: Fügen Sie einen Schatten für mehr Tiefe hinzu.
  • Rahmen: Fügen Sie der Zeile einen Rahmen hinzu und passen Sie den Stil, die Farbe, die Dicke und den Radius des Rahmens an. Passen Sie den Rand (Platz außerhalb der Zeile) und die Auffüllung (Platz zwischen dem Zeileninhalt und dem Rahmen der Zeile) an.
  • Abstand: Mit den Optionen Außenabstand und Innenabstand schaffen Sie Platz um und in Ihren Elementen. Eine gezielte Abstandsgestaltung sorgt für eine klare, aufgeräumte Struktur und eine bessere Lesbarkeit.


Exkurs: Stapeln von Spalten

Die Aktivierung von Stapeln von Spalten erfolgt über die Zeile in der sich die Spalten befinden. Sie ermöglicht es, Spalten in einer einzigen Zeile so zu stapeln, dass sie übereinander liegen. Standardmäßig ist diese Einstellung automatisch in den Ansichtsfenstern für Tablets und Mobilgeräte aktiviert, da dies deren normales Zeilenverhalten ist. Die Desktop-Spaltenstapelung ist nützlich, wenn Sie z. B. möchten, dass mehrere Module übereinander statt nebeneinander angezeigt werden, was das Standardverhalten im Rastersystem des Editors ist. Mit Stapeln von Spalten können Sie dies erreichen, ohne mehrere neue Zeilen nacheinander hinzufügen zu müssen.


So aktivieren Sie das Stapeln von Spalten:

  1. Fahren Sie mit der Maus über die Zeile, in der sich die Spalten befinden.
  2. Klicken Sie auf "Zeile" -> "Mehr" (drei Punkte).
  3. Aktivieren Sie die Option "Stapeln von Spalten".




Schlagworte: Spalten, Zeilen, Design, Webdesign, Website-Layout, Spalten bearbeiten, Spalten hinzufügen, Hintergrundbild, Parallax-Effekt, Responsive Design, Stapeln von Spalten, Abstand, Margin, Padding, Animation

Aktualisiert am: 06/08/2025

War dieser Beitrag hilfreich?

Teilen Sie Ihr Feedback mit

Stornieren

Danke!