Elementor
Horizontal scroll
Adding to Elementor a horizontal Scroll Widget
Role: Ux Design
background
Introducing a Horizontal Scrolling Solution
Elementor is a popular WordPress page builder known for its ease of use, drag-
and-drop functionality, and wide range of customization options, making it a
favorite among designers and web-builders.
To meet growing demand for creative layout options, I created a horizontal
scrolling widget, designed to improve the user experience by enabling designers
to incorporate horizontal movement into their layouts.
This case study covers the creation process,
Starting with an in-depth research and ending with a fully functional widget.
objective
Enhancing Building Flexibility in Elementor
The goal was to introduce a flexible horizontal scrolling feature that could be
easily integrated into Elementor pages, providing users with greater creative
control over their layouts in there websites.
problem
Lack of Horizontal Scrolling ability in Elementor
Elementor offers a wide range of design and layout customization features,
but still does not provide built-in horizontal scroll option.
Website creators often want to create dynamic layouts with side-scrolling
sections for engaging websites.
Without this feature, users were either using complicated custom code or
external plugins, which often resulted in inconsistent user experiences and
responsiveness issues across different devices.
This gap in functionality became a pain point for many Elementor users looking
for more flexible and interactive building options.
challenges
Usability and Performance Challenges Before the Widget Creation
1
Installation
Users struggle to find and install third-party horizontal scrolling solutions.
2
Cost and Time
Plugins solutions often come at a price. Custom code takes time and effort.
3
Coding Knowledge
Many users do not feel comfortable with coding and seek ready-made solutions.
4
Design Flexibility
Need for tools that enable customization without limiting design flexibility.
research
Analysis of Elementor and Third-Party Solutions
Before creating the horizontal scrolling widget,
I conducted an in-depth study of Elementor’s entire system to fully understand its
built-in functionality, and potential for customization.
This research provided valuable insights into how Elementor handles scrolling,
layouts, content managing and widgets content.
Market Analysis
solutions such as Premium Addons for Elementor and The Plus Addons.
These plugins offered horizontal scrolling capabilities, but I identified several
drawbacks, including limited customization options, a reliance on pre-built
templates, and inconsistent performance across different devices. This
comprehensive research informed my decision to create a standalone
widget tailored to address these gaps and provide more flexibility for users.
interviews
Gathering Insights from Users Feedback on Horizontal Scroll
To better understand the real challenges faced by Elementor users, I
conducted interviews with web-builders who regularly use Elementor
The key pain points mentioned included difficulty implementing horizontal scrolling
without resorting to complex custom code and a lack of flexibility in plugins.
Interviewees also highlighted the need for a simple, intuitive solution that would
integrate seamlessly into Elementor's existing interface while offering a high degree
of customization. These insights were invaluable in shaping the widget.
"
Creating horizontal scroll is so complicated no matter what I tried everything went wrong…
"
It’s hard to create it without the expensive plugins, and with Css it doesn’t work smoothly
survey
Collecting Insights And Analyzing Responses
Tried creating horizontal scroll to their website
The horizontal scroll has created issues in the website
Didn’t manage to add the horizontal scroll and gave up
persona
Understanding Our Target Users and their needs
Name
Sophia Rodrigo
Age
24 Years
Location
Los Angeles
Occupation
Website Builder
Goals
- Sophia has been a freelance for 5+ years
- She has a degree in graphic design and Ux/Ui
- She works on a variety of projects, including website building, and designing.
Challenges
- To create visually appealing functional websites
- To find tools that can help her work process.
- To stay updated with the latest trends and website building tools.
Pain Points
- Complexity in Adding New Features: Finds it difficult to add new complex features without coding knowledge.
- Time Constraints: Balances multiple projects at once, making time-saving tools essential.
- Limited Budget: As a freelancer, she has to manage her expenses carefully and prefers cost-effective solutions.
- Usability: Needs tools that are intuitive and easy to use without a complex learning process
- Flexibility: Prefers tools that allow for creative freedom and flexibility in design.
user journey
Navigating Complex and Inefficient Workflow
Before the introduction of the horizontal scrolling widget, users looking to add
horizontal scrolling functionality in Elementor faced significant challenges
trial |advanced settings
Exploring adding a Built-In Feature for Horizontal Scrolling
Exploring adding a Built-In Feature for Horizontal Scrolling
Before creating the widget, I conducted a trial using Elementor’s advanced
container settings to add horizontal scrolling. The goal was to see if the existing
options could offer an easy solution without the need for widgets and nested
elements in a simple way.
While the advanced settings allowed for an clear and simple creation.
But had no way of adding any design customizations which is one of most
important user needs.
This experiment confirmed the need for a dedicated widget that would
make horizontal scrolling fully designable and customizable
conclusions
Creating a Custom Widget for Control and Flexibility
After testing the horizontal scrolling feature within the advanced settings, it
became clear that a dedicated Horizontal Scroll Widget would provide more
flexibility for users. This widget would allow greater customization and control
salutions
Solving Horizontal Scrolling Challenges with One Seamless Elementor Widget
1
Drag And Drop Widget
The widget is fully integrated into Elementor’s interface,
allowing users to easily drag and drop it onto any container of their website.
The Widget
Horizontal scroll drag and drop widget that seamlessly blend into Elemetor’s widgets
2
Flexible Layouts
Utilize nested containers to design fully flexible layouts,
Addressing user's need for unrestricted horizontal scrolling containers design
Open container
Allows users to design their containers with no restrictions & limitations
A scroll bar added to the editor, to help navigate while building.
3
Contant Control
Meeting demand for flexible, unconstrained scrolling areas by letting
the users adjust container width, naming conventions, and apply unique CSS IDs
Containers control
Setting the containers
• Name
• Width
• ID for adding code to specific sections
4
Setting Customization
Allowing control over the horizontal scroll behavior, giving users the ability to
adjust their horizontal scroll to any specific needs
Scroll settings
Fine tune user interaction through scroll speed, trigger distance, and adaptive settings.
• Scroll speed
• Trigger distance
• Adaptive settings
• Responsiveness
5
Navigation
The navigation settings allow users to guide their horizontal scrolling
experience while offering flexibility in design to match the overall aesthetic
Navigation
Allowing the user to add navigation for the best horizontal scroll experience
