With this widget, you can create a smooth, scrollable column layout that highlights multiple items in an organized and visually appealing way. Each column allows you to add a Title, Select Images, and a Main Title while controlling the Duration of the scroll animation.
The Column Scroll widget is easy to customize and helps you present content dynamically, making your page more engaging and interactive across desktop, tablet, and mobile devices.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- This is a pro widget. A valid WDesignKit Pro license is required to access and use them.
- Make sure you’ve downloaded the Column Scroll widget.
How to Activate the Column Scroll Widget?
Go to
- WDesignKit →Widgets → Browse Widgets.
- Search the widget name and select Elementor as the Page Builder.
- Click on the Download icon.
Use Cases
Use this widget when you want to display multiple items in a smooth, scrollable column layout that looks organized and modern.
Best For:
- Showcasing Products or Services: Highlight multiple items like products, features, or services in an attractive, scrollable column layout.
- Portfolios & Projects: Display images with titles and main headings to showcase your work in a neat, interactive way.
- Landing Pages: Present key content or highlights dynamically without cluttering the page.
- E-commerce Websites: Feature product categories, promotions, or collections with smooth scrolling for a better user experience.
- Blogs & News Sections: Display multiple posts or highlights with images, titles, and short descriptions in an engaging layout.
- Responsive Layouts: Perfect for desktop, tablet, and mobile screens, with adjustable column settings for each device.
- Interactive Content: Add multiple images, titles, and main headings with customizable scroll duration to create an engaging visual effect.
- Modern Website Designs: Keep your page organized and visually appealing while showing multiple items in a dynamic, animated way.
How to Use the Column Scroll Widget in Elementor?
Add the Column Scroll widget to the page.
Content
From the Column section, you can add column items. By default, you’ll find three repeater items; open them.
In the Title field, you can add the text for each column item.
Note: Use a comma (,) to separate titles for multiple items. Example: Title 1, Title 2, Title 3.
In the Select Images section, you can add images for the column slider. You can also add multiple images to better experience of this widget’s effect.
You can click on the + Add Item button to add more items.
Main Title
In theText field, you can add a main heading for the column scroll section.
In the Background Invert option, you can enable or disable inverted background colors for the section.
Note: Enabling the Background Invert option will invert effect for the text, image and background.
Special Options
From the Desktop Column field, you can set the number of columns displayed on desktop devices.
From the Tablet Column field, you can set the number of columns displayed on tablet devices.
From the Mobile Column field, you can set the number of columns displayed on mobile devices.
Extra Options
From the Duration (seconds) field, you can set how long each column scroll item stays visible.
Note: You can refresh the page after changing the duration to apply the new settings.
Then, from the Style tab, you can further customize the style of the Column Scroll.