Dce Horizontal Scroll Feature

Easy Horizontal Scrolling with Dynamic Content for Elementor

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Share on email
Email

Table of Contents

Introduction

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.

Section1
Section2
Section3
Section4
Section5
Section6

Conclusion

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

Filed under:

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.”  

  • Hey David,

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

    • Hi Aleksander,

      Horizontal scrolling is a new feature. Do you have the latest version of Dynamic Content for Elementor installed? Also, in the admin settings for Dynamic Content for Elementor there is a place where you can turn on and off features features, so perhaps check there to make sure it is turned on.

  • Hi,

    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.. 😊 👍

    • Thanks for the positive feedback. It works on sections, so I don’t think you could do both types of scroll, unless perhaps by created templates that scroll horizontally embedded in a page that scrolls vertically. That’s not something I’ve tried. The best route for help is the Dynamic support. They’ve been pretty good, so I’d give them a try if you have an issue.

      • 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

        • Hi Adie, Dynamic Content for Elementor has a lot of advanced tools and I agree that more documentation would be helpful. They have been steadily adding more, but there are still gaps. I’m not doing custom work at this time. Thanks.

  • Elementor Pro

    Current Elementor Sales

    elementor360

    Subscribe to the Newsletter

    Do NOT follow this link or you will be banned from the site!
    >
    Scroll to Top