Size Units & Flex Elements

Size Units

Understanding and effectively utilizing size units is crucial for creating layouts that are not only visually\

appealing but also responsive across various devices and screen sizes.

The design panel, located on the right side of the editor canvas, is the control center for design properties of selected elements, including sections, columns, widgets, inner columns, and advanced grids. This article reviews the size units available in the design panel and offers practical examples for their usage.

Additionally, the Editor allows users to configure size units from the main breakpoint (desktop), ensuring\

scalability across all screen sizes. Users can adjust size units on tablet and mobile breakpoints without\

affecting other breakpoints. For more information, see Screen Sizes and Devices

Percentage % for Flexible, Proportional Scaling

Percentage (%) is a dynamic size unit that determines the proportion of the container (section, column,\

inner column, or advanced grid) occupied by the element across various screen sizes. Typically, flex\

element widths default to percentages. Using percentages is advised when aiming to maintain design\

consistency across screen sizes without the need for manual pixel adjustments at each breakpoint.

For example, setting both columns in a two-column layout to 50% width ensures they automatically\

scale to 50% on all screen sizes.

Percentages are beneficial for preserving relative element sizes across different screen dimensions.\

This means that elements scale proportionally to their parent container (section or column), guaranteeing\

uniformity in layout appearance.

For example, an image set to 50% width inside a column will always occupy half the column's width,\

regardless of the screen size. Consequently, while the column and image may appear narrower on\

mobile devices compared to desktops, the image maintains its proportional width. Similarly, setting the\

padding between columns to 4% ensures consistent spacing relative to the columns and other screen\

elements, adapting across different screen sizes.

Pixels (Px) for Stable, Fixed Dimensions

Pixels (px) provide a fixed unit of measurement unaffected by device size variations. For example, a\

button set to 250px maintains its size across mobile, tablet, and desktop devices.

However, relying solely on pixels for sizing may hinder responsiveness, necessitating manual adjustments\

at each breakpoint. Therefore, while pixels ensure consistency in element size, utilizing percentages is\

recommended to promote responsive design. This approach minimizes the need for individual\

pixel adjustments at breakpoints, streamlining the design process and enhancing overall responsiveness.

Viewport Width (Vw) for Responsive Scaling Based on Screen Width

Viewport width (Vw) dynamically adjusts elements based on the screen's width (viewport), ensuring\

proportional scaling across different devices. For example, assigning 50 Vw to an element allocates half\

of the screen width.

Viewport Height (Vh) - Responsive Scaling Based on Screen Height

Viewport height (Vh) dynamically scales elements in relation to the screen's height (viewport). For\

example, designating 25 Vh to an element reserves a quarter of the screen's height for that element.

This is especially beneficial for full-screen backgrounds (100% Vh) or elements that necessitate\

synchronization with the screen's height.

Automatic (A) - Content-Driven Adaptation

The automatic unit dynamically adjusts based on content height, making it suitable for text blocks and\

column heights, ensuring they resize according to their content. Typically, text blocks default to\

automatic units. This feature enables elements to expand or contract seamlessly, maintaining\

proportional layout design.

Understand Parent-Child Concept of Nested Elements

The parent-child concept governs the organization of elements, with primary elements like headers,\

bodies, menus, and footers containing at least one section. Each section, in turn, houses at least\

one column, serving as a container for various elements such as text, images, or widgets like Inner\

Columns and Advanced Grids.

Parent elements retain their design settings, allowing centralized control over their appearance.\

However, if a section within a parent element has specific background color settings, the parent\

element's background may not reflect this customization. This hierarchical structure ensures a\

systematic approach to website organization, facilitating efficient design workflows and coherent\

content presentation.

Select and Navigate within Flex Elements on the Canvas

The hierarchy of elements follows a default structure: sections contain columns and columns contain\

widgets. This hierarchical arrangement ensures that you cannot add a widget directly to a section\

without it being nested within a column. There are multiple ways to select an element (section, column,\

or widget):

Direct Selection of Objects in the Editor Canvas: Users can interact directly with elements on\

the editor canvas, making it easier to identify and modify specific components without the need for\

extensive navigation through panels or menus. Upon selecting an object, the design panel with all the\

relevant design options for that element will appear on the design panel on the right.

Floating Menu Breadcrumbs: Users can navigate back to parent containers using breadcrumbs in\

the floating menu. When selecting a specific element, users can simply Click on the blue breadcrumbs\

at the top of the element to return to its parent container.

Top of the Design Panel Breadcrumbs: The design panel also includes navigation options at the\

top in the form of breadcrumbs. These breadcrumbs enable users to quickly jump between different\

sections or elements within the canvas.

