Wix Hilfe-Center
    Start
  1. Deine Website erstellen
  2. Editor X
  3. Elemente im Editor X hinzufügen
    4. Editor X: Layouter verwenden

Editor X: Layouter verwenden

6 Min. Lesezeit
Editor X wird zu Wix Studio, unserer neuen Plattform für Agenturen und Freelancer.Mehr über Wix Studio erfahren
Organisiere deine Inhalte in einem Layouter, einem intelligenten Layout-Tool, das aus responsiven Containern besteht. Mithilfe der Flex-Technologie passen sich die Container automatisch an die Bildschirmgröße deiner Besucher an.
Du kannst eine Anzeigeart für deinen Layouter auswählen (z. B. Spalten, Backstein, Folien), Elemente nach Bedarf hinzufügen oder entfernen und Einstellungen wie Ränder und Ausrichtung anpassen.
In diesem Artikel erfährst du mehr über folgende Themen::

Einen Layouter hinzufügen

Öffne das Hinzufügen-Panel, um eine Layouter-Voreinstellung auszuwählen und auf deine Seite zu ziehen. Es gibt viele Designs zur Auswahl, je nachdem, welche Art von Inhalt du anzeigen möchtest (z. B. nur Bilder, Bilder und Text usw.).
Screenshot des Panels Elemente hinzufügen in Editor X, der die verschiedenen Layouter-Optionen zeigt, die du hinzufügen kannst

Um einen Layouter hinzuzufügen:

  1. Klicke oben im Editor X auf Elemente hinzufügen .
  2. Klicke auf Layout-Tools.
  3. Klicke auf Layouter.
  4. Ziehe einen Layouter auf deine Seite.
Sieh dir an, wie es funktioniert:
Ziehe die Ziehgriffe der Arbeitsfläche, um zu sehen, wie sich der Inhalte des Layouters über die Breakpoints hinweg nahtlos neu anordnet. 

Layouter-Elemente hinzufügen und verwalten

Ein Layouter besteht aus mehreren Elementen, die responsive Container sind. Du kannst die Anzahl der Elemente in einem Layouter ändern und er passt die Größe der Elemente automatisch an den verfügbaren Platz an.
Um ein neues Element hinzuzufügen, kannst du auf Element hinzufügen klicken oder das „Elemente verwalten“-Panel im Inspektor verwenden.
Screenshot der Option „Element hinzufügen“, die angezeigt wird, wenn du im Editor X auf einen Layouter klickst

Um deine Layouter-Elemente über den Inspektor zu verwalten:

  1. Klicke auf deinen Layouter.
  2. Klicke oben im Editor X auf das Inspektor-Symbol .
  3. (Im Inspektor) Klicke neben der Anzahl der Elemente auf Verwalten.

    A screenshot of the Inspector panel where you can click Manage to manage layouter items
  4. Klicke neben einem Element auf das Symbol für Weitere Aktionen , um eine der folgenden Aktionen auszuführen:
    • Duplizieren: Erstelle eine Kopie eines bestimmten Elements.
    • Umbenennen: Gib jedem Element einen Namen, den du wiedererkennst.
    • Löschen: Entferne das Element vollständig.
    • Nicht anzeigen: Blende dieses Element auf dem spezifischen Breakpoint aus, an dem du arbeitest.
Screenshot des Panels Elemente verwalten im Inspektor
Musst du die Elemente neu anordnen?
Halte neben dem entsprechenden Element das Symbol für Neu anordnen  und ziehe es an die neue Position.

Den Anzeigetyp eines Layouters anpassen

Ändere die Anzeige deines Layouters mit nur einem Klick. Du kannst auswählen, wie du deine Inhalte präsentieren möchtest — in Spalten, Zeilen, Mosaik, einem Slider oder Folien. Die Elemente werden automatisch neu angeordnet.
Screenshot mit einem Aufklappmenü, das angezeigt wird, wenn du im Editor X auf einen Layouter klickst, um sein Layout zu ändern
Mit Breakpoints arbeiten:
  • Du kannst für jeden Breakpoint ein anderes Layout festlegen.
  • Wir empfehlen das Spalten- oder Slider-Layout auf kleineren Bildschirmen wie mobilen Geräten.

Um die Anzeige weiter anzupassen:

  1. Klicke auf deinen Layouter.
  2. Klicke oben rechts in Editor X auf das Inspektor-Panel .
  3. (Optional) Wähle unter Anzeige einen Anzeigetyp aus.
  4. Passe deinen Layouter basierend auf dem ausgewählten Anzeigetyp an:
Hinweis zu CSS-Zwischenräumen:
Einige alte Browser unterstützen diese Funktion nicht (z. B. Chrome 76-83, Safari 12-14 und Edge 79-83). Das bedeutet, dass Besucher, die über diese Browser auf deine Website zugreifen, die Zwischenräume nicht sehen, die du zwischen den Layouter-Elementen festgelegt hast.
Screenshot des Inspektor-Panels in Editor X, während die Anzeigeeinstellungen des Layouters angepasst werden

Die Größe von Layouter-Elementen ändern

Deine Layouter-Elemente müssen nicht gleich groß sein. Du kannst die Größe einzelner Elemente ändern, um sie größer oder kleiner als die anderen zu machen. Im Inspektor-Panel kannst du die Breite und Höhe jedes Elements mit den Maßeinheiten deiner Wahl anpassen. Du kannst auch die horizontalen und vertikalen Ränder um Elemente herum anpassen.
Screenshot des Inspektors, während du die Größe eines Layouter-Elements im Editor X änderst

Layouter-Elemente neu anordnen

Ordne den Inhalt innerhalb deines Layouters neu an, indem du die Reihenfolge der Elemente änderst. Mit dem Rechtsklick-Menü kannst du Elemente hin und her verschieben — der Layouter passt sich automatisch an deine Änderungen an.

Um Layouter-Elemente neu anzuordnen:

  1. Klicke mit der rechten Maustaste auf das Element, das du verschieben möchtest.
  2. Fahre mit der Maus über Abfolge ändern.
  3. Wähle Mit nächstem Element/Mit vorherigem Element.
Video, das zeigt, wie du die Reihenfolge der Layouter-Elemente im Editor X änderst

War das hilfreich?

|

In diesem Artikel

  • Einen Layouter hinzufügen
  • Layouter-Elemente hinzufügen und verwalten
  • Den Anzeigetyp eines Layouters anpassen
  • Die Größe von Layouter-Elementen ändern
  • Layouter-Elemente neu anordnen