Skip to main content
< All Topics

Horizontal Scrolling Cards

The Horizontal Scrolling Card Widget allows you to display content in stylish horizontal cards with smooth scrolling effects. Each card can include a title, description, image, and tags, making it a versatile option for showcasing products, services, or portfolios.

Once WPMozo Addons is activated it adds a number of widgets to the Elementor builder. To insert the widget, use the following steps.

  1. Create/edit a page/post that uses Elementor builder.
  2. Create/edit container.
  3. Search widget Horizontal Scrolling Cards under WPMozo.

Content settings

  • Card Items
    • Click Add Item to create a new card.
    • Each card comes with individual settings for Title, Description, and Image.
  • Card Title
    Enter and customize the card’s title text.
  • Description
    Add supporting content for the card.
  • Card Image
    Upload or choose an image for the card.

Display settings

  • Layout
    Choose between Layout 1 or Layout 2 for different card arrangements.
  • Space Between Cards
    Adjust the spacing (in pixels) between cards for proper alignment.
  • Animation
    Add scroll animations to the cards.
  • Use Custom Positioning
    Enable or disable manual positioning of elements within the card.
  • Element & Viewport Trigger
    Choose when the animation starts by setting the Element position (Top, Center, Bottom) and Viewport position (Top, Center, Bottom).
    Example: Element Top, Viewport Center means the animation begins when the top of the card element reaches the center of the viewport.

Style settings

Card Image

  • Padding – Adjust inner spacing around the image.
  • Enable Custom Height – Set a fixed custom height for card images.
  • Height – Control image height manually when custom height is enabled.
  • Border Type & Radius – Select border style and apply rounded corners.
  • Box Shadow – Add depth with shadow effects.

Title

  • Heading Level – Choose heading tags (H1–H6).
  • Color – Set normal and hover colors for the title.
  • Typography – Control font, weight, size, and more.
  • Alignment – Align text (Left, Center, Right).
  • Text Shadow – Apply shadow effects to the title text.

Description

  • Color – Set normal and hover colors for the description.
  • Typography – Customize font and size.
  • Alignment – Adjust description alignment.
  • Text Shadow – Add shadow for emphasis.

Tag

  • Add and style card tags as per your design needs.
Table of Contents