Download the Free Divi Landing Pages Layout Pack Built with Wireframe Kit Vol. 1

Posted on August 15, 2016 by in Divi Resources | 54 comments

Download the Free Divi Landing Pages Layout Pack Built with Wireframe Kit Vol. 1

Welcome to Day 77 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-landing-pages-wireframe-kit-00_mockup

In today’s post we’re giving away a layout pack containing three new Divi Landing Pages, originally designed with the Wireframe Kit Vol. 1, and then finalized with content. The goal here is to show what’s possible with the new wireframe kits (while giving even more great layouts away, of course!).

Downloading & Using The Free Divi Landing Pages Layout Pack Built with Wireframe Kit Vol. 1

To use the Free Divi Landing Pages Wireframe Kit on your own Divi website you will first need to download it using the button below. Next, locate the file divi-100-landing-pages-wireframe-kit.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 files 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 Landing Pages Wireframe Kit on any builder powered page by going to Load From Library > Add From Library.

Subscribe To Download For Free

Divi Landing Pages Built From Wireframe Kit Vol. 1

The three stunning landing pages contained in this layout pack were originally created with the Wireframe Kit Vol. 1 and then finished in unique ways. We hope you enjoy these freebies and find within them some inspiration for how you can get even more great layouts out of our wireframe kits.

divi-100-landing-pages-wireframe-kit-01

Landing Page Layout 01

divi-100-landing-pages-wireframe-kit-02

Landing Page Layout 02

divi-100-landing-pages-wireframe-kit-03

Landing Page Layout 03

Tomorrow: Learn How to Add Creative Divi Section Backgrounds with CSS

In tomorrow’s post Nathan is going to show you how to add Divi section backgrounds with CSS. This method is great for anyone short of images, but it also ensures that whatever you’re designing is going to look great no matter what device someone is viewing it on.

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 77

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


