Container helfen dir dabei, Komponenten auf unterschiedliche Weise auf deiner Website und App zu platzieren oder sie in Gruppen anzuordnen. Möchtest du mehrere Komponenten mit demselben Seitenabstand oder derselben Ausrichtung anlegen, kannst du diese in einen Container zusammenführen. Das Layout stellst du dann übergreifend für alle im Container liegende Komponenten ein. Pages deiner Website und App bestehen zumeist aus mehreren Containern.
Im folgenden Bild siehst du die verschiedenen Container (rot-umrandet), die für die FluxFM Website benutzt werden.
Container erstellen
Klicke im radiosphere Studio Editor in der oberen Leiste neben dem Select-Button auf den Add-Button. Wähle den blau-markierten Bereich aus, in dem du den Container platzieren möchtest. Hast du den passenden Bereich ausgewählt, dann öffnet sich ein neues Fenster mit allen verfügbaren Komponenten. Unter dem Reiter Layout findest du die Option Container. Du kannst alternativ mit Hilfe der Suchzeile ganz oben danach suchen.
Du siehst nun in der Vorschau einen Bereich, der mit einer blau-gestrichelten Linien umrandet ist. Dies ist der Container, den zu soeben hinzugefügt hast. In diesen kannst du jetzt Komponenten einbetten und deren Abstände zu den Seitenrändern sowie Ausrichtung konfigurieren.
Komponenten einbetten
Um eine Komponente in einen Container einzubetten klicke in der Root-Übersicht mit der rechten Maustaste auf den Container. Es öffnet sich ein kleines Fenster. Wähle darin + Add Component aus und dann in der Komponenten-Auswahl die gewünschte Komponente. Mit Klick auf Add wird sie automatisch innerhalb des Containers angeordnet. Alternativ kannst du eine bereits erstellte Komponente in den Container via Drag and Drop ziehen. Klicke dazu in der Root-Übersicht auf die entsprechende Komponente. Halte die Maustaste gedrückt bis unter dem Cursor ein grünes Kreuz erscheint. Nun kannst du die Komponente in den Container verschieben. Lasse sie los, um sie an der richtigen Stelle zu platzieren.
Designs innerhalb eines Containers ändern
Du kannst das Design und damit die Größe, Seitenabstände sowie Ausrichtung der Komponenten innerhalb des Containers ändern, indem du auf den Design-Button in der oberen Leiste klickst. Rechts öffnen sich die folgenden Einstellungsmöglichkeiten:
- Devices
- Layout
- Spacing
Konfiguriere den Container entsprechend deiner Anforderungen. Wenn du nicht weißt, wie das geht, kannst du das hier nachlesen. Die Anpassungen werden automatisch übernommen und sind in der Vorschau sichtbar - das Bestätigen deiner Einstellungen ist nicht notwendig.
Komponenten zentrieren
Du kannst Komponenten auf deinen Pages zentrieren, indem du sie in einen Container einbettest. Befolge dazu die oben beschrieben Schritte. Klicke anschließend auf den Container dann auf den Design-Button. Wähle nun rechts neben Layout das >>-Symbol aus. Wähle bei Direction Horizontal und bei Justify Center, um die Komponente mittig auf der Seite zu platzieren. Du kannst auf diese Weise deine Komponenten innerhalb deiner Webseite und App anordnen. Wichtig: Für Devices mit kleiner Bildschirmgröße (z.B. Smartphones) empfiehlt sich aufgrund der reduzierten Breite des Bildschirms die vertikale Anordnung von Inhalten. Wähle dazu in den Einstellungen bei Direction Vertical aus.
