Studio Editor: Flexboxen hinzufügen und einrichten

2 Min. Lesezeit
Verwende Flexboxen, um die Anzeige deiner Website-Inhalte zu optimieren. Flexboxen sind Layout-Tools, die aus responsiven Containern bestehen, sodass sie sich automatisch an die Bildschirmgröße deiner Besucher anpassen.

Schritt 1 | Eine Flexbox hinzufügen

Öffne das „Hinzufügen“-Panel, um ein Flexbox-Preset auszuwählen und es 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.)

Um eine Flexbox hinzuzufügen:

  1. Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
  2. Klicke auf Layout-Tools.
  3. Klicke auf Flexboxen.
  4. Ziehe die gewünschte Flexbox auf die Seite.
Das „Elemente hinzufügen“-Panel im Studio Editor. Der Cursor schwebt über einem Flexbox-Layout.
Sieh dir an, wie es funktioniert:
Ziehe die Ziehgriffe auf deiner Arbeitsfläche, um zu sehen, wie sich der Inhalt der Flexbox über Breakpoints hinweg nahtlos neu anordnet.

Schritt 2 | Elemente zu einer Flexbox hinzufügen

Eine Flexbox besteht aus mehreren Elementen, die responsive Container sind. Du kannst die Anzahl der Elemente in einer Flexbox ändern, wobei sie die Größe der Elemente automatisch an den verfügbaren Platz anpasst.
Um ein neues Element hinzuzufügen, kannst du auf Element hinzufügen klicken oder das „Elemente verwalten“-Panel verwenden.
Eine leere Flexbox im Editor Der Cursor fährt über den Button Elemente hinzufügen.

Schritt 3 | Elemente zu einer Flexbox hinzufügen

Wähle aus, was du in deiner Flexbox anzeigen möchtest, indem du Elemente zu den Flexbox-Elementen hinzufügst. Du kannst Elemente an verschiedenen Breakpoints ein- und ausblenden, um für deine Besucher unabhängig vom verwendeten Gerät ein einzigartiges Erlebnis zu schaffen.

Um Elemente zu einem Flexbox-Element hinzuzufügen:

  1. Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
  2. Wähle den Elementtyp aus, den du hinzufügen möchtest.
  3. Klicke auf das gewünschte Element, um es zu deiner Seite hinzuzufügen.
  4. Ziehe das Element auf das Flexbox-Element und lege es ab, wenn du Anhängen siehst.
Ein Button, der auf eine Flexbox gezogen wurde Die Nachricht anhängen wird angezeigt.
Wie geht es weiter?
Passe deine Flexbox an und verwalte sie, um den gewünschten Inhalt so anzuzeigen, wie du es möchtest.

War das hilfreich?

|