Horizontal Scrolling Posts

Display your blog posts in a modern, horizontally scrolling layout with the Divi Plus Horizontal Scrolling Posts module. A fresh alternative to traditional blog grids, perfect for news highlights, featured articles, and clean blog sections.

Add module on page

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

1. Create/Edit a Page/Post that uses Divi builder.
2. Create/Edit a row.
3. Click on Add New Module option; choose the DP Horizontal Scrolling Posts.

Content settings

Posts

Configure what posts to display in the Horizontal Scrolling Posts module using the following options:

• Number of Posts:
  Set the total number of posts you want to display in the scrolling layout.
• Post Offset Number:
  Skip a specific number of posts from the beginning. Useful if you want to exclude recent posts or featured articles from this module.
• Order:
  Choose the order in which posts are displayed:
  • Ascending (ASC)
  • Descending (DESC)
• Order By:
  Define the criteria used to sort the posts.
  • Date
  • Title
  • Random
  • Modified Date
  • ID
  • Slug
• Select Categories:
  Choose one or more post categories to display specific content relevant to the section.
• Ignore Sticky Posts:
  Enable this option to exclude sticky (pinned) posts from the scrolling list.

Exclude Password Protected Posts:
Enable this option to hide any posts that are password protected from appearing in the scroll.

Exclude Post IDs:
Enter the IDs of specific posts you want to exclude from display.
Example: 12, 45, 78

No Result Text:
Define the text that will be displayed if no posts are found based on the selected settings or filters.
Example: “No posts available” or “Content coming soon.”

Elements settings

Control the visibility of different parts of each post card with the following options:

• Show Featured Image:
  Enable to display the post’s featured image at the top of each card.
• Image Size:
  Select the size of the featured image options include medium, large, or full.
• Show Title:
  Toggle to display or hide the post title.
• Show Excerpt:
  Enable to show a short summary (excerpt) of the post content below the title.
• Excerpt Length:
  Set the number of words or characters to display in the excerpt for a cleaner look.
• Show Categories/Terms:
  Enable to display the categories or tags associated with each post.
• Show Author:
  Display the author’s name on each post card for attribution or personalization.

Display settings

Control how the Horizontal Scrolling Posts appear on the page.

• Layout:
  Choose the layout style for your post cards. (Example: Layout 1, Layout 2)
• Space Between Cards:
  Adjust the spacing (in pixels) between individual post cards for better readability and design alignment.
• Animation Start Element:
  Set the point (percentage of viewport) where the scroll animation for each post card begins as the user scrolls down the page.
• Animation Start Viewport:
  Define how far the viewport should scroll before the animation starts, giving you control over when the horizontal movement activates.

Note:
Horizontal scrolling does not work in the Visual Builder preview. Please check the frontend of your site to see the final result.