Dce Horizontal Scroll Feature

Easy Horizontal Scrolling with Dynamic Content for Elementor


We don’t always have the luxury of having the visitor’s attention for a long read. People are in a hurry and they want to get the point quickly. Also, there is the challenge of getting a lot of content at the top of the page “above the fold.” In “ye old days” this was done by using sliders. However, there are a lot of problems with sliders. They are not always accessible and it is sometimes difficult to structure the content to be picked up for SEO. The modern solution is to use horizontal scrolling. Dynamic Content for Elementor provides a simple and easy way to get horizontal scrolling working.

Video Version

Sample Content

I created a list post for the best books of the year. When I added in the book excepts the page turned out being pretty boring, even with the colorful book covers. I decided instead to create short catchy blurbs about each book and present the list using horizontal scrolling. Here is the content I created. It is a long page and while the blurbs stand out, the content tends to run together.

Dce Sample Content

Configuring Horizontal Scrolling

Dynamic Content for Elementor scrolling options are behaviors and effects that get applied to sections as your scroll. Elementor itself has some animations and you can combine some of the Dynamic Content for Elementor behaviors with those that come with Elementor, but this would be a matter of experimentation to see what works well for your content. I’m just focusing on the Dynamic Content for Elementor horizontal scrolling options.

The technique I used for the content was to have each bit of content have it’s own section. Each section was stand-alone and could sufficiently fill a page, while leaving enough white space so that the reader can focus on the message. Here is what it looks like in the Elementor editor. I added the mouse icon in the lower corner of the first section as a hint to scroll.

First Section In Editor

You turn on the Dynamic Content for Elementor scrolling options by going to the page settings in the Elementor editor, found in the lower left corner when you click the “gear” icon.

Dce Enable Scrolling

Toggling scrolling on reveals three options: Effects, Snap, and InertiaScroll.

Dce Three Types Of Scrolling Options

Effects: These are animations that are applied to a section. They change the section content and then there is a behavior to the content as you scroll. For example, with “Rotate” the sections start out on an angle and rotate up as your scroll.

Dce Effect

Snap: This provides some nice options for navigating between sections. For example, here is the first section with “dot navigation” on the side. As you can imagine, this would work well for a one page site.

Dce Dot Navigation

InertiaScroll: This option allows you to set the direction of the scroll, either the normal vertical or horizontal.

One thing to note when using the horizontal navigation is that you need to enter some CSS element information about the theme you are using. The documentation for this feature has a page that explains how to find that information and they also list the CSS selectors to use for several popular page builder friendly themes. I’m using the Astra theme for this tutorial and I entered the class names from the DCE documentation page. Here is the settings panel.

Dce Inertiascroll Options Panel

I noticed when I toggled on “Horizontal” that the content in the Elementor editor also goes across instead of down the page. So I left it as Vertical while creating the sections and their content and then turned Horizontal on when I was ready.

Here are the screenshots of each page, scrolled horizontally.



The challenge when working with horizontal scrolling is to setup your content with that in mind, one screen of content per section. It is also a good idea to check the content on different device sizes. The layout I used worked fine for desktop and tablet, but would need to be tweaked to look good on mobile.

Horizontal scrolling offers a nice alternative to long pages of content and works well for “top ten” lists. Getting horizontal scrolling going using Dynamic Content for Elementor was easy.

Visit the Dynamic Content for Elementor Website to Learn More

3 1 vote
Article Rating

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Similar Posts

Notify of
Newest Most Voted
Inline Feedbacks
View all comments
April 26, 2020 6:10 am

Hey David,

I cant your tutorial to work in my end. I don’t see the scrolling setting under my page settings with Elementor?

June 6, 2020 3:59 am


Very interested to know please, if this can be used for horizontal and verticle nested slides… Im thinking Zara.com?
Elementor uses swiper slider but I’m unable to accomplish this easily.

Or any other way…?

This dynamicoo looks like years ahead of the rest but liitle information on how to use all… I’m not a techie

I can be reached via my email… I may need some help..

Thanks for all your great tutorials.. 😊 👍

Reply to  David McCan
June 11, 2020 5:04 am

Hi David,
Thanks for the reply, I’ve just seen it now 🙂

Really appreciate your time in responding and your information on your site….I think dymanicoo really needs more support as regarding how to use some of their very powerful widgets etc
I will reach out to them for help.

Do you do any custom work?
thanks again