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
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.
The widget 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.