Free Divi Download: The New Multipurpose Wireframe Kit, Vol. 1

Last Updated on September 16, 2022 by 112 Comments

Free Divi Download: The New Multipurpose Wireframe Kit, Vol. 1
Blog / Divi Resources / Free Divi Download: The New Multipurpose Wireframe Kit, Vol. 1
Play Button

Welcome to Day 65 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


divi-100-wireframe-layout-kit-vol-1-00_mockup

In this post weโ€™ve got a fantastic new tool and resource to give to the community. Itโ€™s a multipurpose wireframe layout kit that you can use to create high-fidelity wireframe prototypes with Divi. This will allow your clients to get a better idea of what their final website will look like even before all of their content is in.

Once theyโ€™ve signed off on the design and their content is in then all youโ€™ll have to do is add their content directly to the layout as it is, change the colors and other styles, and youโ€™ll be well on your way to a final client site!

This kit can even be useful to designers and developers not using Divi for their final product. With this high-fidelity layout kit you can still take advantage of Diviโ€™s incredible speed and ease of use to build out prototypes that your clients can view and give feedback on before diving into your custom work.

Check it out!

Downloading & Using The Multipurpose Wireframe Kit, Vol. 1

To use the Free Divi Multipurpose Wireframe Kit on your own Divi website you will first need to download it using the button below. Next, locate the file divi-100-wireframe-kit-volume-1.zip in your downloads folder and unzip it. Then, navigate in your WordPress admin to Divi > Divi Library and click the โ€œImport & Exportโ€ button at the top of the page.

When the portability modal pops up go to the import tab. Click the โ€œchoose fileโ€ button and select the All.json file or any of the individual layouts you want. Then click the blue โ€œImport Divi Builder Layoutโ€ button and wait for the import to complete.

Once the import has finished you will now have the ability to load your new Divi Wireframe Kit on any builder powered page by going to Load From Library > Add From Library or the inline โ€œLoad From Libraryโ€ option next to the new section options within the builder.

Subscribe To Download For Free

Whatโ€™s In The Kit?

This kit, which is the first of its kind with more on the way, consists of three files: The full kit, which is called โ€œWireframe Kit โ€“ Vol. 1.jsonโ€. This file contains all of the kit elements in one master layout; making it easy to mix, match, edit, and delete to get new custom designs. The file โ€œWireframe Kit โ€“ Landing page Layout Example.jsonโ€ is meant to show you what kind results this can achieve. Then we have the โ€œSingle Sections (2).jsonโ€ file which imports the entire kit as individual sections for you to load independently from the in-line new section controls within the Divi Builder. And finally, we have the โ€œAll (12).jsonโ€ file which uploads everything in one import.

divi-100-wireframe-layout-kit-vol-1-00_how_preview_works

Each file will come with all of the builder elements collapsed. This is so that itโ€™s easy to scroll through your options and quickly preview each section using the right-click preview control.

The Wireframe Kit โ€” Vol. 1

The Wireframe kit itself is pretty massive, but donโ€™t let that intimidate you. With a bit of experimentation, utilization of the preview technique shown above, and a good idea of what youโ€™re going for in the end you will quickly be able to create beautiful high-fidelity wireframes for yourself or your clients.

divi-100-wireframe-layout-kit-vol-1-00_mockup

divi-100-wireframe-layout-kit-vol-1-00_layout_example

Individual Sections

divi-100-wireframe-layout-kit-vol-1-inline-add-from-library

divi-100-wireframe-layout-kit-vol-1-individual-sections

If you donโ€™t want to start out with a whole master layout you can always use the in-line โ€œAdd From Libraryโ€ control to insert one section at a time. As you can see from the gif and individual images below, the possible combinations are endless.

divi-100-wireframe-layout-kit-vol-1-00

divi-100-wireframe-layout-kit-vol-1-01_hero_section

hero section 01

divi-100-wireframe-layout-kit-vol-1-02_hero_section

hero section 02

divi-100-wireframe-layout-kit-vol-1-03_hero_section

hero section 03

