Example
Here’s a quick look at all 5 split screen sections included in the package. The download is later in the message.
Download 5 Split Screen Designs for Divi 5
Get all 5 sections for free. Import them into your Divi library and add them to any page in Visual Builder.
What’s included (6 exports)
Once you download and unzip the file, you will find five split-screen section exports, plus one file containing all the designs.
Split Screen Section 1 to 5 (5) → Five unstyled split screen layouts that combine text, buttons, and images in a balanced two-column format for fast page building.
Split Screen (All) → Imports all designs at once to your Divi library.
How to use the sections in split screen
Have your download folder handy. We import and then add a section to a page.
1. Import sections into the Divi library
Go to Divi → Divi Library. Click Import and export at the top of your screen.
In the Import and export layouts modal, switch to the Import tab and then click Choose File and select your JSON.
Choose a split-screen JSON you want to use, then click Import Divi Builder layouts.
2. Add a split screen section to each page
Open a page in the Visual builder and add a new one Section.
In the Insert section modal, click Add from library and select a split screen layout.
Finally, click Use this section.
3. Exchange content
Once the section is on the page, replacing the placeholder content takes just a few clicks. Click directly on a module containing text to edit the headline, subheading, body text, or button text in real time.
To replace images, open it Image settings through to the Contents tab of that module. Click Image → Upload or choose an image from your media library.
For Background images or Expiredgo to Section settings → Content tab → Background tab and place your own image or adjust the settings Progress stops.
Buttons and CTAs are already set up, so you can easily update the link and text.
4. Customize styles (optional)
You can easily tailor these sections to your brand by updating fonts, colors, spacing, and background treatments. Here are some quick ways to adjust the layout without having to recreate the layout.
To change fonts, open one of the text or heading modules in the section and go to the Design tab. Fold the Text or Category drop-down menu to select the Heading level, font, font style, text alignmentor Text color.
To adjust spacing, adjust the padding and maximum width values to give the text side more breathing room, or to bring the content closer to the split line.
Use Divi’s layout settings to adjust Flex properties such as column order, alignment, and spacing. This is especially useful if you want to fine-tune how the split screen stacks on smaller screens.
Add subtle effects, such as hover states on buttons or soft reveal animations, to make the section look polished without distracting from the content.
Tips for effective split-screen designs
Split screens are simple, but small choices make the difference between average and premium. Take advantage of these quick wins to maintain an uncluttered, readable, and engaging layout.
Lead with a clear head
Keep your main headline concise and direct, then use a smaller supporting subheading to provide context or highlight benefits. This hierarchy quickly guides the eye and keeps the text side scannable, especially on mobile, where attention spans are shorter.
Choose the correct image crop
Your image often fills half the screen, so use photos with a clear focal point and plenty of negative space. Avoid overly busy or cluttered backgrounds that compete with text, buttons, or CTAs. Choose images that complement the content.
Balance the two sides
If the image is visually heavy, simplify the text side with fewer lines and more spacing. If the text is longer, choose calmer imagery so that the section doesn’t feel busy. Use contrasting colors or subtle dividers to separate the sides while maintaining overall harmony.
Mobile stacking plan
Split screens fall naturally into a vertical layout on smaller devices. Make sure the text remains readable when it appears above or below the image and adjust the order if necessary. Make sure that the flow, even when stacked, still tells a story.
Keep CTAs simple
One primary button is often sufficient. If you use two, make sure the hierarchy is clear with contrast and spacing so the visitor knows which one to click first. Consistent colors on both sides provide cohesion, while subtle differences can emphasize important elements.
Start building in Divi 5 today
These five split-screen sections give you a quick way to build modern hero areas, with sections, service highlights, and intros on the landing page. Swap out the content, adjust the image, and in minutes you’ll have a polished layout that suits your site with Divi 5’s Visual Builder.
#Split #Screen #Designs #Divi #Free #Download