Skip to main content

More Design Options, Better UI

One of the gratifying things about Gutenberg is that it keeps creating a healthy competition for the proprietary WordPress page builders, such as Divi or Elementor. And today we’re going to look into the recent updates of the former to see in what direction it’s moving so far.

The odds are the recent Divi Builder release, ‘Options Harmony’ (version 2), will make many new and seasoned WordPress users want to consider the idea of joining the ‘Divi Nation’.

In short, significant improvements were made in the following areas:

  • More design options (the cream of any builder)
  • Better responsive editing
  • More flexible parent-child module relation.

Let’s now go through the key Divi ‘Options Harmony’ enhancements and see how they can improve your WordPress content creation experiences.

The UI improvement

All the hierarchical Divi elements (sections, rows, modules) are now supplied with a new triple-dot icon that refers to ‘Other settings’.

divi new ui options harmony

It gives you access to quick actions to improve the interaction between content elements (copy-paste your custom styles across content pieces, perform split tests, etc.). It all added up to more effective and quicker content manipulation throughout the builder.

The same set of setting for Option groups

This is why the update is called ‘Harmony’ – with the new builder version, each module ships with the same, ‘harmonized’ set of options for customization.

harmony settings

It removes limitations you might have faced with designing individual content elements and, of course, opens up more opportunities for fully custom designs and adjustments.

We didn’t go through each option, but in general, it worked quite smoothly since these are mainly the already existing options enabled for more modules.

Extensive text settings for each module

Designers, as well as users who need more agility, can rejoice. The new Divi version allows you to go with deeply custom typography and design settings for each module that deals with text content. It wasn’t so in the previous versions.

For example, working with the body text, you can now use different font size or color, border color, body text alignment, text space, text shadow and other design techniques for blockquote, ordered and unordered lists, and anchors links.

divi text settings

It’s going to be much easier to keep design consistency and readability with this new level of text control.

Easier image customization in more modules

As the next step of ‘harmonization’, a whole set of image options that were in earlier Divi versions limited to the image and a few other modules is now accessible through any image-related module.

That means you can ‘hack’ into slider images or testimonial photos to apply any image setting accessible via the Divi Builder.

divi image settings

However, it doesn’t work for post slider images if you use a post featured image as a background (background comes with another customization panel).

The background settings panel, by the way, now comes with better hover editing and color management options.

divi color options

More controls for buttons and fields

Input fields and buttons can now be adjusted with new padding and margin controls. That’s a significant improvement since it allows you to combat alignment and spacing problems within such more complicated content modules as contact forms, call-to-action sections, sliders, newsletter forms, etc.

For example, it took almost no time to change alignments and size of the email opt-in field as well as the button underneath.

divi button options

Responsive editing for every option

This is probably the most awaited update, which allows non-tech users to customize the styles of each module individually for different viewports.

You can now switch between mobile, tablet, and desktop devices to create different experiences for any Divi module in the real-time mode.

responsive settings divi

Hints and guides for every module option

This should be an essential update for users of all calibers: those who are new to Divi as well as WordPressers who want to explore and utilize new features and content elements.

To get hints, you need to hover your mouse over the required configuration control and click on the question mark.

divi hints

Sub-element controls harmonized with the parent ones

If you regularly work with the multi-element Divi modules, it’ll be easier to style each piece of it with the updated Divi Builder. Child and parent modules now have the same set of design settings so that you can reach a better visual consistency between module sub-elements.

The ‘Options Harmony’ release also comes with the builder content translations workaround for non-English Divi users: all new options will be by default supplied with the Google Translate machine translations. Not that bad solution for a start.

If you haven’t updated your Divi or even don’t have any experience of working with it yet, you can explore the updated Divi Builder at your own pace by running the live demo (it’s free).

Let’s sum up on the Divi ‘Options Harmony’ (version 2.0) release

The recent Divi Builder update has clearly shown that their endeavor to embrace customization agility was huge and put Divi many steps ahead of Gutenberg.

This is a significant Divi release since it’s focused on optimizing, improving and structuring styling and designing options – the most essential yet painful side of any WordPress visual builder.

The overall strategy of building a better support center and educating users through the builder hints is another right thing Elegant Themes is doing in the Gutenberg era.

On the cons side, with such customization freedom, you should be especially careful. It may require you to learn what the best practices of playing with styles and layouts are to decrease chances of creating mismatched pieces of content. More options may also affect the builder speed, but the Divi team is working on improving the overall performance.

Although Divi is still not perfect at the performance and Gutenberg integration aspects, it’s definitely at its peak in other significant areas – excellent customization capabilities (and now even better), great support, and reasonable fees.

Try your hand at the new Divi Builder version and share your experience!

Go to Divi

WordPress Design, WordPress Development, cPanel Hosting, Web Design, Web Development, Graphic Design, Mobile Development, Search Engine Optimization (SEO) and more.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.