If you want to display elements side by side, you can use the container block. This block is often used with input blocks or for building landing pages, since it can help categorize sections on your page.
Adding the container block
In the blocks tab, navigate to Layout and drag the container block into your heyflow
Drag the desired blocks into the container
Adjust the layout of the container
Add a background color or image (optional)
Just publish your heyflow, and you’re good to go!
Designing the Container
There are multiple ways to adjust the container block even more than described above. Just head to the Design tab and start working on the different styles by adjusting the border and other elements. In some plans, you can dive even deeper into all spheres of design & look.
Edit Options
General
General
Outer width: Select the outer width of the container. Note that the preview may be displayed smaller than selected here.
Inner width: Select the width of the inner element. Here too, the width may be displayed smaller than selected.
Align content: Define whether the content of the container is displayed on the left, right or in the centre.
Margin & padding: Define the distance to the top, right, bottom and left edge of this block.
Layout
Layout
Layout: Determine the vertical or horizontal alignment of the blocks within the container.
Align: Layout of the block placement in relation to a page.
Layout mobile: Determine the vertical or horizontal alignment of the blocks within the container in mobile view.
Gap: Determine the distance between the individual elements using the slider or the exact number of pixels.
Columns
Columns
Arrangement: Determine the distribution of the elements of the container.
Justify: If the distribution of the columns is set to 0, you can adjust the horizontal alignment.
Appearance
Appearance
Visibility: Here you can select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.
Background colour: You can select a colour to be used as the background for the block.
Background image: Set a background image for the block.
Style variant: Set a prefabricated pattern. The different styles can be customised in the Design tab.
Examples
Testimonial
Containers can be used to show testimonials in a visually more appealing way, e.g. on landing pages.
Background image or GIF
Besides a background color for a container setup, you can also include a background image or GIF to make your heyflow stand out.
