Free Divi Split Screen Layout Kit

Last Updated on September 16, 2022 by 178 Comments

Free Divi Split Screen Layout Kit
Blog / Divi Resources / Free Divi Split Screen Layout Kit
Play Button

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!


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.



Split Screen Design 01


Split Screen Design 02


Split Screen Design 03


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

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

Get a Free Fashion Stylist Layout Pack For Divi

Get a Free Fashion Stylist Layout Pack For Divi

Posted on June 17, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Fashion Stylist Layout Pack that’ll help you get your next Fashion...

View Full Post
How to Build a Website with Divi (2024 Tutorial)

How to Build a Website with Divi (2024 Tutorial)

Posted on June 12, 2024 in Divi Resources

You’ve purchased Divi and are ready to build your website. The only problem is that you need to figure out where to start. Thankfully, Divi is one of the most intuitive WordPress themes available. It offers a user-friendly drag-and-drop Visual Builder that allows you to place design modules...

View Full Post


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

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

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

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

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

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

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

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

  9. Hey Guys

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

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

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

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

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

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

  15. 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:

      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.


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

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

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

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

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

    • +1!

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

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

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



    • Never mind. Just found it in advanced settings.

      • 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

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

    • OK now. changed URL to my server url 🙂

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

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

  26. 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,

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

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

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


  30. Cheers

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

  32. 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…

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

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

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

    • +1 Same thing for me.

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

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

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

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

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

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

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

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

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


  45. GREAT PACK – thank you so much 🙂

  46. Hey Nathan, great post.

    Oh and the download link is broken! ???

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

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

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

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

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

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

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

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

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

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

  56. Download link not working

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

  57. The great idea! The link it´s broken

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

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

    • Yep, checked and fixed. Sorry about that.

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

    • Sorry about that. The link has been fixed.

  60. Link doesn’t work

    • Sorry about that, it’s been fixed.

  61. Hi!
    Download link does not work.

    Also. Great work guys!

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

      • Never mind, I fixed it.

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

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

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

    • Sorry about that. It’s been fixed now.

  64. The download page does not exist 😉

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

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

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

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

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

  67. 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. 🙂

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

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

    The same.



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

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

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

  70. 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. My mistake! Left off the .zip extension. It’s been fixed now though and you can download the layout kit now.

  71. Fix the link to the download please..

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

  72. Hi,

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

    Brandon Davis

    • Thanks Brandon, the link has been fixed.

  73. When I try to download 🙁

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

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

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

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

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

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

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

    love ur work.

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

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

    • Thanks Alberto, the link has been fixed now.

  78. Download’s link are broken.

    • Sorry about that. Link has been fixed now.

  79. Link is not working to the layouts.

    • Sorry about that, the link has been fixed.

  80. .zip is missing on the download link

    • Thanks Patrick, it’s been fixed.

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

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

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

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

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

  85. Beautiful. I like it

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

    • Sorry about that Afonso, it’s been fixed now.

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

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

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

    • Sorry about that. Link is working now 🙂

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

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

      You guys rock!

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

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

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

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

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

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

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

  93. The download link isn’t working…

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

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

    • Sorry about that, the link has been fixed.

  95. Hi Nathan,

    The download link goes to an error 404 🙁

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

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

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

      • Thanks for the tip 🙂

      • Yep .zip at the end did the trick


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

  98. The download link is broken. 😉

    • Sorry about that, the link has been fixed.

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

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

    • Add .zip to the URL

      • thank you Ryan!

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

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

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today