Easy Horizontal Scrolling with Dynamic Content for Elementor

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.

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.

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.

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

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.

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.

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.

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.

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