A hero section is the first thing a visitor sees, and most of them all look the same: one big background image with text floating on top. The Split Screen Hero Slider widget for Elementor takes a different approach. It divides the hero into two panels — one for your message, one for your imagery — and slides them past each other in opposite directions on every transition. The result is a hero that feels designed rather than templated, built without touching a line of slider code.
What Is the Split Screen Hero Slider Widget?
The Split Screen Hero Slider is a two-panel hero carousel. One side holds a subtitle, headline, description, and call-to-action button; the other holds a full-bleed image. As the slider advances, the content panel and the media panel animate in counter-motion, so the page feels alive without being noisy. The Elementor Split Screen Hero Slider manages the ratio between the two panels, the direction they split, and the way each slide enters, all from the widget settings.
Key Features of the Split Screen Hero Slider Widget
- Adjustable split ratio and direction — choose 50-50, 40-60, 60-40, 30-70, or 70-30, and split horizontally or vertically to suit the layout.
- Counter-motion transitions — counter-vertical, counter-horizontal, or a clean crossfade, each with its own adjustable speed.
- Fullscreen or fixed height — fill the viewport for a landing page or pin a fixed height for a section inside a longer page.
- Complete navigation control — autoplay with adjustable speed, a slide counter, dot pagination, arrows, and swipe, each toggled independently.
Why Use the Split Screen Hero Slider Widget on Your Site?
Different businesses need the same hero to behave differently, and that is exactly where the Split Screen Hero Slider earns its place. An adventure travel company can run a full-screen 50-50 hero with a dark navy content panel sliding up as expedition photos slide down, autoplaying past a counter, dots, and arrows. An eyewear and apparel label can give the image more room with a 40-60 split, crossfade between looks, and place the content panel on the right in brand pink. A family lifestyle club can stack the panels vertically in a calm 60-40 ratio, switch autoplay off, and let visitors move through with simple dot navigation. One Elementor Split Screen Hero Slider, three completely different first impressions — each responsive, swipeable, and keyboard friendly.
Getting Started With Split Screen Hero Slider in Minutes
Install Sentio Addons, drop the widget onto your page, and add a slide for each message in the repeater. Give every slide a subtitle, title, description, button, image, and accent colour. Pick a split ratio and direction, choose fullscreen or a fixed height, and select the transition style. Switch autoplay, the counter, dots, and arrows on or off, then style the content panel, typography, and navigation on the Style tab to match your brand.
See the Split Screen Hero Slider Widget in Action
The widget page above this article shows three distinct builds: a navy full-screen travel hero with counter-vertical motion and full navigation, a brand-pink eyewear hero with a 40-60 crossfade and the content panel on the right, and a neutral vertical family hero with dot navigation and autoplay turned off. Same widget, same Style tab, three completely different presentations.
Your hero only gets one chance to make a first impression, so it should not look like everyone else’s. Reach for the Split Screen Hero Slider for Elementor and you trade the flat background-image hero for something with depth and motion. Sentio Addons keeps shipping practical, design-system-friendly widgets like this because publishing teams need real tools, not toy components.