With Divi's Drag and Drop file upload feature, users can directly drop image files, text documents, web files, and more into any Divi page. Let's delve into how to use the system and cover some best practices to maximize your Divi experience.

Building web pages is easy using Divi's Drag and Drop feature.

You can upload files individually or add multiple files at once. Once the file is dropped into the builder, it instantly converts to modules.

This is a huge time saver and a revolutionary experience for those looking to build websites more efficiently.

Here is what happens when you drag and drop a file into the Divi Builder when editing your page:

The Drag and Drop feature supports file types developers use to add content and design to their pages.

Here is a list of all file types currently supported by the Drag & Drop feature that you can use:

Now that we understand more about the Drag and Drop feature, let's explore how this convenient feature works for each file type.

Divi's Drag and Drop functionality streamlines the design process of adding new images to your page using the Divi Builder.

When using the Drag and Drop feature for images, there are four supported image formats:

If you want to add a single image from your computer to your web page when using the Divi Builder, drag the image from your computer to the browser screen using the Divi Builder.

Divi will automatically upload the image to your media gallery and insert the image into an Image Module ready for you to use.

For extra convenience, the Image module's settings modal will automatically pop up so you can change your new image.

If you want to add multiple images from your computer at once to your Divi Builder page, select all the images you want to use on your computer and drag them over into the Divi Builder.

Divi will automatically upload all the images, convert them into a Gallery module, and create a new section displaying your new image gallery.

You can rename your files before dragging them onto your page for them to display custom titles.

Text files (in .txt format) are imported with ease into Divi. To add a .txt file, drag it into the Visual Builder. Divi will add the .txt file's content into a Text module within a new section.

The drag-and-drop file upload feature can import several web file types. When using the Drag and Drop feature for web files, there are three supported file formats:

The .json file extension is used for dragging complete page layouts or sections into any Divi page.

Dragging in a .json file automatically loads the content into the page. When importing .json files, you can overwrite the content on an existing page or start from scratch with a blank page.

Dragging CSS files into the Visual Builder adds custom CSS to your page.

Once imported, it's inserted into the custom CSS section of the page settings. It's important to note that when adding custom CSS, be sure to add a class to the module or element to which you wish to add CSS.

Whatever you name the CSS file, that title will be used to comment out the block of CSS, which is a cool feature.

When you drag CSS snippets into your page, they are automatically added to the page CSS.

You can view it anytime from the Page Settings → Advanced tab.

Divi will organize your CSS snippet by wrapping it with comments. Comments are used within CSS code to identify or describe the code blocks.

Divi adds the comment before your code starts. For instance, your page has a CSS snippet for an audio module. When you drag it into the builder, it applies to your page and automatically adds a beginning and end comment to the CSS.

Divi users can drag and drop HTML directly into their pages. The HTML code is added into a code module in a new section. Adding HTML files to your page can be useful for adding new web design elements to your pages.

Importing new custom fonts to your Divi site is made easy with the drag and drop file upload feature.

When editing a page, you can drag the font file from your computer into the Divi Builder. There are two font files supported in the drag and drop file upload system:

Drag the font file into your page with the Divi Builder active to import a font. Divi will launch the font upload modal with the font name already present. Be sure to confirm the font weights before clicking the upload button.

Once done, you will have a new custom font inside the Divi Builder to use when adding new content or modules to the page.

Using the Drag and Drop feature for video files, you can easily add videos to your pages using the Divi Builder. The feature supports the following video file formats:

Dropping any of these video file types into the builder creates a new Video module in a new section.

In seconds, your video is added to your page and ready for you to design using the Divi Builder. Multiple video files simultaneously will create a new module and section for each.

Adding new audio files to your page is only a drag and drop away with this feature. Currently, the following audio file formats are supported:

When you drag and drop an audio file into the builder, the file is automatically converted to a new Audio Module in a new section at the bottom of the page.

With a single drop, you will have your new audio file embedded into a customizable audio player that is fully customizable with Divi's built-in design options.

You can drop in one or more audio files at one time.

There are several ways to benefit from Divi's drag-and-drop upload file feature. Whether you want to upload multiple images at once or combine code snippets to save time, it has plenty of uses.

Divi’s Drag and Drop functionality allows you to drag images to your site easily. This comes in handy when building websites with a lot of images.

And since most people keep saved images in a folder on their computer, it is extremely convenient to select those images and drag them onto your page.

If you want to make design changes to sections of your page or extend the functionality of a Divi module, you can drag and drop supported file types along with CSS files to be uploaded at once.

This is a great way to enhance Divi's amazing capabilities with custom designs and functionality. This allows developers to add any supported file type and CSS combinations to Divi all in one action. This can be a great way to add custom image gallery grids, advanced HTML videos, audio, and more.

Check out our blog to view some of our amazing CSS tutorials to add features to Divi modules.

Lordicon icons are SVGs that can be imported into your Divi website to create cool animation effects. Animation is important because it can help keep your site's visitors engaged.

Lordicon uses JSON files that you can drag and drop into Divi. Check out our in-depth post on Lordicon icons and how to incorporate them into Divi.

When using Divi's drag and drop file upload feature, there are a few best practices that you should follow. Doing so ensures that you save yourself the time intended for the feature.

Optimizing images, adding titles to images before upload, and using clean codes are just a few ways to make the upload go smoothly.

It's always a good idea to make sure that you use optimized images on your website. Large images increase your page loading time.

That can lead to your site's visitors needing more support. Additionally, images that need to be optimized will take up a lot of space.

Depending on the amount of storage you have on your hosting plan, this could be a huge issue. The idea is to save time when using the drag and drop feature to upload multiple images to your website. If your images are large, you could have to wait a considerable amount of time to import your images.

Before dragging and dropping multiple images onto a page, it's a good idea to name them before dragging and dropping them in. Divi automatically displays the titles of your image files, so you'll want to avoid titles such as image-1, image-2, etc.

It is important to clean up your HTML or CSS files before importing them into your Divi website.

Importing poorly written HTML content can prevent your Divi website from breaking, costing you valuable time.

It's a good idea to test your code and make any changes before you're ready to drag it into your web pages. You can use code editors to test your HTML code off-site to ensure it works properly.

When adding custom CSS to your Divi page, it's important to use CSS classes that won't interfere with Divi's internal components. Use unique classes like my-custom-blog or cool-blurb to ensure your code doesn't overwrite important system css classes.

Divi's Global Presets allow you to control the design of your page elements site-wide.

Having these Global Presets in place will make applying the same consistent design easy when using the divi drag and drop file upload feature.

In addition, you can apply any saved global preset to the module displaying your new file upload content.

This will change the design of the uploaded content to match your site in just a few clicks. If you don't have global presets, you can always use Divi's Find & Replace feature to find instances of color, text, or modules and replace them with saved module settings, headings, or color presets.

With Divi Cloud, you can save JSON page layouts in the cloud to make them easier to access when reusing them in your Divi pages.

Furthermore, Divi Cloud is great for storing all kinds of content. You can save modules, rows, sections, or entire layout packs, making it fast and easy to import into your newly created Divi pages.

Combining drag and drop with Divi Cloud is a fantastic way to save time and implement your favorite code snippets, modules, and pages on other Divi websites.