Note
This content is relevant for both Flex mode in Classic Editor and Editor 2.0. To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
Flex is a mode for designing pixel perfect, responsive sections with additional design capabilities. If you are using the Classic Editor, you can enter flex mode to design. If you are using Editor 2.0, you use flex by default.
The design panel displays on the right side of flex mode and contains your design properties for the selected element (section, column, widget, Inner Column, 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 (you only need to be in flex mode if you are using Classic editor). 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 design panel is comprised of 5 sections: Align, Layout, Spacing, Size, and Animation and Background. Following is a description of each section and what you can accomplish.
Available for single elements inside a column or Inner Column. Single elements inside a column or vertical Inner Column 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 ().
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 Screen Sizes and Devices.
Align Elements
Allows you to vertically align multiple elements in a column or Inner Column 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 Alignment and Spacing.
Auto Layout
Allows you to select whether elements inside columns and Inner Columns 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 Inner Columns only when Stack Horizontally is selected for auto layout. When set to Wrap, it allows elements inside the column or Inner Column to keep their dimensions and wrap as the screen width changes.
Align Rows
Available for columns and Inner Columns only when Wrap is selected for auto layout. Allows you to set the alignment of rows within a column or Inner Column. This setting does not affect the alignment of elements inside rows, just the rows themselves.
To learn about spacing, check out the following video:
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 Inner Columns or advanced grids.
Set Margins and Padding
Margins are the space between the element's border and the edge of the section, column, Inner Column, 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.
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. To learn more about size units, see Size Units.
The default size units are different for each element. For example, by default text boxes are 100% width 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 height is defined by the section height or by its inner elements. For Inner Columns 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. To learn more about animation and background properties, see Add Animations and Customize Background.
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.
Rearrange Layout
Allows you to select how the columns and rows are arranged within the advanced grid to create a layout.
Customize Layout
Allows you to select how the columns and rows are arranged within the advanced grid to create a layout.
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.
Note
This content is relevant for both Flex mode in Classic Editor and Editor 2.0. To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
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 in Editor 2.0 or when in Flex mode in the Classic Editor, serves as 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, Editor 2.0 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 (%) 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) 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) 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) 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.
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.
In Editor 2.0, 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.
In Editor 2.0, 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 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.
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.
-
You can also create a flex section with AI. For detailed instructions on creating flex sections with AI, see Create a Flex Section with AI.
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.
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
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.
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.
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.
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.
Alignment and spacing can be used together to help you achieve your designs.
To learn more about alignment, check out the following video:
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.
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 (
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.
Flex sections create a layout and automatically align objects, which helps you easily and quickly design beautiful sections. However, when you have a more complex design with overlapping objects or freestyle composition, you need to use an advanced grid. Advanced grids allow you to place elements in a freestyle composition without automatic layout. Due to this, we recommend you check your design on all breakpoints.
Learn how to create overlapping elements by watching the following video or following the instructions below.
To create overlapping elements:
-
Click to select a flex column.
-
In the floating menu or in the flex column, click the plus icon (
).
-
In the flex elements section, select Advanced grid (previously named containers). To ensure you follow best practices, drag the edges of the advanced grid so that it spans the entire flex column width.
-
In the Layout section of the design panel, select a premade grid from Rearrange layout. Or if you want to create your own grid, use the Columns and Rows drop down menus from Customize layout to add columns and or rows.
-
In the floating menu, click the plus icon, then select the desired widgets and arrange them in the advanced grid.
-
Click to select an element and in the Arrange section of the design panel, select Bring to front, Bring forward, Send backward, or Send to back.
We recommend checking your design at each breakpoint when using advanced grids. With overlapping elements you might need to adjust the design on certain breakpoints.
In web design, choosing the appropriate layout system significantly influences the user experience, especially when integrating widget layout elements such as Inner Column and Advanced Grid into a site.
Inner column widget is recommended for:
-
Modular Layouts: Perfect for creating modular layouts where content flows linearly, making them ideal for navigation menus, cards, or list-like layouts.
-
Responsive Design: Excels in creating responsive designs that adapt seamlessly to various screen sizes and devices, ensuring optimal alignment and readability. Notably, they offer precise control over the wrapping behavior for each item in the container, ensuring content remains legible and well-organized.
-
Dynamic Content: Well-suited for handling dynamic content that may vary in length or size, allowing designers to control item behavior and sizing within a container dynamically.
-
Nested Layouts: Inner Column nesting capabilities make them suitable for creating complex nested layouts. Designers can nest more inner columns within the outer container as needed, providing flexibility and adaptability in arranging content hierarchies. Similarly, Advanced Grid offers the ability to nest widgets, inner columns, and even additional Advanced Grids within its layout structure.
Advanced grid widget is recommended for:
-
Complex Layout Structures: Indispensable for creating intricate layouts with multiple rows and columns, providing precise control over element placement and sizing.
-
Non-Linear Designs: Perfect for designing non-linear layouts where elements need to be positioned independently of their source order for creative compositions and asymmetrical arrangements. This means elements can be placed and arranged based on design requirements.
-
Responsive Web Design: While requiring careful planning, Advanced Grid provides robust tools for creating responsive designs. Designers can define specific layout adjustments such as column reordering, item spanning, and grid gaps at different viewport sizes, ensuring optimal presentation across various devices.
When should I use an inner column widget vs advanced grid widget?
Inner Columns are best suited for modular layouts, especially when you need precise control over individual items within a section or when you want an automatic layout. However, note that while Inner Columns maintain section integrity, moving widgets within them is less flexible compared to Advanced Grids.
Inner Columns allow control over rows or columns individually, ideal for one-dimensional layouts. Advanced Grids enables manipulation of both rows and columns simultaneously, providing comprehensive control over the entire layout structure, ideal for two-dimensional layouts.
Advanced Grid (CSS Grid) may have a marginal edge in handling complex layouts by optimizing DOM structure, rendering efficiency, resource loading, responsiveness, and minimizing HTTP requests. Inner Columns, while effective, may involve more nested HTML elements, potentially leading to slightly slower rendering times compared to Advanced Grids.
You can also use both inner column widget and advanced grid widget in the same section and throughout the site to achieve desired designs. This involves striking a balance between the overall layout structure and the finer details of content organization.
Understanding parent-child relationships is fundamental in leveraging Inner Columns and Advanced Grids effectively. In these layout systems, the column housing elements acts as the parent, while the elements within, such as additional widgets, are regarded as children. This relationship dictates how elements are positioned and aligned within the layout, ensuring coherence and structural integrity in your web design.
It's important to note that you do not always need to add inner columns. Often, a single column can suffice for many use cases. Inner Column allows easy placement of elements either horizontally or vertically. The requirements include a section to act as the flex container and a column to house Inner Columns with both types of columns serving as flex items, representing the parent and child element respectively.
Advanced Grid allows placement or elements in both vertical and horizontal directions. The requirements include a section to act as a container and an Advanced Grid to declare the grid layout on the parent element or container, making all its children become grid items.