Today I'm going to tell you about the new features of the Divi theme : 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. Rather than having to go through the settings panel and manually enter sizing values, you can drag to adjust elements directly on the page and see the results instantly. It's quick, easy, and truly leverages Divi's Visual Builder technology to deliver the best building experience possible.

Control over the width, height and spacing of each element

It's now easy to control the size and position of every module, row, and section on your page with the all-new interface that's movable in width, height, margin, and fill.

Adjustable widths and heights

Adjusting sizing in Divi is now easy with the addition of some subtle UI improvements that add small movable anchors to all easy to use elements while not getting in the way during construction. To adjust the width or height of any module, row or section, simply hover over one of the four sides of the element and drag it one way or the other.

You'll also find new Width, Height, Maximum Width, and Maximum Height settings in the All Divi Elements Sizing options group. Those that overflow the static widths or heights you have defined. These new height and width options give you greater flexibility in the size of elements on your page and how the size of each element changes as it changes. contents internal increases. This also allows you to create more responsive designs in an intuitive way using a mix of width and maximum width values, along with new overflow settings in the "Visibility" options group that can be used to determine visibility of contents

Adjustable Margin and Padding

You can also quickly drag to adjust top, bottom, left, or right padding and margin values ​​for each module, row, or section. You can even drag to add new margin and padding values ​​with the addition of useful draggable anchors that slide around the view as you approach the edge of an element.

To add padding inside an item, simply hover your mouse over one of the edges and then drag the anchor to increase or decrease the padding on that side. To add a 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 layered effects and snap items outside of their column grid.

New width, height, and overflow controls

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

  • size
  • Minimum height
  • Maximum width
  • Minimum width
  • Horizontal overflow
  • Vertical overflow

Unique designs with negative margins

The draggable sizing interface not only makes your page design easier, it also lets you create new 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 free elements of the rigid structure from their parent column.

The new draggable sizing feature not only adds a really useful set of new parameters, it also extends the nature of Visual Builders as a WYSIWYG (What You See Is What You Get) tool for make your building experience Website even more pleasant. Adjustable calibration is available today, so download Divi and give it a spin. Let us know what you think in the comments and be sure to come back next week for even more of Divi's great features.