Containers help you place components in different ways on your website and app, or arrange them in groups. If you want to create multiple components with the same page spacing or alignment, you can merge them into one container. You then set the layout for all the components in the container. Pages of your website and app usually consist of several containers.
In the following image you can see the different containers (red-bordered) that are used for the FluxFM website.
Create a container
In the radiosphere Studio Editor, click on the Add button in the top bar next to the Select button. Select the blue marked area where you want to place the container. Once you have selected the appropriate area, a new window will open with all available components. Under the Layout tab you will find the Container option. Alternatively, you can search for it using the search line at the top.
You will now see an area in the preview that is outlined with a blue dashed line. This is the container you just added. You can now embed components into it and configure their spacing from the page edges and alignment.
Embed components
To embed a component in a container, right-click on the container in the root overview. A small window will open. Select + Add Component and then the desired component in the component selection. By clicking Add it will be automatically placed inside the container. Alternatively, you can drag and drop an already created component into the container. To do this, click on the corresponding component in the root overview. Keep the mouse button pressed until a green cross appears under the cursor. Now you can move the component into the container. Release it to place it in the right place.
Changing designs inside a container
You can change the design and thus the size, spacing and alignment of the components within the container by clicking on the design button in the top bar. On the right side the following settings will open:
- Devices
- Layout
- Spacing
Configure the container according to your needs. If you don't know how to do that, you can read about it here. The adjustments are automatically applied and are visible in the preview - confirming your settings is not necessary.
Center components
You can center components on your pages by embedding them in a container. Follow the steps described above. Then click on the container then on the design button. Now select the >> symbol to the right of Layout. Select Horizontal for Direction and Center for Justify to place the component in the center of the page. This way you can arrange your components within your website and app. Important: For devices with a small screen size (e.g. smartphones), it is recommended to arrange content vertically due to the reduced width of the screen. To do this, select Vertical in the Direction settings.
