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, right-click an element while in flex mode and select Edit 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.
Design Terms
The following are design terms and abbreviations used in the design panel:
-
Px. Pixels are a unit of measurement that remains the same no matter the size of the device. For example, if a button is 280px it will be the same size on mobile as it is on tablet or desktop.
- Vw. Viewport width is a unit based on the width of the screen (viewport) that the site is viewed on. For example, 10 Vw means the element will scale to occupy 10% of the width of the screen it is viewed on.
- Vh. Viewport height is a unit based on the height of the screen (viewport) that the site is viewed on. For example, 25 Vh means the element will scale to occupy 25% of the height of the screen it is viewed on.
- %. Percentage of the container (section, column, flexbox, or advanced grid) that the element occupies. For example, if an element size is 10% it means the element will scale to occupy 10% of the container it is in.
- A. Automatic unit of measurement that is determined by the content height.
Align
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 (
).
Layout
Full Bleed
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.
To learn more about breakpoints, see Flex Breakpoints.
Align Elements
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. For more information, see Flex Alignment and Spacing.
Auto Layout
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.
Wrap
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.
Align Rows
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.
Spacing
Space Between Items
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.
Set Margins and Padding
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.
Reset Padding or Margin
When clicked in the design panel or floating menu, it resets the padding or margins for the selected element to zero.
Size
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.
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 Global Design. 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.
Animation and Background
The animation and background properties in flex mode are the same as in the classic editor. To learn more about animation and background properties, see Add Animations and Customize Background.
Design Panel for Advanced Grids
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.
Align
Single elements in an advanced grid can be aligned and stretched in any direction because it is not constrained by auto layout.
Order
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. For more information, see Create Overlapping Elements in Flex
Rearrange Layout
Allows you to select how the columns and rows are arranged within the advanced grid to create a layout.
Customize 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.
Pin
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.
Grid Location
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.
Keep Proportions
When toggled to On, it ensures the elements inside an advanced grid retain their proportions even when the size of the grid changes.
The Image widget also contains a Keep proportion toggle, which keeps its original proportions.