Flex: Add and Edit Sections (Flex v2.0)

Note: this article covers Flex v2.0. If Flex was added to your site before July 18, 2022, see our "Flex: Add and Edit Sections (Flex v1.0)" doc.

Add a Flex Section

You can add a Flex section in the same manner as any other section. Hover between two rows and click “+ Add Section.”

Or you can right-click between rows and select “+ Add" then "Empty Flex section"

Or you can right-click between rows and select “+ Add" then "Designed section".

The Sections panel will open on the left-hand side and you can select “Flex Sections” to pick your desired design.

Click “Save” in the top bar and your new section will be added to your site.

Flex Mode will be open and you can edit the design.

Add Containers and Flexboxes

Once you’ve added the section, you can pick your grid layout and add Advanced Grids and/or Flexboxes, which will contain widgets.

To pick your grid, select a preset layout in the “Layout” section in the right-hand options. You can also choose to customize the layout by entering the desired columns and rows.

To add additional flex sections or columns, click on the section and select “Add”. Then select the section or column you want to add.

To add advanced Grids or Flexboxes, click on an element within the section, and select “+.”

In the “Add Widget” picker you can select Advanced Grid, Vertical Flexbox or Horizontal Flexbox. To learn which option is best for your content read more about containers and flexboxes.

Select the element and drag it to the proper location. As you drag the element, blue dots will appear to help you pin it to areas of the grid.

You can see where the element is pinned by scrolling down the design panel on the right to view “Pin.” You can also view the location within the grid here under “Grid location.”

You can resize the element by grabbing the edges and dragging to the desired size.

Add and Edit Widgets

To add a widget into a flex section, once you’ve added a section, and added either an advanced grid or Flexbox, you can then insert widgets. To add, click on the grid, column, or Flexbox and select the “+” button.

Select a widget from the “Add Widget” picker.

Once a widget has been added, it will appear within the Advanced Grid or Flexbox and you can drag/resize this as desired. If the widget is added into an Advanced Grid, blue dots will appear as you drag the widget around to help you pin it to areas of the grid.

If the widget is added to a Flexbox, a blue line will appear as you drag the widget around to help you place the widget in the correct order within the Flexbox.

You can see where the widget is pinned by scrolling down the design panel on the right to view “Pin.”

Once the widget is added you can customize as you would any other widget in Without Code. The content and design editors will be available by clicking on the widget and selecting the edit icon.

You can rearrange columns and rows while in flex mode by using the arrow buttons in the context menu.