Add and Edit DudaFlex Sections

NOTE

This feature is still in development and will gradually be released to all customers.

To add a DudaFlex 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 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:

  1. Point to the grid, and click the + add (add_element.png) 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.
  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.
    pin_to_section.png
  4. Resize the container or flexbox by dragging the edges to the size you want.
NOTE

You can see the location of the container or flexbox in the Design panel next to Grid location under the Position section.

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:

    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.
NOTE

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

  1. Once you’ve added a widget, the Content Editor appears and you can configure the widget.
  2. Edit the design of the widget in the Design panel.
Was this article helpful?
0 out of 0 found this helpful

Feedback on this article

0 comments

Please sign in to leave a comment.

×

Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!