fbpx

Featured in ,

Horizontal Scrolling for Elementor Posts | FREE downloadable section included

If you’ve been tirelessly searching for a way to horizontally post your blog posts

So excited to bring you our most recent , .

Horizontal Scrolling for Elementor Posts | FREE downloadable section included

If you’ve been tirelessly searching for a way to horizontally post your blog posts or custom post types like Netflix with Elementor without using plugins, then you have come to the right place.

In this article, you will learn how we built the horizontal scroll effect on our content page. You will also be able to do it for your own WordPress and Elementor site.

By the way, we are giving away a freebie section in case you just want to plug and play.

But before you do that, please read the full tutorial to learn how to customize the section to your liking.

If you already have your custom post types template designs ready, then you will be able to take this to the next level.

Play Video

By the way, you are not alone. The Elementor community was also very excited to hear that we were sharing how we created this horizontal effect.

elementor facebook community like this scrolling feature
Interactions in Elementor Community Facebook group after hearing about this article.
Over 500 interactions on this post in the first 5 days
Here are the three simple steps to build your own horizontal scroll feature in your Elementor site:
  1. Add the CSS class horizontally to the ‘Posts’ element you want the effect applied to
  2. For the same post height, add CSS class scrollingCol to the column (not section) containing the posts
  3. You could also add the CSS code provided to EITHER

Subscribe to our mailing list for more freebies like this one



Adding horizontally CSS class to posts

Add horizontally CSS class to the Posts element under the Advanced tab.

Add horizontally css class to posts
Add horizontally css class to posts

Setting the post height

If you want to manipulate the post height, you add CSS class scrollingCol to the column containing the posts under the Advanced tab of the column similar to this.

The CSS code

The CSS code used to build the feature was readapted and repurposed from ElementorCodes.

There are multiple places you can add CSS. And depending on where you place it, you might need to tweak it a little bit.

Recommended for all

If you are running a content-heavy site like a movie website or any other kind of site where most of your archives need to scroll horizontally, then you might want to place the code in your child theme stylesheet or the style.css file of your child theme. Note that I am saying child theme instead of your theme because you do not want to lose the code every time your theme updates.

Recommended for Elementor Pro users

My favorite place is adding it directly to the page where you will have all your scrolling posts under the advanced tab in your page settings. This is only available to Elementor Pro users.

Recommended for Elementor Free users

You can add the code to an HTML element you can place anywhere on your page where your scrolling posts will be. Keep in mind that you only need to do it once and it can be placed anywhere on the page. But for this to work, you will need to add an open and closing style tag to the code.

Subscribe to our mailing list for more freebies like this one



The Code

In this code, you will find comments that will help you with the customization.
Copy the code then follow the instructions provided in the code comments. I focused on customizing the width and height of elements but you can get creative with it.

/*INSTRUCTIONS FOR HORIZONTAL SCROLL ON POSTS BY THEAFRICANBOSS.COM
1. add the CSS class 'horizontally' to the posts element you want the effect applied to
2. if u want same post height, add CSS class'scrollingCol' to the column (not section) containing the posts
3. Add the CSS code below EITHER
- your CHILD THEME style.css file
- or add it to an HTML element you can place anywhere in your page with open style tag and closing style tag surrounding the code below
- or add it to the page custom CSS under Advanced tab in Page Settings where the posts are
*/


/* for post WIDTH on MOBILE, adjust the pixels below */
.horizontally>div>div>article {
    max-width: 300px;
    /* width on mobile */
}

/* for post WIDTH on DESKTOP, adjust the pixels below */
@media screen and (min-width: 480px) {
    .horizontally>div>div>article {
        width: 350px;
        /* width on desktop */
    }
}

/* for SAME post HEIGHT on MOBILE, adjust the pixels below */
.scrollingCol>div>.elementor-column-wrap .elementor-element-populated {
    min-height: 280px;
    /* height on mobile */
}

/* for SAME post HEIGHT on DESKTOP, adjust the pixels below */
@media screen and (min-width: 480px) {
    .scrollingCol>div>.elementor-column-wrap .elementor-element-populated {
        min-height: 400px;
        /* height on desktop */
    }
}

/* for your own custom swiping cursor, add a 36x36 png URL of your choosing in this format "cursor: url(https://theafricanboss.com/wp-content/uploads/2020/07/swipe-left-right-lg.png), ew-resize;" */
.horizontally>div {
    cursor: ew-resize;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.horizontally>div::-webkit-scrollbar {
    height: 4px;
}

.horizontally>div::-webkit-scrollbar-track {
    background: black;
    background: rgba(0, 0, 0, 0.1);
}

.horizontally>div::-webkit-scrollbar-thumb {
    background: black;
    background: rgba(0, 0, 0, 0.31);
}

.horizontally>div>div {
    display: flex !important;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

Subscribe to our mailing list for more freebies like this one



Freebie

You can download the section below and enjoy your new horizontally scrolling posts.

Elementor Posts Horizontal Scroll Section by TheAfricanBoss.com
Elementor Posts Horizontal Scroll Section by TheAfricanBoss.com

To get this freebie section, follow these instructions

  • Click the Download button or on the image which will open the JSON code file
  • Save the JSON file aka freebie Elementor section by going to File>Save in your browser
  • Import the JSON file to your Elementor templates

Please subscribe if you would like to receive more freebies like this one in the future.

Thank you for checking out one of our , .

For more tools like Horizontal Scrolling for Elementor Posts | FREE downloadable section included, please subscribe to get notified when we send out some new content

We Solve Real Problems

what can we do for you?

We love our clients

What our clients have to say?

Would you like to boost your business with your own custom digital tool like Horizontal Scrolling for Elementor Posts | FREE downloadable section included?

Schedule a time to talk to us.

In 1min from now, you could have an appointment that will turn your business around.

Need some help?

Were you able to find Everything you are looking for?

Please schedule a time with our AI assistant, and I will be more than happy to answer all of your unanswered questions.