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

Last Updated on January 6, 2023 by 26 Comments

Editorial Note: We may earn a commission when you visit links on our website.
Get Divi TodayTry Divi Risk Free For 30 Days!
Introducing Divi Code Snippets! Save Your Favorite Code Snippets And Sync Them To The Cloud
Blog / Theme Releases / Introducing Divi Code Snippets! Save Your Favorite Code Snippets And Sync Them To The Cloud
Play Button

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!

Watch the complete video overview ๐Ÿ‘‡

Using The Code Snippets Library

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.

Saving Code To Your 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.

Adding Code From Your Library

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.

Editing And Managing Code In Your Library

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.

Building Your Code Snippets Collection

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.

Get Started With Divi Code Snippets

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.

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! ๐Ÿ‘‡

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow ๐Ÿ‘‡

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How ๐Ÿ‘‡

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Introducing Divi Quick Sites & AI Website Creation

Introducing Divi Quick Sites & AI Website Creation

Posted on July 2, 2024 in Theme Releases

Today, we are excited to release Divi Quick Sites, which includes entirely automated AI website creation and premade starter sites that you can use to spin up complete Divi websites in one to two minutes. Itโ€™s the fastest, easiest way to get a beautiful WordPress website up and running, and since...

View Full Post
Introducing Divi AI Layout & Page Creation

Introducing Divi AI Layout & Page Creation

Posted on April 18, 2024 in Theme Releases

Today, we are excited to release Divi Layouts AI, an AI layout generator for Divi that can create entire pages from scratch using a simple prompt. Tell Divi AI about the page you want, and let it do the work. Divi AI works as a team of autonomous agents, collaborating like a design agency to create...

View Full Post
The New Divi AI Image Editor

The New Divi AI Image Editor

Posted on January 18, 2024 in Theme Releases

Divi AI now comes with an advanced AI Image Editor that you can use to modify images on the fly right inside the builder. Not only can you generate brand new images out of thin air, reimagine them, and change their styles, but you can also use the power of AI to modify specific details about an...

View Full Post

26 Comments

  1. Very cool!

  2. Yes, very useful update, thanks!
    The only thing I still really miss and that would be a very useful feature in combination to Diviยดs Cloud, the Code Snippets and the Module Presets, would be the ability to put custom css and custom code snippets directly inside the Modules without having the limitations of the actual preset boxes (under Advanced > Custom CSS), and like that being able to have a customized module, all together encapsulated and saved as such in the cloud.

  3. Great, thank you for the updates on the code. Is there a bug report availability for Divi? The standard WordPress post sticky feature is still not working with Divi in the blog module.

  4. Very useful ! Thanks a lotโ€ฆ

  5. I love this new feature! You can bet I’ll be using it with every project. And thank you so much for including my Divi Button tutorial in this article! It’s an honor ๐Ÿ˜

    • I recommand it!

  6. Very useful. This package is very hard to beat. I was looking forward to this, looks great!

  7. That’s a really nice feature update, well done Elegant Themes! ๐Ÿ‘ And thanks for mentioning my “Six Tips for a Better Divi Mobile Menu” post.

  8. Speaking of code snippets. I know that we can add fluid typography via css but, have you considered a way to do this in the moduleโ€™s UI?

  9. Another nice addition.

  10. Another Divi homerun!! Thanks Team ET!!!

  11. This is a super useful new feature for coders and more advanced customizations across sites. Great work!

  12. Hello,
    This is very good news!
    Thank you for this really useful new feature.
    great work

  13. How do you use this with JavaScript or PHP? Iโ€™ve only seen CSS shown in the above. ๐Ÿ™‚

    • That depends on what type of code option you are editing. If you are editing a CSS option, you will only be able to use CSS. If you are editing a more general code option, such as within a Code module or Text module, or within the Divi Theme Option’s Integration tab, you will be able to use CSS/HTML/JavaScript.

    • Pee-Aye Creative is awesome, love your work Nelson!

    • I also wondered why it wasn’t there, because it the best site to look for snippets…sigh

  14. I was looking forward to this, looks great! Can’t wait to share this helpful tool with my weekly tutorial followers, since I usually share a Divi code snippet each week!

    • 100%

    • Highlighting and saving to the cloud a specific snippet from what you already have is amazing.

      Keep the goodies coming team!

      I’m still hopeful for some multisite features regarding the user role editor functionality in the future.

  15. Another great update! Thanks ET!
    Question: when you add a snippet to the global custom CSS in the Divi Theme will it override the existing code or will it add the code?

    • By default it will add code below any existing code in the code editor. There is also an option to “replace existing content” that, if checked, will cause imported code to replace all existing code in the editor.

  16. Again nice. If Divi 5 then delivers this package will be very hard to beat.

  17. ๐Ÿ’œ WOW! Really useful! Thank you ET!

    • exactly what I needed

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today