Containers are a very flexible component in Replo - they allow you to lay out other components inside a horizontal or vertical stack.
To Add a Container:
- Navigate to the page you want to add a Container to in the editor.
- On the left side of the editor, click the "Components" toggle, then under the "Layout" heading, select which type of container you want to add (there are several pre-configured column layouts).
- Drag the Container into the page.
To Add a Component Inside an Empty Container:
- On the left side of the editor, click the "Components" toggle, then select the component you want to add.
- Drag the component directly over the container to drop it inside.
Horizontal and Vertical Containers
Containers can be laid out horizontally or vertically. To change the orientation of the Container, use the left and down arrow buttons which are shown in the right-side editor panel when a Container is selected.
Container direction can even be different on mobile devices! To make a horizontal container vertical on mobile, simply select the mobile preview in the editor header, then use the left and down arrow buttons to change the orientation. For more information, see Responsive Design.
Container Alignment
The contents of a Container can be aligned to either side. To change the alignment of a container, use the controls under "Alignment" in the right-side editor panel when the Container is selected.
Reversing Container Direction
Containers display their content in order, but sometimes it's useful to have the order reversed (for example, if you want to have a horizontal container with an image on the right on desktop, but a vertical container with an image on the top on mobile).
To reverse the container direction, use the "Forward" and "Reverse" toggles under "Alignment" in the right-side editor panel when a Container is selected.
Column Layouts
A very common way to use Containers is to make them into column layouts.
To Make a Container into a Column Layout:
- Select the Container you want to make into columns.
- Make sure the Container is set to be horizontal, using the right arrow button.
- Under "Alignment" in the right-side editor panel, select "Configure Columns."
- Choose from the list of common column layouts. Note: if the container has more contents than the number of columns, those column layouts won't be selectable. To select those column layouts, first delete the contents of the container.