Introducing Divi Presets, The Game Changing Divi Design System!

today we are excited to introduce divi presets the new class-based design system double change the way you design Divi websites forever when you customize the style of a Divi module row or section you can now save that custom style as a Divi preset that preset can be applied to elements across your entire website so that they all share the same custom design when you modify a preset of all items using that preset will reflect the change furthermore when you add a new element to a page you can quickly apply any of your saved presets instead of having to start from scratch this is a huge change to the Divi design system and one of the most important Divi features we've released in years creating presets is easy so let's jump in and see how it works presets can be managed within the new presets drop-down menu inside all settings panels click the add new preset button and give your preset a name to create a new preset next customize your preset style using the modules available design settings my newly created preset is now available in the preset drop-down menu the next time I add a blurb module I can select this preset and the modules design will be updated to reflect the styles defined in the preset [Music] if I change the design of a preset all modules using that preset will be updated across my entire website at once you can also transform already designed elements into reusable presets on this website I just finished designing a new button style that will be the basis for all buttons on my website it has a yellow background pulled from my businesses color scheme and a round flat appearance that plays off the websites use of repeating shapes I can turn this button style into a preset using the create new preset from current styles option I'll call it yellow button [Music] the next time I add a button to the page I can apply the yellow button preset you can also duplicate presets to create new variations I'd like to create three main button styles from my website a yellow button a blue button and a red button each of which matches my brand's colors and can be used in different situations hover over a preset and click the duplicate icon to duplicate the preset I'll make my blue button first [Music] I can duplicate the preset again to create my red variation now I have three button presets to choose from whenever I add a new button to my page I can choose which style to use you can also assign a preset as the default preset which will update the default style of all elements on your website now and all elements added in the future if I assign the yellow button preset as my default preset all my basic button modules will assume this new default style when I add a new button I don't need to select the yellow button preset since this is already my default style when your whole website is designed using presets you can make sweeping changes in just a few moments if I want to change the style with my buttons in the future I only have to edit the preset once and all buttons using that preset will be updated instantly across my entire website when an element is using a preset you can still customize that individual element further any change is made inside the settings modal will override the preset styles if I want to tweak this one button that's already using the yellow button preset I can do so without affecting other buttons using the same person if you are a wordpress web designer then you are probably familiar with HTML and CSS now just imagine having to create a website from scratch using HTML and CSS but without the use of CSS classes you would need to add the styling information for every single element individually using inline Styles if you wanted to update a shared style across your entire site you would have to do it hundreds or thousands of times since none of those elements were using shared CSS classes that sounds terrible right well believe it or not that is the current state of most page builders and that was the current state of Divi until now classes are to CSS what presets are to Divi a website intelligently designed using Divi presets can be managed so much more easily than ever before since the websites styles are consolidated into a small collection of shared presets that represent a broader design system this is a major shift in Divis design methodology and a huge advantage for Divi users the new Divi preset system is available today so download Divi and take a first spin let us know what you think in the comments and don't forget to check back next week for even more great new features coming your way [Music]

Channel: Elegant Themes

Views: 34,566

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes

Id: I2VqPBfMA5Y

Length: 6min 25sec (385 seconds)

Published: Thu Jul 09 2020