Sites Flex Overview
Mindy Worley avatar
Written by Mindy Worley
Updated over a week ago

Flex is a mode for designing pixel perfect, responsive sections with additional design capabilities. It allows you to quickly create and edit sites while still using the building features from the classic editor you already know. Compared to the classic editor, Flex offers auto layout, multiple element alignment and distribution, responsive size units, and more control over columns. This allows you to create and edit responsive designs more quickly than in the classic editor.

You can either add a flex section to an existing site, or create a new site using a flex template. If you use a flex template, all the sections are created with flex. The header is not made with flex and if you add a new page, store, blog, or membership page they will not be created with flex by default, but you can add flex sections to these pages.

Flex Terminology

The following provides definitions for terminology specifically related to Flex.

  • Flex mode. Where you create and edit flex sections. In flex mode, you have access to design capabilities that are not present in the classic editor, but you still have access to the building features of the classic editor.

  • Flex section. A row with default flex columns that create a layout. You can add, remove, or change the order of flex columns within a flex section. Flex sections can be saved as templates for future use.

  • Flex column. Where you add widgets. Flex columns have an auto layout, meaning the widgets inside are automatically aligned vertically or horizontally. Due to the auto layout, you cannot move elements freely inside a flex column. Instead, you must use the alignment, spacing, and margin settings to move elements.

  • Vertical and horizontal flexboxes. A container that automatically aligns widgets within it vertically or horizontally. Due to the auto layout, you cannot move elements freely inside a vertical or horizontal flexbox. Instead, you must use the alignment, spacing, and margin settings to move elements.

  • Advanced grid. Used to create free-form compositions or overlapping elements. The advanced grid does not provide auto layout or vertical alignment like flex columns. Due to this, we recommend you check your design on all breakpoints.

  • Breakpoint. Pixel ranges that correspond to the width of different devices, such as desktop, tablet, and mobile. When the width of a device is within a breakpoint’s predefined pixel range, the site's layout is adjusted so the content and design are optimized for that device size and orientation.

  • Flex elements. An advanced grid or horizontal or vertical flexbox is placed inside a flex column.

Hierarchy of Elements

In flex mode, flex sections contain flex columns, and flex columns contain widgets. This is a default hierarchy, meaning you cannot add a flex section widget without a flex column.

Select Elements

There are several methods to select an element (flex section, flex column, or widget):

  • Hover over the element and click. When hovering over an element, look for the blue outline indicating the element your click will select.

  • Select elements from the layers panel. In the side panel, click Layers. From here, you can select any element from the selected section.

  • Select elements from the design panel. Click the breadcrumbs in the design panel to select an element.

  • Select elements from the floating menu. If you already have an element selected, hover over the element name above the floating menu and a breadcrumb of flex elements will appear.

screenshot of options above floating menu in flex

Flex Mode

Layers Panel

The layers panel displays on the left side of flex mode and shows the flex elements in the selected section. Elements are displayed according to their hierarchy, with sections as the top level. From the layers panel, you can add new elements, select, rearrange, rename, and hide or show elements on certain breakpoints.

Design Panel

The design panel displays on the right side of flex mode and contains your design controls for the selected element (flex section, flex column, or widget). The design options include layout, sizing, alignment, and more, depending on the selected element.

Floating Menu

The floating menu appears when you select an element. From the floating menu, you can toggle between elements, add elements, open the content or design panels, duplicate the element, adjust alignment, delete the element, and more.

Screenshot of flex floating menu

FAQs

What’s the difference between Flex and the classic editor?

Compared to the classic editor, Flex offers additional design capabilities that enable you to more quickly and easily create responsive sites. The following are design capabilities that Flex offers, but the classic editor does not:

  • Save time. Flex is based on auto-layout, meaning the design is optimized to match any breakpoint.

  • Content alignment. Allows you to align all elements in a flex column simultaneously. In the classic editor, you have to align each element individually.

  • Automatic alignment. Flex columns and flexboxes automatically align elements vertically or horizontally.

  • Number of columns. In flex mode, you can add more than four columns to a section with up to 100% screen width.

  • Space between items. Allows you to set the space between items once, which applies to all elements in a flex column.

  • Element sizing. Adjust element sizes to optimize for screen height in pixels and screen width in percentage.

  • Faster editing. With Flex's advanced design capabilities, you can edit an existing design much more quickly than in the classic editor.

Limitations

You cannot add an additional language(s) to your site while in flex mode. You will need to exit flex mode first.

Did this answer your question?