divi-100-wireframe-layout-kit-vol-1-04_hero_section

hero section 04

divi-100-wireframe-layout-kit-vol-1-05_hero_section

hero section 05

divi-100-wireframe-layout-kit-vol-1-06_content

content section 01

divi-100-wireframe-layout-kit-vol-1-07_content

content section 02

divi-100-wireframe-layout-kit-vol-1-08_content

content section 03

divi-100-wireframe-layout-kit-vol-1-09_slideshow

slideshow section 01

divi-100-wireframe-layout-kit-vol-1-10_slideshow

slideshow section 02

features_section_01

features section 01

features_section_02

features section 02

divi-100-wireframe-layout-kit-vol-1-13_features

features section 03

divi-100-wireframe-layout-kit-vol-1-14_features

features section 04

divi-100-wireframe-layout-kit-vol-1-15_gallery

gallery section 01

divi-100-wireframe-layout-kit-vol-1-16_gallery

gallery section 02

divi-100-wireframe-layout-kit-vol-1-17_cta

call to action section 01

divi-100-wireframe-layout-kit-vol-1-18_cta

call to action section 02

divi-100-wireframe-layout-kit-vol-1-19_cta

call to action section 03

divi-100-wireframe-layout-kit-vol-1-20_cta

call to action section 04

divi-100-wireframe-layout-kit-vol-1-21_cta

call to action section 05

divi-100-wireframe-layout-kit-vol-1-22_team

team section 01

divi-100-wireframe-layout-kit-vol-1-23_team

team section 02

divi-100-wireframe-layout-kit-vol-1-24_testimonials

testimonial section 01

divi-100-wireframe-layout-kit-vol-1-25_testimonials

testimonial section 02

divi-100-wireframe-layout-kit-vol-1-26_products

products section

divi-100-wireframe-layout-kit-vol-1-27_single_product

single product section

divi-100-wireframe-layout-kit-vol-1-28_pricing_table

pricing table section

divi-100-wireframe-layout-kit-vol-1-29_contact

contact section 01

divi-100-wireframe-layout-kit-vol-1-30_contact

contact section 02

Tomorrow: A New Sneak Peek at Divi 3.0

Tomorrow weโ€™ve got another big day in the Divi 100 Marathon. Nick is going to be presenting another sneak peek at the progress of Divi 3.0โ€“you wonโ€™t want to miss it!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

divi-2-6-logo

Divi 100 Day 65

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0


Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! ๐Ÿ‘‡

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow ๐Ÿ‘‡

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How ๐Ÿ‘‡

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack thatโ€™ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack thatโ€™ll help you get your next Modeling...

View Full Post