Layers Panel: When an element is selected, the layers panel highlights the layers associated with\

that element. Simultaneously, the editor provides visual feedback, aiding in navigation within the\

canvas.

Flex Sections

Flex sections are rows with two default flex columns that create a basic layout. Once you Add a section,\

you can Add, remove, or rearrange additional columns, Inner Columns, or advanced grids to create your\

desired layout. Then you can Add widgets to that layout.

Add Flex Section

To Add a section:

Hover between rows, and Click +Add Section. Or, right Click to open the context menu, Click Add,\

then select Flex section.

In the side panel, Click Flex Sections.
Select the desired flex section.
Click Save.

📘 NOTE
The option to keep a background image static is not available for tablet and mobile\
due to an iOS limitation.

Save Flex Section

To save a section:

Hover over the desired section and Click Flex Section in the upper left corner of the section.
Click Save as Section, then Click Select only this row.
Type a section name, select the category the section will be saved under, and select the permissions\

for the section.

Click Start Creating.
Click Done.

Delete Flex Section

To delete a section, right Click to open the context menu and select Delete. Or, Click the delete icon on\

the floating menu.

Flex Columns

Once you’ve Added a section to your site, you can Add columns to contain widgets within the section.\

All sections contain columns by default, but you can still Add additional columns.

Note the maximum number of columns is 8.

📘 NOTE
When you add an element to a column, the position is determined by auto layout
settings. To change the auto layout direction, open the design panel and in the Layout section, select horizontal or vertical for the auto layout.

Add Flex Column

To Add a column:

Click to select an existing column.
In the floating menu, Click the three horizontal dots icon, then select Add column. Or, *Click*\

the plus icon on either the left or right edge of the column.

Duplicate Flex Column

You can duplicate a column and it will be Added to the right of the original card. You cannot *Add*\

columns that exceed 100% of the width.

To duplicate a column:

Click to select a column.
On the floating menu, Click the Duplicate icon. Or, you can right Click the column to open the\

context menu and select Duplicate.

Delete Flex Column

You can delete a column to remove it from the section. However, each section must contain at least one\

column, meaning you cannot delete the last column from a section.

To delete a column:

Click to select the column.
In the floating menu, Click the Delete icon. Or, you can right Click the column to open the context\

menu and select Delete.

Add Widgets in Flex

You can Add widgets to columns, Inner Columns, or advanced grids in several different ways. If you\

are already in flex mode, you can Add widgets directly from the side panel by Clicking Widgets, then\

selecting the desired widget

📘 NOTE
If you are using flex mode in the Classic Editor, you cannot drag and drop a widget into\
a flex column from the side panel.

To Add a widget:

Click a column, Inner Column or advanced grid to select it.
Click the plus icon in the middle of the column, Inner Column, or advanced grid. Or, Click the plus\

icon in the floating menu.

Select a widget.

You can also Add widgets from the layers panel.

To Add a widget from the layers panel:

Click to select a column.
In the side panel, Click Layers.
In the layers panel, Hover over the column, Inner Column or advanced grid you want to Add a\

widget to and Click the plus icon.

Select a widget.

Flex Alignment and Spacing

Alignment and spacing can be used together to help you achieve your designs.

Alignment

Align Multiple Elements

When designing with Flex, you can save time by aligning multiple elements within the same section,

column, or inner column at the same time.

To align multiple elements:

Select the section, column, or inner column and click the alignment icon in the floating menu.
Select the desired alignment.

The design panel offers additional alignment options such as changing the direction of auto layout,

stretching, and more.

To align elements from the design panel:

Right click the desired section, column, or inner column and select Edit design.
In the Layout section of the design panel under Align elements, select the desired vertical and

horizontal content alignment.

When aligning text from the floating menu or design panel, it aligns both the text and the div tag.

Align Single Elements

While it is possible to align multiple elements at once, sometimes you only need to change the alignment of one element inside a flex column without affecting the other elements.

To align a single element:

Select the desired element.
In the floating menu, click the alignment icon and select the desired alignment. Or, right

click the element and select Edit design. This opens the design panel where you can select the

alignment from the Align section.

Spacing

Space between elements

You can set the amount of horizontal or vertical space between columns within the same flex section or

widgets inside a column, Inner Column or advanced grid.

To set spacing between elements:

Right click the desired section, column, inner column, or advanced grid and select Edit design.
In the Spacing section of the design panel under Spacing between elements, type or use the

slider to set the percent value of horizontal space or the pixel value of vertical space you want to

exist between elements in the Spacing between items field.

You can reset the padding for both sections and columns by clicking the Reset padding icon in the

floating menu.

Updated on: 12/05/2026

Was this article helpful?

Thank you!