DudaFlex Overview

What is DudaFlex?

NOTE

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

DudaFlex is a new mode for designing sections and pages in Duda, based on new inline editing technology and flexible layouts like: CSS grid, flex, improved alignment, and so on. DudaFlex allows full responsiveness and pixel-perfect accuracy for any element by breakpoints.

DudaFlex is seamlessly integrated in the existing editor so users can choose when and where to use it. This means that DudaFlex contains all of the same benefits of our editor, but with vastly more design capabilities.

Add DudaFlex Sections

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.

For more information, see Add and Edit DudaFlex Sections.

Flex Mode Overview

Layers Panel

The layers panel displays on the left side of the editor and shows the elements on the page (grids, widgets, flexboxes, text boxes, and so on). From here, you can select, rearrange, and rename elements. The layers panel always starts with the section, under it are the grids followed by widgets or containers.

layers_panel.png

Additionally, you can navigate between elements in the following ways:

  • Select an element in the grid point to the element in the menu that appears above.
    navigate_elements.png
  • Click the breadcrumbs above the Design panel.

Design Panel

The design panel displays on the right side of the editor and contains your design controls for the selected element (container, flexbox, widget). The design options include layout, sizing, alignment, and more.

design_panel.png

Design Panel Sizing Measurements

You have multiple sizing measurements in DudaFlex.

  • Pixel (px). Size stays the same on every breakpoint.
  • Viewport Width (vw). % of the width of the element when displayed on a given screen. 10vw is 10% of the viewport width. 100 vw takes up 100% of the screen width. By default, margins and widget sizes are set in %.
  • Viewport Height (vh). % of the height of an element when displayed on a given screen. 10vh is 10% of the viewport height on every screen size.
  • A. Size is automatically determined by content.
  • Min & Max. The smallest/largest measurement of an element. This setting ensures that an element does not get smaller/bigger than this when resizing.

Alignment

Arrange

You can reorder overlapping objects from both the Design panel and the Layers panel, by simply dragging the object below or above.

arrange.png

Flexbox Self-Align vs Alignment

For flexboxes, there are two different automatic alignment settings in the Design panel.

  • Under Layout, select Vertical or Horizontal layout to set an axis for elements inside the flexbox.
  • Under Align in Flexbox, select how elements will be placed in the selected axis.
    flexbox_align.png
  • Under Align, select how the entire flexbox will be aligned relative to the grid. You can only align under the contrary axis.
    flexbox_align2.png
  • Under Align, select where an element within a flexbox (for example, a button) is aligned on the chosen auto layout axis.
    flexbox_align3.png
Pin

In the Design panel, you can pin elements to a specific position in a cell, so the location stays the same relative to the cell when the size of the cell changes.

To pin an element to a position in a cell:

  1. Select the element, and in the Design panel, scroll to Position.
  2. Next to Pin, click the arrow corresponding to where you want to pin the element in the cell.
    pin.png

The element stays pinned to this location in the cell when the grid size changes.

Breakpoints

A breakpoint is the size where the design adjusts for a specific screen width. Breakpoints enable designs to be responsive as they scale up and down. In DudaFlex, the default breakpoints are:

  • Desktop (1025px-1399px)

  • Wide desktop (1400px and up)

  • Tablet (768px-1024px)

  • Mobile (767px and below)

  • Mobile landscape (468px-767px)

You can switch between breakpoints at the top of the page by clicking the different views.

breakpoints.png

Changes made in the main breakpoint (desktop) affect all breakpoints. However, if you need to make changes to position and size of elements for a specific breakpoint (for example, mobile), these changes will not affect the other modes. Changes made to the Mobile breakpoint affect the Mobile Landscape breakpoint.

For additional information, see Responsive Tablet.

NOTE

If you make a structural change when you are in a breakpoint other than the main breakpoint (desktop), a warning message displays to inform you that the change affects all breakpoints.

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!