Free Divi Layout Pack For Modern Homepages & Single Page Websites

Last Updated on September 22, 2022 by 119 Comments

Free Divi Layout Pack For Modern Homepages & Single Page Websites
Blog / Divi Resources / Free Divi Layout Pack For Modern Homepages & Single Page Websites
Play Button

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


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

119 Comments

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

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

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

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

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

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

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

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

  9. That’s a life saver! Thank you.

  10. Once again thank you, great layouts!

  11. Thank you for these. Any homepage layouts for authors coming? I can adapt — but I’m lazy… πŸ™‚

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

  13. Great +1 πŸ˜‰

  14. Saved me hours, thanks

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

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

  17. Awesome designs!

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

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

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

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

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

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

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

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

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

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

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

  27. These are awesome, love them all!

  28. 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 πŸ™‚

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

  30. 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! πŸ™‚

  31. Thanks for these great layout packs!

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

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

  33. It wont work at my screen – it just says “Remaining import-time 1 minut”(in danish) and then nothing happens πŸ™

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

  35. These layouts are beautiful. Thank you.

  36. Thank you guys for this!

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

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

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

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

    • 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 πŸ™‚

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

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

  43. Nice πŸ™‚

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

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

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

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

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

    • You can get it right now.

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

  47. Amazing!!! Thank you!

  48. Muchas gracias, excelente trabajo y magnΓ­fico regalo, Salu2

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

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

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

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

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

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

  55. Muchas gratias

  56. These are awesome! Thank you ET.

  57. Divi & It’s layouts are awesome πŸ™‚ Like Nick & his team

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

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

      • fantastic comment haha πŸ™‚

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

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

      • 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

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

    • Hi Eric,

      If you could, please open a support ticket for this and then send me a quick note to let me know that you did it. Thanks! πŸ™‚

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

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

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

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

  60. Super Cool!

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

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

  63. where are the demos?? i see no link or button that takes me to the demos πŸ™

  64. My Zip file (downloaded 5 times) is corrupt πŸ™ Can expand it.

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

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

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

  67. Love to see some live examples of these.

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

    • same problem here

    • 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

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

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

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

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

  71. Once again thank you, great layouts!

  72. awesome wordpress design… thank you!!

  73. Excellent Mario, looks pretty good!

  74. Beautiful Layouts, Thanks

  75. Thank you so much for those beautiful designs πŸ™‚

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

  77. Very tasteful design

  78. Toppie jongens!

  79. Excellent thank you!!!

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

  81. Thank you Mario and ET!

    (Feedback: My comment from before disappeared)

  82. 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. πŸ™‚

    • Agree ?

    • +1! πŸ˜€

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today