Introducing Divi Code Snippets! Save Your Favorite Code Snippets And Sync Them To The Cloud

• Updated on: 2023-08-03
• Read original article here

Today we are excited to introduce Divi Code Snippets, a new way to save and manage your most commonly-used code snippets, and to access them whenever you need them right inside the Divi interface. You can save your favorite HTML & Javascript, CSS and collections of CSS parameters and rules, so that they can be easily used within the Divi code editors. That includes in the code editors found in the Divi Theme Options, Divi Builder Page Settings, Code Modules, Text Modules and the CSS options found within all Divi modules. This new code library is integrated with Divi Cloud, which means all of your favorite snippets can be synced to the cloud which will make them instantly accessible on each new website you build. If you are a Divi Cloud customer, your team members also get unlimited Divi Cloud storage for free, which means everyone can save unlimited code snippets to the cloud!

Whenever you are using a code editor in Divi, you will notice some new icons at the top of the interface. You can use them to save code to your library, add code from your library, or import and export code to and from the code editor. It works like just the Divi Layouts Library and the recently-added Divi Theme Builder Library.

If you want to save a snippet to your library, click the Save To Library icon to save all of the code currently in the code editor. Or, use your mouse to select the specific code within the editor that you would like to save, and then click the Save To Library icon to save only the code you have selected. You can also toggle the Save To Divi Cloud option to sync the snippet to the cloud.

To add code from your library, click the plus icon to view all of your saved code snippets. You can use, organize, edit, delete, duplicate, and import and export snippets from your library within this popup. As you can see, the code snippet I just saved is now available in my library, synced to the cloud, and it will be waiting for me here the next time I want to use it.

All of your code snippets can be managed within the library popup. Click the triple dot icon to edit, rename, tag, categorize, duplicate or delete a code snippet.

The Divi Code Snippets library is useful in many situations. If you search Google for “divi code snippets,” you will find all kinds of snippets that designers commonly use to customize the appearance and functionality of Divi, whether that be via a Child Theme or Divi’s code options. Here are just a few resources I found:

Now, you can save those snippets, organize them in your library and sync them to the cloud. Each time you start a new website, your favorite snippets will be waiting for you!

You might have some CSS rules that you commonly apply to Divi Modules using their CSS fields. You might have completely custom elements built using the code module, including custom HTML, JavaScript and CSS. You might have JavaScript hacks or CSS tweaks that you commonly paste into the Divi Theme Options. Your entire Child Theme’s CSS could even be saved as a code snippet, instead of as a child theme. And the best part is that you can organize all of these elements inside of Divi, and manage your code library in a much more intuitive way.

The Divi Code Snippets library is available today, so update Divi and let us know what you think in the comments. Stay tuned for more great Divi features coming soon, and don’t forget to follow and subscribe so that you can be the first to know when our next Divi feature is released. I always give a detailed look into each feature and it’s a great way to get up to speed before you update your website. If you are running your websites on Divi, these are posts you really don’t want to miss.