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

Posted on August 3, 2016 by in Divi Resources | 112 comments

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

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


112 Comments

  1. Gorgeous!

    • Mario Maruffi

      Glad you enjoyed it! ?

    • Mario Maruffi

      Happy you have found these resources useful 🙂

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

  3. 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.

    • Mario Maruffi

      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 🙂

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

      • Thank you Mario, this is great!

      • Great Idea!

  4. 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.

    • Mario Maruffi

      So good to hear! 🙂

  5. 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.

    • Mario Maruffi

      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!

    • Would be a great addition…

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

    Thx guys!!!!

    • Mario Maruffi

      Awesome! Glad you have found these resources useful 🙂

  7. 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

    • Mario Maruffi

      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?

      • 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?

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

  8. 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?

    • Mario Maruffi

      Just feel free to move wherever you want each section, just using Divi builder 🙂

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

  9. 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.

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

    • Mario Maruffi

      I’m glad to hear that 🙂

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

    • Mario Maruffi

      Glad you enjoyed it ?

  12. It works for Extra too?

  13. ET you made my day! Thank you so much! I’m definitely going to use this kit over and over again 🙂

    • Mario Maruffi

      Awesome! I’m glad to hear that 🙂

  14. 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!

    • Nathan B. Weller

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

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

    • Mario Maruffi

      Thank you for your feedback!

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

    • Mario Maruffi

      Happy you have found these resources useful 🙂

  17. 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!

    • Mario Maruffi

      So good to hear! Thanks 🙂

  18. 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

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

    • Mario Maruffi

      Glad you enjoyed it ?

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

    • Mario Maruffi

      Thanks! Happy you have found these resources useful 🙂

  21. 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!!!!!

    • Mario Maruffi

      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.

  22. 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.

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

      • 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.

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

    • Mario Maruffi

      Awesome! And I’m glad you have found these resources useful 🙂

  24. Randy A. Brown

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

    • Mario Maruffi

      So good to hear! 🙂

  25. Fantastico

    • Mario Maruffi

      Grazie 🙂

  26. 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!

    • Mario Maruffi

      Awesome! Glad you have found these resources useful 🙂

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

    • Mario Maruffi

      Thanks George! Happy you have found these resources useful.

  28. Powerful new functionality to add to our Divi tool belts. This is a game changer. Thanks for the great kit, Mario! 🙂

    • Mario Maruffi

      So good to hear! Thank you Ryan 🙂

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

    Thanks for sharing

    • Mario Maruffi

      Awesome! Glad you have found these resources useful.

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

    Biting my nails until day 100.

    • Mario Maruffi

      So good to hear! Thank you 🙂

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

    • Mario Maruffi

      I’m glad to hear that! Thanks John 🙂

  32. 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!” 🙂

    • Mario Maruffi

      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! 😉

  33. 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?

    • Mario Maruffi

      Hey Ocho, It’s awesome! Glad you have found these resources useful and of course, do whatever you want with these! 🙂

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

    • Mario Maruffi

      Awesome! Glad you have found these resources useful 🙂

  35. I absolutely love this! The Divi downloads just keep getting better and better 🙂

    • Mario Maruffi

      Thanks! Happy you have found these resources useful 🙂

  36. 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.

  37. 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.

    • Mario Maruffi

      Happy you have found these resources useful 🙂

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

  38. 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 ?

    • 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?

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

  40. 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!

  41. 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.

  42. Feel like Christmas morning…

    Thanks for the awesome gifts !

  43. It’s so strong a tool…

    • Mario Maruffi

      I’m glad to hear that 🙂

  44. 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

    • Mario Maruffi

      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!

  45. 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.

  46. In a word – AWESOME!

    Thanks guys, you rock!

  47. Nice tool! perfect to work with clients that are slow to provide content 😉

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

  49. 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!

  50. 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.

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

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

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

  54. Great job, folks!

    Thanks a million!

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

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

    • Nathan B. Weller

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

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest