Free Divi Split Screen Layout Kit

Posted on July 6, 2016 by in Divi Resources | 178 comments

Free Divi Split Screen Layout Kit

Welcome to Day 37 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-split-screen-layout-pack-mock-up

One interesting trend in web design this year has been split screen design. There have been many fun iterations on this simple idea floating around and so we thought we’d not only get in on the action but help our community join the fun too. Today we are pleased to be giving away a brand new Divi Layout Kit designed to boldly display articles, pricing options, feature lists, and anything else you can imagine.

Downloading & Using the Free Divi Split Screen Layout Kit

To use this layout pack on your Divi website, download the layout’s zipped folder. Locate that zipped file 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 a file from the folder you unzipped a moment ago called “divi-100-split-screen-layout-kit” and then click the blue “Import Divi Builder Layout” button.

When the import is complete you will now be able to use the above layout on any post or page by selecting it from Load From Library > Add From Library within the Divi Builder. Additionally, the “components” file, once imported will be available for you to use from the “Add From Library” option next to the section controls within the Divi Builder.

Subscribe To Download For Free

Get These Unique Split Screen Layouts

The designs below include two featured article layouts, one featured list layout, and one pricing table layout. But of course you can feel free to mix and match elements, replace content, or simply branch out using the same general concept to come up with an endless supply of unique variations all your own.

divi-100-split-screen-layout-pack-00

divi-100-split-screen-layout-pack-01

Split Screen Design 01

divi-100-split-screen-layout-pack-02

Split Screen Design 02

divi-100-split-screen-layout-pack-03

Split Screen Design 03

divi-100-split-screen-layout-pack-04

Split Screen Design 04

Tomorrow: Nick Roach Shares New Details about Divi 3.0

You won’t want to miss tomorrow’s blog post as Nick will be sharing another sneak peek of Divi 3.0. This sneak peek will focus on the new inline editor coming to the front-end builder. One of many new features we’re excited to get into your hands. Stay tuned!

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 37

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


