1. Make sure you have access to Webflow and an active project ready to go.
2. Gather all your content and assets (like images and text) that you'll need for the split-screen layout.

Step 1:

• Open up the Webflow Designer for your project.
• Drag a new Section element onto the page from the Elements panel.

Step 2:

• Give this section a class name, something like split-screen-container.

Step 3:

• Inside the Section, add a Div Block from the Elements panel.
• Name this div block left-panel.

Step 4:

• Add another Div Block within the same Section and name it right-panel.

Step 1:

• Select the Section (split-screen-container) and head over to the Styles panel.
• Set the display property to flex and the direction to horizontal (this will make the panels sit side by side).
• Choose Align: Stretch and Justify: Space Between.

Step 2:

• Select the Left Panel (left-panel).
• Set its width to 50% or calc(50% - some_margin) if you need a margin or gutter between the panels.

Step 3:

• Do the same thing for the Right Panel (right-panel).

Step 1:

• Drag any elements you need (like images, headings, paragraphs, buttons) into the left-panel.

Step 2:

• Do the same for the right-panel.

Step 1:

• Adjust margins and paddings inside the Left Panel and Right Panel to make sure everything lines up nicely.
• You can add custom classes to specific elements for more detailed styling.

Step 2:

• Make sure the split-screen layout is responsive by switching to different viewports (like Tablet, Mobile landscape, Mobile portrait).
• Adjust the flex basis, or change the layout direction to vertical for smaller devices if needed.

Step 3:

• Test the final design using the preview feature to make sure everything looks good on different devices.

Step 1:

• Once everything looks perfect, click on the Publish button to make your changes live.

Step 2:

• Check the live site and review the split-screen layout on various devices to make sure it works as expected.