Skip to Main Content

New design methods available with Divi 3.22

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Today, I'm going to tell you about the new features of the Divi theme: Draggable Sizing for Divi. This new user interface innovation allows you to quickly adjust the width, height, margin, and fill of any module, line, or section. Rather than having to go through the settings panel and manually enter the sizing values, you can drag to adjust the elements directly on the page and see the results instantly. It's fast, easy and actually 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 the sizing in Divi is now simple with the addition of some subtle UI enhancements that add small, movable anchors to all easy-to-use elements while not bothering you 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 slide it in either direction.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

You'll also find new width, height, maximum width, and maximum height settings in the sizing option group for all Divi items. Those that overflow widths or static heights that you have defined. These new height and width options give you more flexibility in the size of your page's elements and how the size of each element changes as its internal content increases. It also allows you to create more responsive designs intuitively using a mix of width and maximum width values, along with new overflow settings in the "Visibility" option group that can be used to determine visibility. content

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Adjustable Margin and Padding

You can also drag quickly to adjust the fill and top, bottom, left, or right margin values ​​for each module, line, or section. You can even drag to add new margin and fill values ​​by adding useful drag anchors that slide into the view as you approach the edge of an element.

To add padding inside an element, simply hover your mouse over one of the edges, 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 outer edge and drag the anchor accordingly. You can even drag to add a negative margin to create layered effects and break elements outside their grid of columns.

New width, height, and overflow controls

The new moveable height and width interface is accompanied by a range of new width, height, and overflow controls in the parameter panels of all modules, lines, 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 in your page. The new settings include:

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

Unique designs with negative margins

The switchable sizing interface not only makes it easier to design your page, it also allows you to create new creative things using negative margins and static widths. Negative margins can be used to extract elements in any direction, allowing you to free them from their parent containers and create overlapping, fun effects. Static widths also allow you to release elements of the rigid structure of their parent column.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

The new movable sizing feature not only adds a whole new set of really useful parameters, it also extends the nature of Visual Builders as a WYSIWYG tool (What You See Is What You Get: What You See Is The Final Outcome) for make your website building experience even more enjoyable. Adjustable calibration is available today, so download Divi and run it. Tell us what you think in the comments and do not forget to come back next week to discover even more great Divi features.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top