The new inline editing module is now available for all users in the platform. There are a number of improvements that you can see highlighted below.
New Drop Down
Now when you hover over elements, they will only highlight around the border, instead of displaying a dropdown box of what the element is. You must click to get editing options.
Hovering over element
Drop down menu after clicking on element
We now provide the option to edit columns in addition to rows and elements. This means you have more customization options while designing and more control over the padding/spacing around the element and also can set a specific background image/color on a column. Columns should have all the same design options as Rows The best way to select a column is to use the new ‘Select Container’ option:
Example of selecting the column container
Example showing different column background images
Columns inside of rows can now be swapped/switched in order easily.
Example showing column order swap
Detailed Spacing Details
Duda now tells you exactly sizing and spacing details when you move elements or resize them. There are a few short variables you should know what they mean:
|W||Width of element|
|H||Height of element|
|T||Distance from top of column or default position|
|L||Distance from left side of column or default position|
|PT||Padding at the top of the row|
|PB||Padding at the bottom of the row|
Example showing width and height values while resizing an image
Example showing height, padding top and padding bottom while resizing a row
Example showing top and left values while positioning an element inside of a column/row
Reordering or moving rows now is done by an up and down arrow, instead of dragging and dropping the rows. This provides a much smoother and more consistent experience.
Example showing row reordering
Drag and drop changes
The drag and drop performance is now as smooth as it can be. Your browser should rarely slow down while dragging elements around the page now. This change is particularly noticeable on firefox. We’ve also changed the indicator of dropping elements, attempting to give a better indicator of where and how big the element will be in the new location.
Example of dropping an image into a column
Snap to Align
While resizing elements within the same column, Duda will attempt to ‘Snap to Align’ them to be the exact same size. You’ll notice that as you resize, Duda will jump ahead or behind to snap to location. This should make it easier to make elements the exact same size.
Example of snapping to be the same size as the element above.
Snap to Grid
The Snap to Grid system can help you lay elements in the pages of your site with professional precision. This system allows you to align elements horizontally and vertically within columns and rows. Rulers are presented when moving an element in its row or column, or when resizing the element. The aligned elements are marked with a colored-border. An element may be aligned to more than one other element, depends on the specific use-case. Note that alignment is supported in the views of the three different devices (desktop, tablet, mobile).
Toggle column/row padding on/off in the context menu
By default, sites have padding in each new column or row. This new feature allows you to disable/enable the default padding from the column's and row's context menu. In addition, the slection options in mobile view have been added to
include column selection. This way, the padding can be moved per device.