Introducing The New Draggable Sizing And Spacing Controls For Divi

Today we are introducing Draggable Sizing for Divi. This new UI innovation allows you to quickly adjust the width, height, margin and padding of any module, row or section with ease. Instead of having to open a settings panel and type in sizing values manually, you can instead drag to adjust the elements right on the page and see the results instantly. It’s quick, it’s easy and it really leverages Divi’s Visual Builder technology to provide to best building experience possible.

Draggable Widths & Heights

Adjusting sizing in Divi is now simple with the addition of just a few subtle UI improvements that add small draggable anchors to all elements that are easy to use while at the same time don’t get in your way while you build. To adjust the width or height of any module, row or section, simply hover over the edge of any of the four sides of the element, and drag in either direction.

You will also find new Width, Height, Max Width, and Max Height settings in the Sizing option group of all Divi elements. These are accompanied by new Overflow settings in the Visibility option group that can be used to determine the visibility of content that overflows the static widths or heights you set. These new height and width options give you a much wider range of flexibility when it comes to the size of your page elements and how the size of each element changes as its inner content increases. They also allow you to create more intuitively responsive designs using a mixture of width and max width values.

Draggable Margin & Padding

You can also quickly drag to adjust top, bottom, left or right padding and margin values for any module, row or section. You can even drag to add new margin and padding values thanks to the addition of helpful draggable anchors that slide into view when you get close to the edge of an element. To add padding to the inside of an element, simply hover over any inside edge and then drag the anchor to increase or decrease the padding of that side. To add margin to the outside of an element, hover over the outside edge and drag the anchor accordingly. You can even drag to add negative margin to create cool overlapping effects and break elements outside their column grid.

New Width, Height & Overflow Controls

The new draggable width and height interface is accompanied by a range of new width, height and overflow controls within the settings panels of all modules, rows and sections. You can find these new options in the Design > Sizing and Advanced > Visibility panels. These settings allow you to create clipping masks and scrollable boxes within your page. The new settings include:

• Height
• Minimum Height
• Maximum Width
• Minimum Width
• Horizontal Overflow
• Vertical Overflow

Break The Grid With Negative Margins

The draggable sizing interface doesn’t just make designing your page easier, it also allows you to do some new and creative things using negative margins and static widths. Negative margins can be used to pull elements in any direction, allowing you to free them from their parent containers and create fun overlapping effects. Static widths also allow you to break elements free from their parent column’s rigid structure.

The new Draggable Sizing feature not only adds a bunch really helpful new settings, it also expands upon the Visual Builders nature as a WYSIWYG tool to help make your website building experience even more enjoyable. Draggable Sizing is available today, so download Divi and take it for a spin. Let us know what you think in the comments and don’t forget to check back next week for even more great Divi features coming your way.

The post Introducing The New Draggable Sizing And Spacing Controls For Divi appeared first on Elegant Themes Blog.