To add a DudaFlex section:
- 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.
- In the side panel, click Flex Sections.
- Click the Flex section you want to add, and at the top of the page, click Save.
- Flex Mode opens with the section to edit.
Add Containers and Flexboxes
Once you’ve added a DudaFlex 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:
- Point to the grid, and click the + add () button.
- 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.
- 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.
- Resize the container or flexbox by dragging the edges to the size you want.
Add and Edit Widgets
Once you’ve added a DudaFlex section to your site, set your grid and added a container or flexbox, you can add widgets to the container or flexbox.
To add widgets:
- Point to the container or flexbox, and click the + button.
- Search and select the widget you want to add.
- Drag and resize the widget in the container to where you want it to appear.
- 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.
- Once you’ve added a widget, the Content Editor appears and you can configure the widget.
- Edit the design of the widget in the Design panel.