--- title: How to Import Divi 5 Layouts Pack? description: "### Getting started #### Note : This Layout Pack Only Work with Divi 5. It is not working with Divi 4. In order to install this section layouts pack, you must have [Divi Theme](https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=47611) if you don't have then first…" url: "https://divi-professional.com/docs/how-to-import-divi-5-layouts-pack/" updated: "2026-06-23" category: Divi 5 Layouts Pack --- # How to Import Divi 5 Layouts Pack? ### Getting started #### Note : This Layout Pack Only Work with Divi 5. It is not working with Divi 4. In order to install this section layouts pack, you must have [Divi Theme](https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=47611) if you don't have then first purchase a membership to [Elegant Themes](https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=47611) and download the [Divi Theme](https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=47611) and activate. The [Divi Theme](https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=47611) is NOT included with this layouts pack. #### Steps for import layouts pack ##### Step 1 **Download Main Product Zip and Supplementary Zip Files and then Unzip** ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-Divi5-FolderStructure.png) After unzip **Main Product Zip Folder (Folder - LP-DiviWarehouse)** ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse-FolderStructure1.png) After unzip **Supplementary Product Zip Folder (Folder - LP-DiviWarehouse Supplementary Files)** ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse-Supp-FolderStructure1.png) ##### Step 2 How to Download Divi 5? Login into [https://www.elegantthemes.com/members-area/login/](https://www.elegantthemes.com/members-area/login/) Once Login then browse [https://www.elegantthemes.com/members-area/divi-5/](https://www.elegantthemes.com/members-area/divi-5/) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2025/08/Divi-5-Elegant-Themes-Members-Area.png)   **Go to Themes and Upload Divi 5 Theme and Activate that theme** ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2025/08/Divi5-Kit-Step1.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2025/08/Divi5-Kit-Step2.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2025/08/Divi5-Kit-Step3.png) **Set Permalink "Post Name"** ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse2.png) ##### Step 3 **Import Post and Project XML files** Go to Supplementary Folder and see both files ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse-Supp-FolderStructure1.png) Go to Tools -> Import Then See [ WordPress-Install Now ] Once Install You can see [ WordPress - Run Importer ] and Click on Run Importer and Select xml file. 1. Post.xml 2. Project.xml ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse22.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse23.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse24.png) ##### Step 4 **Import Theme Option and Theme Customizer JSON files** Go to Main Product Folder and see both files 1. DiviThemeOptions_DiviWarehouse.json 2. ThemeCustomizer_DiviWarehouse.json   ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse-FolderStructure1.png) **Go to Divi -> Divi Theme Option and see below image and import "DiviThemeOptions_DiviWarehouse.json"** ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse3.png)   **Go to Divi -> Theme Customizer and see below image and import "ThemeCustomizer_DiviWarehouse.json"** ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse9.png) ##### Step 5 **Import All Pages JSON file  - DiviBuilderLayouts_All_DiviWarehouse.json and ALLPages.xml** 1. Import All Pages XML file  - Go to Supplementary Files Folder and see ALLPages.xml Go to Tools -> Import Then See [ WordPress-Install Now ] Once Install You can see [ WordPress - Run Importer ] and Click on Run Importer and Select xml file. Go to Supplementary Folder and see ALLPages.xml file. ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse35.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse22.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse23.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse24.png) 2. Go to Main Product Folder and see file DiviBuilderLayouts_All_DiviWarehouse.json   ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse-FolderStructure1.png) Go to Divi -> Divi Library -> Click on "Import & Export" Button -> Select Import Tab -> Select Json file (e.g DiviBuilderLayouts_All_DiviWarehouse.json) -> Click on "Import Divi Builder Layouts" Button   ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse4.png) **After Imported You can see all pages** ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse7.png) This is Common Documentation settings for our all layouts After Import Process ,Edit Any Divi Page and Must be enable below settings For Breakpoints Please Enable Tablet Wide ![ElectricHub - Divi Electric Vehicle Charging Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/05/ElectricHub-Divi-Electric-Vehicle-Charging-Layouts-Pack-DOC.png)   You can check **Read Me - Installation Process.txt** File Under Folder ##### Step 6 **Import Theme Builder Pages JSON file  - DiviThemeBuilderTemplates_DiviWarehouse.json** Go to Main Product Folder and see file 1. DiviThemeBuilderTemplates_DiviWarehouse.json   ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse-FolderStructure1.png) Go to Divi -> Theme Builder -> Click on "Import & Export" Icon -> Select Import Tab -> Select Json file (e.g DiviThemeBuilderTemplates_DiviWarehouse.json) -> Click on "Import Divi Theme Builder Templates" Button   ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse5.png) **After Imported You can see all templates** ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse6.png)   ##### Step 7 **Import Widget File - divi-warehouse-layout-widgets.wie** Go to Supplementary Product Folder and see file 1. divi-warehouse-layout-widgets.wie   ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse-Supp-FolderStructure1.png) Please install "**Widget Importer & Exporter**" Plugin and activate [https://wordpress.org/plugins/widget-importer-exporter/](https://wordpress.org/plugins/widget-importer-exporter/) Now go to Appearance -> Wigdets and create "Widget Name" Add "Widget Name" - "**blog-sidebar** "- Click on Create button ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse25.png) Once you create page refresh and see. ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse26.png) Now import "divi-warehouse-layout-widgets.wie" file Go to Tools -> Widget Importer & Exporter if you face file support issue then you can follow below steop in image. just open "divi-warehouse-layout-widgets.wie" file and copy code and paste. Widget import process is done. ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse27.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse28.png)   ##### Step 8 Go To Pages and Create Page -> Use Divi Builder ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse8.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse10.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse11.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse12.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse13.png) ##### Step 9 For Popup ##### Note : if website have popup then you can see Canvas.json file. if file is not there that means website have no popup See Top Bar And Click on Canvas and import Canvas.json file Go to Main Product Folder and see file 1. Canvas.json   ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse-FolderStructure1.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse29.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse30.png) #### **Support** If you have any query send email [diviproductsprofessional@gmail.com](mailto:diviproductsprofessional@gmail.com). OR [Contact Us](https://divi-professional.com/contact/) ### FAQ ##### How to import Divi 5 Layouts Pack? ##### How to Find CSS and JS Code in Divi Layouts Pack? Go to Divi -> Theme Builder and Edit Footer and see in below Images ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse32.png) ![Divi Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/03/LP-DiviWarehouse33.png) ##### ElectricHub - Divi Electric Vehicle Charging Layouts Pack Before Import Process Start Must be enable below settings For Breakpoints Please Enable Tablet Wide ![ElectricHub - Divi Electric Vehicle Charging Layouts Pack](https://divi-professional.com/wp-content/uploads/2026/05/ElectricHub-Divi-Electric-Vehicle-Charging-Layouts-Pack-DOC.png)   You can check **Read Me - Installation Process.txt** File Under Folder ##### CharityClub - Charity Divi Layouts Pack ### How to Work Events and Our Causes Page with Project CPT and Dynamic Data. We have Created 2 Main Category Event and Causes ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse37.png) Each Project has assign Event or Causes category. ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse36.png) We have used WP default Custom Field **See For event** ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse39.png) **See For Causes** ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse38.png) --- ### For Event Page Use Loop Builder - Dynamic way to display event list see selected **post type - projects** and **project category - event** ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse40.png) **How to use custom field for event?** See for event time ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse41.png) 1. Go to Dynamic Icon ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse42.png) 2. Once you click on dynamic icon then select Loop Post Custom Field ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse43.png) 3. Once open then select meta key dpl_event_time and then save/apply ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse44.png) ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse45.png) ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse46.png) 4. Same Process for other custom field like location,date ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse47.png) ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse48.png) --- ### For Causes Page Use Loop Builder - Dynamic way to display causes list see select **post type - projects** and **project category - causes** ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse49.png) **How to use custom field for causes?** See for causes target ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse50.png) 1. Go to Dynamic Icon ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse42.png) 2. Once you click on dynamic icon then select Loop Post Custom Field ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse43.png) 3. Once open then select meta key dpl_causes_target and then save/apply ![How to Import Divi 5 Layouts Pack?](https://divi-professional.com/wp-content/uploads/2026/04/LP-DiviWarehouse51.png) 4. Same Process for other custom field