112 Comments

  1. I love this layout! How do I change the color from purple to something else?

    • Hi Jason, we just published a tutorial on how best to use the Divi Wireframe Kit. Check out today’s post ๐Ÿ™‚

  2. Oh wow, this is truly amazing! You guys are AWESOME!

  3. Great job, folks!

    Thanks a million!

  4. Yep, this is a real service. Thank you.

  5. Great share. I’m going to download it. Thank for this awesome post.

  6. I love you guys! I really do. You’re giving amazing value every single day!

  7. Isn’t that just great! I have just bought a different theme from another vendor and now stumbled upon this. Guess that recent purchase will never see the light of day. Going to get Divi for sure.

  8. Wow.. Love the simple and clean design. You are amazing:-)
    I showed it to some of my clients yesterday and they loved it as well!

  9. Can’t wait for 34 more days to go by! Really excited…

  10. Nice tool! perfect to work with clients that are slow to provide content ๐Ÿ˜‰

  11. In a word – AWESOME!

    Thanks guys, you rock!

  12. This Is AMAZING! How much effort has gone into this?

    Well done Mario and thank you so much for sharing your creativity with us. I’ve looked at wireframe solutions in the past and stayed away but this is perfect because using DIVI for wireframing makes the next step so much simpler.

    plus…. I learned today that you can collapse rows…. how come there isn’t a symbol to collapse rows?

    Cheers!

    John.

  13. Hi Elegant Themes,

    I’m really loving all the posts and ideas and inspirations you guys have during this 100-day marathon. Are these posts, downloads and instructional videos going to be available at a later stage as I find that they are not immediately useful, but I will certainly use them down the track. If so for how long?

    Thanks!
    Jenn

    • Hi Jenn,

      At the end of Divi 100, we’ll try to organize these resources in a more accessible way. Anyway all the posts that you’ve found now will be online as you found them the first day.

      Thank you!

  14. It’s so strong a tool…

    • Iโ€™m glad to hear that ๐Ÿ™‚

  15. Feel like Christmas morning…

    Thanks for the awesome gifts !

  16. i was thinking about doing something like this (guess not so well done) to explain how we can build a site to my clients, You guys are really great. your work and experience is helping so much to new users like me ๐Ÿ™‚ . thank you! Hugs from Patagonia.

  17. I am a fan. I use Elegant Themes when teaching my students WordPress at UCR. Elegant Themes are the best and the wireframes are just what I wanted. Great addition. You guys rock!

  18. I have only been using Divi for a short time, but I absolutely LOVE it!!! These layout packs and kits are A-MAZING!!!!!! Thanks!

    • This is freaking awesome – thank you so much.
      But I echo the images pointing to localhost:8888 issue. Perhaps point them to an absolute URL someplace?

  19. This is great. Thank you very much !

    Any idea when beta versions of Divi 3.0 will be available , and how can you sign up ?

  20. Superb! By far the most useful post of what has been a great countdown already. This type of white labelling is excellent.

    I’d love to see a handy little reference PDF to go along with it.

    • Happy you have found these resources useful ๐Ÿ™‚

      Yeah the PDF idea is really a great idea! We’ll meditate on it. Thanks

  21. This is something I can really use both for clients who want something to see in a hurry or where we want to implement one of the layouts or sections.

    There is one question in my mind and that is: where will we go to access this stuff in future? Will we have to troll through old blogs to find what we are looking for or will there be some repository when we can go and download?

    Interested to find this out.

  22. I absolutely love this! The Divi downloads just keep getting better and better ๐Ÿ™‚

    • Thanks! Happy you have found these resources useful ๐Ÿ™‚

  23. I’ve been using my own mockup kit for a while, but this one is so much more…elegant! This is awesome. Thanks!

    • Awesome! Glad you have found these resources useful ๐Ÿ™‚

  24. Dude (Mario), I hope you are getting a pay raise! Well deserved…

    in the process of setting up a one page service using only Divi… and this answered my prayers – and just in time as I started to do the graphics myself. Would it be ok to screenshoot and use the graphics from the wireframe in frontend to illustrate how sections work or should I make my own?

    • Hey Ocho, It’s awesome! Glad you have found these resources useful and of course, do whatever you want with these! ๐Ÿ™‚

  25. Thank you! This is great and will save a lot of time.

    It would be nice if the zip file contained a PDF of this page for easy reference to the various modules. Actually, all your great posts and downloads would benefit from a PDF of the page. I’ve been highlighting the text and images, copy and pasting into a Word Docx for future reference.

    Love these 100 days. I think after Divi 3.0 is released you should do “The first 100 days with Divi 3!” ๐Ÿ™‚

    • LOL. I should talk about “The first 100 days with Divi 3” with the ET Team.
      And thanks for the feedback! The PDF idea is a very good suggestion ๐Ÿ™‚

      • I think Mario will need 100 days holiday after this marathon! ๐Ÿ˜‰

  26. I’m so glad I invested in the lifetime subscription! I’m loving the direction Divi is going into!

    • Iโ€™m glad to hear that! Thanks John ๐Ÿ™‚

  27. Phenomenal!!! You guys just saved me a load of time. Thanks so much!

    Biting my nails until day 100.

    • So good to hear! Thank you ๐Ÿ™‚

  28. Going to put this to good use later today!

    Thanks for sharing

    • Awesome! Glad you have found these resources useful.

  29. Powerful new functionality to add to our Divi tool belts. This is a game changer. Thanks for the great kit, Mario! ๐Ÿ™‚

    • So good to hear! Thank you Ryan ๐Ÿ™‚

  30. What a great idea. Divi is really thinking of ways to make jobs easier and actually more fun.

    • Thanks George! Happy you have found these resources useful.

  31. Whoa! Sometimes I feel as you were reading my mind guys! This is exactly what I was needing to show my ideas to clients!

    Thank you!

    • Awesome! Glad you have found these resources useful ๐Ÿ™‚

  32. Fantastico

    • Grazie ๐Ÿ™‚

  33. I’m excited over this one! This is a game-changer!

    • So good to hear! ๐Ÿ™‚

  34. Thank you Mario Maruffi. Elegant themes just getting better. I have got my lifetime membership.

    • Awesome! And I’m glad you have found these resources useful ๐Ÿ™‚

  35. This pack is amazing, but there’s one major flaw… all 30 modules are forcing Roboto Light. It would be MUCH better if they were left as “default” so we don’t need to manually change the font on every text module in every section every time ๐Ÿ™

    • Solved ๐Ÿ™‚

      I used Notepad++ to find/replace all instances of “Roboto Light” and “Roboto” with “Default” in the json file. Deleted the previous imports then re-imported.

      • My goodness – forget everything I said! Find/replace doesn’t work out as planned. Seemed like it did but it actually breaks the font CSS.

      • Worth mentioning.. it seems “default” must be all lower case.

  36. Well, I’ve been critical of ET in the past so when you guys get it right it’s only fair I give kudos. ๐Ÿ™‚

    This is an AMAZING resource. Incredible work Mario.

    THANK YOU!!!!!

    • So good to hear! Thanks Ron ๐Ÿ™‚

      • Hi Mario, could you please comment on Philip’s post from 3 August 2016, which you will find right underneath here, where he raised concern that, as he puts it, “all 30 modules are forcing Roboto Light font”.

        Thank you.

  37. This. Is. An. Awesome. Idea. Thank you!!

    • Thanks! Happy you have found these resources useful ๐Ÿ™‚

  38. Beautiful! The divi marathon is the best thing thats happened from elegant themes since I started my subscription! Keep up the great work guys!

    • Glad you enjoyed it ?

  39. Hi guys, I actually gave up on ET, when Divi appeared it was a little too late for me, even though I think Divi is a big step in the right direction. I’m still subscribed to the blog and it seems like you things are gaining some steam. What would help me really to go back is a comparison between Divi Builder and Visual Composer. it could be great to see that Divi Builder has some unique features.

    Thanks.
    Elijah.

      • I think you mesread my question… what I’m trying to say is – It would be really beneficial for me to see in what regards Divi Builder is different from Visual Composer. Otherwise I have no reason to switch.
        Cheers.
        Elijah

        • Hi Elijah
          I am using both Divi and VC. For time saving and ease of use no one can beat Divi. I got Divi when my yearly membership was near to expire. Then Divi kick in and from there I got the vision of Nick Roch direction and got lifetime membership as it improveshould day by day, now Divi is my 1st choice as Page builder than VC or The Core even I have lifetime membership for all but Divi is outstanding, even their support

  40. Wow! This is such a beautiful and amazing tool! It will save us a whole lot of time! Thank you so much! I’ve been spreding the word and helping people get to know DIVI, this one of a kind theme/page builder.

    Best regards from Goiรขnia, Brazil!

    • So good to hear! Thanks ๐Ÿ™‚

  41. This is such a great tool for Divi users. Thank you so much.

    • Happy you have found these resources useful ๐Ÿ™‚

  42. Wow – thank you for this. And thanks for thinking outside the box!

    • Thank you for your feedback!

  43. Top of the best post…its getting steaming in the Marathon as we progress. Thanks for this resource kit Nathan. It came at the NICK of time. Divi builder is no1. smartest WP building in the ecosystem at the moment…

    Cheers!

    • Thanks bb, all the credit goes to Mario. He’s been doing some fantastic work on this series!

  44. ET you made my day! Thank you so much! I’m definitely going to use this kit over and over again ๐Ÿ™‚

    • Awesome! Iโ€™m glad to hear that ๐Ÿ™‚

  45. It works for Extra too?

    • Yep!

  46. Elegant Themes, You are too much! You are always coming out with surprises. This is really cool and lovely. Thank you for sharing.

    • Glad you enjoyed it ?

  47. Very very nice ! This must have taken some time to create but can save a lot of time on custom client work. Thanks !

    • Iโ€™m glad to hear that ๐Ÿ™‚

  48. Hello Nathan,

    looks wonderful and, above all, useful!
    However I’m having troubles uploading the All.json file, I get this message:

    “PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature”

    Anyone having the same issue ?

    • Oh nevermind, it was my fault. All good. Thanks again.

  49. Many thanks! 100 days of the marathon – this super idea and realization of super !

    By the way, you can give advice . In the ” Blog ” page ( list of posts ) first goes the picture below the title , following the announcement . How to change the order that the first was a header , then a picture , then the announcement .

    And it would be nice if, instead of the text ” Read more ” button was .
    How can I do that?

    • Just feel free to move wherever you want each section, just using Divi builder ๐Ÿ™‚

      • That would be another example . It would be very different )

  50. I know it’s listed somewhere else, but it would be very handy to have the specific image dimensions shown / integrated somewhere in these for:

    gallery section 01
    gallery section 02

    products section
    single product section

    • Hey Justin, sorry I’m not sure to understand your question. Do you would like to know the “best” image’s dimension in order to add them inside the galleries/product sections of this wireframe? I got it well? Or do you mean something else?

      • Can you find my comment from about an hour ago. It was just here and now it’s not showing up.

      • Hi Mario,

        If you look at one of the gallery screenshots above, each demo image has that picture / icon in the middle of it. It would be nice if it also had the “optimal image dimensions” inside (maybe under that icon in each image) each demo image as well.

        Do you understand what I mean or would you like an example?

  51. Hi,
    Excellent, great, exactly what I was looking for!
    Great job!

    Thx guys!!!!

    • Awesome! Glad you have found these resources useful ๐Ÿ™‚

  52. Oh wow. This is pretty amazing. Thank you.

    I’m wondering if there are any .pds files to edit the device mockups? Or are they strictly for demo purposes?

    Thank you again for this great resource.

    • Would be a great addition…

    • I’m sorry but we can’t provide any psd or sketch file for this freebie.

      Anyway with this kit, you’ll be able to use the Divi Builder to create prototypes or simply build your next design. Because you know it, customizing is easier than building from scratch! ๐Ÿ™‚

      • You guys rock!

  53. Great layout kit, we have been using Divi to mockup sites for clients for a while and its nice to see a cool wireframe kit for everyone to see how its easily done.

    • So good to hear! ๐Ÿ™‚

  54. If a client says yes to a mockup made with this kit, can you then just fill it with content, adjust the colors, font, etc.. Or do you need to rebuild everything based on the mockup?

    I’m trying to understand if this is only used to give a client a basic idea of the layout or if it can also save you time down the road by being the foundation a which you build.

    Not trying to look a gift horse in the mouth of course ๐Ÿ™‚

    Thank you.

    • Hey Verdi, yes you can! It’s has been designed with this idea: let you start with it in order to create prototype or simply as base to build your next design. And in the next week, we’ll show you how starting with Divi Wireframe Kit to create outstanding landing page layouts ๐Ÿ™‚

      • Great Idea!

      • Thank you Mario, this is great!

      • My question, now its answered. This awesome! Thank you great ET. Time to revamp our local firm site. ๐Ÿ™‚

  55. Thanks Nathan, hopefully I will get to write my love story with Divi (elegant themes). Keep it up guys.

  56. Just awesome ๐Ÿ™‚

    thx guys…

    • Happy you have found these resources useful ๐Ÿ™‚

  57. Gorgeous!

    • Glad you enjoyed it! ?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today