Free Divi Download: Multipurpose Wireframe UI Kit Vol. 2

Last Updated on September 16, 2022 by 104 Comments

Free Divi Download: Multipurpose Wireframe UI Kit Vol. 2
Blog / Divi Resources / Free Divi Download: Multipurpose Wireframe UI Kit Vol. 2
Play Button

Welcome to Day 72 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-2-00

Today we have the sequel to one of the most popular layout kits of the Divi 100 Marathon. Volume 2 of the Multipurpose Wireframe UI Kit provides a big boost to the variety of high-fidelity wireframes youโ€™re now able to create with Divi.

Downloading & Using The Wireframe UI Kit Vol. 2

To use the Free Divi Multipurpose Wireframe UI Kit Vol. 2 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-2-pack.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 Multipurpose Wireframe UI Kit Vol. 2 on any builder powered page by going to Load From Library > Add From Library. You can also load the individual sections by using the Load From Library option in the in-line section controls.

Subscribe To Download For Free

The Wireframe Kit Vol. 2

divi-100-wireframe-layout-kit-vol-2-01

As was the case with the first wireframe UI kit, this kit provides both designers and developers with a powerful set of tools for creating interactive prototypes they can show to clients in a fraction of the time someone else might be able to create a static wireframe. And because of how easy Divi and this kit are to use, itโ€™s value goes beyond people creating Divi websites. Even developers creating custom web apps or other types of websites may find that using Divi for the initial prototype is the best (and fastest) way forward.

The Wireframe Kit Vol. 2โ€“Layout Example 01

There are seemingly endless layout possibilities you can create with this kit but we wanted to make sure to show at least one or two. This first layout features some amazing hero sections and calls to action.

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

Divi Wireframe UI Kit Vol. 2โ€“Layout Example 01

The Wireframe Kit Vol. 2โ€“Layout Example 02

In this layout example youโ€™ll notice a few new elements: the new info bar section and the section including the toggle module.

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

Divi Wireframe UI Kit Vol. 2โ€“Layout Example 02

The Wireframe Kit Vol. 2โ€“Individual Sections

inline-add-from-library

One of the great things about these kits is that not only do you get all of the elements in one master layout that you can mix, match, and alterโ€“but you can insert individual sections by themselves into any layout using the inline โ€œAdd From Libraryโ€ control within the builder section settings. This time around weโ€™ve adding more hero sections, calls to action, features sections, and much more.

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

Hero Section 01

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

Hero Section 02

divi-100-wireframe-layout-kit-vol-2-04_infobar

Infobar Section

divi-100-wireframe-layout-kit-vol-2-05_content

Content Section

divi-100-wireframe-layout-kit-vol-2-06_features

Features Section 01

divi-100-wireframe-layout-kit-vol-2-07_features

Features Section 02

divi-100-wireframe-layout-kit-vol-2-08_features

Features Section 03

divi-100-wireframe-layout-kit-vol-2-09_portfolio

Portfolio Section

divi-100-wireframe-layout-kit-vol-2-10_testimonials_and_brands

Testimonials Section

divi-100-wireframe-layout-kit-vol-2-11_team

Team Section

divi-100-wireframe-layout-kit-vol-2-12_pricing_table

Pricing Table Section

divi-100-wireframe-layout-kit-vol-2-13_contact

Contact Section

divi-100-wireframe-layout-kit-vol-2-14_cta

Call to Action Section 01

divi-100-wireframe-layout-kit-vol-2-15_cta

Call to Action Section 02

divi-100-wireframe-layout-kit-vol-2-16_cta

Call to Action Section 03

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

Call to Action Section 04

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

Call to Action Section 05

Tomorrow: Nick Accepts Applications for the Divi 3.0 Beta

In tomorrowโ€™s post Nick will be opening up our Divi 3.0 beta to new applicants. Weโ€™d like to add a pretty large chunk of new users to our beta testing group so if youโ€™re interested make sure to check out tomorrowโ€™s blog post and follow the instructions provided to make in into the group. See you there!

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 72

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

