Inhalte anordnen

Es ist sehr wichtig, wie Sie die Inhalte auf Ihrer Website anordnen. In übersichtlich angeordneten Inhalten finden Besucher einfacher die gewünschten Informationen. Außerdem können Sie so Abschnitte auf Ihrer Website besser hervorheben, die ansonsten leicht übersehen werden. Eine gut strukturierte Seite verleiht Ihrer Website einen professionellen Look und bietet Chancen für Umsatzsteigerungen, da Besucher der Website die gesuchten Inhalte schneller finden.

Website-Builder-Struktur

Der Website-Builder besteht aus einem Header, einem Footer, Zeilen und Spalten. Jedes von Ihnen hinzugefügte Widget wird in einen dieser Abschnitte eingefügt.

Widgets nehmen häufig die gesamte Größe einer Spalte oder Zeile ein, was deren Auswahl erschwert. Um dieses Problem zu umgehen, klicken Sie mit der rechten Maustaste auf das Widget in der gewünschten Spalte oder Zeile, bewegen Sie den Mauszeiger über die Option Container auswählen und wählen Sie dann entweder Spalte oder Zeile aus.

Zeilen

Zeilen sind die horizontalen Abschnitte Ihrer Website. Wenn Sie Widgets und Spalten zu Ihrer Website hinzufügen, werden sie in diese Zeilen eingefügt. Wenn Sie ändern möchten, wie die Inhalte in der mobilen Ansicht angezeigt werden, aktivieren Sie im Zeileneditor die Option Spaltenreihenfolge umkehren.

Sie können Zeilen zu Ihrer Website hinzufügen, indem Sie Widgets auf die Website ziehen. Wenn Sie ein Widget zwischen Zeilen oder in einen Bereich ziehen, in dem eine Zeile eingefügt werden soll, wird eine neue Zeile erstellt, sobald Sie das Widget ablegen.

Wenn Sie eine Zeile löschen möchten, können Sie mit der rechten Maustaste auf eine beliebige Stelle in der Zeile klicken, um das Kontextmenü zu öffnen. Wählen Sie dann Löschen. Alternativ können Sie auch oben links in der Zeile auf die Schaltfläche Zeile und dann auf Löschen klicken.

Spalten

Jede Zeile enthält mindestens eine Spalte. Die Spalten enthalten alle Widgets Ihrer Website und bestimmen deren Anordnung.

Jeder Zeile kann bis zu vier Spalten enthalten. Jedes Mal, wenn Sie eine neue Spalte hinzufügen, erscheint diese neben der vorhandenen Spalte in derselben Zeile.

Hinweis
  • Während bei Desktop- und Tabletansichten jede Zeile bis zu vier Spalten enthalten kann, können auf Mobilgeräten höchstens zwei Spalten in den Zeilen der Websites angezeigt werden.
  • Die in Desktop- und Tabletansichten hinzugefügten Spalten werden beim Wechsel in die mobile Ansicht über die volle Breite der Seite angezeigt. Um eine Zeile mit zwei Spalten in der mobilen Ansicht zu erstellen, wechseln Sie zuerst in die mobile Ansicht und fügen Sie dann ein „Zwei-Spalten“-Element hinzu.

Wenn Sie eine Spalte löschen möchten, können Sie mit der rechten Maustaste auf eine beliebige Stelle in der Spalte klicken, um das Kontextmenü zu öffnen. Wählen Sie dann Löschen. Alternativ klicken Sie oben rechts in der Spalte auf das rote X.

Sie können Widgets direkt in Spalten platzieren oder die Spalte durch Hinzufügen von inneren Zeilen weiter strukturieren.

Innere Zeilen

Innere Zeilen ermöglichen zusätzliche Designflexibilität, da Sie Zeilen innerhalb von Spalten hinzufügen können. Mithilfe der inneren Zeilen können Sie das Spalten-Layout variieren und das allgemeine Design der Zeile beibehalten (z. B. Hintergrund, Abstände, Beschnitt usw.).

Genau wie normale Zeilen können innere Zeilen ihren eigenen Hintergrund und eigene Abstände haben, in bis zu vier Spalten aufgeteilt werden und ihre Spaltenreihenfolge kann auf Mobilgeräten geändert werden. Spalten in inneren Zeilen können von jedem Widget gefüllt werden, aber innere Zeilen können nicht zu solchen Spalten hinzugefügt werden.

Um einer Spalte eine innere Zeile hinzuzufügen, können Sie eine der folgenden Methoden anwenden:

  1. Klicken Sie mit der rechten Maustaste auf die Zeile und dann auf Innere Zeile hinzufügen. Wenn es mehrere Spalten in der Zeile gibt, müssen Sie wählen, zu welcher Spalte Sie die inneren Zeilen hinzufügen möchten.
  2. Klicken Sie mit der rechten Maustaste auf die Spalte und dann auf Innere Zeile hinzufügen.
  3. Klicken Sie mit der rechten Maustaste auf die innere Zeile und dann auf Zeile hinzufügen, um eine innere Zeile unter die aktuelle zu setzen.

Beispiel für eine innere Zeile

Um ein Beispiel für die Verwendung der inneren Zeile zu geben, lassen Sie uns zwei Möglichkeiten betrachten, wie ein Layout gestaltet werden kann, das einen Titel und 3 Schaltflächen enthält:

  • Fügen Sie zwei Zeilen hinzu. Platzieren Sie den Titel in Zeile 1 mit 1 Spalte. Teilen Sie Zeile 2 in 3 Spalten auf. Platzieren Sie eine Schaltfläche in jeder Spalte.
    • Zwei separate Zeilen können nicht das gleiche Hintergrundbild haben, und Sie müssen die Abstände und das Beschnittformat für jede Zeile separat festlegen.

  • Fügen Sie eine Zeile hinzu. Standardmäßig enthält jede Zeile eine Spalte. Fügen Sie 2 innere Zeilen zur Spalte hinzu. Platzieren Sie den Titel in der inneren Zeile 1. Teilen Sie die innere Zeile 2 in 3 Spalten auf. Platzieren Sie eine Schaltfläche in jeder Spalte.
    • Diese beiden inneren Zeilen teilen sich den Hintergrund, die Abstände und den Beschnitt mit der Hauptzeile.

Einige wichtige Überlegungen, was die Bearbeitung innerer Zeilen betrifft:

  • Sie können die Pfeile zum Wechseln der Reihenfolge nur verwenden, um die Reihenfolge zwischen den inneren Zeilen zu ändern. Um die Reihenfolge der Widgets und inneren Zeilen zu ändern, müssen Sie die Widgets manuell per Drag & Drop über oder unter der inneren Zeile ablegen.
  • Widgets mit 2, 3 oder 4 Spalten können nicht in inneren Zeilen platziert werden. Um eine Spalte hinzuzufügen, klicken Sie mit der rechten Maustaste auf die Zeile und dann auf „Spalte hinzufügen“.
  • Im Gegensatz zu normalen Zeilen können innere Zeilen nicht kopiert und eingefügt werden.

Widgets

Widgets enthalten Text, Bilder, Schaltflächen und andere Inhalte Ihrer Website.

So fügen Sie Widgets zu Ihrer Website hinzu:

  1. Klicken Sie in der linken Seitenleiste auf Widgets.
  2. Suchen Sie nach dem gewünschten Widget und ziehen Sie es dann auf Ihre Website.

Wenn Sie ein Widget von Ihrer Website löschen möchten, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf dem Widget. Dadurch öffnet sich das Kontextmenü, in dem Sie auf Löschen klicken können. Alternativ klicken Sie oben rechts im Widget auf das rote X.

Wenn Sie Widgets nebeneinander anordnen möchten, ziehen Sie ein Widget auf Ihre Website, fügen Sie eine Spalte zu der Zeile hinzu, in der dieses Widget platziert wurde, und ziehen Sie dann ein anderes Widget in diese Spalte. Alternativ können Sie auch das Widget „Zwei Spalten“ auf Ihre Website ziehen und anschließend die Widgets per Drag & Drop in jede Spalte verschieben.

Automatisch ausrichten

Beim Ändern der Größe von Widgets innerhalb derselben Spalte versucht IONOS, die Widgets automatisch auszurichten, damit sie die gleiche Größe haben. Wenn Sie die Größe ändern, springt IONOS vor oder zurück, um die Größe an der Position auszurichten. Das soll dabei helfen, exakt gleich große Widgets zu erstellen.

Am Raster ausrichten

Die Funktion „Am Raster ausrichten“ hilft Ihnen, Widgets präzise auf den Seiten Ihrer Website zu positionieren. Mit diesem System können Sie Widgets horizontal und vertikal innerhalb von Spalten und Zeilen ausrichten. Wenn Sie ein Element in seiner Zeile oder Spalte verschieben oder Sie die Größe des Widgets ändern, werden Lineale angezeigt. Die ausgerichteten Elemente werden mit einem farbigen Rahmen hervorgehoben. Ein Widget kann je nach spezifischem Anwendungsfall an mehr als einem anderen Widget ausgerichtet werden.

Hinweis

Die Ausrichtung wird auf allen drei Gerätetypen unterstützt (Desktop, Tablet, Mobilgerät).

Weitere Informationen über das Hinzufügen und Bearbeiten von Widgets finden Sie unter Widgets hinzufügen und Widgets bearbeiten.