The design panel displays on the right side of flex mode and contains your design properties for the selected element (section, column, widget, flexbox, or advanced grid). Each element has different properties that can be adjusted in the design panel, meaning the design properties are different depending on which element is selected. The design properties include alignment, layout, spacing, sizing, and more, depending on the selected element.

To open the design panel, click an element while in flex mode, then click Design. The design panel opens on the right side of flex mode so that it does not interfere with your ability to view and edit your design. Or, you can click the Edit design icon in the floating menu. After closing the design panel, you can open it again by clicking the Edit design icon in the top right corner.

The following are design terms and abbreviations used in the design panel:

Available for single elements inside a column or flexbox. Single elements inside a column or vertical flexbox with vertical auto layout can be aligned left, center, right, or stretched horizontally to fit 100% of its container width.

Elements can also be aligned from the floating menu by clicking the Align icon.

Available only for sections and can only be changed from the desktop main breakpoint. When toggled to On, it allows the content to span the entire width of the screen. When toggled to Off, the content width can span a maximum of 1,200 pixels. By default, the full bleed setting is toggled to Off.

Allows you to vertically align multiple elements in a column or flexbox at once. In the classic editor, elements can only be aligned individually and horizontally. Vertical alignment is helpful because it keeps the position of the elements consistent between all breakpoints without making additional adjustments.

Allows you to select whether elements inside columns and flexboxes are automatically aligned horizontally or vertically. By default, elements are vertically aligned. Elements can only be moved in the same direction as the auto layout alignment. For example, if elements are aligned vertically, you can only move the elements vertically and not horizontally. The auto layout helps ensure your design is optimized to match any breakpoint.

Available for columns and flexboxes only when Horizontal is selected for auto layout. When set to Wrap, it allows elements inside the column or flexbox to keep their dimensions and wrap when the screen width changes.

Available for columns and flexboxes only when Wrap is selected for auto layout. Allows you to set the alignment of rows within a column or flexbox. This setting does not affect the alignment of elements inside rows, just the rows themselves.

Allows you to set the space in between columns or widgets once and it applies to all columns in a section or all widgets in a column. For columns, if the auto layout property is set to vertical, the space between widgets is measured in pixels. If the auto layout is horizontal, the space between widgets is measured in percentages. This property is not applicable for elements inside flexboxes or advanced grids.

Margins are the space between the element's border and the edge of the section, column, flexbox, or advanced grid it is contained within.

Padding is the inner space of the element. Click the margin or padding number to type a new value, then use the drop down menu to select the unit the space is measured in (px, %, vh, or vw). By default, horizontal spacing is measured in percentages, and vertical spacing is measured in pixels.

For example, if you select a column and set the left padding to 5 px it will add 5 px of space between the left edge of the column and the outer edge of the elements inside the column. If for that same column you set the left margin to 5 px, it will add 5 px of space between the edge of the column and the edge of the section that contains it.

When clicked in the design panel or floating menu, it resets the padding or margins for the selected element to zero.

Depending on the selected element, you can adjust the height and width, and the maximum and minimum values. In flex mode, height can be measured in px, vh, percentage, and A. However, the height of flex columns and space between columns can only be measured in percentage.

Note

The default size units are different for each element. For example, by default text boxes are 100% width and buttons are 280px width.

For sections, you can only change the height. Section width is set by the device, while the width of the content in the section is set by the Content Width setting in Site Theme. For columns, you can only change the width, while height is defined by the section height or by its inner elements. For flexboxes and widgets you can set the height and width, along with the minimum and maximum values for each. Any size unit can be used.

The animation and background properties in flex mode are the same as in the classic editor.

Advanced grids have design panel properties that are not available for other element types due to the ability to create freestyle compositions and overlapping elements. We recommend you review your design at different breakpoints.

Single elements in an advanced grid can be aligned and stretched in any direction because it is not constrained by auto layout.

In the Arrangement section of the design panel, this property can only be used when there are multiple elements inside an advanced grid. Allows you to bring a selected element to the front, forwards, to the back, or backwards.

Allows you to select how the columns and rows are arranged within the advanced grid to create a layout.

Use the drop-down menus to select the number of columns and rows you want your advanced grid to have. You can also use the Gap field to specify the space between your columns. The gap for columns can be defined in pixels or vw and the gap for rows can be defined in pixels or vh.

Allows you to define the element’s position within the grid. Once set, the element will stay in the same position even when the grid size changes.

Available for elements inside advanced grids that have been divided into columns and or rows to create a layout. It shows where the element is on the grid.

When toggled to On, it ensures the elements inside an advanced grid retain their proportions even when the size of the grid changes.