Elegant Themes Blog

Stay up to date with our most recent news and updates

Free Divi Layout Pack For Modern Homepages & Single Page Websites

Posted on June 6, 2016 by in Divi Resources | 119 comments

Free Divi Layout Pack For Modern Homepages & Single Page Websites

Welcome to Day 7 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!


After the release of Divi 2.7 and the Divi Portability System, pre-made Divi Layouts have become incredibly powerful. Divi layouts can be quickly imported onto your site, including all custom design and images, and then added to your pages in just a few clicks. You can think of Divi Layout Packs as mini Child Themes for Divi – child themes that are really easy to make and even easier to use!

Today we are happy to release a brand new layout pack full of modern homepage designs, created just for you. These layouts are absolutely beautiful, and they are shining examples of just how unique a Divi site can be if you take full advantage of the builder’s vast array of design settings.

This layout pack includes three unique homepage designs. Each has been built using a cohesive style, customized using the Divi Builder’s advanced design settings and custom CSS to create a truly unique appearance. Each homepage variation was built to serve a different niche, although each includes basic elements that might be useful in just about any type of site. These are great starting points for your next client project!

Downloading & Using The Layout Pack

Click the link below to download this layout pack. Once you have downloaded the .zip file, double click the .zip file to extract the contents. This will reveal the layout pack in the form of a .json file. This file can be imported into your Divi Library using the Import system as outlined in this tutorial. Simply log in to your WordPress website and navigate to the Divi > Divi Library page. Look for the “Import/Export” button at the top of the page and import the .json file using the Import tab.

Subscribe To Download For Free

A Homepage For Enterprise Businesses

The first homepage design focuses on enterprise businesses. The colors are a combination of professional and and neutral blues and grays, combined with matching images that imbue that “big city” business vibe. The layout includes an attention-grabbing call to action above the fold, followed by a classic grid of icon/content blocks. Below that you will find the perfect place for an “about us” video, followed by company stats and the ever-present logo reel. No homepage is complete without a little social proof!

01

01-01

A Homepage For Design Agencies

The second layout in the collection focuses on the needs of art studios, photographers and design agencies. This homepage is a bit more fun and vibrant, featuring organic visuals and complimentary colors of pink and green. The call to action at the top of the page includes a contact form so that you can quickly grab leads. Farther down the page you will find a custom gallery built using gutterless/full-width rows. If you have been thinking about re-designing your own web design agency’s website, this might be a good way to kick things off!

02

03-03

A Homepage For Local/Lifestyle Businesses

The third design focuses on local lifestyle businesses. Here you will find warm and welcoming colors of orange and yellow. At the bottom of the page, a map module and custom text modules have been used to create the perfect “about us” section for local businesses. The chances are, if a visitor has stumbled upon a local business’s website, they are probably looking for location/contact details! We have also added a custom FAQ section built using the toggle module.

03

02-02

Stay Tuned for Two New Divi Layout Packs Every Week During Divi 100

If you’ve enjoyed the two layout packs we’ve released in this post series so far then you’re going to love what we have planned for the weeks ahead. Every Monday and Wednesday we will be sharing a new layout pack that I’ve designed just for you. Be sure to subscribe to our email newsletter so that you don’t miss a thing!

divi-2-6-logo

Divi 100 Day 7

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


download divi

