On September 6, 2018, Elegant Themes released a brand new feature, adding yet another stunning feature to Divi that will make it an even more powerful tool in building or modifying your website. They call it “Extend Styles”. This new feature is really easy to implement, and will save you an incredible amount of time.
Below are the topics of discussion in this article. Feel free to click on any one of the following links to skip to that section.
- What Are ‘Extend Styles’?
- Why Should I Use Extend Styles?
- How Do I Use Extend Styles?
- How Does Divi Extend Styles Differ From ‘Find and Replace’?
- How will I Benefit from Using Extend Styles?
- Practice, Practice, Practice
What Are ‘Extend Styles’?
Elegant Themes has aptly named this new feature “Extend Styles”, and it does just that. Extend Styles will allow you to apply the styles of one element, option or group, and apply those specific styles to any other element, option, or group. Not THIS is just exciting!
Nick Roach, of Elegant Themes offers a brief synopsis of what you can do with this new time-saving feature. He writes:
To Extend Styles in Divi, simply right-click on any element, option or option group, and choose the Extend Styles option. You can then choose where and to which elements you would like to extend the styles. You can extend styles to specific modules within specific locations, or you can extend styles to all modules across the entire page using location and element targeting – Nick Roach, ElegantThemes.com
For those of us who have Design OCD, . . . you know, where every setting has to be exactly like its counterpart element, Extend Styles is a dream come true. For example, if you find yourself checking and re-checking each settings of one blurb, comparing those settings to the settings of another blurb on the same page, Extend Styles will bring peace of mind.
Again, Extend Styles allows you to apply the styles of any one element, option or group, to any other element, option, or group. Design OCD just became a thing of the past. Yes, you can now extend section styles to all sections on the page, row styles to all rows within that section, or even to the entire page. Additionally, you can extend the styles of an element (a blurb for example), to all other blurb elements on the page, section, row or column.
Taking an example from Elegant Themes, let me walk you through a an example, demonstrating how this work in the animated gif below. This, perhaps is the best way to show you exactly what Extend Styles is, and how it works.
To begin, you’ll note that the lower left blurb has a drop-shadow on it. We hover over the left blurb and wait for the gray box to appear.
Once the gray horizontal box appears, right-click on it and click “Extend Blurb Styles“.
The popup dialog box will appear displaying, “Extend this Blurb’s styles to all Blurb styles“. Note that the default setting reads, “Throughout this” and “Page” is selected.
Simply click the “Extend” button to apply these settings to all blurbs on the page.
Now, we are going to extend the button styles to all other buttons on the page. To do this, we will follow the same steps listed above. The only difference is that in STEP 2, you will need right-click and select “Extend Button Styles“.
Why Should I Use Extend Styles?
Extend Styles will save you an enormous amount of time. It will literally take you less than 30 seconds to do what would otherwise take you a minimum of 30 minutes, and that’s if you are very proficient with Divi and don’t miss anything. Why? Because Extend Styles addresses all the settings for each and every element that you tell it to address, and it doesn’t miss any.
Can you imagine how much time and skill it would take to make these changes by manually coding these changes in CSS? Divi lets you do this in seconds. When you use this tool, it will save you a lot of time, meaning that you will be able to deliver the site to your client faster. What client doesn’t like that?
Another reason why you should use Extend Styles is because it brings continuity to your site. This almost goes without saying, but as mentioned earlier, the extended styles feature does not miss anything. If you tell it to apply a style to ALL Blurbs’ on the page, it will apply it to ALL Blurbs on that page. Depending on the size of the page in question, you might miss one, but Divi won’t.
In using Extend Styles, you will ensure that all of your buttons share the same color, and each blurb shares the same border or background color, etc. You can use this tool and rest assured that it has addressed every element or module in question.
How Do I Use Extend Styles?
Let’s take a look at another example. This time, we are going to modify the border styles of a Blurb, and extend those styles to all pricing tables. The steps we are going to take are listed below this animated gif.
You’ll note that we have one Blurb and two Pricing tables. After adjusting the border width of the Blurb on the Design tab, scroll up to the border section and right-click, selecting Extend Border Styles, and under “Extend this border styles to”, select “all categories”, and type the word “pricing“, and then select pricing tables from the list. You can leave the default setting of “Throughout this page”, and then click “Extend“.
You now have extended the styles of the blurb to all of the pricing tables on that page. It really is that simple. Are you beginning to see how powerful this Divi feature is and how much Time you can save you in building your websites?
How Does ‘Divi Extend Styles’ Differ from ‘Find and Replace’?
In short, the ‘Search and Replace’ literally searches and replaces a specific value, whereas Extend Styles will replicate all of the styles of one element or module and apply them to another element or module.
To quote Jason Champagne of Elegant Themes, “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.”
Where they differ, however, is that Extend Styles does more than just finding and replacing specific values. It allows you to transfer design styles to any module, regardless of its current design.
How will I Benefit from Using ‘Extend Styles’?
Quite frankly, this question has already been addressed throughout this entire article, perhaps more emphatically under the section, “Why I should Use Extend Styles”. In short, it will save you an enormous amount of time and bring continuity throughout your website.
Not using Extend Styles in your website is like running a marathon with one leg. It might be possible to finish but it will take you all whole lot longer to get to the finish line. Extend Styles is not a plugin, or something you need to enable. It’s now part of Divi version 3.14 and all releases moving forward. For those of you who have already installed Divi, make sure that you update Divi in your Plugins menu item in order to ensure that you have it installed.
Practice, Practice, Practice
It is one thing to read about this in an article and see how cool it looks. It is quite another thing, however, to put this in the practice. I cannot overemphasize just how important it is for you to build your own practice page, applying what you have just learned.
Just because you have now been introduced to this concept and have understood it theoretically does not mean that you know it. After you were able to reproduce what you have learned, then you know it.
The more you practice, the more confident you become, until it becomes second nature.
You can do this and be very productive with it too. The more you practice using it, the more familiar you will become with it. The more familiar you become with it, the more efficient you will be in using it, which in turn, puts more money in your pocket.