UINEXA SNIPPET

Sticky Split Layout

A flexible sticky split layout for responsive landing pages, dashboards and editorial layouts.

CSS HTML easy FREE

Snippet Details

Difficulty: easy

Type: Frontend Effect

Status: Copy & Paste Ready

Live Preview

Test the effect before copying.

Source Code

Copy the code into your project.

<section class="ux-sticky-split-layout"><aside><span>Sticky panel</span><h2>Sticky Split Layout</h2></aside><div><article>One</article><article>Two</article><article>Three</article></div></section>

Installation

How to use this snippet

1. Add an HTML widget in Elementor.

2. Paste the HTML code into the widget.

3. Add the CSS code to Elementor Custom CSS or your website stylesheet.

4. Replace the sample cards and panels with your own Elementor widgets or HTML content.

5. Replace example text, links and labels with your own content.

6. Test the layout on desktop, tablet and mobile.

Elementor Note

Elementor usage

The effect works without JavaScript. Check parent container width and overflow settings when embedding the layout.

Browser Support

Works in modern browsers.

Chrome ✓

Firefox ✓

Safari ✓

Edge ✓