If you often create new WordPress websites with Divi, you might need the help of Divi Code Snippets to get a website done more quickly than before. Divi Code Snippets is a feature that allows you to add code snippets to the cloud. And since the snippets are stored to the cloud, you can access them from anywhere as long as you have an internet connection. Divi Code Snippets is a part of Divi Cloud.
With Divi Code Snippets, you don’t need to manage the code snippets on your computer which, often times, requires extra effort when you need a certain snippet. In this post, we will show you how to use Divi Code Snippets on your Divi projects.
How Divi Code Snippets Works
Divi, as you have known, has a built-in page builder feature to allow you to create the pages on your website the visual way. While Divi’s page builder offers plenty of built-in styling options, some styles can only be achieved via custom CSS. Meaning that you need to add CSS code snippet. A simplest instance, if you want to turn the read more link in the Blog module into a button-like, you need to add CSS snippet as Divi Builder has no built-in styling options to achieve it.
In Divi itself, CSS snippets can be added to some areas, not just the page builder. For global CSS for instance, you can add it to the Custom CSS field on Divi Theme Options page.
In addition to CSS, Divi also allows you to add both JavaScript and HTLM code. The JavaScript and HTML code can be added using the Code module on Divi Builder. Alternatively, you can add it to the Integration tab on the Divi Theme Options page.
Before Divi Code Snippets was introduced, the only way to add code snippet was by manually typing (or pasting) the code to the editor. With Divi Code Snippets, you can load a certain code snippet you have stored to Divi Cloud right from the code editor. No need to manually type or paste the code.
How to Use Divi Code Snippets
As mentioned on the opening section, Divi Code Snippets is a part of Divi Cloud. Divi Cloud itself is a cloud storage service from Elegant Themes that allows you to store Divi assets (layouts, theme builder templates, code snippets, and so on). Divi Cloud is available for all Elegant Themes members. Each Elegant Themes member has the allocation of 50 cloud items. To store more items, you need to pay $8 per month (or $6 if you pay yearly) for the Divi Cloud service.
A crucial thing to note before you use Divi Cloud Snippets. You will only be able to load a code snippet on its respective context (the area you added it). For instance, the code snippet you added via the Code module can only be loaded to the Code module as well. Another example. The code snippet you added to the Custom CSS field on Divi Theme Options can only be loaded to the same location. In Divi itself, you can add code snippet to the following areas:
- The Custom CSS field on the Divi Theme Options page
- The Integration tab on the Divi Theme Options page
- Page settings on the Divi Builder editor
- The Advanced tab on the element settings panel (section, row, and module)
- Using the Code module
The code snippets you can add to Divi Cloud Snippets are:
- CSS
- HTML
- JavaScript
— Start Using Divi Cloud Snippets
Before being able to store a code snippet to the cloud, first, you need to set up your Divi Cloud account. Every Elegant Themes member already has the account. No need to make another registration. All you need to use Divi Cloud is by logging in with your Elegant Themes account. To do so, first, add a new element (section, row, or module). On the appearing panel, click the Add From Library tab.
On the appearing window, click the Sign In To Divi Cloud button and login with your Elegant Themes account.
# Adding Code Snippet to the Cloud
After setting up Divi Cloud on your website, you can start to add your Divi assets to the cloud, including code snippet. To add a code snippet to the cloud, first, add your code snippet to the code editor where you want to add the code snippet (e.g., the Advanced tab on the module settings panel). Once done adding the code to the editor, click the down arrow icon on the bottom side on the editor.
Give your code snippet a name and toggle the Save To Divi Cloud option on. Before clicking the Save To Divi Cloud button on the bottom, you can select a category and add a tag.
The good thing about Divi Code Snippets is that you can also store a specific part of the code snippet.
# Loading a Code Snippet from the Cloud
The code snippets you have added to Divi Cloud can be loaded to every WordPress website you build with Divi. But remember the rule again. You can only load a code snippet according to its context.
To load a code snippet, go to the area you want to add it (e.g., the Advanced tab on the settings panel). Click the plus icon on the editor area.
On the appearing library window, select a code snippet you want to use. Click the three-dot icon and select Use This Code Snippet.
Wait a moment until Divi is done importing your code.
The Bottom Line
In June 2022, along with the release of Divi 4.17, Elegant Themes introduced Divi Cloud. A feature that allows you to store your Divi assets to the cloud. One of the asset types you can store to Divi Cloud is code snippet.
As you have known, Divi allows you to add custom code snippet (CSS, HTML, and JavaScript) to achieve a certain style or add a certain feature on your WordPress. By storing your code snippets to the cloud, you can access them from any website you build with Divi. No need to manually manage tons of code snippets on your computer.
Divi Cloud is available as a freemium service. All Elegant Themes members, be it new or old, can store up 50 cloud items. To store more items, you can pay $8 per month or $6 for yearly payment.
