Overview #
The Divi Horizontal Scroll feature allows you to transform a standard Divi section into a horizontal scrolling experience.
Instead of scrolling vertically through content, visitors scroll horizontally through the rows inside the section.
This feature is ideal for:
• Storytelling sections
• Portfolio showcases
• Product presentations
• Process timelines
• Interactive landing pages
• Webflow-style scrolling experiences
The Horizontal Scroll feature can be applied to any Divi Section.
Enabling Horizontal Scroll #
To enable Horizontal Scroll:
1. Open the settings of the section you want to use.
2. Go to: Design → Layout
3. Enable: Horizontal Scroll
Once enabled, additional Horizontal Scroll settings will become available.
How Horizontal Scroll Works #
After Horizontal Scroll is enabled, each Row inside the section becomes a separate horizontal screen.
For example:
• Row 1 = Screen 1
• Row 2 = Screen 2
• Row 3 = Screen 3
As the visitor scrolls down the page, the section becomes fixed and the rows scroll horizontally from one screen to the next.
This allows you to build multi-screen horizontal experiences using standard Divi rows and modules.
Horizontal Scroll Settings #
Enable on Mobile (Trendy Horizontal Scroll – Yes or No) #
Controls whether the Horizontal Scroll effect should be active on mobile devices.
Enabled for a particular screen (set to yes)
The horizontal scrolling effect will also be enabled for that screen.
Disabled for a particular screen (set to no)
The section will behave like a normal vertical section on that screen.
Scroll Direction #
Choose how the horizontal movement behaves.
Normal
Rows move from left to right as the visitor scrolls.
Reverse
Rows move from right to left as the visitor scrolls.
This can be useful when creating alternating sections or more dynamic scrolling experiences.
Horizontal Snap #
The Horizontal Snap option controls how the horizontal scrolling movement behaves when moving between rows.
Enabled
When Horizontal Snap is enabled, the scrolling animation automatically snaps to the next row.
This means that each row is always displayed fully before moving to the next one.
The result is a more controlled, slide-like experience where visitors view one screen at a time.
This setting works particularly well for:
• Presentations
• Storytelling sections
• Product showcases
• Step-by-step processes
Disabled
When Horizontal Snap is disabled, the scrolling movement is completely free.
Visitors can stop scrolling at any point during the horizontal animation.
This means that parts of two rows may be visible at the same time.
For example:
• The end of Row 1
• The beginning of Row 2
can both appear on screen simultaneously.
This creates a more fluid and natural scrolling experience.
This setting works particularly well for:
• Creative portfolios
• Agency websites
• Interactive experiences
• Webflow-style layouts
Which Setting Should I Use? #
Use Horizontal Snap when:
• You want a presentation-style experience
• Each row represents a separate screen
• You want visitors to focus on one section at a time
Disable Horizontal Snap when:
• You want a more natural scrolling experience
• You want multiple rows to be partially visible during scrolling
• You are creating more experimental or creative layouts
Top Offset #
The Top Offset controls how far from the top of the screen the section should stop when it becomes fixed.
This is particularly useful when your website includes elements such as:
• Fixed headers
• Sticky navigation bars
• Announcement bars
For example:
A Top Offset of 80px will cause the section to stop 80 pixels below the top of the browser window instead of being positioned directly at the top.
Bottom Offset #
The Bottom Offset controls how much space should be reserved at the bottom of the screen while the Horizontal Scroll section is active.
This is useful when your website contains fixed elements such as:
• Sticky buttons
• Floating contact bars
• Fixed footers
• Cookie notices
For example:
A Bottom Offset of 50px leaves 50 pixels of free space below the horizontal scrolling area.
Fix Previous Section #
The Fix Previous Section option allows the section immediately before the Horizontal Scroll section to remain fixed while the horizontal scrolling effect is active.
This is useful for layouts where you want content such as:
• Headlines
• Section introductions
• Side navigation
• Explanatory content
to remain visible while visitors scroll through the horizontal content.
Example
Section 1:
• Heading
• Description
Section 2:
• Horizontal Scroll section
With Fix Previous Section enabled, the content from Section 1 remains visible while visitors scroll through the horizontal screens in Section 2.
This can create powerful storytelling and presentation layouts.
Mobile Settings #
All Horizontal Scroll settings include dedicated mobile controls.
This allows you to configure different values for mobile devices, including:
• Enable or Disable Horizontal Scroll
• Scroll Direction
• Horizontal Snap
• Top Offset
• Bottom Offset
• Fix Previous Section
This provides greater flexibility when optimizing the experience for smaller screens.
Designing Your Horizontal Scroll Layout #
Because each row becomes a separate horizontal screen, it is recommended to think of each row as an individual slide or panel.
A typical setup might look like:
Row 1
Introduction
Row 2
Feature Overview
Row 3
Benefits
Row 4
Call To Action
This creates a smooth horizontal storytelling experience as users scroll through the section.
Important Note About the Visual Builder #
The Horizontal Scroll effect cannot be previewed inside the Divi Visual Builder.
While editing, the section will appear as a normal vertical layout.
To view the Horizontal Scroll effect:
1. Save your changes
2. Exit the Visual Builder
3. View the page on the front-end
The Horizontal Scroll animation will then function normally.
Keep Content Focused #
Treat each row as an individual screen and avoid overcrowding it with too much content.
Test Mobile Layouts #
If Horizontal Scroll is enabled on mobile devices, always test the experience on smaller screens and adjust the mobile-specific settings if needed.
Consider Fixed Headers #
If your website uses a sticky header, use the Top Offset setting to prevent the Horizontal Scroll section from appearing underneath it.
Combine With Fixed Sections #
The Fix Previous Section option can create very engaging layouts when combined with introductory content, section titles, or side navigation that remains visible while users scroll through the horizontal screens.
This approach works particularly well for storytelling pages, product presentations, and feature showcases.