{"id":10767,"date":"2022-12-28T19:04:09","date_gmt":"2022-12-29T02:04:09","guid":{"rendered":"https:\/\/www.blocksylaunch.click\/documentation\/?p=10767"},"modified":"2023-02-03T15:50:47","modified_gmt":"2023-02-03T22:50:47","slug":"drag-and-drop-file-upload-feature","status":"publish","type":"post","link":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/","title":{"rendered":"Using the Divi Drag and Drop File Upload Feature"},"content":{"rendered":"<p>With Divi&#8217;s drag and drop file upload feature users can drop image files, as well as text documents, web files, and more directly into any Divi page. Let&#8217;s delve into how to use the system, and cover some best practices to make the most out of your Divi experience.<\/p>\n<h2>Overview of Divi Drag and Drop File Upload<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14840 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature.jpg\" alt=\"drag and drop file upload feature\" width=\"2200\" height=\"807\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature-300x110.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature-1024x376.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature-768x282.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature-1536x563.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature-2048x751.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>Building webpages is easy using Divi&#8217;s drag and drop feature. You can upload files individually or add multiple files at once. Once the file is dropped into the builder, files convert to modules instantly. This is a huge time saver and is a revolutionary experience for those who are 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:<\/p>\n<ol>\n<li>Divi creates a new regular section with a one column row at the bottom of your page layout.<\/li>\n<li>Divi Creates a new module and fills it with your file content based on the type of file.<\/li>\n<li>Divi adds the new module inside the one-column row of the section that was created at the bottom of the page.<\/li>\n<li>For convenience, the module settings modal will pop up automatically so you can start customizing the design of your content.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14808 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-into-Divi.jpg\" alt=\"drag into Divi\" width=\"2200\" height=\"1204\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-into-Divi.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-into-Divi-300x164.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-into-Divi-1024x560.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-into-Divi-768x420.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-into-Divi-1536x841.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-into-Divi-2048x1121.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h2>Supported File Types for Drag and Drop Uploads<\/h2>\n<p>The Drag and Drop feature supports file types that every developer uses to add content and design to their pages. Here is list of all file types currently supported by the Drag &#038; Drop feature that you can use:<\/p>\n<ul>\n<li><strong>Image Files<\/strong> (jpg, png, tif, gif)<\/li>\n<li><strong>Text Files<\/strong> (txt)<\/li>\n<li><strong>Video Files<\/strong> (m4v, mov, webm, wmv, mp4)<\/li>\n<li><strong>Audio Files<\/strong> (mp3, wav)<\/li>\n<li><strong>Web Files<\/strong> (json, html, css)<\/li>\n<li><strong>Font Files<\/strong> (otf, ttf) (<\/li>\n<\/ul>\n<p>Now that we understand more of what the Drag and Drop feature is, let&#8217;s explore how this convenient feature works for each file type.<\/p>\n<h2>The Drag and Drop Functionality for Each File Type<\/h2>\n<h3>Image File Uploads<\/h3>\n<p>Divi&#8217;s Drag and Drop functionality streamlines the design process of adding new images to your page using the Divi Builder.<\/p>\n<p>When using the Drag and Drop feature for images, there are four supported image formats:<\/p>\n<ul>\n<li>jpg<\/li>\n<li>png<\/li>\n<li>tif<\/li>\n<li>gif<\/li>\n<\/ul>\n<h4>Single Image Drag and Drop Functionality<\/h4>\n<p>If you want to add a single image from your computer to your web page when using the Divi Builder, just drag the image from your computer to the browser screen using the Divi Builder. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14809 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-image.jpg\" alt=\"drag image\" width=\"2200\" height=\"1204\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-image.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-image-300x164.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-image-1024x560.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-image-768x420.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-image-1536x841.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/drag-image-2048x1121.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>Divi will automatically upload the image to your media gallery and apply the image to an image module ready for you to use. For extra convenience, the image gallery settings modal will automatically pop up so you can make any changes to your new image. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14810 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/image-settings.jpg\" alt=\"image settings\" width=\"2200\" height=\"1201\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/image-settings.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/image-settings-300x164.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/image-settings-1024x559.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/image-settings-768x419.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/image-settings-1536x839.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/09\/image-settings-2048x1118.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Multiple Images Drag and Drop Functionality<\/h4>\n<p>If you want to add multiple images from your computer at once to your Divi Builder page, simply 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 an image gallery module, and create a new section displaying your new image gallery. You can rename your files before dragging them into your page, in order for them to display custom titles.<\/p>\n<p><video autoplay loop muted playsinline class=\"with-border\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/add-multiple-images.webm\" type=\"video\/webm\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/add-multiple-images.mp4\" type=\"video\/mp4\"><\/video><\/p>\n<h3>Text File Uploads<\/h3>\n<p>Text files (with <em>txt<\/em> format) import with ease into Divi. To add a TXT file, drag it into the Visual Builder. Divi will add the TXT file into a text module within a new section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14814 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-text-file.jpg\" alt=\"drag text file with divi drag and drop file upload\" width=\"1725\" height=\"948\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-text-file.jpg 1725w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-text-file-300x165.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-text-file-1024x563.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-text-file-768x422.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-text-file-1536x844.jpg 1536w\" sizes=\"auto, (max-width: 1725px) 100vw, 1725px\" \/><\/p>\n<h3>Web File Uploads: Add Divi Layouts, HTML Code, or CSS<\/h3>\n<p>The drag and drop file upload feature can import several web file types. We&#8217;ll show you how to import them into Divi.<\/p>\n<p>When using the Drag and Drop feature for web files, there are three supported file formats:<\/p>\n<ul>\n<li>JSON<\/li>\n<li>CSS<\/li>\n<li>HTML<\/li>\n<\/ul>\n<h4>JSON File Uploads: Importing Divi Layouts with Ease<\/h4>\n<p>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 choose to overwrite the content on an existing page, or start from scratch with a blank page.<\/p>\n<p><video autoplay loop muted playsinline class=\"with-border\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/import-json.webm\" type=\"video\/webm\"><source src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/import-json.mp4\" type=\"video\/mp4\"><\/video><\/p>\n<h4>CSS File Uploads: Quickly Add Custom CSS Styles to Pages with Drag and Drop<\/h4>\n<p>Dragging CSS files into the Visual Builder adds custom CSS to your page. Once imported, it&#8217;s inserted into the custom CSS section of the page settings. It&#8217;s important to note that when adding custom CSS, be sure to add a class to the module or element that you wish to add CSS to. Basically, whatever you name the CSS file, that title will be used to comment out the block of CSS which is a cool feature.<\/p>\n<h4>Divi Organizes CSS Code With Each Drop<\/h4>\n<p>When you drag CSS snippets into your page, they are automatically added into the page CSS. You can view it anytime from the <strong>page settings > advanced tab<\/strong>. Divi will organize your css snippet by wrapping it with comments. Comments are used within CSS code to identify or describe the blocks of code. Divi adds the comment before your code starts.<\/p>\n<p>For instance, let&#8217;s say you have a CSS snippet for an audio module on your page. When you drag it into the builder, it gets applied to your page and automatically adds a begin and end comment to the CSS.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14829 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/CSS-snippet-for-audio.jpg\" alt=\"CSS snippet for audio\" width=\"2200\" height=\"1203\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/CSS-snippet-for-audio.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/CSS-snippet-for-audio-300x164.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/CSS-snippet-for-audio-1024x560.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/CSS-snippet-for-audio-768x420.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/CSS-snippet-for-audio-1536x840.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/CSS-snippet-for-audio-2048x1120.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>HTML File Uploads: Add Custom HTML Code to a Page with Drag and Drop<\/h4>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14818 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-html.jpg\" alt=\"drag html with divi drag and drop file upload\" width=\"2200\" height=\"1176\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-html.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-html-300x160.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-html-1024x547.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-html-768x411.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-html-1536x821.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-html-2048x1095.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Font File Uploads: Add Custom Fonts to Divi with Drag and Drop<\/h3>\n<p>Importing new custom fonts to your Divi site is made easy with the drag and drop file upload feature. All you have to do is drag the font file from your computer into the Divi Builder when editing a page. There are two font files supported in the drag and drop file upload system:<\/p>\n<ul>\n<li>otf<\/li>\n<li>ttf<\/li>\n<\/ul>\n<p>To import a font, drag the font file into your page with the Divi Builder active. 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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14827 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/naming-and-uploading-font.jpg\" alt=\"naming and uploading fonts\" width=\"2146\" height=\"1280\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/naming-and-uploading-font.jpg 2146w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/naming-and-uploading-font-300x179.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/naming-and-uploading-font-1024x611.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/naming-and-uploading-font-768x458.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/naming-and-uploading-font-1536x916.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/naming-and-uploading-font-2048x1222.jpg 2048w\" sizes=\"auto, (max-width: 2146px) 100vw, 2146px\" \/><\/p>\n<p>Once done, you will have a brand new custom font inside the Divi Builder that you can use when adding new content or modules to the page.<\/p>\n<h3>Video File Uploads: Add Videos to Your Page with Drag and Drop<\/h3>\n<p>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:<\/p>\n<ul>\n<li>mp4<\/li>\n<li>webm<\/li>\n<li>mov<\/li>\n<li>wmv<\/li>\n<li>m4v<\/li>\n<\/ul>\n<p>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. Adding multiple video files at once will create a new module and section for each.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14820 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-video-file.jpg\" alt=\"drag video file\" width=\"2200\" height=\"1131\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-video-file.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-video-file-300x154.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-video-file-1024x526.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-video-file-768x395.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-video-file-1536x790.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-video-file-2048x1053.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Audio File Uploads: Convert Audio Files to Audio Modules with Drag and Drop<\/h3>\n<p>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:<\/p>\n<ul>\n<li>mp3<\/li>\n<li>wav<\/li>\n<\/ul>\n<p>When you drag and drop an audio file into the builder, the file is automatically converted to a new Divi 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&#8217;s built-in design options. You can drop in one or more audio files at one time.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14821 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-audio-file.jpg\" alt=\"drag audio file\" width=\"2200\" height=\"1131\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-audio-file.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-audio-file-300x154.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-audio-file-1024x526.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-audio-file-768x395.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-audio-file-1536x790.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-audio-file-2048x1053.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h2>Example Use Cases<\/h2>\n<p>There are a number of ways to benefit from Divi&#8217;s drag and drop upload file feature. Whether you want to upload multiple images at once, or combine code snippets to save time, there are plenty of uses for it. Let&#8217;s take a closer look at a couple of the best ways to use it.<\/p>\n<h3>Drag and Drop Multiple Images to Create Photo Galleries with Titles<\/h3>\n<p>Divi\u2019s Drag and Drop functionality allows you to drag images to your site with ease. This really 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 be able to select those images and drag them into your page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14824 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/upload-multiple-images.jpg\" alt=\"upload multiple images with divi drag and drop file upload\" width=\"2200\" height=\"1195\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/upload-multiple-images.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/upload-multiple-images-300x163.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/upload-multiple-images-1024x556.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/upload-multiple-images-768x417.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/upload-multiple-images-1536x834.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/upload-multiple-images-2048x1112.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Combine Files and CSS Snippets in One Go<\/h3>\n<p>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 the amazing capabilities of Divi with custom designs and functionality. This allows developers to add any supported file type and CSS combinations to Divi all in one single action.<\/p>\n<p>This can be a great way to add custom image gallery grids, advanced HTML videos, audio, and so much more.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14825 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/multiple-file-upload.jpg\" alt=\"divi drag and drop file upload multiple files\" width=\"2200\" height=\"1196\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/multiple-file-upload.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/multiple-file-upload-300x163.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/multiple-file-upload-1024x557.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/multiple-file-upload-768x418.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/multiple-file-upload-1536x835.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/multiple-file-upload-2048x1113.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>Check out our blog to view some of our amazing CSS tutorials to add features to Divi modules.<\/p>\n<ol>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/wordpress\/basic-css-that-every-wordpress-user-needs-to-know\">Basic CSS That Every WordPress User Needs to Know<\/a><\/li>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/how-to-design-css-text-backgrounds-in-divi-using-background-clip\">How to Design CSS Text Backgrounds in Divi Using background-clip<\/a><\/li>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/how-to-create-a-css-grid-layout-for-divi-modules\">How to Create a CSS Grid Layout for Divi Modules<\/a><\/li>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/exploring-how-to-create-and-animate-css-shapes-in-divi\">Exploring How to Create and Animate CSS Shapes in Divi<\/a><\/li>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/how-to-create-custom-html5-video-controls-for-a-video-in-divi\">How to create custom HTML5 video controls for a video in Divi<\/a><\/li>\n<\/ol>\n<h3>Importing Lordicon Icon JSON Files<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14826 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Lordicon-icons.jpg\" alt=\"Lordicon icons with divi drag and drop file upload\" width=\"2200\" height=\"1543\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Lordicon-icons.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Lordicon-icons-300x210.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Lordicon-icons-1024x718.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Lordicon-icons-768x539.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Lordicon-icons-1536x1077.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Lordicon-icons-2048x1436.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>Lordicon icons are SVG&#8217;s that can be imported into your Divi website to create cool animation effects. Animation is an important element to consider because it can help keep your site&#8217;s visitors engaged. Lordicon uses JSON files that you can drag and drop into Divi. Check out our <a href=\"https:\/\/www.blocksylaunch.click\/blog\/wordpress\/how-to-use-lordicon-with-wordpress-and-divi\">in-depth post on Lordicon icons<\/a> and how to incorporate them into Divi.<\/p>\n<h2>Tips &#038; Best Practices when Using Divi&#8217;s Drag and Drop File Upload Feature<\/h2>\n<p>When using Divi&#8217;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 that the feature is intended for. Things like optimizing images, adding titles to images before upload, and using clean codes are just a few ways to make the upload go smoothly.<\/p>\n<h3>Optimize Images Before Uploading into Drag and Drop File Upload<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14831 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/save-for-web.jpg\" alt=\"save for web\" width=\"1401\" height=\"916\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/save-for-web.jpg 1401w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/save-for-web-300x196.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/save-for-web-1024x670.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/save-for-web-768x502.jpg 768w\" sizes=\"auto, (max-width: 1401px) 100vw, 1401px\" \/><\/p>\n<p>It&#8217;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&#8217;s visitors becoming frustrated. Additionally, images that aren&#8217;t 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. When using the drag and drop feature to upload multiple images to your website, the idea is to save time. If your images are large, you could have to wait a considerable amount of time to import your images.<\/p>\n<h3>Rename Image Titles<\/h3>\n<p>Before dragging and dropping multiple images into a page, it&#8217;s a good idea to name them prior to dragging and dropping them in. Divi automatically displays the titles of your image files, so you&#8217;ll want to avoid titles such as image-1, image-2, etc.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14832 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/name-image-titles.jpg\" alt=\"name image titles for divi drag and drop file upload\" width=\"2200\" height=\"1198\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/name-image-titles.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/name-image-titles-300x163.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/name-image-titles-1024x558.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/name-image-titles-768x418.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/name-image-titles-1536x836.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/name-image-titles-2048x1115.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Upload Web Files with Clean Code<\/h3>\n<p>It is important to clean up your HTML or CSS files before importing them into your Divi website. Importing poorly written HTML content can cause your Divi website to break, costing you valuable time. It&#8217;s a good idea to test your code and make any changes before you&#8217;re ready to drag it into your webpages. You can use code editors to test out your HTML code off-site to make sure it works properly. <\/p>\n<h3>Upload CSS with Unique CSS Classes<\/h3>\n<p>When adding custom CSS to you Divi page, it&#8217;s important to use CSS classes that won&#8217;t interfere with Divi&#8217;s internal components. Be sure to use unique classes like <em>my-custom-blog<\/em> or <em>cool-blurb<\/em> to ensure that your code doesn&#8217;t overwrite important system css classes.<\/p>\n<h3>Style your File Uploads with Divi Global Presets<\/h3>\n<p><a href=\"https:\/\/www.blocksylaunch.click\/documentation\/divi\/divi-global-presets\/\">Divi&#8217;s Global Presets<\/a> allow you to control the design of your page elements site-wide.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14833 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/global-presets.jpg\" alt=\"global presets with divi drag and drop file upload\" width=\"2200\" height=\"1198\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/global-presets.jpg 2200w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/global-presets-300x163.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/global-presets-1024x558.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/global-presets-768x418.jpg 768w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/global-presets-1536x836.jpg 1536w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/global-presets-2048x1115.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>Having these Global Presets in place will make it easy to apply the same consistent design when using the divi drag and drop file upload feature. For example, if you have a default preset in place for images or image galleries, those styles will be added automatically when you drag and drop new images to your page. 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.<\/p>\n<p>If you don&#8217;t have global presets in place, you can always use <a href=\"https:\/\/www.blocksylaunch.click\/blog\/theme-releases\/find-and-replace\">Divi&#8217;s Find &#038; Replace<\/a> feature to find instances of color, text, or modules and replace them with saved module settings, headings, or color presets.<\/p>\n<h3>Utilize Divi Cloud<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-14835 size-full\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Divi-Cloud.jpg\" alt=\"Divi Cloud\" width=\"1486\" height=\"746\" srcset=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Divi-Cloud.jpg 1486w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Divi-Cloud-300x151.jpg 300w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Divi-Cloud-1024x514.jpg 1024w, https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/Divi-Cloud-768x386.jpg 768w\" sizes=\"auto, (max-width: 1486px) 100vw, 1486px\" \/><\/p>\n<p>With <a href=\"https:\/\/www.blocksylaunch.click\/divi-cloud\/\">Divi Cloud<\/a>, 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 which makes 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.<\/p>\n<h2>Continue Learning<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/6-ways-you-can-use-divis-drag-drop-file-upload-feature-to-boost-productivity\">6 Ways You Can Use Divi\u2019s Drag &#038; Drop File Upload Feature to Boost Productivity<\/a><\/li>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/wordpress\/how-to-use-lordicon-with-wordpress-and-divi\">How to Use Lordicon with WordPress and Divi<\/a><\/li>\n<li><a href=\"https:\/\/www.blocksylaunch.click\/blog\/divi-resources\/10-tutorials-to-help-you-get-started-with-divi-cloud\">10+ Tutorials to Help You Get Started with Divi Cloud<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>With Divi&#8217;s drag and drop file upload feature users can drop image files, as well as text documents, web files, and more directly into any Divi page.<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,2],"tags":[],"class_list":["post-10767","post","type-post","status-publish","format-standard","hentry","category-divi-builder","category-divi"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the Divi Drag and Drop File Upload Feature - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"With Divi&#039;s drag and drop file upload feature users can drop image files, as well as text documents, web files, and more directly into any Divi page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-29T02:04:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T22:50:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature.jpg\" \/>\n<meta name=\"author\" content=\"Deanna McLean\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Deanna McLean\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/\"},\"author\":{\"name\":\"Deanna McLean\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/f6c87e48544b98456f4464ec353ee9f9\"},\"headline\":\"Using the Divi Drag and Drop File Upload Feature\",\"datePublished\":\"2022-12-29T02:04:09+00:00\",\"dateModified\":\"2023-02-03T22:50:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/\"},\"wordCount\":2309,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/drag-and-drop-feature.jpg\",\"articleSection\":[\"Divi Builder Plugin Documentation\",\"Divi Theme Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/\",\"name\":\"Using the Divi Drag and Drop File Upload Feature - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/drag-and-drop-feature.jpg\",\"datePublished\":\"2022-12-29T02:04:09+00:00\",\"dateModified\":\"2023-02-03T22:50:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/f6c87e48544b98456f4464ec353ee9f9\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/drag-and-drop-feature.jpg\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/drag-and-drop-feature.jpg\",\"width\":2200,\"height\":807,\"caption\":\"drag and drop file upload feature\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/drag-and-drop-file-upload-feature\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using the Divi Drag and Drop File Upload Feature\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/f6c87e48544b98456f4464ec353ee9f9\",\"name\":\"Deanna McLean\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g\",\"caption\":\"Deanna McLean\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/","og_locale":"en_US","og_type":"article","og_title":"Using the Divi Drag and Drop File Upload Feature - Elegant Themes Documentation","og_description":"With Divi's drag and drop file upload feature users can drop image files, as well as text documents, web files, and more directly into any Divi page.","og_url":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2022-12-29T02:04:09+00:00","article_modified_time":"2023-02-03T22:50:47+00:00","og_image":[{"url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature.jpg","type":"","width":"","height":""}],"author":"Deanna McLean","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Deanna McLean","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/#article","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/"},"author":{"name":"Deanna McLean","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/f6c87e48544b98456f4464ec353ee9f9"},"headline":"Using the Divi Drag and Drop File Upload Feature","datePublished":"2022-12-29T02:04:09+00:00","dateModified":"2023-02-03T22:50:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/"},"wordCount":2309,"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature.jpg","articleSection":["Divi Builder Plugin Documentation","Divi Theme Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/","url":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/","name":"Using the Divi Drag and Drop File Upload Feature - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/#primaryimage"},"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature.jpg","datePublished":"2022-12-29T02:04:09+00:00","dateModified":"2023-02-03T22:50:47+00:00","author":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/f6c87e48544b98456f4464ec353ee9f9"},"breadcrumb":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/#primaryimage","url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature.jpg","contentUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/drag-and-drop-feature.jpg","width":2200,"height":807,"caption":"drag and drop file upload feature"},{"@type":"BreadcrumbList","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/drag-and-drop-file-upload-feature\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.blocksylaunch.click\/documentation\/"},{"@type":"ListItem","position":2,"name":"Using the Divi Drag and Drop File Upload Feature"}]},{"@type":"WebSite","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website","url":"https:\/\/www.blocksylaunch.click\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.blocksylaunch.click\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/f6c87e48544b98456f4464ec353ee9f9","name":"Deanna McLean","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g","caption":"Deanna McLean"}}]}},"_links":{"self":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/10767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/comments?post=10767"}],"version-history":[{"count":70,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/10767\/revisions"}],"predecessor-version":[{"id":15632,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/10767\/revisions\/15632"}],"wp:attachment":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/media?parent=10767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/categories?post=10767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/tags?post=10767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}