178 Comments

  1. Thanks guys, looks great but download link is broken… 🙁

    • Nathan B. Weller

      Sorry about that Miko, the link is now fixed. You can download the layout kit.

      • 100 different ways to apologize. You are a champion Nathan!

  2. Something’s wrong with this post. Can’t download divi-pack and when i want to refresh it says 404 error

      • thank you Ryan!

    • Nathan B. Weller

      Sorry about that. 100% my fault. I left off the .zip file extension in the link. It should be fixed now.

  3. The download link is broken. 😉

  4. Thanks a lot for these! I love the large background image on the left. They look great to use with an online product.

  5. Love the layouts, but the files should be uploaded first, before the page where they are offered for download…. just sayin.

    I am sure the files will be uploaded shortly, and I will be back to download it. Thank you for making the Divi 100 countdown something we can look forward to each day.

    • I will reply to my own post, but not because I like talking to myself, that is an entirely different topic. ; )

      The file is there, but the .zip extension is missing, so just add that to download it. I am sure it will be corrected soon, but you can use this method until that time.

      • Yep .zip at the end did the trick

        Cheers

      • Thanks for the tip 🙂

    • Nathan B. Weller

      Hi James, obviously I completely agree. I had a typo when entering the download link for today’s post and left off the .zip extension. Sorry for the confusion. It has since been fixed.

  6. Hi Nathan,

    The download link goes to an error 404 🙁

  7. Hi! Awesome post! But the link is broke.

  8. The download link isn’t working…

    • Nathan B. Weller

      Thanks for the heads up Alex, the link has been fixed.

  9. Divi is the best WordPress theme i’ve ever used. Really happy with this new addition. can’t wait to see more.

    • Nathan B. Weller

      Thanks! You should now be able to download the layout kit.

  10. Download link wasn’t working. Got it to work by adding .zip to the end. Just a heads up.

  11. Thanks ET! Excited to download and test, but the download link does not work

    • Nathan B. Weller

      It’s fixed now. Thanks for reading and hope you enjoy the layout kit!

  12. You guys are rocking it. But, the download isn’t working

    • Nathan B. Weller

      Thanks Garnette, the link had a typo when the post went live. It’s been fixed now though and you can download the layout kit.

  13. Hello.
    Nice work. Thanks a lot
    The link is not working.

    • Just when I was working on a split screen project 🙂
      Great design, as usual.

      You guys rock!

    • copy the link and add .zip at the end.

  14. The link to the download does not seem to work. I get a 404 message when I click on the link.

    • Nathan B. Weller

      Yes there was a typo when the post went live. It’s been fixed. You are now able to download the layout kit.

  15. The link for the Layout Download is broken….

  16. Beautiful. I like it

  17. Are there any live examples of this working? I haven’t seen anyone use split screen yet.

  18. Just add .zip at the end of the download URL 😉

  19. Just add “.zip” to the download URL and it will work

  20. Sorry, but the download link does not work for me

    • Nathan B. Weller

      Hi Dale, there was a typo in the link when it went live. It’s been fixed now. You can go ahead and download the layout kit.

  21. .zip is missing on the download link

  22. Link is not working to the layouts.

  23. Download’s link are broken.

  24. Wonderful! But the link don’t work… Alberto

  25. I can’t download this, when clicked on the link, it says: “This page does not exist”.

    love ur work.

    • Nathan B. Weller

      Thanks Frank, small typo. It’s been fixed now. You can download the layout kit.

  26. Looks like the link does not work, 404 This Page Does Not Exist

    • Nathan B. Weller

      Yeah sorry about that, there was a typo in the download link. It’s been fixed now though.

  27. Let’s see who get’s into the ET office early. Update before or after the first coffee ?

    • Nathan B. Weller

      Haha, definitely a first coffee mistake! It’s fixed now 🙂

  28. When I try to download 🙁

    This Page Does Not Exist
    We’re sorry, but it appears the website address you entered was incorrect.

    • Nathan B. Weller

      Hey Marco, it was a typo on the link. Forgot to add the .zip extension. It’s been fixed now though so you can download the kit.

  29. Hi,

    The download link isn’t working. Takes me to a 404 page. I’m using FireFox if it that matters.

    Thanks,
    Brandon Davis

  30. Fix the link to the download please..

    • Nathan B. Weller

      Hi Richard, thanks for stopping by. The link has been fixed.

  31. Hi Nathan,

    Something’s wrong with the download link as it says page does not exist.
    Love the DIVI 100 marathon, great tips and resources.
    Thanks,

    Pablo

    • Nathan B. Weller

      Thanks Pablo. My mistake! Left off the .zip extension. It’s been fixed now though and you can download the layout kit now.

  32. To echo other comments, it says the page does not exist.

    • Nathan B. Weller

      Thanks Simon, there was a typo. The link has since been fixed. You can download the layout kit now.

  33. MESSAGE
    This Page Does Not Exist
    We’re sorry, but it appears the website address you entered was incorrect.

    The same.

    Regards,

    Aat

    • Nathan B. Weller

      Hi Aat, sorry about that. The link has been fixed. You are able to download the layout kit now.

  34. Amazing. Awesome. Thank you! Just what I was looking for today! But….. the download link is broken. 🙂

    • Oh! Just saw the solution above to add .zip. Downloaded! Thanks. 🙂

      • Nathan B. Weller

        That was the issue! It’s been fixed now though 🙂

  35. Thank you for all the amazing resources!!!! Loving it. The download link for this one doesn’t work…

    • Nathan B. Weller

      Thanks Saretha, the download link has been fixed. You can now download the layout kit.

  36. The kit’s download link is broken (9:30am CST).

    • Nathan B. Weller

      Thanks Cary, there was a typo. It’s been fixed now.

    • Nathan B. Weller

      Hi Marco, it’s there. There was a typo in the link. It’s been fixed now. Download away!

  37. Looks like the download link is broken.. 🙁

  38. Y’all need to copy the link and add .zip at the end

  39. Hi!
    Download link does not work.

    Also. Great work guys!

    • Nathan B. Weller

      Thank Kacper, it’s been fixed now. You can download the layout kit.

      • Hi, Nathan.

        I am trying to export the Library but the progress bar stays idle at 1% and nothing happens. Whay could be the reason?

      • Never mind, I fixed it.

  40. Link doesn’t work

  41. The Link reports “404 – This Page Does Not Exist” ??

  42. Hi,
    The link to the pack isn’t working.
    Please can you check it out for us?
    Thank you

    • Nathan B. Weller

      Hi Leonardo. Sorry for the confusion. There was a typo in the download link. It should be fixed now. You can download the layout pack.

      • Thanks Nathan! i like this and i hope Divi 3.0 🙂

  43. Download link not working

    • Nathan B. Weller

      Sorry about that. There was a typo in the link. It’s been fixed now though.

  44. This is frickin’ fantastic… an in your face Pricing Tables! Cool, useful and explosive. I Love Divi!!

  45. anyone know who to do 3full width columns in a row? like this? thanks

  46. Hello,
    When i upload (import) the json file of layout in my divi library of my site, it just says 1% and over 30 minutes nothing uploaded.
    Regards,
    Yakin.

    • Same is happening to me

      • I closed the page, did some other things and have now come back. The components have loaded fine and are usable. The kit seemed to load fine but is not showing when I choose it from a page.

  47. Love the kit but it seems to be trying to access files on localhost:8888. Lots of references to that in the components json file

  48. Hey guys, absolute great layout. One question. Where can i setup this:

    .et_pb_row, .et_pb_column .et_pb_row_inner {
    padding: 0 !important;
    }

    I can´t find the right fields in the builder for each row.

    • Use Google Chrome, hit F12, or hover over stuff, and it will show you the exact names of the DOM items.

  49. Love this kit! I was just building a site with split screens too! It would be awesome if you guys can create a “Form Kit” with various styles and field options.

  50. Anybody know how to do a split screen in which the separation is diagonal, like in the visual for above YouTube video and only using CSS?

  51. Good work, nice layouts, sure I’m gonna use them, However…
    When saving a section and re-open it as a new item (import from library), I can only choose from 4 layouts: splitscreen pricing tables; splitscreen blogpost 2; splitscreen features; splitscreen blogpost #1

  52. Hi there! Awesome layout!
    I notice that on your designs the top menu is part of one of the splits but when I apply the layout the menu is still in the upper part as a white bar.
    Is there a way to integrate the top-menu as part of the left split area as shown in your captures?

  53. Hey Nathan, great post.

    Oh and the download link is broken! ???

  54. GREAT PACK – thank you so much 🙂

  55. See, it’s stuff like this that makes me glad I am a lifetime member.

    Thanks!

  56. This is really nice. But the coolest feature showcased (imho) isn’t the split screen! It’s the split menu.

    How do you get the first 4 to be on the left with the logo while the “Login” and “Sign up” stay in the default position?

    • also want to know about this !

  57. I tried to import the layout kits, it is not working. It will let me import the kit and all but the components fail to be imported. I tried watching the tutorial video and did everything exactly like in the video and still doesn’t work. Please help.

    • +1 I downloaded the Kit and the Components. The kit loads, but without images. And I can’t find the Components in the Library, even though it appears they downloaded correctly. This morning I can see neither json in the Library after downloading the Zip anew today. Yes, I waited until After the green Check Mark, and Until the page refreshed itself. Any ideas?

  58. Nice layouts but the images point to a localhost:8888 so they don’t show. Any chance you can fix and re-upload? Thanks.

  59. I tried importing the components but nothing show up. After it says importing successful, the page refreshes and nothing happens. Please help.

  60. Thanks for all the encridable effort and hard work can make one request bwe need a good questions and answers module fourm one that can connect with woocommerce.

  61. Hi,

    I have a question, maybe a stupid question, do we need to use Divi theme or it also work if we just use Divi plugin?

  62. I can’t get it past 1%. I”m using EXTRA > Divi Library> Upload

  63. Hi Nick, can you tell me what screen capture software did you use to make this video? I think it is cool to make a flexibly zoom-in and zoom-out screen capture video, I want to make one like this. Thanks!

  64. Split screen KIT json file downloads OK but sections do not have images.
    also
    Split screen COMPONENTS json file says download complete
    but
    does not appear in Divi Library even after 3 “successful” downloads.
    Any help from anyone appreciated, Thanks.

    • +1 Same thing for me.

  65. Hi

    I was able to import and use the “Split screen layout Kit” file but with the “Split screen layout Components” file – even though the importer says ‘100%’ and was brought back to the ‘Layouts’ page – the “Component” file were no where to be seen.

    Please assist. Thanks in advance.

  66. Really amazing layout will certainly make use of it.

  67. It’s amazing in support of me to have a site, which is useful in support of my know-how. thanks admin|, you surely come with remarkable articles. Cheers for sharing your website page.Excellent blog here…

  68. This is all great stuff! We are using Divi for many clients. And it awesome.

  69. Hi Nathan,

    Did you notice that the link is… no just kidding 🙂

    Thank a lot for this one ET people!

    I love going through your settings as a learning example.

    Cheers

  70. Nate! You’re killing me with that top button. I’m in Louisiana. It’s too hot for that. Haha.

    Great work and resources you all.

  71. Hello
    Looks great but Why the layout is broken when I load it in the library?
    Thakks !

  72. For anyone getting an error that says “this file cannot be uploaded in this context” or something to that affect try this as I finally got it to work:

    Firstly make sure your wordpress settings are correct under where media files are saved under settings>Media and check the upload path is correct – took me ages to figure out why it wasnt working as I had recently changed hosting providers and the upload path needed to be updated to this:

    website url/wp-content/uploads/

    remove website url with your webite url

    Hope this helps others,

  73. It’s awesome to have all these library items.
    When I add them on my website, will those be made the website slower?
    Thank you heaps!

  74. The images are all pointing to a local host. Was I mistaken that the images came with the Layout for split screen? I can’t figure out how to fix it. I can replace with another image, but I want the original to work, so that I can play with it and see how it works (I am visual). Thanks in advance.

  75. None of the media files are showing. Url says local host. – nothing has been uploaded

    • OK now. changed URL to my server url 🙂

  76. Love it. Am trying it now.Is there a way to make the background image on the left “fit” into just the left side of the split screen?
    The image I am using is cut off. Would look better if it was just postioned on the left.

    See http://example.wawings.com/

    Thanks

    • Never mind. Just found it in advanced settings.
      Thanks.

      • Hey Jan
        I’ve been looking at the same thing of having an image just on the left or right side. I’ve looked in advance settings but couldn’t find anything.
        The background image has been placed in the Section Module and there’s no setting there to align left or right.
        Would be good to know where you have set it
        Thanks

  77. Components came as ‘price table’, ‘blog post #2, ‘blog post #1’, and ‘feature’ instead of Splitscreens 1-4.

    • Exactly. The components appear in the library under differet names. But after I try to test any of them, I can not find it among other layouts. They are simply invisible.

      Any sugestions?

      • Hello, folks,

        After I installed the components file, they appeared in my library (see http://prntscr.com/brtye8). But that is all! If I try to load any of them to my page, neither of them, except the whole layout, appears in the list (see http://prntscr.com/brtz1d).

        Is there anybody able to define, where is the problém and how to put it away?

  78. Hey, it says the CSS is missing when I try to upload it.

    • +1!

  79. awesome layout pack

    just wondering how to make the menu be on the right instead of the left

    and how to make the menu bar transparent so it shows the left side black and the right side pink, the video doesn’t cover this, and making the primary menu background color does not produce this effect 🙁

  80. When I install this kit, the menu looks nothing like in the screenshots. Instead it’s the white menu that floats at the top of the screen. So how do we setup the split menu per the screenshots?

    • Hi Chirs,
      I have the same issue. Did you figure this out yet? Instead I have a red bar and I dont know how to get rid of it.

  81. How can I change the block colour and positioning of text + image?

  82. Yes, wondering how to get the split screen menu as well. This would work perfectly for a project I am working on now. Need the menu to appear as it does in design 1 – 4. Please let us know the trick!

  83. Hey, great layout but it does not work with FireFox and Edge.

    • Hi @Tomek

      I experienced this too.

      It looks like this is a bug in Mozilla cite: https://bugzilla.mozilla.org/show_bug.cgi?id=958714

      To resolve the issue I added display:table; to Row Settings > Custom CSS > scroll down and find “Column # Main Element” to whatever column you are having trouble with and add display:table;

      I added it to et_pb_colum_3 within firebug on your website and it fixed that section, so it should work.

      Cheers!
      jules

  84. Hi,

    thank you for this!!
    But after I uploaded file “Split Screen Layout Kit.json” I’ve tried to upload file “Split Screen Layout Components.json” and I got an error saying that it can’t import that file because a problem with file_upload and/or file_max_filesize sentences in php.ini

    But both lines are ok in my php.ini. 🙁

    So, how can I fix it?

    Thank you!

    • I am getting the same error when I try to upload Layout Components.son. The Split Screen uploaded without any issues. It says: This file cannot be imported. It may be caused by file_uploads being disabled in your php.ini. It may also be caused by post_max_size or/and upload_max_filesize being smaller than file selected. Please increase it or transfer more substantial data at the time.

      • Hi Seema,

        this problem is easy to fix. If you’re developing in localhost surely you’re using a web server + php + mysql.
        All you have to do is go into the php folder of this webserver (using the file explorer of Windows) and localize the file “php.ini”. Do edit it, and search for a statement “upload_max_filesize”. This, by default, just say “2M” (i.e. 2MB) and you must change it by “6M”.

  85. Sorry, you can delete my previous post because the problem now is fixed.

  86. All my images are broken. This layout kit isn’t working properly. How can I fix it?

  87. I am having the same issue when I try to upload the Split Screen json, here is the message:
    This file cannot be imported. It may be caused by file_uploads being disabled in your php.ini. It may also be caused by post_max_size or/and upload_max_filesize being smaller than file selected. Please increase it or transfer more substantial data at the time.
    Please help.
    Thanks.

  88. Hey Nathan,

    This is just what I was looking for, thanks so much.

    I’m just wondering if there is any way to make the background image cover the whole viewport.

    Tell me and I’ll die a happy man.

  89. Hey Guys

    Any fix on this yet please????!!

  90. Dear ET folks, we really appreciate all what you do. You make our lives easier with your invaluable tips, but could you please in your future tip presentations make the “Get the free DIVI UI kit” button a bit smaller. When taking a screenshot of the page, this sucker overlays the demos and then I need to go on to every demo and make a screenshot manually, which is time consuming and sometimes cannot capture the whole thing.

  91. Hi
    Am having the same issue as Vitaly above, no images.

    And also not being able to import the components as per video.

    In the downloaded & exploded zip file the kit json file i have is 29kb, in the video above its shown at 1.5 mb

    the downloaded components json is 1,462kb

    Thanks a million for the great resources.

  92. Hi,

    Since I can’t upload the components file as described in the video because of the php.ini size restriction I wanted to upload it using filezilla, but I don’t know which folder to put it in. Can anybody help?
    Thank you

    • I have the same issue. Unfortunately, I don’t think the system supports your solution. I’d like this work-around to work!

  93. Having the same problem: components are not uploading. I get no error message. Please help!

  94. I’m excited to use this. Any chance you could update the original post acknowledging that issues have been fixed. There are way too many comments to figure out if I should expect things to work correctly. I’m seeing Split Screen Layout Kit under Divi Library but not when I go to Add from Library. I can’t tell if anything from Components is in the Library. I have other items in there from another import of Divi 100 Kit, Footer #8. The other layouts (Blog Post 1 and 2, Feature, Pricing Table) in the Divi library I’m assuming were there by default.

    This feels like a bad beta version — downloaded a couple days ago — that should be updated to match the kits made available later.

    The only solution I can think of is to rebuild according to the settings I see when I open from Divi Library.

    Great work but it kills me when I have to do a lot of work that wasn’t intended.

  95. Hey guys, I downloaded the file and nothing, nada, zip, zilch.

    So I start to think I’m getting old and cant see something, so to my surprise after downloading twice and doing 4 different imports, I see that the files are not working in the comments, now I have 100 tears……..

    Any Idea when this will get sorted out?

    • Brad, I can’t be optimistic that we’ll get a response. I think we can assume they have moved on to only worrying about making new things usable. They learn and improve as they go, but older stuff isn’t as important to fix as the exciting new stuff coming. I share your frustration as today again I’d like to use these split screen layouts but I will either have to rebuild them again or figure out how to export my own versions to re-use on a separate site.

  96. Really loving the features in Divi 3.0! One thing that seem like it should be easy to do is add a layout with more than four columns. Any plans on this being in the new features, or one of the Divi addons?

  97. For everyone having issues with the broken image links, do this…

    1. Install and activate this plugin: Better Search Replace

    2. (select) > Tools > Better Search Replace

    3. Search for this: “http://localhost:8888/wp/wp-content/uploads/2016/07”
    (that is the part of the imported image link URLs you need to change)

    4. Replace with this: “/wp-content/uploads/2016/XX”
    (where “XX” is the month of your current upload folder, because THAT is where these images are going to be after you run the importer)

    5. Select Tables: “wp_posts”

    6. Dry Run setting? Enabled > click the [Search / Replace] button
    (Best to make a dry run of the find / replace results, however the plug-in wont tell you much in response – if it says something about finding click the [Search / Replace] button

    If you have everything above correct, your images should ALL now be linking up in the imported split-screen sample page.

    If the links still do not work, check what DID happen to your image links, and consider an intelligent way to ultimately get the image link URLs set correctly.

    And the usual disclaimer: It worked for me, your mileage may vary – but you’re a pretty smart cookie, and I bet you can do this!

    Shalom y’all 🙂

    • Hmmm… something whacked out my reply, and there is no way to edit it, so here’s how steps 6 and 7 should have read…

      6. Dry Run setting? Enabled > click the [Search / Replace] button
      (Best to make a dry run of the find / replace results, however the plug-in wont tell you much in response – if it says something about finding click the [Search / Replace] button

      The last three sentences are correct after step 7.

      Best wishes for successful URL modifications

      • Sorry everyone, for some reason, this post editor function is stripping out the copy I’m writing and I have no idea why – mods, please feel free to delete or whatever – I like to help but dont have time to mess with goofiness like this…

401,632 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