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

Last Updated on September 16, 2022 by 54 Comments

Download the Free Divi Landing Pages Layout Pack Built with Wireframe Kit Vol. 1
Blog / Divi Resources / Download the Free Divi Landing Pages Layout Pack Built with Wireframe Kit Vol. 1
Play Button

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


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

54 Comments

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

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

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

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

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

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

    • Awesome! Glad you have found these resources useful.

  5. Brilliant work guys.

    Love the layouts.

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

    • Awesome! I’m glad to hear that 🙂

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

    • I hope so also

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

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

    • Thanks Emanuele 🙂

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

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

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

    Import estimated time remaining: 1min

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

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

  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.

    • So good to hear! 🙂

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

    • Glad you enjoyed it! ?

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

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

    • Me too..

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

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

  20. Great stuff..

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

    Thanks!

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

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

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

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

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

    • Thank you +1

  26. Awesome landing pages. Thanks!

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

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

    • +1

    • +1 as well.

      • +1 too!

        • +1 .. that would be awesome

    • +1

    • +1

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today