Add and Edit Flex Sections (1.0)

To add a Flex section:

1. Hover between rows, and click the Add Section button. Sections display in the side panel. Alternatively, right-click to open the context menu, and click Add Section.
2. In the side panel, click Flex Sections.
3. Click the Flex section you want to add, and at the top of the page, click Save.
4. Flex Mode opens with the section to edit.

Add Containers and Flexboxes

Once you’ve added a Flex section to your site, you can set your grid and add containers and flexboxes to contain widgets in the section.

To set your grid in the section, in the Design panel, select a preset layout in the Rearrange Layout section, or alternatively, select a number of columns, rows, and the gap you want between each in the Customize Layout section.

To add containers or flexboxes to the grid:

1. Point to the grid, and click the+ add() button.
2. In the Flex Items section, click Container, Vertical Flexbox, or Horizontal Flexbox. For more information on choosing a container or flexbox, see Containers and Flexboxes (1.0).
3. Drag the container or flexbox where you want it to be in the grid. As you move the container or flexbox, blue dots appear to allow you to pin the container or flexbox to areas of the grid. You can see where the element is pinned in the Design panel next to Pin in the Position section.
   
4. Resize the container or flexbox by dragging the edges to the size you want.

Add and Edit Widgets

Once you’ve added a Flex section to your site, set your grid and added a container or flexbox, you can add widgets to the container or flexbox.

If you are in the classic editor, you can drag a widget from the left panel and drop it into a grid and you will automatically be entered into flex mode.

To add widgets:

1. Point to the container or flexbox, and click the +button.
2. Search and select the widget you want to add.
3. Drag and resize the widget in the container to where you want it to appear.
4. As you move the widget, blue dots appear to allow you to pin the widget to areas of the container. You can see where the element is pinned in the Design panel next to Pin in the Position section.
5. Note

   Elements within a flexbox are automatically placed in a vertical or horizontal list.

6. Once you’ve added a widget, the Content Editor appears and you can configure the widget.
7. Edit the design of the widget in the Design panel.

Select Elements

There are several methods you can use to select an element:

• Hover over the element and click. The first click selects the parent layer of the element, the second click selects the nested layer, the third click selects the next nested layer, and so on.

• Hover over the element and double click. This will select the element you are hovered over, no matter how nested it is.

• Hover over the element and click Command/Control + Select. This will select the element you are hovered over, no matter how nested it is.

Copy and Paste Flex Elements and Widgets

You can copy and paste flex elements (grids, containers, flexboxes) and widgets while in flex mode. For example, you can copy a grid from one page and paste it into a flex section on another page. You can also copy widgets from the regular editor and paste them into flex sections. The copy and paste functionality helps save you time by allowing you to quickly recreate complex designs and build sites faster.

To copy and paste flex elements or widgets while in flex mode, right click the element or widget and select Copy or Paste from the menu. For widgets, you can also access Copy and Paste by selecting the widget and clicking More().

To copy a widget from the regular editor and paste it into a Flex section, click the widget in the regular editor to open the Content and Design menu. Click the settings icon () and select Copy from the menu. Navigate to the desired flex section, right click and select Paste from the menu.

Reorder Elements

You can use arrows to move nested elements in flexboxes, sections, and grids. The arrows can be accessed from the floating bar or by right clicking to open the context menu. Using the arrows to reorder elements helps make edits more smooth and prevent unexpected nesting of elements.

Elements can be moved in the following directions:

• Elements nested in flexboxes. In horizontal flexboxes elements can be moved left to right. In vertical flexboxes elements can be moved up or down.

• Grids nested in a section. Can be moved up or down.

• Elements nested in grids or containers. Can be moved in any direction as long as there are two elements next to each other and they are stretched over the whole cell.