119 Comments

  1. I love coming here every day and see what you guys come up with. I get inspired by your creativity, and I have so many ideas I want to try out. I need more websites to try them all on… 😀

    Thank you for what you guys are doing. So-so-so happy I stumbled on ET and Divi. 🙂

    • +1! 😀

    • Agree 😀

  2. Thank you Mario and ET!

    (Feedback: My comment from before disappeared)

  3. Great little one pagers. Keep em’ coming! Looking forward to Divi 3.0.

  4. Excellent thank you!!!

  5. Toppie jongens!

  6. Very tasteful design

  7. Hey, Divi is the best. I’ve just about given up using anything else… Thanks, you guys rock!

  8. Thank you so much for those beautiful designs 🙂

  9. Excellent Mario, looks pretty good!

  10. Once again thank you, great layouts!

  11. Awesome. Thanks for all these great free resources!!! You guys are the best!!!!

  12. I love Divi. I’m stuck on something though. How did Layout #1 “Enterprise…” get two buttons on the slider? Thanks for all of the awesome support.

    • I don’t think it’s a slider, just a background

    • +1 on that question. In the pic above it has 2 buttons but when I installed it only has one.

      Awesome pack tho! Divi all the way

      • Full screen header has 2 buttons I believe! You have to complete the field in the settings!

        • You are absolutely right! Fullwidth header has 2 buttons. However the Homepage #1 layout came with a fullwidth slider so we have to change it to header and make the necessary changes to get it the same as shown above.

  13. Yep! It rocks!

    I’m wondering if some elements are not missing in the homepage 3. It seems to miss some images.

    Somebody can confirm this?

    Thank you.

    • Hi YesPapa.

      yes it seems that some images are missing in the homepage 2 and 3. I’d really like to know how Mario have done to place 6 images (missing in the template) in the gallery in a row of 980px with text to the left.
      I’ve tried to reproduce it without any sucess :)…
      Anyway, thanks a lot for the great share ressources and thanks in advance to light my way with this information 🙂 !!

      Amicably,

      Pierre

    • same problem here

  14. Love to see some live examples of these.

  15. wow, ElegantThemes – YOU ROCK

    Even if I do not use them for my own purposes right now I will download and install them because they also serve a perfect learning experience (so much to discover ’bout Divi)

    🙂

    Rock On!

  16. wow, ElegantThemes – YOU ROCK

    Even if I do not use them for my own purposes right now I will download and install them because they also serve a perfect learning experience (so much to discover ’bout Divi)

    🙂

    Rock On!

  17. My Zip file (downloaded 5 times) is corrupt 🙁 Can expand it.

    • Exited my browser, and tried again….. all works! thanks

  18. where are the demos?? i see no link or button that takes me to the demos 🙁

  19. is it possible to modify the color scheme?

    • Sure, you can customize anything in Divi. All of the controls for each element can be found in the settings popup. Most design controls can be found in the Advanced Design Settings tab.

  20. hi just a beginner’s question, can i use these templates with Divi template or Divi page builder plugin??

    • You can use them with Divi and the Divi Builder plugin 🙂

      • Can we have some templates for eshops please?

        • Yes, this would be awesome!

  21. With all the products and services my company uses each year, the best investment thus far, has been Divi by elegantThtmes. Kudos to the Divi team and a shout out for helping us continue to improve our business offerings as well as continually improving on an already solid product.

    • Zeus, I TOTALLY AGREE WITH YOU!

  22. Man, I would love to use some of these freebies that you guys are so graciously providing, but none will upload. My memory parameters are set to your suggested settings, but I can never get past 1%. Anyone found a solution to this that is not related to upload size?

    • Eric, are you extracting the contents from the ZIP first?

    • Hi Eric, with the previous layout on day2, I had to disable all my plugins, load the layout then re-activate all my plugins.It was the only way for me to upload the layout.

    • I have tried to upload them on two different servers, a localhost server and 1% is as far as it will go. I have tried disabling plugins, changing from child theme to plain Divi theme, empty caches but I just give up.

    • I had the same issue even though memory limit and upload size were sufficient. I had to also increase max_execution_time = 2500 in php.ini. Contact your web host if you’re not sure how to make this change.

      • Well Brian and Sabine I wish we never had to do stuff like that to get stuff like this to work.

      • This is the solution that worked for me, thanks to some assistance on the Divi Theme Users FB page:
        1. Rename the json file “Divi Builder Layouts.json”
        2. Don’t import via the page. Instead, go to Divi > Divi Library and click the import/export button at the top. Then you should be able to load the file into the library without a hitch!
        3. Then simply go to your page you want to load the layout into and use the add from library feature.

        • What if i do not have the import and export tab in my Divi library ?

          I only have “Manage Categories” Tab & ” Export Divi Layouts Tab” above

    • Thanks all for responding. After doing what Sabine had suggested and turning off all my plugins, I was able to load the first of the layouts. I wept with happiness thinking my on-line ills had been cured once and for all. But my glee was short lived as I attempted to upload the second. The progress bar once again failed to move pass 1%. I raised my fists to the heavens and shook them angrily screaming, “Why do you mock me so? What have I done to offend thee?” After my wife applied a cool compress to my furrowed brow to calm my ire, I decided to move on and edit some text on a page of my site.

      Before leaving my dashboard I attempted one last time to upload the second of the three layouts. 1% increased to 35 and finally 100. Success! Tempting fate, I wondered if I might be thrice blessed… only to be foiled again by the pesky internet gremlins. However, after reviewing the commonalities of the first two uploads, I settled on that the fact that I had opened the Divi Library page anew on each successful upload. Could it be that easy, I queried silently to myself? I tested my theory by refreshing the page then trying one last time to complete the hat-trick. My efforts were rewarded with another complete upload. My immeasurable joy is tempered by the confusion as to what manner of internet alchemy actually allowed me to complete this seemingly simple task. Was it really the refreshing of the page? Was deactivating the plugins a necessary step? I will leave such questions to others more qualified to answer. For now I will just celebrate the fact that Ican utilize some of the great design elements assembled by the fine folks of Elegant Themes.

      • Lmao, Eric you must be an excellent writer or storyteller. Your comment actually had me engaged and wanting to keep reading thanks to your visual and descriptive wording.

      • fantastic comment haha 🙂

  23. Divi & It’s layouts are awesome 🙂 Like Nick & his team

  24. These are awesome! Thank you ET.

  25. Muchas gratias

  26. Great Work, I like color combination & Image selection

  27. Do the photographic images come with the new themes?

  28. The ET value just keeps growing! And it’s just day 7!!! These will not only increase productivity, but they are also inspiring! Thank you!

  29. Please consider adding more than 4 columns to Divi.

  30. Nick, I’ve been a member of Elegant Themes for a few years now. I love the progress you’ve made over the years to create such awesome templates. I appreciate so much your generosity of this 100 days promotion. Very cool.

  31. Another awesome addition…thanks!

    One question…I imported the All.json file. I assume this means I don’t have to also import the 3 home pages separately? Just want to clarify.

    Thanks!

  32. Amazing!!! Thank you!

  33. Nick, these layout are great and they are appreciated. I sure would like to see a full width testimonial layout like the full width Portfolio using the circle images and the testimonial copy in place of portfolio featured image. Or maybe even a module like that, a super testimonial module.
    Thanks

  34. Will these come with 3.0 or do we need to grab them now?

    • You can get it right now.

    • As far as I understand, they won’t come with 3.0 – these are only up for grabs right here in the blog. 🙂

  35. How would you achieve the transparent menu look? I have uploaded to my current setup but i still have a solid coloured menu. Thanks.

    • Great question! I would like to adjust the opacity of my header as well… How did you achieve this in the sample of Homepage #3?

    • Hey Andrew, check out the Groups on Facebook, Divi Theme Tutorials and such we answer this stuff free mall day you’ll love it there. The ET post 2 days ago lists 5 groups for you to check out. Come on by!

  36. Nice 🙂

  37. Will these layouts be put somewhere accessible where we can download them in future if we so wish?

    Also, will there be demos available? I note that some other people have mentioned this but do not recall seeing a response.

  38. Is it possible to have that contact form go to a CRM/Email tool like Hubspot?

  39. Beautiful layouts! I can’t import any json files. It always comes up with the following error message: “the file cannot be imported in this context”

    I’ve seen this issue floating around with a lot of other Divi users, but I can’t seem to find a solution that works.

    • I don’t think I’ve ever gotten that error except when I´ve tried to import the file directly from a page using Divi builder but when i use the divi library and load it directly from there there are never any problem. Idk if this is to any help but I was thinking that it cant hurt to write it 🙂

    • I ran into that problem and I realized that I forgot to extract files and was importing the .json file directly from the zipped folder that got downloaded.

  40. Anyone know of the quick solution to get these layouts to actually be fullscreen using the Extra theme?

    • I am looking for the same thing

  41. Thanks! for these beautiful innovations. Have been using ET themes for 6.5 years. So happy to be in this community! Appreciate all of you at ET.

  42. ET’s Business Sense is in tact. Your value proposition is great. Thank you for empowering someone like me with tools for earning a living. Great Company.

  43. Thank you guys for this!

  44. These layouts are beautiful. Thank you.

  45. Would it be possible for layouts to support screenshots/thumbnails?

    Maybe added to Divi 3.0 or 3.1? It’d be nice to be able to quickly see what a layout looks like without having to refer to the website that includes a screenshot.

    • Would that slow performance of the website??

  46. It wont work at my screen – it just says “Remaining import-time 1 minut”(in danish) and then nothing happens 🙁

  47. Can I upload it via FTP? Keep having a wp upload limit issue which I can’t resolved.

  48. Thanks for these great layout packs!

    Is it possible to use the contact form to capture emails and send them to the email list?

  49. For those having issues uploading the .json file and using NGINX as webserver, you can try these:

    1) For the “1% stuck” issue, include “client_max_body_size 10m;” to your nginx.conf file

    2) For the “67% stuck” issue, include the following into your nginx.conf file:
    proxy_read_timeout 120;
    fastcgi_read_timeout 120;

    Hope it helps! 🙂

  50. This is better than birthdays and Christmas ! :D:D So grateful and you guys do amazing work! Thank you so much <3

  51. I find myself refreshing ET’s Blog page every 15 minutes for the last hour, just to see if day 8 is already there..

    Now that’s a good sign 🙂

  52. These are awesome, love them all!

  53. Quick question: how do you create the header menu like the one in the images.

    • Nathan B. Weller

      In the customizer settings you can adjust the level of transparency.

  54. I am enjoying opening each of your 100 day emails. I suppose that is the whole point. But, these are great resources and I have no doubt you have planned a great collection to come. One thing that comes to mind, if you haven’t already figured this out, I am concerned that there is going to be so much goodness that we won’t be able to keep up with where everything is, or have an easy way to stroll through these to get ideas. So, what is the best way to catalog all your resources in a way that we can take advantage of the possibilities?

    • Nathan B. Weller

      We’ve actually created a brand new category on the blog called Divi Resources. All of Divi 100 will be located there.

  55. Thanks for sharing the great layout packs. Surely I’ll try few of them.

  56. Thanks! You guys rock! I am a FOREVER LOYAL CUSTOMER!!! =)

  57. I tried to upload the json files one at a time but they aren’t uploading, just hanging. So need to find another way to upload to the directory. Can I upload them directly to a folder?

  58. Great layout pack ever i have seen!I’m an executive user of DIVI.Thanks for sharing.

  59. Hi Elegant Themes

    Thank you for the wonderful freebies.

    Kind request: Could you perhaps include a “LIVE EXAMPLE” of the Layout packs so it is easy to view what it looks like.

    Thanks!

  60. Hi, great layouts guys! However, one question, how can I load one of the layouts? I mean, when loading the layout it loads a page that is different to the 3 pages explained above.

    Thanks

  61. Stupid question.
    In the Maker Header #1 how did you get the 2 buttons?
    I thought there used to be an option for turning it on and I cant seem to find it?

    • I have the same issue. I’d love to know how to do that. I only see one when I imported the layout. Thanks.

  62. Awesome designs!

  63. I would love to see more templates like these… I build websites for businesses so normally they have pages like – Home, About, Services, Contact Us
    It would be cool if you could include templates for those more common pages.
    Thanks guys!!!

    • — Sent from iPhil/Gmail Mobile. Please forgive any typos.

  64. Great creativity. I love this website. My imaginations flies high. Thankyou guys…

  65. Great +1 😉

  66. Thank you for these. Any homepage layouts for authors coming? I can adapt — but I’m lazy… 🙂

  67. Once again thank you, great layouts!

  68. Hello,
    when I can not install the extension. It provides a system error. “Are you sure that you want to install? Link: Please try again

  69. So I’m also getting long loading times with only 29% downloaded. Instead of the all.json file. Could the individual .json files be uploaded one at a time?

  70. How can I make the navbar as in example #1?

  71. This is unbelievable, Thanks a ton for these wonderful resources, I am in love with the 100 Days Marathon Idea!

  72. thanks for all the tutorials, strange question, what software did you use for this to record your screen for the tutorial?

  73. Hiya! Loving all these goodies <3

    At the moment, I need help please. I'm building a sample page to show clients an example of a one-pager using these three templates.

    http://divawebsites.com/car-repair-shop-sample-website/

    The problem is I've uploaded them into a website that already has a child theme. So now, some of the stuff in the child theme are showing up in these one-page templates

    Can you tell me how to remove the text overlay behind the slider's text "brisbane auto services"?

  74. On the Be Linked layout example above, there isn’t an option in the Advanced Settings to change the text on the Contact Form button.

    In the example above, it says “Join Today.” The button on my version is “Submit” as default.

    Is there a way to change the button text to “Subscribe”?

  75. Bugger. After getting past the errors by updating the pHp settings, I’m getting that 1% bug now. Tried disabling plugins, ensuring I wasn’t on a child theme, refreshing the divi library page, renaming json file; but it just won’t work and keeps staying at 1%.

    Anymore tips?

Join 385,236 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This