How to use Flex Containers in TeleportHQ

Containers provide the structure to any web page. Let’s find out how containers work in TeleportHQ and how to properly add other elements like images, videos or buttons to these containers.

Container types
Adding containers to the project
Customizing containers
Adding elements to containers

Container types

In the Left panel of the editor you will find the Layout section. From here you can add two types of containers: rows and columns. Both of these containers are semantically <div> HTML elements with the “display: flex;” property added by default.

Rows

When adding a row to the canvas you will add a full-width container with a horizontal distribution of elements. Adding elements within a row will automatically set them next to each other.

Columns

Adding a column in the canvas or in another container will add a 200px wide container with a vertical distribution of elements.

Adding containers to the project

To add a row or column in the project you can either drag and drop it directly on the canvas or in the treeview, in the container of choice.

Customizing containers

To edit any of your containers you first need to select it. You can do this either by clicking in the canvas or find it in the treeview. Once selected, go to the Right side panel. Here you will find multiple sections that you can customize. Let’s go through some of these sections:

HTML - Change the HTML tag (div, article, section, aside), add IDS or custom attributes
Classes - Add/remove CSS classes to your containers, or create new classes altogether
States - Add interaction states such as hover effects
Size - Change the size of containers using different units of measurement such as: px, em, rem or %
Position - Change the position (auto/freestyle), or if the container is a child of another flex container, the alignment of the child relative to the parent container (align-self)
Inner Layout - Adjust how elements and spacing is displayed inside the flex container.

In this panel you can also find other options such as: margin, padding, visibility, shadows or z-index.

Learn more about Flexbox to properly leverage containers in TeleportHQ: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In the Advanced panel you also have the option to add other properties to your containers including display: grid; and the other properties that define the grid structure.

Adding and aligning elements in containers

To add an element to a container simply go to the Left side menu, to the Elements tab and choose which element you want to use. Then simply drag and drop the element inside the container in a position of your choice (center, top, top left, bottom right and so on).

To change the layout of your container you need to select it and go in the Right side panel to the Inner layout section. Here you can adjust the orientation of elements by selecting either row or column (horizontal or vertical) as well as choose how elements align next to each other and how spacing is distributed.

Updated on: 20/04/2023