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

Note: this article covers Flex v1.0. If Flex was added to your site after July 18, 2022, see our "Flex: Add and Edit Sections (Flex v2.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 “+Section.”

Or you can right click between rows and select “+ Add” a 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 containers 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 containers or flexboxes, click on the grid and select “+.”

In the “Add Widget” picker you can select a container, 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 you have two ways of doing this.

Widgets Panel: If you are not in Flex mode, you can open the widgets option panel and simply drag a widget out and drop it onto the flex section. This will add the widget into the flex section and you will immediately be able to reposition that widget within flex mode.

+ Symbol In Container: Once you’ve added a section, set the grid, and added either a container or flexbox, you can then insert widgets. To add, click on the container 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 container or flexbox and you can drag/resize this as desired. As you drag the widget, blue dots will appear to help you pin it to areas of the grid.

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.