{"id":115,"date":"2020-01-26T17:57:11","date_gmt":"2020-01-26T22:57:11","guid":{"rendered":"https:\/\/docs.wpcreatorsclub.com\/?p=115"},"modified":"2020-01-26T18:51:28","modified_gmt":"2020-01-26T23:51:28","slug":"importing-divi-design-elements-into-your-project","status":"publish","type":"post","link":"https:\/\/docs.wpcreatorsclub.com\/importing-divi-design-elements-into-your-project\/","title":{"rendered":"Importing Divi Design Elements Into Your Project"},"content":{"rendered":"\n

Importing Divi Design Elements into your project involves a few simple steps.<\/p>\n\n\n\n

1. Unzip the design element file<\/h2>\n\n\n\n

All of our design elements come as a .zip<\/strong> file so they’re able to be stored and served to you more quickly and efficiently.<\/p>\n\n\n\n

Once you’ve downloaded a design element .zip file, go ahead and unzip it on your computer. The resulting file should be a .json file<\/strong>. This is the file we’re going to upload into the Divi Library.<\/p>\n\n\n\n

2. Upload the .json file to your Divi Library<\/h2>\n\n\n\n

Log into your website and navigate to the Divi Library. Click on the button labeled Import & Export<\/strong> at the top of the screen.<\/p>\n\n\n\n

\"Divi<\/figure><\/div>\n\n\n\n

At this point you should be greeted by the Divi Portability popup. Click on the Import<\/strong> tab and then click the Choose File<\/strong> button to select the .json file from step 1.<\/p>\n\n\n\n

Once you’ve selected your file, click the Import Divi Builder Layouts <\/strong>button.<\/p>\n\n\n\n

\"Divi<\/figure>\n\n\n\n

Your new design element should now be imported into your Divi Library and is ready for you to use in your project!<\/p>\n\n\n\n

3. Use the design element in your project<\/h2>\n\n\n\n

Open the page you want to insert the design element on in the Divi Builder. It doesn’t matter if you prefer the backend builder or the Visual Builder, the step is still the same.<\/p>\n\n\n\n

With the exception of design elements specified as sections, all of our design elements come as rows<\/strong> (because some design elements can contain more than one module), to add the design element, add a new row<\/strong> to your layout and select Add from Library<\/strong>. From there, you should be able to select the new design element from a list of available rows in your Divi Library.<\/p>\n\n\n\n

\"Divi<\/figure><\/div>\n\n\n\n

Additional Notes<\/h2>\n\n\n\n

As mentioned earlier, some design elements include additional modules, such as code modules that contain important CSS for the functionality of the design – for instance advanced animations or hover effects.<\/p>\n\n\n\n

You can leave any additional code modules as is or feel free to extract the CSS to your child theme stylesheet or Divi CSS panel.<\/p>\n\n\n\n

Even though our design elements come as rows, once you bring these items into your project feel free to move them around wherever. We’ve just found that packaging them up as rows was the easiest method of delivery to keep everything together.<\/p>\n

\n