104 Comments

  1. Hi,

    can i add a picture from Divi or wordpress inside the tablet of “Call to Action Section 04”? Otherwise how i should do it?

    Thanks!

  2. The call to action button style, placement colors and overall scheme is just is really eye catching and unique. Keep up!! Want more like these.

  3. The forms appear different with misaligned button is there any css line for this?

  4. Guys
    Once Divi is of the hook you should really redesign your own page. I suggest Divi, cause is its easy to use :-).

    No but really, having all downloads including that great stuff out of the blog posts at one spot, would be awesome and helpful finding it.

    And why is the update pluging still not on the list of plugins?
    http://www.elegantthemes.com/blog/theme-changesbug-fixes/automatic-theme-updates

  5. This is the best training on all that you can do with Divi that I have every seen. I’m learning so much, it’s unbelievable. THANK YOU! Try as I might, I cannot find the Features 02 section — the one with the horizontal slider coming across the laptop screen… can you help me? I’ve looked in the singles section, the All, the wireframe kit, all of it. Aaagh! Please?

    • do all.zip upload and install the entire layout and look for the section you want … If you install only the sections is missing

  6. Seems that the call to action section 4 text is missing some CSS. The submit button shows up below the form field instead of to the right like in the sample show.

    • This is true! and Also some names wrong section!

  7. These are really Great Shares.
    I hope to see some similar for the other themes such as the Extra and Shop Style.

    Keep up the great work!

  8. Geee, one more pack so soon. Great!

    thx Mario

    • Beautiful work as always Mario

      Suggestion: in order for this to be truly fast and efficient I think layout thumbs in the library would be a real winner. Sure you could open the preview of the wireframe elements in other tabs to gander what they look like. However, thumbs would be intuitively smarter than relying on element title descriptions and memory… guess the bottleneck is that thumbs take up more memory and thus they may impact speed – but still…? ๐Ÿ™‚

      Know something similar has been suggested previously elsewhere in regards to the Divi library – and really think the same logic applied to modules etc would be a huge leap forward for Divi in terms of creational speed and usability…

      • my bad – would submit general comment – hit the wrong reply ๐Ÿ™‚

  9. Did you fix the problem with broken(?) file Mario~?
    It works all wonderfully after having re-downloaded/re-imported…

    Thanks for awesome kit !

  10. good morning,

    super nice layout ….

    I love divi. ๐Ÿ˜‰

    I have a small question on this layout, a section ‘HAPPY CUSTOMERS’ slider shows no Arrows …

    but on the module general settings Arrows: Arrows show

    and also you can see the Arrows in the picture of the layout of your blog …

    How can I fix this?

    Thanks in advance and good day

    Taia

  11. Awesome..

  12. Hello, I haven’t downloaded the pack yet but I am wondering in what is this kit different from the already example layouts included with Divi (except the pink color ?). Thanks.

  13. These 100 days are flying by, looking forward to using these wireframes!

  14. Awesome stuff guys.

    You are making it easier and easier for us to help our clients build elegant websites.

  15. All you need to do is download the JSON file and import into your Divi library or page,right?

    Regards
    Masha

  16. Hi,

    I’m super excited for the Divi 3.0. I’ve been on the Studiopress bandwagon for a couple of years now but now I’m ready to embrace something like Divi to save time and have more options.

    I would like to start reading the documentation on how to se Divi and I am wondering if all the documentation will change with 3.0? I don’t want to start training on how to use it now and find out the info will be outdated. thanks

  17. Awesome, once again. These Layout Packs have all been excellent!

  18. Hi Mario,

    Love the new layout pack, but I’m having some of the same problems others are having with the images not loading. Here is the path of one of the missing images.

    http://localhost:8888/wp/wp-content/uploads/2016/08/031.png

    What should I do.

    PS: Another idea for upcoming Divi day. Can you do some things with Divi and WooCommerce?

    Thanks!

  19. Thank you Mario, this is like sent from heaven, I actually might need to use it sooner than I thought!
    ๐Ÿ™‚

    • LOL ๐Ÿ™‚ – Happy you have found these resources useful, I hope you can get something that works with it! All the best for your project ๐Ÿ™‚

  20. Unfortunately, re-importing the All.json file did not resolve the missing images. Also, I renamed the Volume 1 sections so that Vol 2 won’t overwrite them.

    • Thanks for your feedback Jim B! Seems we’ve uploaded a broken file. We’re uploading the new fixed one, right now. I invite you to check in the next hours.

      Thanks in advance for your patience,
      Mario

  21. You guys keep releasing stuff faster than I can use it ๐Ÿ™‚

    • LOL ๐Ÿ™‚ – Thanks for your feedback!

  22. I think you forgot to change all the image urls from localhost:8888 before publishing…

    • Ditto..

    • Hey Benny, thanks for your feedback! This sounds weird. Please try to re-import the All.json file on your Divi Library. This should work as expected. Because It might happen as a temporary malfunction of the import/export. Anyway if you got other problems just let us know. Thanks

      • the file that i downloaded contains references to localhost:8888

      • Hi,

        Same thing here, Images not working in vol2 but in vol1 that was some thing smooth to install layouts and pictures all in one click very nice.

        Kindly fix it then re-upload with many thanks for your great work in this one and vol1 too.

        BTW is it allowed to use any images from your blog and site offers in my own commercial website as I’m using developer account here to sell WordPress design services on my website, I would like to use the animated GIF’s and themes and layouts,, etc.

        Thanks.

        • Sorry, seems weโ€™ve uploaded a broken file. Weโ€™re uploading the new fixed one, right now. I invite you to check in the next hours.

          Thanks in advance for your patience,
          Mario

        • there are 74 references to localhost in All.json

  23. What happened to all the comments from people and Mario’s repliesโ€ฆ?

    You will lose a lot of credibility if you simply delete comments with no reason.

    Assuming you will even allow this to standโ€ฆ!

    • I posted a question about whether I should start reading the documentation now or wait for 3.0 updated documentation and that post is now gone as well! Maybe it’s some type of technical glitch because I can’t think of any reason they would have intentionally deleted my post.

      • Now it’s back…very weird.

    • Hi Pat, I see all the comments there, did you found some discrepancy?

      We’re a note used to delete comments (with no reason especially ๐Ÿ™‚ )

  24. I loved this update, but it does not work ….

    The pictures do not show me, I get the broken icon.

    I tried to return to resubirlo but still does not work. I also believe that I have followed all the steps in the tutorial video.

    Thanks in advance

    • Sorry, seems weโ€™ve uploaded a broken file. Weโ€™re uploading the new fixed one, right now. I invite you to check in the next hours.

      Thanks in advance for your patience,
      Mario

  25. I’ve uploaded the Wireframe UI Kit Vol. 2 to my site (I had already uploaded Vol.1 without any problem), but all the images in Vol. 2 are missing.

    • Hey George, thanks for your feedback! This sounds weird. Please try to re-import the All.json file on your Divi Library. This should work as expected. Anyway if you got other problems just let us know. Thank you ๐Ÿ™‚

        • This may be a silly question, but is there a way to load layouts from the library to the bottom of the page. For example, I’ve added Vol 1 to a page. I’d like to add Vol 2 layouts below Vol 1, but that doesn’t seem possible. The default is for new layouts to be added to the top of a page.

  26. hi thanks for the wireframe, but i try to import the file all.json and no imports the images.

    • Sorry, seems weโ€™ve uploaded a broken file. Weโ€™re uploading the new fixed one, right now. I invite you to check in the next hours.

      Thanks in advance for your patience,
      Mario

  27. This kit looks amazing and I love it. However, it’s just an advert for ET/Divi. Could we not have this with Lorem Ipsum text instead? At least then it would be something useable I can actually show my clients.

    • @Mark – You sound pretty ungrateful about the whole thing. You can always edit it yourself.

      Or……you could just make your own if you’re not happy with it.

      Which one is quicker?

      • +1 IMHO, people seem to forget, or seem to not realize, how fantastic Divi was, is, and will become. It will probably never build a website automatically, which seems to be the natural extension of so many people asking for so many features, many of them really not needed. I don’t need an image that flips around when the Client hovers over it! I love Divi!

    • Hey Mark thanks for your feedback! The text should be editable as you desire, considering they are just simple text modules.

      Currently we’ve used this fake content in order to show a “potentially realistic scenario”. Something that we suggest everyone to do during their wireframe/prototype steps. In order to get a more real feeling during the initial tests.

      Anyway, I got that you would prefer have “Lorem Ipsum” text-content as default. So, we’ll meditate on it ๐Ÿ™‚

      • This was what I was describing, Mario.

        • As a marketer what Mario has done with the text is much better!! Because it guides us to think about our text.

          Lorem Ipsum will have zero relevancy to your clients ….so you will have to change it anyways.

  28. great stuff – when I preview – I am missing images. Any idea?

    • in the infobar – I just see a white box with a broken image and 02

      • Sorry, seems weโ€™ve uploaded a broken file. Weโ€™re uploading the new fixed one, right now. I invite you to check in the next hours.

        Thanks in advance for your patience,
        Mario

  29. Love all the modules you’re giving away – truly cool stuff!

    One tiny suggestion… if you could please include screen shots of each example in the download folder. That would be big time saver. Thanks.

    • I agree

    • Thanks for your feedback, we’ll take a note on it!

  30. Images are missing after import. Any idea what went wrong?

    • Hey Marco, sounds weird. Please try to re-import the All.json file on your Divi Library. This should work as expected. Anyway if you got other problems just let us know. Thank you ๐Ÿ™‚

      • Marco is correct, and the images are all showing as broken (missing) after import, even during the preview –

        Looking closer, I can see that the path for images is wrong, showing this for example, for one of the missing ones –
        http://localhost:8888/wp/wp-content/uploads/2016/08/01.png

  31. Nice freebies for sure, but Wireframes these are notโ€ฆ!

    These are predefined section layouts and even an example page layout but just done in a light blue colour to mimic a Wireframe system appearance.

    They don’t speed up your design, if anything they slow you down because they override the default site font and that all has to be changed if you decide to use a section on the build.

    A much better giveaway would be all of the shapes used for the sections, rows, modules etc as objects that we could use in Photoshop, Illustrator or other applications that uses layers for us to mock up our pages in true Wireframe style.

    • Hey Pat, thanks for your feedback!

      As reported on the first post:

      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.

  32. Thanks Mario! I’m really enjoying these wire frame kits!

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

  33. Hello Mario.
    Looking the video I saw you displaying the details of the wireframe in the arrow at up-left corner and then changing texts.

    So,I’am wondering, Mario, if we can do that and build the actual website from the wireframe wright away.

    Being more clear:
    – Can we make a wireframe and continue from it with the actual website over the wireframe?

    – Or, do we need to re-build the site apart from the wireframe?

    Interesting questions.
    If is so, it is really powerful !

    Anders

    • Hey Anders, The video has been recorded by the big Mak!

      Anyway, the initial idea that brought us to create these kits is related with the fact that you can use it to start designing a new website. So you can easily continue from it with the actual website over the wireframe ๐Ÿ™‚

      • Mario, this doesn’t exactly answer Anders’ question which is: How do we get from “wireframe” to finished product? Can the WF be modified to be “real” or do we have to recreate the wireframe in parallel using “real” Divi modules and sections?

        • Randy, I’ve been building a website using the Wireframe Kit, and have been replacing dummy text, images, colors with my own using the same modules from the Kit. It’s the same workflow as any other imported layout.

          To streamline the process, simply look at the dummy images in your Media Library (the ones you’re using from the Kit), and jot down their dimensions.

          Open your photo editing program and work with your images until they match the dummy dimensions. Replace the images in relevant modules and you’re all set. Animations, etc. are still in tact.

          Apologies for using the term “dummy” so often. I don’t want to give off the wrong impression, there’s nothing dumb about these Kits! =)

  34. Hey. It looks cool. I’ve got a great idea. Subject many sites associated with the business. Do something radically different. Build as an example a site associated with shamanism in South America. The shamans of the Amazon, huts, ayahuasca rituals.

    I’m even willing to use the site with reference to the elegant theme.

    • Maxim – you could build that, save to your library, download and then post for everyone else!

  35. I absolutely love the wireframe kits! One problem I have is the Divi language all over the fill text. If I’m going to show it to a client, then I’d rather it be vaguer and just focused on showcasing the layouts.

    Overall, I’m very happy with where Divi is heading and can’t wait for 9/7/16!

    • Kenny, that was my initial feeling also, but honestly, these two kits are so nimble and easy to implement that changing the dummy text to something relevant for your client is now where you can focus your energy.

      Your new dummy text might actually help them envision the final product, offer ideas, and get the creative juices flowing for content if they’ve yet to finalize copy.

      I’ve already half-built a website with Wireframe Kit 1, and I plan to build the rest with Wireframe Kit 2.

      Gorgeous stuff, thanks a ton Mario!!

    • Hey Kenny, what do you mean with ” I have is the Divi language all over the fill text”? Anyway I’m glad you like it ๐Ÿ™‚

      • I’m speaking about the title fill text that talks about Divi and its features. For example: “Create a beautiful Divi website. Start your free trial today.” on the screenshot just below the featured image on this post.

        • I see your point of view, anyway the text should be editable as you desire, considering they are just simple text modules.

          Currently weโ€™ve used this fake content in order to show a โ€œpotentially realistic scenarioโ€. Something that we suggest everyone to do during their wireframe/prototype steps. In order to get a more real feeling during the initial tests.

  36. Thanks a lot guys. You have made such a wonderful wireframe. More than ever It has made my life easier making presentations to clients.

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

  37. ELEGANTTHEMES ROCKS! I’m in love with all the new wire-frame designs!

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

    • Yeah same :/ If you look on the video for the zip file all is 980kb and when you download from here it’s only 280kb… Can we get a fix for this Elegant Themes pretty please!

    • Hey Rob, please try to re-import the All.json file. It should work as expected, with all the images shown up. Thanks ๐Ÿ™‚

      • Yup, I did and it fixed it beautifully. Thanks!

  38. thanks! it helps a lot… a suggestion to consider: it will be nice if we can have a preview of each block at the library, saves a bunch of time…

    • I support Alejandro’s suggestion. Having a way to preview the blocks will be great.

      • Chistian, obviously you didn’t see the video and didn’t see my comment either:

        ” Yes you can. Is obvious that you didnโ€™t see the video. Please look at the video and youโ€™ll know how to do it.
        : ) ”

        Anders.

        • Yes, it’s a nice feature we’re working on. Currently you can see only the preview from the “section” once you imported it on the builder.

          Thank you all for your feedback! ๐Ÿ™‚

        • Anders, it’s obvious that you didn’t see the video eitherโ€ฆ you can preview the sections whilst in the library but when you are actually using them in building a page and you go to add them you then have to remember what all the various sections look likeโ€ฆGood luck with that!
          ๐Ÿ™‚

          • That’s exactly what I meant, Pat, itโ€™s like it appears in the video. You can preview the section. I never said itโ€™s wysiwyg, like Divi 3.0 will be. Read well.
            Thanks for your insight.
            ๐Ÿ™‚

    • Yes you can. Is obvious that you didn’t see the video. Please look at the video and you’ll know.
      : )

  39. Excellent stuff..
    Are all these addons going to be included the Divi 3.0 update?

    • You’ll be able to download them whenever you need, but they will not included directly on Divi 3.0 – Thanks ๐Ÿ™‚

      • Thanks ๐Ÿ™‚

  40. Woo Hooo only 28 more days!

    • Yeah! ๐Ÿ™‚

  41. I am absolutely loving these wireframe kits! They help with creative layout ideas for my website redesign and speed things up tremendously. Thanks so much! Can’t wait for 3.0! ๐Ÿ™‚

    • So good to hear! ๐Ÿ™‚

    • What he said ^^

  42. Great looking wireframes.

    Thank you!

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

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today