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:

1. Hover between rows, and Click +Add Section. Or, right Click to open the context menu, Click Add,
   then select Flex section.
2. In the side panel, Click Flex Sections.
3. Select the desired flex section.
4. 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:

1. Hover over the desired section and Click Flex Section in the upper left corner of the section.
2. Click Save as Section, then Click Select only this row.
3. Type a section name, select the category the section will be saved under, and select the permissions
   for the section.
4. Click Start Creating.
5. 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:

1. Click to select an existing column.
2. 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:

1. Click to select a column.
2. 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:

1. Click to select the column.
2. 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:

1. Click a column, Inner Column or advanced grid to select it.
2. Click the plus icon in the middle of the column, Inner Column, or advanced grid. Or, Click the plus
   icon in the floating menu.
3. Select a widget.

You can also Add widgets from the layers panel.

To Add a widget from the layers panel:

1. Click to select a column.
2. In the side panel, Click Layers.
3. 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.
4. 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:

1. Select the section, column, or inner column and click the alignment icon in the floating menu.
2. 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:

1. Right click the desired section, column, or inner column and select Edit design.
2. 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:

1. Select the desired element.
2. 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:

1. Right click the desired section, column, inner column, or advanced grid and select Edit design.
2. 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.

​​