All Collections
Building Blocks
Layout
Container
Container

The Container block allows you to place several building blocks side by side and combine them within one element.

Heyflow avatar
Written by Heyflow
Updated over a week ago

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

  1. In the blocks tab, navigate to Layout and drag the container block into your heyflow

  2. Drag the desired blocks into the container

  3. Adjust the layout of the container

  4. Add a background color or image (optional)

  5. Just publish your heyflow, and you’re good to go!
    ​

Edit Options

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: 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

  • 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

  • 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.

Did this answer your question?