Table Of Contents
Extend Styles is Coming to Divi
Extend Styles is an upcoming Divi feature that will allow you to extend the styles of any element to other elements throughout your page in a few clicks.
Today, we are excited to introduce “Extend Styles”, a brand new design feature coming to Divi. Extend Styles is a unique feature that combines the usefulness of Divi’s “copy and paste” feature with the power of the “find and replace” feature in way that is intuitive and efficient. For example, if you like the style of a section, you will be able to extend that style to all sections in a few clicks. If you like a border style for a particular blurb module, you will be able to extend that border style to all your blurbs in your row, section, or page. This will save valuable time when making global changes to your page and make it easier to explore new design possibilities.
How Extend Styles Will Work
The Extend Styles feature will be accessible from the Right-Click menus of all Modules, Rows, and Sections. Furthermore, the feature will be available to extend the styles of entire elements, option groups within elements, and individual options within elements.
Extend Styles of Entire Sections, Rows, or Modules
You can extend styles of entire Sections, Rows, and Modules. Simply right click on an element within the Divi Builder and select the Extend Styles option. In the Extend Styles popup modal, you can choose just how far you want those changes to extend throughout your page. Section styles can be extended to all sections on a page. Row styles can be extended to all rows in a section or to all rows on the entire page. And modules styles can be extended to all modules in a column, row, section, or page.
Extend Styles of Option Groups
You can extend the styles of any option group within an Section, Row, or Module. Simply right click on the title of the option group within the elements settings modal and select the option to extend styles. In the extend styles popup modal, you can define the scope of your action on two levels. On the first level, you choose the element(s) to which you want the style applied (i.e. all Sections, all Rows, all Modules, all Blurbs, etc.). On the second level, you define how much of your page will inherit these updated elements. All sections will extend to the entire page. Styles to All Rows can be extended to the section or the entire page. And styles to all modules can be extended to the column, the row, the section, or the entire page.
Extend Styles of Individual Options
You can extend styles of individual options as well. The process is the similar to that of extending the styles of an option group. Right click on an individual option within the elements settings modal and define the scope of your change within the Extend Styles popup modal.
Below is an illustration of the process of extending a blurb’s Title Font to all blurbs in the same section.
Divi. Bridging the Gaps of the Design Process.
We don’t want you your creativity to be blocked by mundane tasks.
This ongoing effort to bring more design features to Divi is meant to liberate, not restrain. We want to help bridge the gap of the design process to harmonize workflow and encourage creativity. Our hope is that these features add the flexibility users need to design the way they want as well as the functionality needed to get the job done efficiently. We look forward to seeing how this update will make Divi a more dynamic tool for bringing new ideas to life.