54 Comments

  1. These are awesome! It would be great if you could create a walk-through demonstrating how you achieved these layouts starting with the wireframe components.

    Thanks,

    Scott

    • +1

    • +1

    • +1 as well.

      • +1 too!

        • +1 .. that would be awesome

    • +1

    • Mario Maruffi

      Hey Scott! Your idea sounds good, but I want to invite you to observe each section, and then compare the layout with the Wireframe Vol. 1 sections. In fact, you can easily recognize all the sections presented in the Wireframe Vol.1

      I didn’t change anything from them, they are simply customized with custom colors and photos. So, you can easily re-create a full page without too much effort 🙂

  2. Awesome landing pages. Thanks!

  3. Randy A. Brown

    Thanks Augustine! These are some nice layouts and they show great ways to use the wire-frame kits. I especially like layout 01.

    • Augustine Mak

      Thank you +1

  4. Beautiful and very helpful. Thank you. I was about to start designing a landing page.

  5. Hello,

    your landing pages are really beautiful! Is it possible somehow to add content or a button that shows up a bit delayed?

    Thanks
    Jay

  6. Great Stuff – will definately be able to use these.

  7. Great just great!!! I love all the work you have done so far tank you ET you’r the best

  8. Great stuff..

    I like layout no. 1 and will use it on my next project.

    Thanks!

  9. I have never used ‘wireframes’ for designing pages, BUT now I will!

    It looks like an extremely powerful way to build sites.

    I want to try building some of these myself, so could you tell us:

    1) what software you used to create these examples (or you recommend) and
    2) give us a brief demo of how you created one of these examples (or a new one 😉 )

    Much thanks guys for taking the time and effort to show us how to get the most out of your products!!!!

    Dean

  10. Sorry, just to be clear – I mean the ‘wireframe’ software, not the website design software (which is Divi of course).

  11. I got error… unable to unzip. The archive is broken…

  12. They are so beautiful! Thank you. For the menu result do we have to tweak them manually to achieve that design? Always when I import a layout, my menu style remains the same. And another thing: it’s the second time I’m having trouble with Safari browser not rendering the website it properly. Could it be a Divi issue?

  13. Thank you for the awesome layouts !
    For some gorgeous colors & Star icon too. 🙂

    • Mario Maruffi

      Glad you enjoyed it! ?

  14. I’m a big fan of Divi, Nick and team are rocking with the 100 days of awesome stuff. Thanks for publishing this landing page pack. I can’t wait to check them out.

    • Mario Maruffi

      So good to hear! 🙂

  15. Thanks for the wondering landing page layout. I can’t wait to check them out. Please keep posting such awesome stuff. I look forward for the next.

  16. I think these look great, thanks for the inspiration.

  17. Mine’s just sitting at the following forever…

    Import estimated time remaining: 1min

      • Unfortunately, none of these suggestions worked, including disabling all other plugins. Still couldn’t import them.

        • Hi Mike,

          Die you increase both PHP Mem limit AND upload limit on your (shared) server. Ask your host to help you if needed. For (plus the addition to .htaccess and wp-config file) me it solved the problem.

          Hope this helps you.

    • Mine too. I made the changes to the php.ini file to this:

      upload_max_filesize = 50M
      post_max_size = 50M
      memory_limit = 256M ; Maximum amount of memory a script may consume (64MB)
      max_execution_time = 300

      and still not wanting to Import #1, the other two imported fine after making the changes.

      • Unfortunately, none of these suggestions worked, including disabling all other plugins. Still couldn’t import them.

  18. Hey great layouts! How did you get the transparent nav bar across the top with the call to action button?

    After loading your template, this section is not included.

    thanks

    • I would like to know this too!

  19. Awesome as always! Thanks Mak and the ET crew!

  20. Very nice I can see a touch of Italian style 😉

    • Mario Maruffi

      Thanks Emanuele 🙂

  21. How do you change the text on the button in the contact form from “submit” to “start free trial”?

  22. Hope all these downloads will come in one big package on the last day cause I can hardly keep up! 🙂

  23. Brilliant work guys.

    Love the layouts.

    We will be using these new layouts on a lot of new projects coming up.

    • Mario Maruffi

      Awesome! I’m glad to hear that 🙂

  24. Great Job, I will use this theme for my landing page.

    • Mario Maruffi

      Awesome! Glad you have found these resources useful.

  25. Thank you Augustine, these look great!

    I’m stuck with a thought though, you might be able to shed light on it.

    The wireframe kit (WKIT) is a collection of pre-made layouts/modules right?

    You mention in the title that these layouts are built with WKIT. How does this save time? The kit seems an extra layer. Or does it do something the builder cannot by default?

    Hope this makes sense.

    • Mario Maruffi

      Hey Verdi, these layout pages are based on the wireframe kit sections. In fact, if you observe each section, you can easily recognize all the sections presented in the Wireframe Vol.1

      I didn’t change anything from them, they are simply customized with custom colors and photos. So, you can easily re-create a full page without too much effort.

      This save time for sure because you’ve too choose only the sections you need, then focus on the choosing of colors/images and content and there you are! 🙂

      • Thank you for explaining Mario!

        This does make me wish for a future where this ‘flow’ is integrated. Same goes for all the (CSS) tips and tricks here on the ET blog. The more I see, the more I;m impressed with everything you can do with Divi, but also the more I wish these options where just built in.

        Also makes me think about the modules with certain settings, you’d wish where in every module. Ofter you have to find a CSS solution for a setting that’s already present in another module (but can’t be used for your purpose.

        Which all comes back to the biggest need of all: Being able to truly separate content from design when working with Global modules.

        Am I making any sense?

    • Hi Verdi, just like you I was stuck with the same thought as soon as they started talking about ‘wireframe kits’ and I also did not see any difference to standard layouts comprising a collection of modules, apart from the fact that no images or backgrounds were used. In fact, there does not seem to be any other difference to layouts or modules created and shared by anyone else.

      Someone mentioned earlier (in the comments thread of day 65) that:

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

      Yet there was no response from the ET team. I can’t comment as I have not used the wireframe kits yet. What is your experience with regard to this?

  26. Where can I find the documentation how to add a button in the header menu as in the layout 1 example?

    • Did you get any response from Augustine or Mario on this elsewhere?

  27. Beautiful! LAYOUT 1: Having trouble finding the main image… the one with the sneakers out the window of the building… where is it in the Divi layout? Want to replace.
    cheers

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