Today we are introducing a game-changing new way to be creative in Divi. This new feature allows for fluidity in your design process and will save you hours upon hours of time when building new websites, plus it’s not something you can find in any other website builder. Today we are introducing Fluid Styles, a feature that lets you take any design style or collection of styles from one element, and quickly transfer those styles onto any other element on the page with the simple move of your mouse and the click of a button. It’s hard to explain just how awesome this new feature is, you really need to try it for yourself!

Unleash Your Creative Process

The goal of Fluid Styles is to revolutionize style management by adding modularity to all Divi options and to allow for the free flow of ideas across the page. To put it simply: any option or collection of options in Divi can now be copied from one element and transfer onto other elements on the page with the click of a button. No need to configure the same design options over and over again. Just copy and paste anything, from anywhere, to anywhere, instantly.

Let’s say you are working on a Pricing Table, and you have designed the perfect new button style for your page. You can now right click on the Button Option Group and copy all of your custom button configurations. Instead of having to configure all of those options again in other modules, you can simply right click on any module and paste the styles. The beauty is that these styles are not module specific. You can take buttons styles from a Pricing Table module and place them onto a Button module, a Slider module, a Call To Action module, or any other module that has a button. In the old version of Divi, you would have needed to configure dozens of options over and over again, which could have taken hours. Now it takes seconds! And button styles are just an example, this system works for all module options.

You don’t even need to right click either, instead you can use the cmd+option+c/v and ctrl+alt+c/v keyboard shortcuts to quickly spread styles across your page. Let’s say you are working on a Text module, and you have decided on a new font for your page titles. The individual title font can be copied, and then placed onto every other module on the page in a matter of seconds. Divi knows that you copied the title font and will transfer that value to the correct element for each module.

When we say that anything can be copied, we mean it! Let’s go over everything in even more detail.

Individual Options

Any individual design style can now be copied from within the settings modal and transferred to other modules on the page. Let’s say you are in the middle of designing a new page and you want to use a different font for some of your page titles. Almost every Divi module has a title and dozens of title text options to go along with it. Instead of opening up every single module and changing your title text font, you can simply copy that font from one module and then paste it onto every other module that you want to use that font on. Since you only copied the title font option, all other font styles (such as color and size) remain unchanged as you transfer the font across the page.

Entire Option Groups

Not only can individual options be transferred, so can entire option groups! Let’s say you are working on a new Box Shadow style and a new Button style for your page. These two option groups contain dozens of settings and you can spend a lot of time perfecting them. Taking those dozens of carefully crafted button style and box shadow options and transferring each of those options to a variety of different modules could have taken hours of time in the old version of Divi. Those days are over! If you want to take your button design and use it on another module, simply right click on the button option group and copy it! You can then transfer those buttons styles to any module that has a button. Same goes from box shadows. Just point, click and use that custom box shadow anywhere.

Entire Module Designs

You can also transfer all design styles from one module to another. When you copy and paste design styles, only the design options are transferred. All of your module’s content remains intact. This allows you to quickly mirror the design across like modules or groups of like modules throughout your page in a matter of seconds.

Across Different Types Of Options

What’s even more amazing, is that the style transfer system supports the transfer of things like colors and images between different types of options. Just because you copied a text color doesn’t mean that you are limited to transferring that color to other text options. You can copy a text color and quickly replace other color values on the page, such as button colors and background colors, or even colors within gradients. You can copy images from image modules and place them as background images, you can copy a title font and place it as your button font and so on. No need to copy hex values or image URLs. No need to hunt through font lists.

Copy Anything, Paste Anywhere

No matter where you right click in Divi, you will have the option to copy and/or paste styles. You can paste styles into individual options, parent option groups, parent modal tabs or onto the parent module itself. Divi is smart about knowing what areas can accept your copied styles, and it will give you the option to paste them whenever possible.

For example, if you copy a title text color from a Call To Action module, that color can be pasted directly into the title text color option in another module, or it can be pasted into the parent Title Text option group, the parent Design settings tab or onto the module itself. Whenever you copy something, it can be pasted laterally or up the settings hierarchy.

Quickly Reset Options

Not only can design settings be transferred, they can also be easily reset. Whenever you right click on a module, settings tab, option group or option, you can quickly reset them back to their standard default values. No need to painstakingly reset dozens of options when you change your mind about your design direction.

Improved Creativity

We think that Divi is a place where creativity should flourish, allowing you to take a blank canvas and mold it into something extraordinary. There is no greater enemy to the creative process than the heartbreaking tedium of configuring a hundred different options over and over again, and across a variety of different modules as you try to land on that perfect design concept. Luckily, those days of frustration are at an end. Now, whenever you design something in Divi, those design styles become modular, and can be copied and transferred to any other element on the page instantly.

We want the builder to be a place where you can come up with great ideas and have the freedom to explore those ideas without being bogged down by inefficient tasks. We think Divi can be a completely replacement for design tools like Photoshop and Sketch when it comes to designing websites.

Hours And Hours Of Time Saved

What all these changes really come down to are the minutes, hours and days of time that you will save when building new websites. One of our biggest goals for Divi is to greatly improve the efficiency of your design process. It’s not just about what you can build, it about how fast and easy it is to build those things.

This Is Just The First Step

We think this is an amazing update that will greatly enhance the efficiency of your design process. What’s more, it’s just the first step towards a greater vision of how styles can be better managed not only throughout the page, but throughout the entire website as well. We really hope you like these new features, so download Divi today and take them 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.